Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
<!DOCTYPE html>
2
<!-- 
3
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.6
4
Version: 4.6
5
Author: KeenThemes
6
Website: http://www.keenthemes.com/
7
Contact: support@keenthemes.com
8
Follow: www.twitter.com/keenthemes
9
Dribbble: www.dribbble.com/keenthemes
10
Like: www.facebook.com/keenthemes
11
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
12
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
13
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
14
-->
15
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
16
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
17
<!--[if !IE]><!-->
18
<html lang="en">
19
    <!--<![endif]-->
20
    <!-- BEGIN HEAD -->
21
 
22
    <head>
23
        <meta charset="utf-8" />
24
        <title>Metronic | Color Library</title>
25
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
26
        <meta content="width=device-width, initial-scale=1" name="viewport" />
27
        <meta content="" name="description" />
28
        <meta content="" name="author" />
29
        <!-- BEGIN GLOBAL MANDATORY STYLES -->
30
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
31
        <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
32
        <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
33
        <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
34
        <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
35
        <!-- END GLOBAL MANDATORY STYLES -->
36
        <!-- BEGIN THEME GLOBAL STYLES -->
37
        <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
38
        <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
39
        <!-- END THEME GLOBAL STYLES -->
40
        <!-- BEGIN THEME LAYOUT STYLES -->
41
        <link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
42
        <link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
43
        <link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
44
        <!-- END THEME LAYOUT STYLES -->
45
        <link rel="shortcut icon" href="favicon.ico" /> </head>
46
    <!-- END HEAD -->
47
 
48
    <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
49
        <div class="page-wrapper">
50
            <!-- BEGIN HEADER -->
51
            <div class="page-header navbar navbar-fixed-top">
52
                <!-- BEGIN HEADER INNER -->
53
                <div class="page-header-inner ">
54
                    <!-- BEGIN LOGO -->
55
                    <div class="page-logo">
56
                        <a href="index.html">
57
                            <img src="../assets/layouts/layout/img/logo.png" alt="logo" class="logo-default" /> </a>
58
                        <div class="menu-toggler sidebar-toggler">
59
                            <span></span>
60
                        </div>
61
                    </div>
62
                    <!-- END LOGO -->
63
                    <!-- BEGIN RESPONSIVE MENU TOGGLER -->
64
                    <a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
65
                        <span></span>
66
                    </a>
67
                    <!-- END RESPONSIVE MENU TOGGLER -->
68
                    <!-- BEGIN TOP NAVIGATION MENU -->
69
                    <div class="top-menu">
70
                        <ul class="nav navbar-nav pull-right">
71
                            <!-- BEGIN NOTIFICATION DROPDOWN -->
72
                            <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
73
                            <li class="dropdown dropdown-extended dropdown-notification" id="header_notification_bar">
74
                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
75
                                    <i class="icon-bell"></i>
76
                                    <span class="badge badge-default"> 7 </span>
77
                                </a>
78
                                <ul class="dropdown-menu">
79
                                    <li class="external">
80
                                        <h3>
81
                                            <span class="bold">12 pending</span> notifications</h3>
82
                                        <a href="page_user_profile_1.html">view all</a>
83
                                    </li>
84
                                    <li>
85
                                        <ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
86
                                            <li>
87
                                                <a href="javascript:;">
88
                                                    <span class="time">just now</span>
89
                                                    <span class="details">
90
                                                        <span class="label label-sm label-icon label-success">
91
                                                            <i class="fa fa-plus"></i>
92
                                                        </span> New user registered. </span>
93
                                                </a>
94
                                            </li>
95
                                            <li>
96
                                                <a href="javascript:;">
97
                                                    <span class="time">3 mins</span>
98
                                                    <span class="details">
99
                                                        <span class="label label-sm label-icon label-danger">
100
                                                            <i class="fa fa-bolt"></i>
101
                                                        </span> Server #12 overloaded. </span>
102
                                                </a>
103
                                            </li>
104
                                            <li>
105
                                                <a href="javascript:;">
106
                                                    <span class="time">10 mins</span>
107
                                                    <span class="details">
108
                                                        <span class="label label-sm label-icon label-warning">
109
                                                            <i class="fa fa-bell-o"></i>
110
                                                        </span> Server #2 not responding. </span>
111
                                                </a>
112
                                            </li>
113
                                            <li>
114
                                                <a href="javascript:;">
115
                                                    <span class="time">14 hrs</span>
116
                                                    <span class="details">
117
                                                        <span class="label label-sm label-icon label-info">
118
                                                            <i class="fa fa-bullhorn"></i>
119
                                                        </span> Application error. </span>
120
                                                </a>
121
                                            </li>
122
                                            <li>
123
                                                <a href="javascript:;">
124
                                                    <span class="time">2 days</span>
125
                                                    <span class="details">
126
                                                        <span class="label label-sm label-icon label-danger">
127
                                                            <i class="fa fa-bolt"></i>
128
                                                        </span> Database overloaded 68%. </span>
129
                                                </a>
130
                                            </li>
131
                                            <li>
132
                                                <a href="javascript:;">
133
                                                    <span class="time">3 days</span>
134
                                                    <span class="details">
135
                                                        <span class="label label-sm label-icon label-danger">
136
                                                            <i class="fa fa-bolt"></i>
137
                                                        </span> A user IP blocked. </span>
138
                                                </a>
139
                                            </li>
140
                                            <li>
141
                                                <a href="javascript:;">
142
                                                    <span class="time">4 days</span>
143
                                                    <span class="details">
144
                                                        <span class="label label-sm label-icon label-warning">
145
                                                            <i class="fa fa-bell-o"></i>
146
                                                        </span> Storage Server #4 not responding dfdfdfd. </span>
147
                                                </a>
148
                                            </li>
149
                                            <li>
150
                                                <a href="javascript:;">
151
                                                    <span class="time">5 days</span>
152
                                                    <span class="details">
153
                                                        <span class="label label-sm label-icon label-info">
154
                                                            <i class="fa fa-bullhorn"></i>
155
                                                        </span> System Error. </span>
156
                                                </a>
157
                                            </li>
158
                                            <li>
159
                                                <a href="javascript:;">
160
                                                    <span class="time">9 days</span>
161
                                                    <span class="details">
162
                                                        <span class="label label-sm label-icon label-danger">
163
                                                            <i class="fa fa-bolt"></i>
164
                                                        </span> Storage server failed. </span>
165
                                                </a>
166
                                            </li>
167
                                        </ul>
168
                                    </li>
169
                                </ul>
170
                            </li>
171
                            <!-- END NOTIFICATION DROPDOWN -->
172
                            <!-- BEGIN INBOX DROPDOWN -->
173
                            <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
174
                            <li class="dropdown dropdown-extended dropdown-inbox" id="header_inbox_bar">
175
                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
176
                                    <i class="icon-envelope-open"></i>
177
                                    <span class="badge badge-default"> 4 </span>
178
                                </a>
179
                                <ul class="dropdown-menu">
180
                                    <li class="external">
181
                                        <h3>You have
182
                                            <span class="bold">7 New</span> Messages</h3>
183
                                        <a href="app_inbox.html">view all</a>
184
                                    </li>
185
                                    <li>
186
                                        <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
187
                                            <li>
188
                                                <a href="#">
189
                                                    <span class="photo">
190
                                                        <img src="../assets/layouts/layout3/img/avatar2.jpg" class="img-circle" alt=""> </span>
191
                                                    <span class="subject">
192
                                                        <span class="from"> Lisa Wong </span>
193
                                                        <span class="time">Just Now </span>
194
                                                    </span>
195
                                                    <span class="message"> Vivamus sed auctor nibh congue nibh. auctor nibh auctor nibh... </span>
196
                                                </a>
197
                                            </li>
198
                                            <li>
199
                                                <a href="#">
200
                                                    <span class="photo">
201
                                                        <img src="../assets/layouts/layout3/img/avatar3.jpg" class="img-circle" alt=""> </span>
202
                                                    <span class="subject">
203
                                                        <span class="from"> Richard Doe </span>
204
                                                        <span class="time">16 mins </span>
205
                                                    </span>
206
                                                    <span class="message"> Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
207
                                                </a>
208
                                            </li>
209
                                            <li>
210
                                                <a href="#">
211
                                                    <span class="photo">
212
                                                        <img src="../assets/layouts/layout3/img/avatar1.jpg" class="img-circle" alt=""> </span>
213
                                                    <span class="subject">
214
                                                        <span class="from"> Bob Nilson </span>
215
                                                        <span class="time">2 hrs </span>
216
                                                    </span>
217
                                                    <span class="message"> Vivamus sed nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
218
                                                </a>
219
                                            </li>
220
                                            <li>
221
                                                <a href="#">
222
                                                    <span class="photo">
223
                                                        <img src="../assets/layouts/layout3/img/avatar2.jpg" class="img-circle" alt=""> </span>
224
                                                    <span class="subject">
225
                                                        <span class="from"> Lisa Wong </span>
226
                                                        <span class="time">40 mins </span>
227
                                                    </span>
228
                                                    <span class="message"> Vivamus sed auctor 40% nibh congue nibh... </span>
229
                                                </a>
230
                                            </li>
231
                                            <li>
232
                                                <a href="#">
233
                                                    <span class="photo">
234
                                                        <img src="../assets/layouts/layout3/img/avatar3.jpg" class="img-circle" alt=""> </span>
235
                                                    <span class="subject">
236
                                                        <span class="from"> Richard Doe </span>
237
                                                        <span class="time">46 mins </span>
238
                                                    </span>
239
                                                    <span class="message"> Vivamus sed congue nibh auctor nibh congue nibh. auctor nibh auctor nibh... </span>
240
                                                </a>
241
                                            </li>
242
                                        </ul>
243
                                    </li>
244
                                </ul>
245
                            </li>
246
                            <!-- END INBOX DROPDOWN -->
247
                            <!-- BEGIN TODO DROPDOWN -->
248
                            <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
249
                            <li class="dropdown dropdown-extended dropdown-tasks" id="header_task_bar">
250
                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
251
                                    <i class="icon-calendar"></i>
252
                                    <span class="badge badge-default"> 3 </span>
253
                                </a>
254
                                <ul class="dropdown-menu extended tasks">
255
                                    <li class="external">
256
                                        <h3>You have
257
                                            <span class="bold">12 pending</span> tasks</h3>
258
                                        <a href="app_todo.html">view all</a>
259
                                    </li>
260
                                    <li>
261
                                        <ul class="dropdown-menu-list scroller" style="height: 275px;" data-handle-color="#637283">
262
                                            <li>
263
                                                <a href="javascript:;">
264
                                                    <span class="task">
265
                                                        <span class="desc">New release v1.2 </span>
266
                                                        <span class="percent">30%</span>
267
                                                    </span>
268
                                                    <span class="progress">
269
                                                        <span style="width: 40%;" class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
270
                                                            <span class="sr-only">40% Complete</span>
271
                                                        </span>
272
                                                    </span>
273
                                                </a>
274
                                            </li>
275
                                            <li>
276
                                                <a href="javascript:;">
277
                                                    <span class="task">
278
                                                        <span class="desc">Application deployment</span>
279
                                                        <span class="percent">65%</span>
280
                                                    </span>
281
                                                    <span class="progress">
282
                                                        <span style="width: 65%;" class="progress-bar progress-bar-danger" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
283
                                                            <span class="sr-only">65% Complete</span>
284
                                                        </span>
285
                                                    </span>
286
                                                </a>
287
                                            </li>
288
                                            <li>
289
                                                <a href="javascript:;">
290
                                                    <span class="task">
291
                                                        <span class="desc">Mobile app release</span>
292
                                                        <span class="percent">98%</span>
293
                                                    </span>
294
                                                    <span class="progress">
295
                                                        <span style="width: 98%;" class="progress-bar progress-bar-success" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100">
296
                                                            <span class="sr-only">98% Complete</span>
297
                                                        </span>
298
                                                    </span>
299
                                                </a>
300
                                            </li>
301
                                            <li>
302
                                                <a href="javascript:;">
303
                                                    <span class="task">
304
                                                        <span class="desc">Database migration</span>
305
                                                        <span class="percent">10%</span>
306
                                                    </span>
307
                                                    <span class="progress">
308
                                                        <span style="width: 10%;" class="progress-bar progress-bar-warning" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
309
                                                            <span class="sr-only">10% Complete</span>
310
                                                        </span>
311
                                                    </span>
312
                                                </a>
313
                                            </li>
314
                                            <li>
315
                                                <a href="javascript:;">
316
                                                    <span class="task">
317
                                                        <span class="desc">Web server upgrade</span>
318
                                                        <span class="percent">58%</span>
319
                                                    </span>
320
                                                    <span class="progress">
321
                                                        <span style="width: 58%;" class="progress-bar progress-bar-info" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100">
322
                                                            <span class="sr-only">58% Complete</span>
323
                                                        </span>
324
                                                    </span>
325
                                                </a>
326
                                            </li>
327
                                            <li>
328
                                                <a href="javascript:;">
329
                                                    <span class="task">
330
                                                        <span class="desc">Mobile development</span>
331
                                                        <span class="percent">85%</span>
332
                                                    </span>
333
                                                    <span class="progress">
334
                                                        <span style="width: 85%;" class="progress-bar progress-bar-success" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
335
                                                            <span class="sr-only">85% Complete</span>
336
                                                        </span>
337
                                                    </span>
338
                                                </a>
339
                                            </li>
340
                                            <li>
341
                                                <a href="javascript:;">
342
                                                    <span class="task">
343
                                                        <span class="desc">New UI release</span>
344
                                                        <span class="percent">38%</span>
345
                                                    </span>
346
                                                    <span class="progress progress-striped">
347
                                                        <span style="width: 38%;" class="progress-bar progress-bar-important" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100">
348
                                                            <span class="sr-only">38% Complete</span>
349
                                                        </span>
350
                                                    </span>
351
                                                </a>
352
                                            </li>
353
                                        </ul>
354
                                    </li>
355
                                </ul>
356
                            </li>
357
                            <!-- END TODO DROPDOWN -->
358
                            <!-- BEGIN USER LOGIN DROPDOWN -->
359
                            <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
360
                            <li class="dropdown dropdown-user">
361
                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
362
                                    <img alt="" class="img-circle" src="../assets/layouts/layout/img/avatar3_small.jpg" />
363
                                    <span class="username username-hide-on-mobile"> Nick </span>
364
                                    <i class="fa fa-angle-down"></i>
365
                                </a>
366
                                <ul class="dropdown-menu dropdown-menu-default">
367
                                    <li>
368
                                        <a href="page_user_profile_1.html">
369
                                            <i class="icon-user"></i> My Profile </a>
370
                                    </li>
371
                                    <li>
372
                                        <a href="app_calendar.html">
373
                                            <i class="icon-calendar"></i> My Calendar </a>
374
                                    </li>
375
                                    <li>
376
                                        <a href="app_inbox.html">
377
                                            <i class="icon-envelope-open"></i> My Inbox
378
                                            <span class="badge badge-danger"> 3 </span>
379
                                        </a>
380
                                    </li>
381
                                    <li>
382
                                        <a href="app_todo.html">
383
                                            <i class="icon-rocket"></i> My Tasks
384
                                            <span class="badge badge-success"> 7 </span>
385
                                        </a>
386
                                    </li>
387
                                    <li class="divider"> </li>
388
                                    <li>
389
                                        <a href="page_user_lock_1.html">
390
                                            <i class="icon-lock"></i> Lock Screen </a>
391
                                    </li>
392
                                    <li>
393
                                        <a href="page_user_login_1.html">
394
                                            <i class="icon-key"></i> Log Out </a>
395
                                    </li>
396
                                </ul>
397
                            </li>
398
                            <!-- END USER LOGIN DROPDOWN -->
399
                            <!-- BEGIN QUICK SIDEBAR TOGGLER -->
400
                            <!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
401
                            <li class="dropdown dropdown-quick-sidebar-toggler">
402
                                <a href="javascript:;" class="dropdown-toggle">
403
                                    <i class="icon-logout"></i>
404
                                </a>
405
                            </li>
406
                            <!-- END QUICK SIDEBAR TOGGLER -->
407
                        </ul>
408
                    </div>
409
                    <!-- END TOP NAVIGATION MENU -->
410
                </div>
411
                <!-- END HEADER INNER -->
412
            </div>
413
            <!-- END HEADER -->
414
            <!-- BEGIN HEADER & CONTENT DIVIDER -->
415
            <div class="clearfix"> </div>
416
            <!-- END HEADER & CONTENT DIVIDER -->
417
            <!-- BEGIN CONTAINER -->
418
            <div class="page-container">
419
                <!-- BEGIN SIDEBAR -->
420
                <div class="page-sidebar-wrapper">
421
                    <!-- BEGIN SIDEBAR -->
422
                    <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
423
                    <!-- DOC: Change data-auto-speed="200" to adjust the sub menu slide up/down speed -->
424
                    <div class="page-sidebar navbar-collapse collapse">
425
                        <!-- BEGIN SIDEBAR MENU -->
426
                        <!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) -->
427
                        <!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode -->
428
                        <!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode -->
429
                        <!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
430
                        <!-- DOC: Set data-keep-expand="true" to keep the submenues expanded -->
431
                        <!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed -->
432
                        <ul class="page-sidebar-menu  page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">
433
                            <!-- DOC: To remove the sidebar toggler from the sidebar you just need to completely remove the below "sidebar-toggler-wrapper" LI element -->
434
                            <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
435
                            <li class="sidebar-toggler-wrapper hide">
436
                                <div class="sidebar-toggler">
437
                                    <span></span>
438
                                </div>
439
                            </li>
440
                            <!-- END SIDEBAR TOGGLER BUTTON -->
441
                            <!-- DOC: To remove the search box from the sidebar you just need to completely remove the below "sidebar-search-wrapper" LI element -->
442
                            <li class="sidebar-search-wrapper">
443
                                <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
444
                                <!-- DOC: Apply "sidebar-search-bordered" class the below search form to have bordered search box -->
445
                                <!-- DOC: Apply "sidebar-search-bordered sidebar-search-solid" class the below search form to have bordered & solid search box -->
446
                                <form class="sidebar-search  " action="page_general_search_3.html" method="POST">
447
                                    <a href="javascript:;" class="remove">
448
                                        <i class="icon-close"></i>
449
                                    </a>
450
                                    <div class="input-group">
451
                                        <input type="text" class="form-control" placeholder="Search...">
452
                                        <span class="input-group-btn">
453
                                            <a href="javascript:;" class="btn submit">
454
                                                <i class="icon-magnifier"></i>
455
                                            </a>
456
                                        </span>
457
                                    </div>
458
                                </form>
459
                                <!-- END RESPONSIVE QUICK SEARCH FORM -->
460
                            </li>
461
                            <li class="nav-item start ">
462
                                <a href="javascript:;" class="nav-link nav-toggle">
463
                                    <i class="icon-home"></i>
464
                                    <span class="title">Dashboard</span>
465
                                    <span class="arrow"></span>
466
                                </a>
467
                                <ul class="sub-menu">
468
                                    <li class="nav-item start ">
469
                                        <a href="index.html" class="nav-link ">
470
                                            <i class="icon-bar-chart"></i>
471
                                            <span class="title">Dashboard 1</span>
472
                                        </a>
473
                                    </li>
474
                                    <li class="nav-item start ">
475
                                        <a href="dashboard_2.html" class="nav-link ">
476
                                            <i class="icon-bulb"></i>
477
                                            <span class="title">Dashboard 2</span>
478
                                            <span class="badge badge-success">1</span>
479
                                        </a>
480
                                    </li>
481
                                    <li class="nav-item start ">
482
                                        <a href="dashboard_3.html" class="nav-link ">
483
                                            <i class="icon-graph"></i>
484
                                            <span class="title">Dashboard 3</span>
485
                                            <span class="badge badge-danger">5</span>
486
                                        </a>
487
                                    </li>
488
                                </ul>
489
                            </li>
490
                            <li class="heading">
491
                                <h3 class="uppercase">Features</h3>
492
                            </li>
493
                            <li class="nav-item  active open">
494
                                <a href="javascript:;" class="nav-link nav-toggle">
495
                                    <i class="icon-diamond"></i>
496
                                    <span class="title">UI Features</span>
497
                                    <span class="selected"></span>
498
                                    <span class="arrow open"></span>
499
                                </a>
500
                                <ul class="sub-menu">
501
                                    <li class="nav-item  active open">
502
                                        <a href="ui_colors.html" class="nav-link ">
503
                                            <span class="title">Color Library</span>
504
                                            <span class="selected"></span>
505
                                        </a>
506
                                    </li>
507
                                    <li class="nav-item  ">
508
                                        <a href="ui_general.html" class="nav-link ">
509
                                            <span class="title">General Components</span>
510
                                        </a>
511
                                    </li>
512
                                    <li class="nav-item  ">
513
                                        <a href="ui_buttons.html" class="nav-link ">
514
                                            <span class="title">Buttons</span>
515
                                        </a>
516
                                    </li>
517
                                    <li class="nav-item  ">
518
                                        <a href="ui_buttons_spinner.html" class="nav-link ">
519
                                            <span class="title">Spinner Buttons</span>
520
                                        </a>
521
                                    </li>
522
                                    <li class="nav-item  ">
523
                                        <a href="ui_confirmations.html" class="nav-link ">
524
                                            <span class="title">Popover Confirmations</span>
525
                                        </a>
526
                                    </li>
527
                                    <li class="nav-item  ">
528
                                        <a href="ui_icons.html" class="nav-link ">
529
                                            <span class="title">Font Icons</span>
530
                                        </a>
531
                                    </li>
532
                                    <li class="nav-item  ">
533
                                        <a href="ui_socicons.html" class="nav-link ">
534
                                            <span class="title">Social Icons</span>
535
                                        </a>
536
                                    </li>
537
                                    <li class="nav-item  ">
538
                                        <a href="ui_typography.html" class="nav-link ">
539
                                            <span class="title">Typography</span>
540
                                        </a>
541
                                    </li>
542
                                    <li class="nav-item  ">
543
                                        <a href="ui_tabs_accordions_navs.html" class="nav-link ">
544
                                            <span class="title">Tabs, Accordions & Navs</span>
545
                                        </a>
546
                                    </li>
547
                                    <li class="nav-item  ">
548
                                        <a href="ui_timeline.html" class="nav-link ">
549
                                            <span class="title">Timeline 1</span>
550
                                        </a>
551
                                    </li>
552
                                    <li class="nav-item  ">
553
                                        <a href="ui_timeline_2.html" class="nav-link ">
554
                                            <span class="title">Timeline 2</span>
555
                                        </a>
556
                                    </li>
557
                                    <li class="nav-item  ">
558
                                        <a href="ui_timeline_horizontal.html" class="nav-link ">
559
                                            <span class="title">Horizontal Timeline</span>
560
                                        </a>
561
                                    </li>
562
                                    <li class="nav-item  ">
563
                                        <a href="ui_tree.html" class="nav-link ">
564
                                            <span class="title">Tree View</span>
565
                                        </a>
566
                                    </li>
567
                                    <li class="nav-item  ">
568
                                        <a href="javascript:;" class="nav-link nav-toggle">
569
                                            <span class="title">Page Progress Bar</span>
570
                                            <span class="arrow"></span>
571
                                        </a>
572
                                        <ul class="sub-menu">
573
                                            <li class="nav-item ">
574
                                                <a href="ui_page_progress_style_1.html" class="nav-link "> Flash </a>
575
                                            </li>
576
                                            <li class="nav-item ">
577
                                                <a href="ui_page_progress_style_2.html" class="nav-link "> Big Counter </a>
578
                                            </li>
579
                                        </ul>
580
                                    </li>
581
                                    <li class="nav-item  ">
582
                                        <a href="ui_blockui.html" class="nav-link ">
583
                                            <span class="title">Block UI</span>
584
                                        </a>
585
                                    </li>
586
                                    <li class="nav-item  ">
587
                                        <a href="ui_bootstrap_growl.html" class="nav-link ">
588
                                            <span class="title">Bootstrap Growl Notifications</span>
589
                                        </a>
590
                                    </li>
591
                                    <li class="nav-item  ">
592
                                        <a href="ui_notific8.html" class="nav-link ">
593
                                            <span class="title">Notific8 Notifications</span>
594
                                        </a>
595
                                    </li>
596
                                    <li class="nav-item  ">
597
                                        <a href="ui_toastr.html" class="nav-link ">
598
                                            <span class="title">Toastr Notifications</span>
599
                                        </a>
600
                                    </li>
601
                                    <li class="nav-item  ">
602
                                        <a href="ui_bootbox.html" class="nav-link ">
603
                                            <span class="title">Bootbox Dialogs</span>
604
                                        </a>
605
                                    </li>
606
                                    <li class="nav-item  ">
607
                                        <a href="ui_alerts_api.html" class="nav-link ">
608
                                            <span class="title">Metronic Alerts API</span>
609
                                        </a>
610
                                    </li>
611
                                    <li class="nav-item  ">
612
                                        <a href="ui_session_timeout.html" class="nav-link ">
613
                                            <span class="title">Session Timeout</span>
614
                                        </a>
615
                                    </li>
616
                                    <li class="nav-item  ">
617
                                        <a href="ui_idle_timeout.html" class="nav-link ">
618
                                            <span class="title">User Idle Timeout</span>
619
                                        </a>
620
                                    </li>
621
                                    <li class="nav-item  ">
622
                                        <a href="ui_modals.html" class="nav-link ">
623
                                            <span class="title">Modals</span>
624
                                        </a>
625
                                    </li>
626
                                    <li class="nav-item  ">
627
                                        <a href="ui_extended_modals.html" class="nav-link ">
628
                                            <span class="title">Extended Modals</span>
629
                                        </a>
630
                                    </li>
631
                                    <li class="nav-item  ">
632
                                        <a href="ui_tiles.html" class="nav-link ">
633
                                            <span class="title">Tiles</span>
634
                                        </a>
635
                                    </li>
636
                                    <li class="nav-item  ">
637
                                        <a href="ui_datepaginator.html" class="nav-link ">
638
                                            <span class="title">Date Paginator</span>
639
                                        </a>
640
                                    </li>
641
                                    <li class="nav-item  ">
642
                                        <a href="ui_nestable.html" class="nav-link ">
643
                                            <span class="title">Nestable List</span>
644
                                        </a>
645
                                    </li>
646
                                </ul>
647
                            </li>
648
                            <li class="nav-item  ">
649
                                <a href="javascript:;" class="nav-link nav-toggle">
650
                                    <i class="icon-puzzle"></i>
651
                                    <span class="title">Components</span>
652
                                    <span class="arrow"></span>
653
                                </a>
654
                                <ul class="sub-menu">
655
                                    <li class="nav-item  ">
656
                                        <a href="components_date_time_pickers.html" class="nav-link ">
657
                                            <span class="title">Date & Time Pickers</span>
658
                                        </a>
659
                                    </li>
660
                                    <li class="nav-item  ">
661
                                        <a href="components_color_pickers.html" class="nav-link ">
662
                                            <span class="title">Color Pickers</span>
663
                                            <span class="badge badge-danger">2</span>
664
                                        </a>
665
                                    </li>
666
                                    <li class="nav-item  ">
667
                                        <a href="components_select2.html" class="nav-link ">
668
                                            <span class="title">Select2 Dropdowns</span>
669
                                        </a>
670
                                    </li>
671
                                    <li class="nav-item  ">
672
                                        <a href="components_bootstrap_select.html" class="nav-link ">
673
                                            <span class="title">Bootstrap Select</span>
674
                                        </a>
675
                                    </li>
676
                                    <li class="nav-item  ">
677
                                        <a href="components_multi_select.html" class="nav-link ">
678
                                            <span class="title">Multi Select</span>
679
                                        </a>
680
                                    </li>
681
                                    <li class="nav-item  ">
682
                                        <a href="components_bootstrap_select_splitter.html" class="nav-link ">
683
                                            <span class="title">Select Splitter</span>
684
                                        </a>
685
                                    </li>
686
                                    <li class="nav-item  ">
687
                                        <a href="components_typeahead.html" class="nav-link ">
688
                                            <span class="title">Typeahead Autocomplete</span>
689
                                        </a>
690
                                    </li>
691
                                    <li class="nav-item  ">
692
                                        <a href="components_bootstrap_tagsinput.html" class="nav-link ">
693
                                            <span class="title">Bootstrap Tagsinput</span>
694
                                        </a>
695
                                    </li>
696
                                    <li class="nav-item  ">
697
                                        <a href="components_bootstrap_switch.html" class="nav-link ">
698
                                            <span class="title">Bootstrap Switch</span>
699
                                            <span class="badge badge-success">6</span>
700
                                        </a>
701
                                    </li>
702
                                    <li class="nav-item  ">
703
                                        <a href="components_bootstrap_maxlength.html" class="nav-link ">
704
                                            <span class="title">Bootstrap Maxlength</span>
705
                                        </a>
706
                                    </li>
707
                                    <li class="nav-item  ">
708
                                        <a href="components_bootstrap_fileinput.html" class="nav-link ">
709
                                            <span class="title">Bootstrap File Input</span>
710
                                        </a>
711
                                    </li>
712
                                    <li class="nav-item  ">
713
                                        <a href="components_bootstrap_touchspin.html" class="nav-link ">
714
                                            <span class="title">Bootstrap Touchspin</span>
715
                                        </a>
716
                                    </li>
717
                                    <li class="nav-item  ">
718
                                        <a href="components_form_tools.html" class="nav-link ">
719
                                            <span class="title">Form Widgets & Tools</span>
720
                                        </a>
721
                                    </li>
722
                                    <li class="nav-item  ">
723
                                        <a href="components_context_menu.html" class="nav-link ">
724
                                            <span class="title">Context Menu</span>
725
                                        </a>
726
                                    </li>
727
                                    <li class="nav-item  ">
728
                                        <a href="components_editors.html" class="nav-link ">
729
                                            <span class="title">Markdown & WYSIWYG Editors</span>
730
                                        </a>
731
                                    </li>
732
                                    <li class="nav-item  ">
733
                                        <a href="components_code_editors.html" class="nav-link ">
734
                                            <span class="title">Code Editors</span>
735
                                        </a>
736
                                    </li>
737
                                    <li class="nav-item  ">
738
                                        <a href="components_ion_sliders.html" class="nav-link ">
739
                                            <span class="title">Ion Range Sliders</span>
740
                                        </a>
741
                                    </li>
742
                                    <li class="nav-item  ">
743
                                        <a href="components_noui_sliders.html" class="nav-link ">
744
                                            <span class="title">NoUI Range Sliders</span>
745
                                        </a>
746
                                    </li>
747
                                    <li class="nav-item  ">
748
                                        <a href="components_knob_dials.html" class="nav-link ">
749
                                            <span class="title">Knob Circle Dials</span>
750
                                        </a>
751
                                    </li>
752
                                </ul>
753
                            </li>
754
                            <li class="nav-item  ">
755
                                <a href="javascript:;" class="nav-link nav-toggle">
756
                                    <i class="icon-settings"></i>
757
                                    <span class="title">Form Stuff</span>
758
                                    <span class="arrow"></span>
759
                                </a>
760
                                <ul class="sub-menu">
761
                                    <li class="nav-item  ">
762
                                        <a href="form_controls.html" class="nav-link ">
763
                                            <span class="title">Bootstrap Form
764
                                                <br>Controls</span>
765
                                        </a>
766
                                    </li>
767
                                    <li class="nav-item  ">
768
                                        <a href="form_controls_md.html" class="nav-link ">
769
                                            <span class="title">Material Design
770
                                                <br>Form Controls</span>
771
                                        </a>
772
                                    </li>
773
                                    <li class="nav-item  ">
774
                                        <a href="form_validation.html" class="nav-link ">
775
                                            <span class="title">Form Validation</span>
776
                                        </a>
777
                                    </li>
778
                                    <li class="nav-item  ">
779
                                        <a href="form_validation_states_md.html" class="nav-link ">
780
                                            <span class="title">Material Design
781
                                                <br>Form Validation States</span>
782
                                        </a>
783
                                    </li>
784
                                    <li class="nav-item  ">
785
                                        <a href="form_validation_md.html" class="nav-link ">
786
                                            <span class="title">Material Design
787
                                                <br>Form Validation</span>
788
                                        </a>
789
                                    </li>
790
                                    <li class="nav-item  ">
791
                                        <a href="form_layouts.html" class="nav-link ">
792
                                            <span class="title">Form Layouts</span>
793
                                        </a>
794
                                    </li>
795
                                    <li class="nav-item  ">
796
                                        <a href="form_input_mask.html" class="nav-link ">
797
                                            <span class="title">Form Input Mask</span>
798
                                        </a>
799
                                    </li>
800
                                    <li class="nav-item  ">
801
                                        <a href="form_editable.html" class="nav-link ">
802
                                            <span class="title">Form X-editable</span>
803
                                        </a>
804
                                    </li>
805
                                    <li class="nav-item  ">
806
                                        <a href="form_wizard.html" class="nav-link ">
807
                                            <span class="title">Form Wizard</span>
808
                                        </a>
809
                                    </li>
810
                                    <li class="nav-item  ">
811
                                        <a href="form_icheck.html" class="nav-link ">
812
                                            <span class="title">iCheck Controls</span>
813
                                        </a>
814
                                    </li>
815
                                    <li class="nav-item  ">
816
                                        <a href="form_image_crop.html" class="nav-link ">
817
                                            <span class="title">Image Cropping</span>
818
                                        </a>
819
                                    </li>
820
                                    <li class="nav-item  ">
821
                                        <a href="form_fileupload.html" class="nav-link ">
822
                                            <span class="title">Multiple File Upload</span>
823
                                        </a>
824
                                    </li>
825
                                    <li class="nav-item  ">
826
                                        <a href="form_dropzone.html" class="nav-link ">
827
                                            <span class="title">Dropzone File Upload</span>
828
                                        </a>
829
                                    </li>
830
                                </ul>
831
                            </li>
832
                            <li class="nav-item  ">
833
                                <a href="javascript:;" class="nav-link nav-toggle">
834
                                    <i class="icon-bulb"></i>
835
                                    <span class="title">Elements</span>
836
                                    <span class="arrow"></span>
837
                                </a>
838
                                <ul class="sub-menu">
839
                                    <li class="nav-item  ">
840
                                        <a href="elements_steps.html" class="nav-link ">
841
                                            <span class="title">Steps</span>
842
                                        </a>
843
                                    </li>
844
                                    <li class="nav-item  ">
845
                                        <a href="elements_lists.html" class="nav-link ">
846
                                            <span class="title">Lists</span>
847
                                        </a>
848
                                    </li>
849
                                    <li class="nav-item  ">
850
                                        <a href="elements_ribbons.html" class="nav-link ">
851
                                            <span class="title">Ribbons</span>
852
                                        </a>
853
                                    </li>
854
                                    <li class="nav-item  ">
855
                                        <a href="elements_overlay.html" class="nav-link ">
856
                                            <span class="title">Overlays</span>
857
                                        </a>
858
                                    </li>
859
                                    <li class="nav-item  ">
860
                                        <a href="elements_cards.html" class="nav-link ">
861
                                            <span class="title">User Cards</span>
862
                                        </a>
863
                                    </li>
864
                                </ul>
865
                            </li>
866
                            <li class="nav-item  ">
867
                                <a href="javascript:;" class="nav-link nav-toggle">
868
                                    <i class="icon-briefcase"></i>
869
                                    <span class="title">Tables</span>
870
                                    <span class="arrow"></span>
871
                                </a>
872
                                <ul class="sub-menu">
873
                                    <li class="nav-item  ">
874
                                        <a href="table_static_basic.html" class="nav-link ">
875
                                            <span class="title">Basic Tables</span>
876
                                        </a>
877
                                    </li>
878
                                    <li class="nav-item  ">
879
                                        <a href="table_static_responsive.html" class="nav-link ">
880
                                            <span class="title">Responsive Tables</span>
881
                                        </a>
882
                                    </li>
883
                                    <li class="nav-item  ">
884
                                        <a href="table_bootstrap.html" class="nav-link ">
885
                                            <span class="title">Bootstrap Tables</span>
886
                                        </a>
887
                                    </li>
888
                                    <li class="nav-item  ">
889
                                        <a href="javascript:;" class="nav-link nav-toggle">
890
                                            <span class="title">Datatables</span>
891
                                            <span class="arrow"></span>
892
                                        </a>
893
                                        <ul class="sub-menu">
894
                                            <li class="nav-item ">
895
                                                <a href="table_datatables_managed.html" class="nav-link "> Managed Datatables </a>
896
                                            </li>
897
                                            <li class="nav-item ">
898
                                                <a href="table_datatables_buttons.html" class="nav-link "> Buttons Extension </a>
899
                                            </li>
900
                                            <li class="nav-item ">
901
                                                <a href="table_datatables_colreorder.html" class="nav-link "> Colreorder Extension </a>
902
                                            </li>
903
                                            <li class="nav-item ">
904
                                                <a href="table_datatables_rowreorder.html" class="nav-link "> Rowreorder Extension </a>
905
                                            </li>
906
                                            <li class="nav-item ">
907
                                                <a href="table_datatables_scroller.html" class="nav-link "> Scroller Extension </a>
908
                                            </li>
909
                                            <li class="nav-item ">
910
                                                <a href="table_datatables_fixedheader.html" class="nav-link "> FixedHeader Extension </a>
911
                                            </li>
912
                                            <li class="nav-item ">
913
                                                <a href="table_datatables_responsive.html" class="nav-link "> Responsive Extension </a>
914
                                            </li>
915
                                            <li class="nav-item ">
916
                                                <a href="table_datatables_editable.html" class="nav-link "> Editable Datatables </a>
917
                                            </li>
918
                                            <li class="nav-item ">
919
                                                <a href="table_datatables_ajax.html" class="nav-link "> Ajax Datatables </a>
920
                                            </li>
921
                                        </ul>
922
                                    </li>
923
                                </ul>
924
                            </li>
925
                            <li class="nav-item  ">
926
                                <a href="?p=" class="nav-link nav-toggle">
927
                                    <i class="icon-wallet"></i>
928
                                    <span class="title">Portlets</span>
929
                                    <span class="arrow"></span>
930
                                </a>
931
                                <ul class="sub-menu">
932
                                    <li class="nav-item  ">
933
                                        <a href="portlet_boxed.html" class="nav-link ">
934
                                            <span class="title">Boxed Portlets</span>
935
                                        </a>
936
                                    </li>
937
                                    <li class="nav-item  ">
938
                                        <a href="portlet_light.html" class="nav-link ">
939
                                            <span class="title">Light Portlets</span>
940
                                        </a>
941
                                    </li>
942
                                    <li class="nav-item  ">
943
                                        <a href="portlet_solid.html" class="nav-link ">
944
                                            <span class="title">Solid Portlets</span>
945
                                        </a>
946
                                    </li>
947
                                    <li class="nav-item  ">
948
                                        <a href="portlet_ajax.html" class="nav-link ">
949
                                            <span class="title">Ajax Portlets</span>
950
                                        </a>
951
                                    </li>
952
                                    <li class="nav-item  ">
953
                                        <a href="portlet_draggable.html" class="nav-link ">
954
                                            <span class="title">Draggable Portlets</span>
955
                                        </a>
956
                                    </li>
957
                                </ul>
958
                            </li>
959
                            <li class="nav-item  ">
960
                                <a href="javascript:;" class="nav-link nav-toggle">
961
                                    <i class="icon-bar-chart"></i>
962
                                    <span class="title">Charts</span>
963
                                    <span class="arrow"></span>
964
                                </a>
965
                                <ul class="sub-menu">
966
                                    <li class="nav-item  ">
967
                                        <a href="charts_amcharts.html" class="nav-link ">
968
                                            <span class="title">amChart</span>
969
                                        </a>
970
                                    </li>
971
                                    <li class="nav-item  ">
972
                                        <a href="charts_flotcharts.html" class="nav-link ">
973
                                            <span class="title">Flot Charts</span>
974
                                        </a>
975
                                    </li>
976
                                    <li class="nav-item  ">
977
                                        <a href="charts_flowchart.html" class="nav-link ">
978
                                            <span class="title">Flow Charts</span>
979
                                        </a>
980
                                    </li>
981
                                    <li class="nav-item  ">
982
                                        <a href="charts_google.html" class="nav-link ">
983
                                            <span class="title">Google Charts</span>
984
                                        </a>
985
                                    </li>
986
                                    <li class="nav-item  ">
987
                                        <a href="charts_echarts.html" class="nav-link ">
988
                                            <span class="title">eCharts</span>
989
                                        </a>
990
                                    </li>
991
                                    <li class="nav-item  ">
992
                                        <a href="charts_morris.html" class="nav-link ">
993
                                            <span class="title">Morris Charts</span>
994
                                        </a>
995
                                    </li>
996
                                    <li class="nav-item  ">
997
                                        <a href="javascript:;" class="nav-link nav-toggle">
998
                                            <span class="title">HighCharts</span>
999
                                            <span class="arrow"></span>
1000
                                        </a>
1001
                                        <ul class="sub-menu">
1002
                                            <li class="nav-item ">
1003
                                                <a href="charts_highcharts.html" class="nav-link "> HighCharts </a>
1004
                                            </li>
1005
                                            <li class="nav-item ">
1006
                                                <a href="charts_highstock.html" class="nav-link "> HighStock </a>
1007
                                            </li>
1008
                                            <li class="nav-item ">
1009
                                                <a href="charts_highmaps.html" class="nav-link "> HighMaps </a>
1010
                                            </li>
1011
                                        </ul>
1012
                                    </li>
1013
                                </ul>
1014
                            </li>
1015
                            <li class="nav-item  ">
1016
                                <a href="javascript:;" class="nav-link nav-toggle">
1017
                                    <i class="icon-pointer"></i>
1018
                                    <span class="title">Maps</span>
1019
                                    <span class="arrow"></span>
1020
                                </a>
1021
                                <ul class="sub-menu">
1022
                                    <li class="nav-item  ">
1023
                                        <a href="maps_google.html" class="nav-link ">
1024
                                            <span class="title">Google Maps</span>
1025
                                        </a>
1026
                                    </li>
1027
                                    <li class="nav-item  ">
1028
                                        <a href="maps_vector.html" class="nav-link ">
1029
                                            <span class="title">Vector Maps</span>
1030
                                        </a>
1031
                                    </li>
1032
                                </ul>
1033
                            </li>
1034
                            <li class="heading">
1035
                                <h3 class="uppercase">Layouts</h3>
1036
                            </li>
1037
                            <li class="nav-item  ">
1038
                                <a href="javascript:;" class="nav-link nav-toggle">
1039
                                    <i class="icon-layers"></i>
1040
                                    <span class="title">Page Layouts</span>
1041
                                    <span class="arrow"></span>
1042
                                </a>
1043
                                <ul class="sub-menu">
1044
                                    <li class="nav-item  ">
1045
                                        <a href="layout_blank_page.html" class="nav-link ">
1046
                                            <span class="title">Blank Page</span>
1047
                                        </a>
1048
                                    </li>
1049
                                    <li class="nav-item  ">
1050
                                        <a href="layout_ajax_page.html" class="nav-link ">
1051
                                            <span class="title">Ajax Content Layout</span>
1052
                                        </a>
1053
                                    </li>
1054
                                    <li class="nav-item  ">
1055
                                        <a href="layout_offcanvas_mobile_menu.html" class="nav-link ">
1056
                                            <span class="title">Off-canvas Mobile Menu</span>
1057
                                        </a>
1058
                                    </li>
1059
                                    <li class="nav-item  ">
1060
                                        <a href="layout_classic_page_head.html" class="nav-link ">
1061
                                            <span class="title">Classic Page Head</span>
1062
                                        </a>
1063
                                    </li>
1064
                                    <li class="nav-item  ">
1065
                                        <a href="layout_light_page_head.html" class="nav-link ">
1066
                                            <span class="title">Light Page Head</span>
1067
                                        </a>
1068
                                    </li>
1069
                                    <li class="nav-item  ">
1070
                                        <a href="layout_content_grey.html" class="nav-link ">
1071
                                            <span class="title">Grey Bg Content</span>
1072
                                        </a>
1073
                                    </li>
1074
                                    <li class="nav-item  ">
1075
                                        <a href="layout_search_on_header_1.html" class="nav-link ">
1076
                                            <span class="title">Search Box On Header 1</span>
1077
                                        </a>
1078
                                    </li>
1079
                                    <li class="nav-item  ">
1080
                                        <a href="layout_search_on_header_2.html" class="nav-link ">
1081
                                            <span class="title">Search Box On Header 2</span>
1082
                                        </a>
1083
                                    </li>
1084
                                    <li class="nav-item  ">
1085
                                        <a href="layout_language_bar.html" class="nav-link ">
1086
                                            <span class="title">Header Language Bar</span>
1087
                                        </a>
1088
                                    </li>
1089
                                    <li class="nav-item  ">
1090
                                        <a href="layout_footer_fixed.html" class="nav-link ">
1091
                                            <span class="title">Fixed Footer</span>
1092
                                        </a>
1093
                                    </li>
1094
                                    <li class="nav-item  ">
1095
                                        <a href="layout_boxed_page.html" class="nav-link ">
1096
                                            <span class="title">Boxed Page</span>
1097
                                        </a>
1098
                                    </li>
1099
                                </ul>
1100
                            </li>
1101
                            <li class="nav-item  ">
1102
                                <a href="javascript:;" class="nav-link nav-toggle">
1103
                                    <i class="icon-feed"></i>
1104
                                    <span class="title">Sidebar Layouts</span>
1105
                                    <span class="arrow"></span>
1106
                                </a>
1107
                                <ul class="sub-menu">
1108
                                    <li class="nav-item  ">
1109
                                        <a href="layout_sidebar_menu_light.html" class="nav-link ">
1110
                                            <span class="title">Light Sidebar Menu</span>
1111
                                        </a>
1112
                                    </li>
1113
                                    <li class="nav-item  ">
1114
                                        <a href="layout_sidebar_menu_hover.html" class="nav-link ">
1115
                                            <span class="title">Hover Sidebar Menu</span>
1116
                                        </a>
1117
                                    </li>
1118
                                    <li class="nav-item  ">
1119
                                        <a href="layout_sidebar_search_1.html" class="nav-link ">
1120
                                            <span class="title">Sidebar Search Option 1</span>
1121
                                        </a>
1122
                                    </li>
1123
                                    <li class="nav-item  ">
1124
                                        <a href="layout_sidebar_search_2.html" class="nav-link ">
1125
                                            <span class="title">Sidebar Search Option 2</span>
1126
                                        </a>
1127
                                    </li>
1128
                                    <li class="nav-item  ">
1129
                                        <a href="layout_toggler_on_sidebar.html" class="nav-link ">
1130
                                            <span class="title">Sidebar Toggler On Sidebar</span>
1131
                                        </a>
1132
                                    </li>
1133
                                    <li class="nav-item  ">
1134
                                        <a href="layout_sidebar_reversed.html" class="nav-link ">
1135
                                            <span class="title">Reversed Sidebar Page</span>
1136
                                        </a>
1137
                                    </li>
1138
                                    <li class="nav-item  ">
1139
                                        <a href="layout_sidebar_fixed.html" class="nav-link ">
1140
                                            <span class="title">Fixed Sidebar Layout</span>
1141
                                        </a>
1142
                                    </li>
1143
                                    <li class="nav-item  ">
1144
                                        <a href="layout_sidebar_closed.html" class="nav-link ">
1145
                                            <span class="title">Closed Sidebar Layout</span>
1146
                                        </a>
1147
                                    </li>
1148
                                </ul>
1149
                            </li>
1150
                            <li class="nav-item  ">
1151
                                <a href="javascript:;" class="nav-link nav-toggle">
1152
                                    <i class="icon-paper-plane"></i>
1153
                                    <span class="title">Horizontal Menu</span>
1154
                                    <span class="arrow"></span>
1155
                                </a>
1156
                                <ul class="sub-menu">
1157
                                    <li class="nav-item  ">
1158
                                        <a href="layout_mega_menu_light.html" class="nav-link ">
1159
                                            <span class="title">Light Mega Menu</span>
1160
                                        </a>
1161
                                    </li>
1162
                                    <li class="nav-item  ">
1163
                                        <a href="layout_mega_menu_dark.html" class="nav-link ">
1164
                                            <span class="title">Dark Mega Menu</span>
1165
                                        </a>
1166
                                    </li>
1167
                                    <li class="nav-item  ">
1168
                                        <a href="layout_full_width.html" class="nav-link ">
1169
                                            <span class="title">Full Width Layout</span>
1170
                                        </a>
1171
                                    </li>
1172
                                </ul>
1173
                            </li>
1174
                            <li class="nav-item  ">
1175
                                <a href="javascript:;" class="nav-link nav-toggle">
1176
                                    <i class=" icon-wrench"></i>
1177
                                    <span class="title">Custom Layouts</span>
1178
                                    <span class="arrow"></span>
1179
                                </a>
1180
                                <ul class="sub-menu">
1181
                                    <li class="nav-item  ">
1182
                                        <a href="layout_disabled_menu.html" class="nav-link ">
1183
                                            <span class="title">Disabled Menu Links</span>
1184
                                        </a>
1185
                                    </li>
1186
                                    <li class="nav-item  ">
1187
                                        <a href="layout_full_height_portlet.html" class="nav-link ">
1188
                                            <span class="title">Full Height Portlet</span>
1189
                                        </a>
1190
                                    </li>
1191
                                    <li class="nav-item  ">
1192
                                        <a href="layout_full_height_content.html" class="nav-link ">
1193
                                            <span class="title">Full Height Content</span>
1194
                                        </a>
1195
                                    </li>
1196
                                </ul>
1197
                            </li>
1198
                            <li class="heading">
1199
                                <h3 class="uppercase">Pages</h3>
1200
                            </li>
1201
                            <li class="nav-item  ">
1202
                                <a href="javascript:;" class="nav-link nav-toggle">
1203
                                    <i class="icon-basket"></i>
1204
                                    <span class="title">eCommerce</span>
1205
                                    <span class="arrow"></span>
1206
                                </a>
1207
                                <ul class="sub-menu">
1208
                                    <li class="nav-item  ">
1209
                                        <a href="ecommerce_index.html" class="nav-link ">
1210
                                            <i class="icon-home"></i>
1211
                                            <span class="title">Dashboard</span>
1212
                                        </a>
1213
                                    </li>
1214
                                    <li class="nav-item  ">
1215
                                        <a href="ecommerce_orders.html" class="nav-link ">
1216
                                            <i class="icon-basket"></i>
1217
                                            <span class="title">Orders</span>
1218
                                        </a>
1219
                                    </li>
1220
                                    <li class="nav-item  ">
1221
                                        <a href="ecommerce_orders_view.html" class="nav-link ">
1222
                                            <i class="icon-tag"></i>
1223
                                            <span class="title">Order View</span>
1224
                                        </a>
1225
                                    </li>
1226
                                    <li class="nav-item  ">
1227
                                        <a href="ecommerce_products.html" class="nav-link ">
1228
                                            <i class="icon-graph"></i>
1229
                                            <span class="title">Products</span>
1230
                                        </a>
1231
                                    </li>
1232
                                    <li class="nav-item  ">
1233
                                        <a href="ecommerce_products_edit.html" class="nav-link ">
1234
                                            <i class="icon-graph"></i>
1235
                                            <span class="title">Product Edit</span>
1236
                                        </a>
1237
                                    </li>
1238
                                </ul>
1239
                            </li>
1240
                            <li class="nav-item  ">
1241
                                <a href="javascript:;" class="nav-link nav-toggle">
1242
                                    <i class="icon-docs"></i>
1243
                                    <span class="title">Apps</span>
1244
                                    <span class="arrow"></span>
1245
                                </a>
1246
                                <ul class="sub-menu">
1247
                                    <li class="nav-item  ">
1248
                                        <a href="app_todo.html" class="nav-link ">
1249
                                            <i class="icon-clock"></i>
1250
                                            <span class="title">Todo 1</span>
1251
                                        </a>
1252
                                    </li>
1253
                                    <li class="nav-item  ">
1254
                                        <a href="app_todo_2.html" class="nav-link ">
1255
                                            <i class="icon-check"></i>
1256
                                            <span class="title">Todo 2</span>
1257
                                        </a>
1258
                                    </li>
1259
                                    <li class="nav-item  ">
1260
                                        <a href="app_inbox.html" class="nav-link ">
1261
                                            <i class="icon-envelope"></i>
1262
                                            <span class="title">Inbox</span>
1263
                                        </a>
1264
                                    </li>
1265
                                    <li class="nav-item  ">
1266
                                        <a href="app_calendar.html" class="nav-link ">
1267
                                            <i class="icon-calendar"></i>
1268
                                            <span class="title">Calendar</span>
1269
                                        </a>
1270
                                    </li>
1271
                                    <li class="nav-item  ">
1272
                                        <a href="app_ticket.html" class="nav-link ">
1273
                                            <i class="icon-notebook"></i>
1274
                                            <span class="title">Support</span>
1275
                                        </a>
1276
                                    </li>
1277
                                </ul>
1278
                            </li>
1279
                            <li class="nav-item  ">
1280
                                <a href="javascript:;" class="nav-link nav-toggle">
1281
                                    <i class="icon-user"></i>
1282
                                    <span class="title">User</span>
1283
                                    <span class="arrow"></span>
1284
                                </a>
1285
                                <ul class="sub-menu">
1286
                                    <li class="nav-item  ">
1287
                                        <a href="page_user_profile_1.html" class="nav-link ">
1288
                                            <i class="icon-user"></i>
1289
                                            <span class="title">Profile 1</span>
1290
                                        </a>
1291
                                    </li>
1292
                                    <li class="nav-item  ">
1293
                                        <a href="page_user_profile_1_account.html" class="nav-link ">
1294
                                            <i class="icon-user-female"></i>
1295
                                            <span class="title">Profile 1 Account</span>
1296
                                        </a>
1297
                                    </li>
1298
                                    <li class="nav-item  ">
1299
                                        <a href="page_user_profile_1_help.html" class="nav-link ">
1300
                                            <i class="icon-user-following"></i>
1301
                                            <span class="title">Profile 1 Help</span>
1302
                                        </a>
1303
                                    </li>
1304
                                    <li class="nav-item  ">
1305
                                        <a href="page_user_profile_2.html" class="nav-link ">
1306
                                            <i class="icon-users"></i>
1307
                                            <span class="title">Profile 2</span>
1308
                                        </a>
1309
                                    </li>
1310
                                    <li class="nav-item  ">
1311
                                        <a href="javascript:;" class="nav-link nav-toggle">
1312
                                            <i class="icon-notebook"></i>
1313
                                            <span class="title">Login</span>
1314
                                            <span class="arrow"></span>
1315
                                        </a>
1316
                                        <ul class="sub-menu">
1317
                                            <li class="nav-item ">
1318
                                                <a href="page_user_login_1.html" class="nav-link " target="_blank"> Login Page 1 </a>
1319
                                            </li>
1320
                                            <li class="nav-item ">
1321
                                                <a href="page_user_login_2.html" class="nav-link " target="_blank"> Login Page 2 </a>
1322
                                            </li>
1323
                                            <li class="nav-item ">
1324
                                                <a href="page_user_login_3.html" class="nav-link " target="_blank"> Login Page 3 </a>
1325
                                            </li>
1326
                                            <li class="nav-item ">
1327
                                                <a href="page_user_login_4.html" class="nav-link " target="_blank"> Login Page 4 </a>
1328
                                            </li>
1329
                                            <li class="nav-item ">
1330
                                                <a href="page_user_login_5.html" class="nav-link " target="_blank"> Login Page 5 </a>
1331
                                            </li>
1332
                                            <li class="nav-item ">
1333
                                                <a href="page_user_login_6.html" class="nav-link " target="_blank"> Login Page 6 </a>
1334
                                            </li>
1335
                                        </ul>
1336
                                    </li>
1337
                                    <li class="nav-item  ">
1338
                                        <a href="page_user_lock_1.html" class="nav-link " target="_blank">
1339
                                            <i class="icon-lock"></i>
1340
                                            <span class="title">Lock Screen 1</span>
1341
                                        </a>
1342
                                    </li>
1343
                                    <li class="nav-item  ">
1344
                                        <a href="page_user_lock_2.html" class="nav-link " target="_blank">
1345
                                            <i class="icon-lock-open"></i>
1346
                                            <span class="title">Lock Screen 2</span>
1347
                                        </a>
1348
                                    </li>
1349
                                </ul>
1350
                            </li>
1351
                            <li class="nav-item  ">
1352
                                <a href="javascript:;" class="nav-link nav-toggle">
1353
                                    <i class="icon-social-dribbble"></i>
1354
                                    <span class="title">General</span>
1355
                                    <span class="arrow"></span>
1356
                                </a>
1357
                                <ul class="sub-menu">
1358
                                    <li class="nav-item  ">
1359
                                        <a href="page_general_about.html" class="nav-link ">
1360
                                            <i class="icon-info"></i>
1361
                                            <span class="title">About</span>
1362
                                        </a>
1363
                                    </li>
1364
                                    <li class="nav-item  ">
1365
                                        <a href="page_general_contact.html" class="nav-link ">
1366
                                            <i class="icon-call-end"></i>
1367
                                            <span class="title">Contact</span>
1368
                                        </a>
1369
                                    </li>
1370
                                    <li class="nav-item  ">
1371
                                        <a href="javascript:;" class="nav-link nav-toggle">
1372
                                            <i class="icon-notebook"></i>
1373
                                            <span class="title">Portfolio</span>
1374
                                            <span class="arrow"></span>
1375
                                        </a>
1376
                                        <ul class="sub-menu">
1377
                                            <li class="nav-item ">
1378
                                                <a href="page_general_portfolio_1.html" class="nav-link "> Portfolio 1 </a>
1379
                                            </li>
1380
                                            <li class="nav-item ">
1381
                                                <a href="page_general_portfolio_2.html" class="nav-link "> Portfolio 2 </a>
1382
                                            </li>
1383
                                            <li class="nav-item ">
1384
                                                <a href="page_general_portfolio_3.html" class="nav-link "> Portfolio 3 </a>
1385
                                            </li>
1386
                                            <li class="nav-item ">
1387
                                                <a href="page_general_portfolio_4.html" class="nav-link "> Portfolio 4 </a>
1388
                                            </li>
1389
                                        </ul>
1390
                                    </li>
1391
                                    <li class="nav-item  ">
1392
                                        <a href="javascript:;" class="nav-link nav-toggle">
1393
                                            <i class="icon-magnifier"></i>
1394
                                            <span class="title">Search</span>
1395
                                            <span class="arrow"></span>
1396
                                        </a>
1397
                                        <ul class="sub-menu">
1398
                                            <li class="nav-item ">
1399
                                                <a href="page_general_search.html" class="nav-link "> Search 1 </a>
1400
                                            </li>
1401
                                            <li class="nav-item ">
1402
                                                <a href="page_general_search_2.html" class="nav-link "> Search 2 </a>
1403
                                            </li>
1404
                                            <li class="nav-item ">
1405
                                                <a href="page_general_search_3.html" class="nav-link "> Search 3 </a>
1406
                                            </li>
1407
                                            <li class="nav-item ">
1408
                                                <a href="page_general_search_4.html" class="nav-link "> Search 4 </a>
1409
                                            </li>
1410
                                            <li class="nav-item ">
1411
                                                <a href="page_general_search_5.html" class="nav-link "> Search 5 </a>
1412
                                            </li>
1413
                                        </ul>
1414
                                    </li>
1415
                                    <li class="nav-item  ">
1416
                                        <a href="page_general_pricing.html" class="nav-link ">
1417
                                            <i class="icon-tag"></i>
1418
                                            <span class="title">Pricing</span>
1419
                                        </a>
1420
                                    </li>
1421
                                    <li class="nav-item  ">
1422
                                        <a href="page_general_faq.html" class="nav-link ">
1423
                                            <i class="icon-wrench"></i>
1424
                                            <span class="title">FAQ</span>
1425
                                        </a>
1426
                                    </li>
1427
                                    <li class="nav-item  ">
1428
                                        <a href="page_general_blog.html" class="nav-link ">
1429
                                            <i class="icon-pencil"></i>
1430
                                            <span class="title">Blog</span>
1431
                                        </a>
1432
                                    </li>
1433
                                    <li class="nav-item  ">
1434
                                        <a href="page_general_blog_post.html" class="nav-link ">
1435
                                            <i class="icon-note"></i>
1436
                                            <span class="title">Blog Post</span>
1437
                                        </a>
1438
                                    </li>
1439
                                    <li class="nav-item  ">
1440
                                        <a href="page_general_invoice.html" class="nav-link ">
1441
                                            <i class="icon-envelope"></i>
1442
                                            <span class="title">Invoice</span>
1443
                                        </a>
1444
                                    </li>
1445
                                    <li class="nav-item  ">
1446
                                        <a href="page_general_invoice_2.html" class="nav-link ">
1447
                                            <i class="icon-envelope"></i>
1448
                                            <span class="title">Invoice 2</span>
1449
                                        </a>
1450
                                    </li>
1451
                                </ul>
1452
                            </li>
1453
                            <li class="nav-item  ">
1454
                                <a href="javascript:;" class="nav-link nav-toggle">
1455
                                    <i class="icon-settings"></i>
1456
                                    <span class="title">System</span>
1457
                                    <span class="arrow"></span>
1458
                                </a>
1459
                                <ul class="sub-menu">
1460
                                    <li class="nav-item  ">
1461
                                        <a href="page_cookie_consent_1.html" class="nav-link ">
1462
                                            <span class="title">Cookie Consent 1</span>
1463
                                        </a>
1464
                                    </li>
1465
                                    <li class="nav-item  ">
1466
                                        <a href="page_cookie_consent_2.html" class="nav-link ">
1467
                                            <span class="title">Cookie Consent 2</span>
1468
                                        </a>
1469
                                    </li>
1470
                                    <li class="nav-item  ">
1471
                                        <a href="page_system_coming_soon.html" class="nav-link " target="_blank">
1472
                                            <span class="title">Coming Soon</span>
1473
                                        </a>
1474
                                    </li>
1475
                                    <li class="nav-item  ">
1476
                                        <a href="page_system_404_1.html" class="nav-link ">
1477
                                            <span class="title">404 Page 1</span>
1478
                                        </a>
1479
                                    </li>
1480
                                    <li class="nav-item  ">
1481
                                        <a href="page_system_404_2.html" class="nav-link " target="_blank">
1482
                                            <span class="title">404 Page 2</span>
1483
                                        </a>
1484
                                    </li>
1485
                                    <li class="nav-item  ">
1486
                                        <a href="page_system_404_3.html" class="nav-link " target="_blank">
1487
                                            <span class="title">404 Page 3</span>
1488
                                        </a>
1489
                                    </li>
1490
                                    <li class="nav-item  ">
1491
                                        <a href="page_system_500_1.html" class="nav-link ">
1492
                                            <span class="title">500 Page 1</span>
1493
                                        </a>
1494
                                    </li>
1495
                                    <li class="nav-item  ">
1496
                                        <a href="page_system_500_2.html" class="nav-link " target="_blank">
1497
                                            <span class="title">500 Page 2</span>
1498
                                        </a>
1499
                                    </li>
1500
                                </ul>
1501
                            </li>
1502
                            <li class="nav-item">
1503
                                <a href="javascript:;" class="nav-link nav-toggle">
1504
                                    <i class="icon-folder"></i>
1505
                                    <span class="title">Multi Level Menu</span>
1506
                                    <span class="arrow "></span>
1507
                                </a>
1508
                                <ul class="sub-menu">
1509
                                    <li class="nav-item">
1510
                                        <a href="javascript:;" class="nav-link nav-toggle">
1511
                                            <i class="icon-settings"></i> Item 1
1512
                                            <span class="arrow"></span>
1513
                                        </a>
1514
                                        <ul class="sub-menu">
1515
                                            <li class="nav-item">
1516
                                                <a href="javascript:;" target="_blank" class="nav-link">
1517
                                                    <i class="icon-user"></i> Arrow Toggle
1518
                                                    <span class="arrow nav-toggle"></span>
1519
                                                </a>
1520
                                                <ul class="sub-menu">
1521
                                                    <li class="nav-item">
1522
                                                        <a href="#" class="nav-link">
1523
                                                            <i class="icon-power"></i> Sample Link 1</a>
1524
                                                    </li>
1525
                                                    <li class="nav-item">
1526
                                                        <a href="#" class="nav-link">
1527
                                                            <i class="icon-paper-plane"></i> Sample Link 1</a>
1528
                                                    </li>
1529
                                                    <li class="nav-item">
1530
                                                        <a href="#" class="nav-link">
1531
                                                            <i class="icon-star"></i> Sample Link 1</a>
1532
                                                    </li>
1533
                                                </ul>
1534
                                            </li>
1535
                                            <li class="nav-item">
1536
                                                <a href="#" class="nav-link">
1537
                                                    <i class="icon-camera"></i> Sample Link 1</a>
1538
                                            </li>
1539
                                            <li class="nav-item">
1540
                                                <a href="#" class="nav-link">
1541
                                                    <i class="icon-link"></i> Sample Link 2</a>
1542
                                            </li>
1543
                                            <li class="nav-item">
1544
                                                <a href="#" class="nav-link">
1545
                                                    <i class="icon-pointer"></i> Sample Link 3</a>
1546
                                            </li>
1547
                                        </ul>
1548
                                    </li>
1549
                                    <li class="nav-item">
1550
                                        <a href="javascript:;" target="_blank" class="nav-link">
1551
                                            <i class="icon-globe"></i> Arrow Toggle
1552
                                            <span class="arrow nav-toggle"></span>
1553
                                        </a>
1554
                                        <ul class="sub-menu">
1555
                                            <li class="nav-item">
1556
                                                <a href="#" class="nav-link">
1557
                                                    <i class="icon-tag"></i> Sample Link 1</a>
1558
                                            </li>
1559
                                            <li class="nav-item">
1560
                                                <a href="#" class="nav-link">
1561
                                                    <i class="icon-pencil"></i> Sample Link 1</a>
1562
                                            </li>
1563
                                            <li class="nav-item">
1564
                                                <a href="#" class="nav-link">
1565
                                                    <i class="icon-graph"></i> Sample Link 1</a>
1566
                                            </li>
1567
                                        </ul>
1568
                                    </li>
1569
                                    <li class="nav-item">
1570
                                        <a href="#" class="nav-link">
1571
                                            <i class="icon-bar-chart"></i> Item 3 </a>
1572
                                    </li>
1573
                                </ul>
1574
                            </li>
1575
                        </ul>
1576
                        <!-- END SIDEBAR MENU -->
1577
                        <!-- END SIDEBAR MENU -->
1578
                    </div>
1579
                    <!-- END SIDEBAR -->
1580
                </div>
1581
                <!-- END SIDEBAR -->
1582
                <!-- BEGIN CONTENT -->
1583
                <div class="page-content-wrapper">
1584
                    <!-- BEGIN CONTENT BODY -->
1585
                    <div class="page-content">
1586
                        <!-- BEGIN PAGE HEADER-->
1587
                        <!-- BEGIN THEME PANEL -->
1588
                        <div class="theme-panel hidden-xs hidden-sm">
1589
                            <div class="toggler"> </div>
1590
                            <div class="toggler-close"> </div>
1591
                            <div class="theme-options">
1592
                                <div class="theme-option theme-colors clearfix">
1593
                                    <span> THEME COLOR </span>
1594
                                    <ul>
1595
                                        <li class="color-default current tooltips" data-style="default" data-container="body" data-original-title="Default"> </li>
1596
                                        <li class="color-darkblue tooltips" data-style="darkblue" data-container="body" data-original-title="Dark Blue"> </li>
1597
                                        <li class="color-blue tooltips" data-style="blue" data-container="body" data-original-title="Blue"> </li>
1598
                                        <li class="color-grey tooltips" data-style="grey" data-container="body" data-original-title="Grey"> </li>
1599
                                        <li class="color-light tooltips" data-style="light" data-container="body" data-original-title="Light"> </li>
1600
                                        <li class="color-light2 tooltips" data-style="light2" data-container="body" data-html="true" data-original-title="Light 2"> </li>
1601
                                    </ul>
1602
                                </div>
1603
                                <div class="theme-option">
1604
                                    <span> Theme Style </span>
1605
                                    <select class="layout-style-option form-control input-sm">
1606
                                        <option value="square" selected="selected">Square corners</option>
1607
                                        <option value="rounded">Rounded corners</option>
1608
                                    </select>
1609
                                </div>
1610
                                <div class="theme-option">
1611
                                    <span> Layout </span>
1612
                                    <select class="layout-option form-control input-sm">
1613
                                        <option value="fluid" selected="selected">Fluid</option>
1614
                                        <option value="boxed">Boxed</option>
1615
                                    </select>
1616
                                </div>
1617
                                <div class="theme-option">
1618
                                    <span> Header </span>
1619
                                    <select class="page-header-option form-control input-sm">
1620
                                        <option value="fixed" selected="selected">Fixed</option>
1621
                                        <option value="default">Default</option>
1622
                                    </select>
1623
                                </div>
1624
                                <div class="theme-option">
1625
                                    <span> Top Menu Dropdown</span>
1626
                                    <select class="page-header-top-dropdown-style-option form-control input-sm">
1627
                                        <option value="light" selected="selected">Light</option>
1628
                                        <option value="dark">Dark</option>
1629
                                    </select>
1630
                                </div>
1631
                                <div class="theme-option">
1632
                                    <span> Sidebar Mode</span>
1633
                                    <select class="sidebar-option form-control input-sm">
1634
                                        <option value="fixed">Fixed</option>
1635
                                        <option value="default" selected="selected">Default</option>
1636
                                    </select>
1637
                                </div>
1638
                                <div class="theme-option">
1639
                                    <span> Sidebar Menu </span>
1640
                                    <select class="sidebar-menu-option form-control input-sm">
1641
                                        <option value="accordion" selected="selected">Accordion</option>
1642
                                        <option value="hover">Hover</option>
1643
                                    </select>
1644
                                </div>
1645
                                <div class="theme-option">
1646
                                    <span> Sidebar Style </span>
1647
                                    <select class="sidebar-style-option form-control input-sm">
1648
                                        <option value="default" selected="selected">Default</option>
1649
                                        <option value="light">Light</option>
1650
                                    </select>
1651
                                </div>
1652
                                <div class="theme-option">
1653
                                    <span> Sidebar Position </span>
1654
                                    <select class="sidebar-pos-option form-control input-sm">
1655
                                        <option value="left" selected="selected">Left</option>
1656
                                        <option value="right">Right</option>
1657
                                    </select>
1658
                                </div>
1659
                                <div class="theme-option">
1660
                                    <span> Footer </span>
1661
                                    <select class="page-footer-option form-control input-sm">
1662
                                        <option value="fixed">Fixed</option>
1663
                                        <option value="default" selected="selected">Default</option>
1664
                                    </select>
1665
                                </div>
1666
                            </div>
1667
                        </div>
1668
                        <!-- END THEME PANEL -->
1669
                        <!-- BEGIN PAGE BAR -->
1670
                        <div class="page-bar">
1671
                            <ul class="page-breadcrumb">
1672
                                <li>
1673
                                    <a href="index.html">Home</a>
1674
                                    <i class="fa fa-circle"></i>
1675
                                </li>
1676
                                <li>
1677
                                    <span>UI Features</span>
1678
                                </li>
1679
                            </ul>
1680
                            <div class="page-toolbar">
1681
                                <div class="btn-group pull-right">
1682
                                    <button type="button" class="btn green btn-sm btn-outline dropdown-toggle" data-toggle="dropdown"> Actions
1683
                                        <i class="fa fa-angle-down"></i>
1684
                                    </button>
1685
                                    <ul class="dropdown-menu pull-right" role="menu">
1686
                                        <li>
1687
                                            <a href="#">
1688
                                                <i class="icon-bell"></i> Action</a>
1689
                                        </li>
1690
                                        <li>
1691
                                            <a href="#">
1692
                                                <i class="icon-shield"></i> Another action</a>
1693
                                        </li>
1694
                                        <li>
1695
                                            <a href="#">
1696
                                                <i class="icon-user"></i> Something else here</a>
1697
                                        </li>
1698
                                        <li class="divider"> </li>
1699
                                        <li>
1700
                                            <a href="#">
1701
                                                <i class="icon-bag"></i> Separated link</a>
1702
                                        </li>
1703
                                    </ul>
1704
                                </div>
1705
                            </div>
1706
                        </div>
1707
                        <!-- END PAGE BAR -->
1708
                        <!-- BEGIN PAGE TITLE-->
1709
                        <h1 class="page-title"> Color Library
1710
                            <small>color variants for ui components</small>
1711
                        </h1>
1712
                        <!-- END PAGE TITLE-->
1713
                        <!-- END PAGE HEADER-->
1714
                        <div class="row">
1715
                            <div class="col-md-12">
1716
                                <div class="note note-info">
1717
                                    <h4 class="block">UI Collor Collection</h4>
1718
                                    <p> Just apply the color class(e.g: <code>.blue-madison</code>) to Metronic portlets, buttons, statistic blocks, tiles and other containers. </p>
1719
                                </div>
1720
                                <div class="row">
1721
                                    <div class="col-md-2 col-sm-2 col-xs-6">
1722
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_white">
1723
                                            <div class="color-view bg-white bg-font-white bold uppercase"> #ffffff </div>
1724
                                            <div class="color-info bg-white c-font-14 sbold"> white </div>
1725
                                        </div>
1726
                                        <div class="modal fade" id="demo_modal_white">
1727
                                            <div class="modal-dialog modal-lg">
1728
                                                <div class="modal-content c-square">
1729
                                                    <div class="modal-header">
1730
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1731
                                                            <span aria-hidden="true">&times;</span>
1732
                                                        </button>
1733
                                                        <h4 class="modal-title bold uppercase font-white">white</h4>
1734
                                                    </div>
1735
                                                    <div class="modal-body">
1736
                                                        <div class="tabbable-line">
1737
                                                            <ul class="nav nav-tabs uppercase bold">
1738
                                                                <li class="active">
1739
                                                                    <a href="#white_tab_1_content" data-toggle="tab">Typography</a>
1740
                                                                </li>
1741
                                                                <li>
1742
                                                                    <a href="#white_tab_2_content" data-toggle="tab">Background & Border</a>
1743
                                                                </li>
1744
                                                                <li>
1745
                                                                    <a href="#white_tab_3_content" data-toggle="tab">Buttons</a>
1746
                                                                </li>
1747
                                                                <li>
1748
                                                                    <a href="#white_tab_4_content" data-toggle="tab">Components</a>
1749
                                                                </li>
1750
                                                            </ul>
1751
                                                            <div class="tab-content">
1752
                                                                <div class="tab-pane active" id="white_tab_1_content">
1753
                                                                    <h4>Text font</h4>
1754
                                                                    <div style="margin: 10px 0 30px 0">
1755
                                                                        <span class="font-white font-lg">Some sample text goes here...</span>
1756
                                                                        <br>
1757
                                                                        <span class="font-white font-lg sbold">Some sample text goes here...</span>
1758
                                                                        <br>
1759
                                                                        <span class="font-white font-lg bold uppercase">Some sample text goes here...</span>
1760
                                                                    </div>
1761
                                                                    <h4>Background matching text font</h4>
1762
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-white">
1763
                                                                        <span class="bg-font-white font-lg">Some sample text goes here...</span>
1764
                                                                        <br>
1765
                                                                        <span class="bg-font-white font-lg sbold">Some sample text goes here...</span>
1766
                                                                        <br>
1767
                                                                        <span class="bg-font-white font-lg bold uppercase">Some sample text goes here...</span>
1768
                                                                    </div>
1769
                                                                    <h4>Icon font</h4>
1770
                                                                    <div style="margin: 10px 0 30px 0">
1771
                                                                        <i class="font-white font-lg icon-user"></i>&nbsp;
1772
                                                                        <i class="font-white font-lg icon-settings"></i>&nbsp;
1773
                                                                        <i class="font-white font-lg icon-calendar"></i>
1774
                                                                        <br>
1775
                                                                        <i class="font-white font-lg fa fa-bar-chart-o"></i>&nbsp;
1776
                                                                        <i class="font-white font-lg fa fa-code-fork icon-settings"></i>&nbsp;
1777
                                                                        <i class="font-white font-lg fa fa-cogs"></i>
1778
                                                                        <br>
1779
                                                                        <i class="font-white font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
1780
                                                                        <i class="font-white font-lg glyphicon glyphicon-leaf"></i>&nbsp;
1781
                                                                        <i class="font-white font-lg glyphicon glyphicon-warning-sign"></i>
1782
                                                                        <br> </div>
1783
                                                                    <h4>Background matching icon font</h4>
1784
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-white">
1785
                                                                        <i class="bg-font-white font-lg icon-user"></i>&nbsp;
1786
                                                                        <i class="bg-font-white font-lg icon-settings"></i>&nbsp;
1787
                                                                        <i class="bg-font-white font-lg icon-calendar"></i>
1788
                                                                        <br>
1789
                                                                        <i class="bg-font-white font-lg fa fa-bar-chart-o"></i>&nbsp;
1790
                                                                        <i class="bg-font-white font-lg fa fa-code-fork icon-settings"></i>&nbsp;
1791
                                                                        <i class="bg-font-white font-lg fa fa-cogs"></i>
1792
                                                                        <br>
1793
                                                                        <i class="bg-font-white font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
1794
                                                                        <i class="bg-font-white font-lg glyphicon glyphicon-leaf"></i>&nbsp;
1795
                                                                        <i class="bg-font-white font-lg glyphicon glyphicon-warning-sign"></i>
1796
                                                                        <br> </div>
1797
                                                                    <h4>Class usage</h4> <code>class="font-white"</code> </div>
1798
                                                                <div class="tab-pane" id="white_tab_2_content">
1799
                                                                    <div style="margin: 30px 0;">
1800
                                                                        <div class="border-white margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-white"</code> </div>
1801
                                                                    <div style="margin: 30px 0;">
1802
                                                                        <div class="bg-white bg-font-white margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-white bg-font-white"</code> </div>
1803
                                                                </div>
1804
                                                                <div class="tab-pane" id="white_tab_3_content">
1805
                                                                    <div style="margin: 10px 0 30px 0">
1806
                                                                        <a href="#" class="btn uppercase white">Button</a> &nbsp; <code>class="btn white"</code> </div>
1807
                                                                    <div style="margin: 10px 0 30px 0">
1808
                                                                        <a href="#" class="btn sbold uppercase btn-outline white">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-white"</code> </div>
1809
                                                                    <div style="margin: 10px 0 30px 0">
1810
                                                                        <a href="#" class="btn sbold uppercase btn-circle white">Button</a> &nbsp; <code>class="btn btn-circle white"</code> </div>
1811
                                                                </div>
1812
                                                                <div class="tab-pane" id="white_tab_4_content">
1813
                                                                    <div style="margin: 10px 0 30px 0">
1814
                                                                        <h4>Statistic Widgets</h4>
1815
                                                                        <div class="dashboard-stat white">
1816
                                                                            <div class="visual">
1817
                                                                                <i class="fa fa-bar-chart-o"></i>
1818
                                                                            </div>
1819
                                                                            <div class="details">
1820
                                                                                <div class="number"> 12,5M$ </div>
1821
                                                                                <div class="desc"> Total Profit </div>
1822
                                                                            </div>
1823
                                                                            <a class="more" href="javascript:;"> View more
1824
                                                                                <i class="m-icon-swapright m-icon-white"></i>
1825
                                                                            </a>
1826
                                                                        </div> <code>class="dashboard-stat white"</code> </div>
1827
                                                                </div>
1828
                                                            </div>
1829
                                                        </div>
1830
                                                    </div>
1831
                                                    <div class="modal-footer">
1832
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
1833
                                                    </div>
1834
                                                </div>
1835
                                            </div>
1836
                                        </div>
1837
                                    </div>
1838
                                    <div class="col-md-2 col-sm-2 col-xs-6">
1839
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_default">
1840
                                            <div class="color-view bg-default bg-font-default bold uppercase"> #e1e5ec </div>
1841
                                            <div class="color-info bg-white c-font-14 sbold"> default </div>
1842
                                        </div>
1843
                                        <div class="modal fade" id="demo_modal_default">
1844
                                            <div class="modal-dialog modal-lg">
1845
                                                <div class="modal-content c-square">
1846
                                                    <div class="modal-header">
1847
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1848
                                                            <span aria-hidden="true">&times;</span>
1849
                                                        </button>
1850
                                                        <h4 class="modal-title bold uppercase font-default">default</h4>
1851
                                                    </div>
1852
                                                    <div class="modal-body">
1853
                                                        <div class="tabbable-line">
1854
                                                            <ul class="nav nav-tabs uppercase bold">
1855
                                                                <li class="active">
1856
                                                                    <a href="#default_tab_1_content" data-toggle="tab">Typography</a>
1857
                                                                </li>
1858
                                                                <li>
1859
                                                                    <a href="#default_tab_2_content" data-toggle="tab">Background & Border</a>
1860
                                                                </li>
1861
                                                                <li>
1862
                                                                    <a href="#default_tab_3_content" data-toggle="tab">Buttons</a>
1863
                                                                </li>
1864
                                                                <li>
1865
                                                                    <a href="#default_tab_4_content" data-toggle="tab">Components</a>
1866
                                                                </li>
1867
                                                            </ul>
1868
                                                            <div class="tab-content">
1869
                                                                <div class="tab-pane active" id="default_tab_1_content">
1870
                                                                    <h4>Text font</h4>
1871
                                                                    <div style="margin: 10px 0 30px 0">
1872
                                                                        <span class="font-default font-lg">Some sample text goes here...</span>
1873
                                                                        <br>
1874
                                                                        <span class="font-default font-lg sbold">Some sample text goes here...</span>
1875
                                                                        <br>
1876
                                                                        <span class="font-default font-lg bold uppercase">Some sample text goes here...</span>
1877
                                                                    </div>
1878
                                                                    <h4>Background matching text font</h4>
1879
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-default">
1880
                                                                        <span class="bg-font-default font-lg">Some sample text goes here...</span>
1881
                                                                        <br>
1882
                                                                        <span class="bg-font-default font-lg sbold">Some sample text goes here...</span>
1883
                                                                        <br>
1884
                                                                        <span class="bg-font-default font-lg bold uppercase">Some sample text goes here...</span>
1885
                                                                    </div>
1886
                                                                    <h4>Icon font</h4>
1887
                                                                    <div style="margin: 10px 0 30px 0">
1888
                                                                        <i class="font-default font-lg icon-user"></i>&nbsp;
1889
                                                                        <i class="font-default font-lg icon-settings"></i>&nbsp;
1890
                                                                        <i class="font-default font-lg icon-calendar"></i>
1891
                                                                        <br>
1892
                                                                        <i class="font-default font-lg fa fa-bar-chart-o"></i>&nbsp;
1893
                                                                        <i class="font-default font-lg fa fa-code-fork icon-settings"></i>&nbsp;
1894
                                                                        <i class="font-default font-lg fa fa-cogs"></i>
1895
                                                                        <br>
1896
                                                                        <i class="font-default font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
1897
                                                                        <i class="font-default font-lg glyphicon glyphicon-leaf"></i>&nbsp;
1898
                                                                        <i class="font-default font-lg glyphicon glyphicon-warning-sign"></i>
1899
                                                                        <br> </div>
1900
                                                                    <h4>Background matching icon font</h4>
1901
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-default">
1902
                                                                        <i class="bg-font-default font-lg icon-user"></i>&nbsp;
1903
                                                                        <i class="bg-font-default font-lg icon-settings"></i>&nbsp;
1904
                                                                        <i class="bg-font-default font-lg icon-calendar"></i>
1905
                                                                        <br>
1906
                                                                        <i class="bg-font-default font-lg fa fa-bar-chart-o"></i>&nbsp;
1907
                                                                        <i class="bg-font-default font-lg fa fa-code-fork icon-settings"></i>&nbsp;
1908
                                                                        <i class="bg-font-default font-lg fa fa-cogs"></i>
1909
                                                                        <br>
1910
                                                                        <i class="bg-font-default font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
1911
                                                                        <i class="bg-font-default font-lg glyphicon glyphicon-leaf"></i>&nbsp;
1912
                                                                        <i class="bg-font-default font-lg glyphicon glyphicon-warning-sign"></i>
1913
                                                                        <br> </div>
1914
                                                                    <h4>Class usage</h4> <code>class="font-default"</code> </div>
1915
                                                                <div class="tab-pane" id="default_tab_2_content">
1916
                                                                    <div style="margin: 30px 0;">
1917
                                                                        <div class="border-default margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-default"</code> </div>
1918
                                                                    <div style="margin: 30px 0;">
1919
                                                                        <div class="bg-default bg-font-default margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-default bg-font-default"</code> </div>
1920
                                                                </div>
1921
                                                                <div class="tab-pane" id="default_tab_3_content">
1922
                                                                    <div style="margin: 10px 0 30px 0">
1923
                                                                        <a href="#" class="btn uppercase default">Button</a> &nbsp; <code>class="btn default"</code> </div>
1924
                                                                    <div style="margin: 10px 0 30px 0">
1925
                                                                        <a href="#" class="btn sbold uppercase btn-outline default">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-default"</code> </div>
1926
                                                                    <div style="margin: 10px 0 30px 0">
1927
                                                                        <a href="#" class="btn sbold uppercase btn-circle default">Button</a> &nbsp; <code>class="btn btn-circle default"</code> </div>
1928
                                                                </div>
1929
                                                                <div class="tab-pane" id="default_tab_4_content">
1930
                                                                    <div style="margin: 10px 0 30px 0">
1931
                                                                        <h4>Statistic Widgets</h4>
1932
                                                                        <div class="dashboard-stat default">
1933
                                                                            <div class="visual">
1934
                                                                                <i class="fa fa-bar-chart-o"></i>
1935
                                                                            </div>
1936
                                                                            <div class="details">
1937
                                                                                <div class="number"> 12,5M$ </div>
1938
                                                                                <div class="desc"> Total Profit </div>
1939
                                                                            </div>
1940
                                                                            <a class="more" href="javascript:;"> View more
1941
                                                                                <i class="m-icon-swapright m-icon-white"></i>
1942
                                                                            </a>
1943
                                                                        </div> <code>class="dashboard-stat default"</code> </div>
1944
                                                                </div>
1945
                                                            </div>
1946
                                                        </div>
1947
                                                    </div>
1948
                                                    <div class="modal-footer">
1949
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
1950
                                                    </div>
1951
                                                </div>
1952
                                            </div>
1953
                                        </div>
1954
                                    </div>
1955
                                    <div class="col-md-2 col-sm-2 col-xs-6">
1956
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_dark">
1957
                                            <div class="color-view bg-dark bg-font-dark bold uppercase"> #2f353b </div>
1958
                                            <div class="color-info bg-white c-font-14 sbold"> dark </div>
1959
                                        </div>
1960
                                        <div class="modal fade" id="demo_modal_dark">
1961
                                            <div class="modal-dialog modal-lg">
1962
                                                <div class="modal-content c-square">
1963
                                                    <div class="modal-header">
1964
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1965
                                                            <span aria-hidden="true">&times;</span>
1966
                                                        </button>
1967
                                                        <h4 class="modal-title bold uppercase font-dark">dark</h4>
1968
                                                    </div>
1969
                                                    <div class="modal-body">
1970
                                                        <div class="tabbable-line">
1971
                                                            <ul class="nav nav-tabs uppercase bold">
1972
                                                                <li class="active">
1973
                                                                    <a href="#dark_tab_1_content" data-toggle="tab">Typography</a>
1974
                                                                </li>
1975
                                                                <li>
1976
                                                                    <a href="#dark_tab_2_content" data-toggle="tab">Background & Border</a>
1977
                                                                </li>
1978
                                                                <li>
1979
                                                                    <a href="#dark_tab_3_content" data-toggle="tab">Buttons</a>
1980
                                                                </li>
1981
                                                                <li>
1982
                                                                    <a href="#dark_tab_4_content" data-toggle="tab">Components</a>
1983
                                                                </li>
1984
                                                            </ul>
1985
                                                            <div class="tab-content">
1986
                                                                <div class="tab-pane active" id="dark_tab_1_content">
1987
                                                                    <h4>Text font</h4>
1988
                                                                    <div style="margin: 10px 0 30px 0">
1989
                                                                        <span class="font-dark font-lg">Some sample text goes here...</span>
1990
                                                                        <br>
1991
                                                                        <span class="font-dark font-lg sbold">Some sample text goes here...</span>
1992
                                                                        <br>
1993
                                                                        <span class="font-dark font-lg bold uppercase">Some sample text goes here...</span>
1994
                                                                    </div>
1995
                                                                    <h4>Background matching text font</h4>
1996
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-dark">
1997
                                                                        <span class="bg-font-dark font-lg">Some sample text goes here...</span>
1998
                                                                        <br>
1999
                                                                        <span class="bg-font-dark font-lg sbold">Some sample text goes here...</span>
2000
                                                                        <br>
2001
                                                                        <span class="bg-font-dark font-lg bold uppercase">Some sample text goes here...</span>
2002
                                                                    </div>
2003
                                                                    <h4>Icon font</h4>
2004
                                                                    <div style="margin: 10px 0 30px 0">
2005
                                                                        <i class="font-dark font-lg icon-user"></i>&nbsp;
2006
                                                                        <i class="font-dark font-lg icon-settings"></i>&nbsp;
2007
                                                                        <i class="font-dark font-lg icon-calendar"></i>
2008
                                                                        <br>
2009
                                                                        <i class="font-dark font-lg fa fa-bar-chart-o"></i>&nbsp;
2010
                                                                        <i class="font-dark font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2011
                                                                        <i class="font-dark font-lg fa fa-cogs"></i>
2012
                                                                        <br>
2013
                                                                        <i class="font-dark font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2014
                                                                        <i class="font-dark font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2015
                                                                        <i class="font-dark font-lg glyphicon glyphicon-warning-sign"></i>
2016
                                                                        <br> </div>
2017
                                                                    <h4>Background matching icon font</h4>
2018
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-dark">
2019
                                                                        <i class="bg-font-dark font-lg icon-user"></i>&nbsp;
2020
                                                                        <i class="bg-font-dark font-lg icon-settings"></i>&nbsp;
2021
                                                                        <i class="bg-font-dark font-lg icon-calendar"></i>
2022
                                                                        <br>
2023
                                                                        <i class="bg-font-dark font-lg fa fa-bar-chart-o"></i>&nbsp;
2024
                                                                        <i class="bg-font-dark font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2025
                                                                        <i class="bg-font-dark font-lg fa fa-cogs"></i>
2026
                                                                        <br>
2027
                                                                        <i class="bg-font-dark font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2028
                                                                        <i class="bg-font-dark font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2029
                                                                        <i class="bg-font-dark font-lg glyphicon glyphicon-warning-sign"></i>
2030
                                                                        <br> </div>
2031
                                                                    <h4>Class usage</h4> <code>class="font-dark"</code> </div>
2032
                                                                <div class="tab-pane" id="dark_tab_2_content">
2033
                                                                    <div style="margin: 30px 0;">
2034
                                                                        <div class="border-dark margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-dark"</code> </div>
2035
                                                                    <div style="margin: 30px 0;">
2036
                                                                        <div class="bg-dark bg-font-dark margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-dark bg-font-dark"</code> </div>
2037
                                                                </div>
2038
                                                                <div class="tab-pane" id="dark_tab_3_content">
2039
                                                                    <div style="margin: 10px 0 30px 0">
2040
                                                                        <a href="#" class="btn uppercase dark">Button</a> &nbsp; <code>class="btn dark"</code> </div>
2041
                                                                    <div style="margin: 10px 0 30px 0">
2042
                                                                        <a href="#" class="btn sbold uppercase btn-outline dark">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-dark"</code> </div>
2043
                                                                    <div style="margin: 10px 0 30px 0">
2044
                                                                        <a href="#" class="btn sbold uppercase btn-circle dark">Button</a> &nbsp; <code>class="btn btn-circle dark"</code> </div>
2045
                                                                </div>
2046
                                                                <div class="tab-pane" id="dark_tab_4_content">
2047
                                                                    <div style="margin: 10px 0 30px 0">
2048
                                                                        <h4>Statistic Widgets</h4>
2049
                                                                        <div class="dashboard-stat dark">
2050
                                                                            <div class="visual">
2051
                                                                                <i class="fa fa-bar-chart-o"></i>
2052
                                                                            </div>
2053
                                                                            <div class="details">
2054
                                                                                <div class="number"> 12,5M$ </div>
2055
                                                                                <div class="desc"> Total Profit </div>
2056
                                                                            </div>
2057
                                                                            <a class="more" href="javascript:;"> View more
2058
                                                                                <i class="m-icon-swapright m-icon-white"></i>
2059
                                                                            </a>
2060
                                                                        </div> <code>class="dashboard-stat dark"</code> </div>
2061
                                                                </div>
2062
                                                            </div>
2063
                                                        </div>
2064
                                                    </div>
2065
                                                    <div class="modal-footer">
2066
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
2067
                                                    </div>
2068
                                                </div>
2069
                                            </div>
2070
                                        </div>
2071
                                    </div>
2072
                                    <div class="col-md-2 col-sm-2 col-xs-6">
2073
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue">
2074
                                            <div class="color-view bg-blue bg-font-blue bold uppercase"> #3598dc </div>
2075
                                            <div class="color-info bg-white c-font-14 sbold"> blue </div>
2076
                                        </div>
2077
                                        <div class="modal fade" id="demo_modal_blue">
2078
                                            <div class="modal-dialog modal-lg">
2079
                                                <div class="modal-content c-square">
2080
                                                    <div class="modal-header">
2081
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2082
                                                            <span aria-hidden="true">&times;</span>
2083
                                                        </button>
2084
                                                        <h4 class="modal-title bold uppercase font-blue">blue</h4>
2085
                                                    </div>
2086
                                                    <div class="modal-body">
2087
                                                        <div class="tabbable-line">
2088
                                                            <ul class="nav nav-tabs uppercase bold">
2089
                                                                <li class="active">
2090
                                                                    <a href="#blue_tab_1_content" data-toggle="tab">Typography</a>
2091
                                                                </li>
2092
                                                                <li>
2093
                                                                    <a href="#blue_tab_2_content" data-toggle="tab">Background & Border</a>
2094
                                                                </li>
2095
                                                                <li>
2096
                                                                    <a href="#blue_tab_3_content" data-toggle="tab">Buttons</a>
2097
                                                                </li>
2098
                                                                <li>
2099
                                                                    <a href="#blue_tab_4_content" data-toggle="tab">Components</a>
2100
                                                                </li>
2101
                                                            </ul>
2102
                                                            <div class="tab-content">
2103
                                                                <div class="tab-pane active" id="blue_tab_1_content">
2104
                                                                    <h4>Text font</h4>
2105
                                                                    <div style="margin: 10px 0 30px 0">
2106
                                                                        <span class="font-blue font-lg">Some sample text goes here...</span>
2107
                                                                        <br>
2108
                                                                        <span class="font-blue font-lg sbold">Some sample text goes here...</span>
2109
                                                                        <br>
2110
                                                                        <span class="font-blue font-lg bold uppercase">Some sample text goes here...</span>
2111
                                                                    </div>
2112
                                                                    <h4>Background matching text font</h4>
2113
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue">
2114
                                                                        <span class="bg-font-blue font-lg">Some sample text goes here...</span>
2115
                                                                        <br>
2116
                                                                        <span class="bg-font-blue font-lg sbold">Some sample text goes here...</span>
2117
                                                                        <br>
2118
                                                                        <span class="bg-font-blue font-lg bold uppercase">Some sample text goes here...</span>
2119
                                                                    </div>
2120
                                                                    <h4>Icon font</h4>
2121
                                                                    <div style="margin: 10px 0 30px 0">
2122
                                                                        <i class="font-blue font-lg icon-user"></i>&nbsp;
2123
                                                                        <i class="font-blue font-lg icon-settings"></i>&nbsp;
2124
                                                                        <i class="font-blue font-lg icon-calendar"></i>
2125
                                                                        <br>
2126
                                                                        <i class="font-blue font-lg fa fa-bar-chart-o"></i>&nbsp;
2127
                                                                        <i class="font-blue font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2128
                                                                        <i class="font-blue font-lg fa fa-cogs"></i>
2129
                                                                        <br>
2130
                                                                        <i class="font-blue font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2131
                                                                        <i class="font-blue font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2132
                                                                        <i class="font-blue font-lg glyphicon glyphicon-warning-sign"></i>
2133
                                                                        <br> </div>
2134
                                                                    <h4>Background matching icon font</h4>
2135
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue">
2136
                                                                        <i class="bg-font-blue font-lg icon-user"></i>&nbsp;
2137
                                                                        <i class="bg-font-blue font-lg icon-settings"></i>&nbsp;
2138
                                                                        <i class="bg-font-blue font-lg icon-calendar"></i>
2139
                                                                        <br>
2140
                                                                        <i class="bg-font-blue font-lg fa fa-bar-chart-o"></i>&nbsp;
2141
                                                                        <i class="bg-font-blue font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2142
                                                                        <i class="bg-font-blue font-lg fa fa-cogs"></i>
2143
                                                                        <br>
2144
                                                                        <i class="bg-font-blue font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2145
                                                                        <i class="bg-font-blue font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2146
                                                                        <i class="bg-font-blue font-lg glyphicon glyphicon-warning-sign"></i>
2147
                                                                        <br> </div>
2148
                                                                    <h4>Class usage</h4> <code>class="font-blue"</code> </div>
2149
                                                                <div class="tab-pane" id="blue_tab_2_content">
2150
                                                                    <div style="margin: 30px 0;">
2151
                                                                        <div class="border-blue margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue"</code> </div>
2152
                                                                    <div style="margin: 30px 0;">
2153
                                                                        <div class="bg-blue bg-font-blue margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue bg-font-blue"</code> </div>
2154
                                                                </div>
2155
                                                                <div class="tab-pane" id="blue_tab_3_content">
2156
                                                                    <div style="margin: 10px 0 30px 0">
2157
                                                                        <a href="#" class="btn uppercase blue">Button</a> &nbsp; <code>class="btn blue"</code> </div>
2158
                                                                    <div style="margin: 10px 0 30px 0">
2159
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue"</code> </div>
2160
                                                                    <div style="margin: 10px 0 30px 0">
2161
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue">Button</a> &nbsp; <code>class="btn btn-circle blue"</code> </div>
2162
                                                                </div>
2163
                                                                <div class="tab-pane" id="blue_tab_4_content">
2164
                                                                    <div style="margin: 10px 0 30px 0">
2165
                                                                        <h4>Statistic Widgets</h4>
2166
                                                                        <div class="dashboard-stat blue">
2167
                                                                            <div class="visual">
2168
                                                                                <i class="fa fa-bar-chart-o"></i>
2169
                                                                            </div>
2170
                                                                            <div class="details">
2171
                                                                                <div class="number"> 12,5M$ </div>
2172
                                                                                <div class="desc"> Total Profit </div>
2173
                                                                            </div>
2174
                                                                            <a class="more" href="javascript:;"> View more
2175
                                                                                <i class="m-icon-swapright m-icon-white"></i>
2176
                                                                            </a>
2177
                                                                        </div> <code>class="dashboard-stat blue"</code> </div>
2178
                                                                </div>
2179
                                                            </div>
2180
                                                        </div>
2181
                                                    </div>
2182
                                                    <div class="modal-footer">
2183
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
2184
                                                    </div>
2185
                                                </div>
2186
                                            </div>
2187
                                        </div>
2188
                                    </div>
2189
                                    <div class="col-md-2 col-sm-2 col-xs-6">
2190
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-madison">
2191
                                            <div class="color-view bg-blue-madison bg-font-blue-madison bold uppercase"> #578ebe </div>
2192
                                            <div class="color-info bg-white c-font-14 sbold"> blue-madison </div>
2193
                                        </div>
2194
                                        <div class="modal fade" id="demo_modal_blue-madison">
2195
                                            <div class="modal-dialog modal-lg">
2196
                                                <div class="modal-content c-square">
2197
                                                    <div class="modal-header">
2198
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2199
                                                            <span aria-hidden="true">&times;</span>
2200
                                                        </button>
2201
                                                        <h4 class="modal-title bold uppercase font-blue-madison">blue-madison</h4>
2202
                                                    </div>
2203
                                                    <div class="modal-body">
2204
                                                        <div class="tabbable-line">
2205
                                                            <ul class="nav nav-tabs uppercase bold">
2206
                                                                <li class="active">
2207
                                                                    <a href="#blue-madison_tab_1_content" data-toggle="tab">Typography</a>
2208
                                                                </li>
2209
                                                                <li>
2210
                                                                    <a href="#blue-madison_tab_2_content" data-toggle="tab">Background & Border</a>
2211
                                                                </li>
2212
                                                                <li>
2213
                                                                    <a href="#blue-madison_tab_3_content" data-toggle="tab">Buttons</a>
2214
                                                                </li>
2215
                                                                <li>
2216
                                                                    <a href="#blue-madison_tab_4_content" data-toggle="tab">Components</a>
2217
                                                                </li>
2218
                                                            </ul>
2219
                                                            <div class="tab-content">
2220
                                                                <div class="tab-pane active" id="blue-madison_tab_1_content">
2221
                                                                    <h4>Text font</h4>
2222
                                                                    <div style="margin: 10px 0 30px 0">
2223
                                                                        <span class="font-blue-madison font-lg">Some sample text goes here...</span>
2224
                                                                        <br>
2225
                                                                        <span class="font-blue-madison font-lg sbold">Some sample text goes here...</span>
2226
                                                                        <br>
2227
                                                                        <span class="font-blue-madison font-lg bold uppercase">Some sample text goes here...</span>
2228
                                                                    </div>
2229
                                                                    <h4>Background matching text font</h4>
2230
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-madison">
2231
                                                                        <span class="bg-font-blue-madison font-lg">Some sample text goes here...</span>
2232
                                                                        <br>
2233
                                                                        <span class="bg-font-blue-madison font-lg sbold">Some sample text goes here...</span>
2234
                                                                        <br>
2235
                                                                        <span class="bg-font-blue-madison font-lg bold uppercase">Some sample text goes here...</span>
2236
                                                                    </div>
2237
                                                                    <h4>Icon font</h4>
2238
                                                                    <div style="margin: 10px 0 30px 0">
2239
                                                                        <i class="font-blue-madison font-lg icon-user"></i>&nbsp;
2240
                                                                        <i class="font-blue-madison font-lg icon-settings"></i>&nbsp;
2241
                                                                        <i class="font-blue-madison font-lg icon-calendar"></i>
2242
                                                                        <br>
2243
                                                                        <i class="font-blue-madison font-lg fa fa-bar-chart-o"></i>&nbsp;
2244
                                                                        <i class="font-blue-madison font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2245
                                                                        <i class="font-blue-madison font-lg fa fa-cogs"></i>
2246
                                                                        <br>
2247
                                                                        <i class="font-blue-madison font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2248
                                                                        <i class="font-blue-madison font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2249
                                                                        <i class="font-blue-madison font-lg glyphicon glyphicon-warning-sign"></i>
2250
                                                                        <br> </div>
2251
                                                                    <h4>Background matching icon font</h4>
2252
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-madison">
2253
                                                                        <i class="bg-font-blue-madison font-lg icon-user"></i>&nbsp;
2254
                                                                        <i class="bg-font-blue-madison font-lg icon-settings"></i>&nbsp;
2255
                                                                        <i class="bg-font-blue-madison font-lg icon-calendar"></i>
2256
                                                                        <br>
2257
                                                                        <i class="bg-font-blue-madison font-lg fa fa-bar-chart-o"></i>&nbsp;
2258
                                                                        <i class="bg-font-blue-madison font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2259
                                                                        <i class="bg-font-blue-madison font-lg fa fa-cogs"></i>
2260
                                                                        <br>
2261
                                                                        <i class="bg-font-blue-madison font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2262
                                                                        <i class="bg-font-blue-madison font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2263
                                                                        <i class="bg-font-blue-madison font-lg glyphicon glyphicon-warning-sign"></i>
2264
                                                                        <br> </div>
2265
                                                                    <h4>Class usage</h4> <code>class="font-blue-madison"</code> </div>
2266
                                                                <div class="tab-pane" id="blue-madison_tab_2_content">
2267
                                                                    <div style="margin: 30px 0;">
2268
                                                                        <div class="border-blue-madison margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue-madison"</code> </div>
2269
                                                                    <div style="margin: 30px 0;">
2270
                                                                        <div class="bg-blue-madison bg-font-blue-madison margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue-madison bg-font-blue-madison"</code> </div>
2271
                                                                </div>
2272
                                                                <div class="tab-pane" id="blue-madison_tab_3_content">
2273
                                                                    <div style="margin: 10px 0 30px 0">
2274
                                                                        <a href="#" class="btn uppercase blue-madison">Button</a> &nbsp; <code>class="btn blue-madison"</code> </div>
2275
                                                                    <div style="margin: 10px 0 30px 0">
2276
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue-madison">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue-madison"</code> </div>
2277
                                                                    <div style="margin: 10px 0 30px 0">
2278
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue-madison">Button</a> &nbsp; <code>class="btn btn-circle blue-madison"</code> </div>
2279
                                                                </div>
2280
                                                                <div class="tab-pane" id="blue-madison_tab_4_content">
2281
                                                                    <div style="margin: 10px 0 30px 0">
2282
                                                                        <h4>Statistic Widgets</h4>
2283
                                                                        <div class="dashboard-stat blue-madison">
2284
                                                                            <div class="visual">
2285
                                                                                <i class="fa fa-bar-chart-o"></i>
2286
                                                                            </div>
2287
                                                                            <div class="details">
2288
                                                                                <div class="number"> 12,5M$ </div>
2289
                                                                                <div class="desc"> Total Profit </div>
2290
                                                                            </div>
2291
                                                                            <a class="more" href="javascript:;"> View more
2292
                                                                                <i class="m-icon-swapright m-icon-white"></i>
2293
                                                                            </a>
2294
                                                                        </div> <code>class="dashboard-stat blue-madison"</code> </div>
2295
                                                                </div>
2296
                                                            </div>
2297
                                                        </div>
2298
                                                    </div>
2299
                                                    <div class="modal-footer">
2300
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
2301
                                                    </div>
2302
                                                </div>
2303
                                            </div>
2304
                                        </div>
2305
                                    </div>
2306
                                    <div class="col-md-2 col-sm-2 col-xs-6">
2307
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-chambray">
2308
                                            <div class="color-view bg-blue-chambray bg-font-blue-chambray bold uppercase"> #2C3E50 </div>
2309
                                            <div class="color-info bg-white c-font-14 sbold"> blue-chambray </div>
2310
                                        </div>
2311
                                        <div class="modal fade" id="demo_modal_blue-chambray">
2312
                                            <div class="modal-dialog modal-lg">
2313
                                                <div class="modal-content c-square">
2314
                                                    <div class="modal-header">
2315
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2316
                                                            <span aria-hidden="true">&times;</span>
2317
                                                        </button>
2318
                                                        <h4 class="modal-title bold uppercase font-blue-chambray">blue-chambray</h4>
2319
                                                    </div>
2320
                                                    <div class="modal-body">
2321
                                                        <div class="tabbable-line">
2322
                                                            <ul class="nav nav-tabs uppercase bold">
2323
                                                                <li class="active">
2324
                                                                    <a href="#blue-chambray_tab_1_content" data-toggle="tab">Typography</a>
2325
                                                                </li>
2326
                                                                <li>
2327
                                                                    <a href="#blue-chambray_tab_2_content" data-toggle="tab">Background & Border</a>
2328
                                                                </li>
2329
                                                                <li>
2330
                                                                    <a href="#blue-chambray_tab_3_content" data-toggle="tab">Buttons</a>
2331
                                                                </li>
2332
                                                                <li>
2333
                                                                    <a href="#blue-chambray_tab_4_content" data-toggle="tab">Components</a>
2334
                                                                </li>
2335
                                                            </ul>
2336
                                                            <div class="tab-content">
2337
                                                                <div class="tab-pane active" id="blue-chambray_tab_1_content">
2338
                                                                    <h4>Text font</h4>
2339
                                                                    <div style="margin: 10px 0 30px 0">
2340
                                                                        <span class="font-blue-chambray font-lg">Some sample text goes here...</span>
2341
                                                                        <br>
2342
                                                                        <span class="font-blue-chambray font-lg sbold">Some sample text goes here...</span>
2343
                                                                        <br>
2344
                                                                        <span class="font-blue-chambray font-lg bold uppercase">Some sample text goes here...</span>
2345
                                                                    </div>
2346
                                                                    <h4>Background matching text font</h4>
2347
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-chambray">
2348
                                                                        <span class="bg-font-blue-chambray font-lg">Some sample text goes here...</span>
2349
                                                                        <br>
2350
                                                                        <span class="bg-font-blue-chambray font-lg sbold">Some sample text goes here...</span>
2351
                                                                        <br>
2352
                                                                        <span class="bg-font-blue-chambray font-lg bold uppercase">Some sample text goes here...</span>
2353
                                                                    </div>
2354
                                                                    <h4>Icon font</h4>
2355
                                                                    <div style="margin: 10px 0 30px 0">
2356
                                                                        <i class="font-blue-chambray font-lg icon-user"></i>&nbsp;
2357
                                                                        <i class="font-blue-chambray font-lg icon-settings"></i>&nbsp;
2358
                                                                        <i class="font-blue-chambray font-lg icon-calendar"></i>
2359
                                                                        <br>
2360
                                                                        <i class="font-blue-chambray font-lg fa fa-bar-chart-o"></i>&nbsp;
2361
                                                                        <i class="font-blue-chambray font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2362
                                                                        <i class="font-blue-chambray font-lg fa fa-cogs"></i>
2363
                                                                        <br>
2364
                                                                        <i class="font-blue-chambray font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2365
                                                                        <i class="font-blue-chambray font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2366
                                                                        <i class="font-blue-chambray font-lg glyphicon glyphicon-warning-sign"></i>
2367
                                                                        <br> </div>
2368
                                                                    <h4>Background matching icon font</h4>
2369
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-chambray">
2370
                                                                        <i class="bg-font-blue-chambray font-lg icon-user"></i>&nbsp;
2371
                                                                        <i class="bg-font-blue-chambray font-lg icon-settings"></i>&nbsp;
2372
                                                                        <i class="bg-font-blue-chambray font-lg icon-calendar"></i>
2373
                                                                        <br>
2374
                                                                        <i class="bg-font-blue-chambray font-lg fa fa-bar-chart-o"></i>&nbsp;
2375
                                                                        <i class="bg-font-blue-chambray font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2376
                                                                        <i class="bg-font-blue-chambray font-lg fa fa-cogs"></i>
2377
                                                                        <br>
2378
                                                                        <i class="bg-font-blue-chambray font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2379
                                                                        <i class="bg-font-blue-chambray font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2380
                                                                        <i class="bg-font-blue-chambray font-lg glyphicon glyphicon-warning-sign"></i>
2381
                                                                        <br> </div>
2382
                                                                    <h4>Class usage</h4> <code>class="font-blue-chambray"</code> </div>
2383
                                                                <div class="tab-pane" id="blue-chambray_tab_2_content">
2384
                                                                    <div style="margin: 30px 0;">
2385
                                                                        <div class="border-blue-chambray margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue-chambray"</code> </div>
2386
                                                                    <div style="margin: 30px 0;">
2387
                                                                        <div class="bg-blue-chambray bg-font-blue-chambray margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue-chambray bg-font-blue-chambray"</code> </div>
2388
                                                                </div>
2389
                                                                <div class="tab-pane" id="blue-chambray_tab_3_content">
2390
                                                                    <div style="margin: 10px 0 30px 0">
2391
                                                                        <a href="#" class="btn uppercase blue-chambray">Button</a> &nbsp; <code>class="btn blue-chambray"</code> </div>
2392
                                                                    <div style="margin: 10px 0 30px 0">
2393
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue-chambray">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue-chambray"</code> </div>
2394
                                                                    <div style="margin: 10px 0 30px 0">
2395
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue-chambray">Button</a> &nbsp; <code>class="btn btn-circle blue-chambray"</code> </div>
2396
                                                                </div>
2397
                                                                <div class="tab-pane" id="blue-chambray_tab_4_content">
2398
                                                                    <div style="margin: 10px 0 30px 0">
2399
                                                                        <h4>Statistic Widgets</h4>
2400
                                                                        <div class="dashboard-stat blue-chambray">
2401
                                                                            <div class="visual">
2402
                                                                                <i class="fa fa-bar-chart-o"></i>
2403
                                                                            </div>
2404
                                                                            <div class="details">
2405
                                                                                <div class="number"> 12,5M$ </div>
2406
                                                                                <div class="desc"> Total Profit </div>
2407
                                                                            </div>
2408
                                                                            <a class="more" href="javascript:;"> View more
2409
                                                                                <i class="m-icon-swapright m-icon-white"></i>
2410
                                                                            </a>
2411
                                                                        </div> <code>class="dashboard-stat blue-chambray"</code> </div>
2412
                                                                </div>
2413
                                                            </div>
2414
                                                        </div>
2415
                                                    </div>
2416
                                                    <div class="modal-footer">
2417
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
2418
                                                    </div>
2419
                                                </div>
2420
                                            </div>
2421
                                        </div>
2422
                                    </div>
2423
                                </div>
2424
                                <div class="row">
2425
                                    <div class="col-md-2 col-sm-2 col-xs-6">
2426
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-ebonyclay">
2427
                                            <div class="color-view bg-blue-ebonyclay bg-font-blue-ebonyclay bold uppercase"> #22313F </div>
2428
                                            <div class="color-info bg-white c-font-14 sbold"> blue-ebonyclay </div>
2429
                                        </div>
2430
                                        <div class="modal fade" id="demo_modal_blue-ebonyclay">
2431
                                            <div class="modal-dialog modal-lg">
2432
                                                <div class="modal-content c-square">
2433
                                                    <div class="modal-header">
2434
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2435
                                                            <span aria-hidden="true">&times;</span>
2436
                                                        </button>
2437
                                                        <h4 class="modal-title bold uppercase font-blue-ebonyclay">blue-ebonyclay</h4>
2438
                                                    </div>
2439
                                                    <div class="modal-body">
2440
                                                        <div class="tabbable-line">
2441
                                                            <ul class="nav nav-tabs uppercase bold">
2442
                                                                <li class="active">
2443
                                                                    <a href="#blue-ebonyclay_tab_1_content" data-toggle="tab">Typography</a>
2444
                                                                </li>
2445
                                                                <li>
2446
                                                                    <a href="#blue-ebonyclay_tab_2_content" data-toggle="tab">Background & Border</a>
2447
                                                                </li>
2448
                                                                <li>
2449
                                                                    <a href="#blue-ebonyclay_tab_3_content" data-toggle="tab">Buttons</a>
2450
                                                                </li>
2451
                                                                <li>
2452
                                                                    <a href="#blue-ebonyclay_tab_4_content" data-toggle="tab">Components</a>
2453
                                                                </li>
2454
                                                            </ul>
2455
                                                            <div class="tab-content">
2456
                                                                <div class="tab-pane active" id="blue-ebonyclay_tab_1_content">
2457
                                                                    <h4>Text font</h4>
2458
                                                                    <div style="margin: 10px 0 30px 0">
2459
                                                                        <span class="font-blue-ebonyclay font-lg">Some sample text goes here...</span>
2460
                                                                        <br>
2461
                                                                        <span class="font-blue-ebonyclay font-lg sbold">Some sample text goes here...</span>
2462
                                                                        <br>
2463
                                                                        <span class="font-blue-ebonyclay font-lg bold uppercase">Some sample text goes here...</span>
2464
                                                                    </div>
2465
                                                                    <h4>Background matching text font</h4>
2466
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-ebonyclay">
2467
                                                                        <span class="bg-font-blue-ebonyclay font-lg">Some sample text goes here...</span>
2468
                                                                        <br>
2469
                                                                        <span class="bg-font-blue-ebonyclay font-lg sbold">Some sample text goes here...</span>
2470
                                                                        <br>
2471
                                                                        <span class="bg-font-blue-ebonyclay font-lg bold uppercase">Some sample text goes here...</span>
2472
                                                                    </div>
2473
                                                                    <h4>Icon font</h4>
2474
                                                                    <div style="margin: 10px 0 30px 0">
2475
                                                                        <i class="font-blue-ebonyclay font-lg icon-user"></i>&nbsp;
2476
                                                                        <i class="font-blue-ebonyclay font-lg icon-settings"></i>&nbsp;
2477
                                                                        <i class="font-blue-ebonyclay font-lg icon-calendar"></i>
2478
                                                                        <br>
2479
                                                                        <i class="font-blue-ebonyclay font-lg fa fa-bar-chart-o"></i>&nbsp;
2480
                                                                        <i class="font-blue-ebonyclay font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2481
                                                                        <i class="font-blue-ebonyclay font-lg fa fa-cogs"></i>
2482
                                                                        <br>
2483
                                                                        <i class="font-blue-ebonyclay font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2484
                                                                        <i class="font-blue-ebonyclay font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2485
                                                                        <i class="font-blue-ebonyclay font-lg glyphicon glyphicon-warning-sign"></i>
2486
                                                                        <br> </div>
2487
                                                                    <h4>Background matching icon font</h4>
2488
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-ebonyclay">
2489
                                                                        <i class="bg-font-blue-ebonyclay font-lg icon-user"></i>&nbsp;
2490
                                                                        <i class="bg-font-blue-ebonyclay font-lg icon-settings"></i>&nbsp;
2491
                                                                        <i class="bg-font-blue-ebonyclay font-lg icon-calendar"></i>
2492
                                                                        <br>
2493
                                                                        <i class="bg-font-blue-ebonyclay font-lg fa fa-bar-chart-o"></i>&nbsp;
2494
                                                                        <i class="bg-font-blue-ebonyclay font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2495
                                                                        <i class="bg-font-blue-ebonyclay font-lg fa fa-cogs"></i>
2496
                                                                        <br>
2497
                                                                        <i class="bg-font-blue-ebonyclay font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2498
                                                                        <i class="bg-font-blue-ebonyclay font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2499
                                                                        <i class="bg-font-blue-ebonyclay font-lg glyphicon glyphicon-warning-sign"></i>
2500
                                                                        <br> </div>
2501
                                                                    <h4>Class usage</h4> <code>class="font-blue-ebonyclay"</code> </div>
2502
                                                                <div class="tab-pane" id="blue-ebonyclay_tab_2_content">
2503
                                                                    <div style="margin: 30px 0;">
2504
                                                                        <div class="border-blue-ebonyclay margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue-ebonyclay"</code> </div>
2505
                                                                    <div style="margin: 30px 0;">
2506
                                                                        <div class="bg-blue-ebonyclay bg-font-blue-ebonyclay margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue-ebonyclay bg-font-blue-ebonyclay"</code> </div>
2507
                                                                </div>
2508
                                                                <div class="tab-pane" id="blue-ebonyclay_tab_3_content">
2509
                                                                    <div style="margin: 10px 0 30px 0">
2510
                                                                        <a href="#" class="btn uppercase blue-ebonyclay">Button</a> &nbsp; <code>class="btn blue-ebonyclay"</code> </div>
2511
                                                                    <div style="margin: 10px 0 30px 0">
2512
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue-ebonyclay">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue-ebonyclay"</code> </div>
2513
                                                                    <div style="margin: 10px 0 30px 0">
2514
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue-ebonyclay">Button</a> &nbsp; <code>class="btn btn-circle blue-ebonyclay"</code> </div>
2515
                                                                </div>
2516
                                                                <div class="tab-pane" id="blue-ebonyclay_tab_4_content">
2517
                                                                    <div style="margin: 10px 0 30px 0">
2518
                                                                        <h4>Statistic Widgets</h4>
2519
                                                                        <div class="dashboard-stat blue-ebonyclay">
2520
                                                                            <div class="visual">
2521
                                                                                <i class="fa fa-bar-chart-o"></i>
2522
                                                                            </div>
2523
                                                                            <div class="details">
2524
                                                                                <div class="number"> 12,5M$ </div>
2525
                                                                                <div class="desc"> Total Profit </div>
2526
                                                                            </div>
2527
                                                                            <a class="more" href="javascript:;"> View more
2528
                                                                                <i class="m-icon-swapright m-icon-white"></i>
2529
                                                                            </a>
2530
                                                                        </div> <code>class="dashboard-stat blue-ebonyclay"</code> </div>
2531
                                                                </div>
2532
                                                            </div>
2533
                                                        </div>
2534
                                                    </div>
2535
                                                    <div class="modal-footer">
2536
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
2537
                                                    </div>
2538
                                                </div>
2539
                                            </div>
2540
                                        </div>
2541
                                    </div>
2542
                                    <div class="col-md-2 col-sm-2 col-xs-6">
2543
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-hoki">
2544
                                            <div class="color-view bg-blue-hoki bg-font-blue-hoki bold uppercase"> #67809F </div>
2545
                                            <div class="color-info bg-white c-font-14 sbold"> blue-hoki </div>
2546
                                        </div>
2547
                                        <div class="modal fade" id="demo_modal_blue-hoki">
2548
                                            <div class="modal-dialog modal-lg">
2549
                                                <div class="modal-content c-square">
2550
                                                    <div class="modal-header">
2551
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2552
                                                            <span aria-hidden="true">&times;</span>
2553
                                                        </button>
2554
                                                        <h4 class="modal-title bold uppercase font-blue-hoki">blue-hoki</h4>
2555
                                                    </div>
2556
                                                    <div class="modal-body">
2557
                                                        <div class="tabbable-line">
2558
                                                            <ul class="nav nav-tabs uppercase bold">
2559
                                                                <li class="active">
2560
                                                                    <a href="#blue-hoki_tab_1_content" data-toggle="tab">Typography</a>
2561
                                                                </li>
2562
                                                                <li>
2563
                                                                    <a href="#blue-hoki_tab_2_content" data-toggle="tab">Background & Border</a>
2564
                                                                </li>
2565
                                                                <li>
2566
                                                                    <a href="#blue-hoki_tab_3_content" data-toggle="tab">Buttons</a>
2567
                                                                </li>
2568
                                                                <li>
2569
                                                                    <a href="#blue-hoki_tab_4_content" data-toggle="tab">Components</a>
2570
                                                                </li>
2571
                                                            </ul>
2572
                                                            <div class="tab-content">
2573
                                                                <div class="tab-pane active" id="blue-hoki_tab_1_content">
2574
                                                                    <h4>Text font</h4>
2575
                                                                    <div style="margin: 10px 0 30px 0">
2576
                                                                        <span class="font-blue-hoki font-lg">Some sample text goes here...</span>
2577
                                                                        <br>
2578
                                                                        <span class="font-blue-hoki font-lg sbold">Some sample text goes here...</span>
2579
                                                                        <br>
2580
                                                                        <span class="font-blue-hoki font-lg bold uppercase">Some sample text goes here...</span>
2581
                                                                    </div>
2582
                                                                    <h4>Background matching text font</h4>
2583
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-hoki">
2584
                                                                        <span class="bg-font-blue-hoki font-lg">Some sample text goes here...</span>
2585
                                                                        <br>
2586
                                                                        <span class="bg-font-blue-hoki font-lg sbold">Some sample text goes here...</span>
2587
                                                                        <br>
2588
                                                                        <span class="bg-font-blue-hoki font-lg bold uppercase">Some sample text goes here...</span>
2589
                                                                    </div>
2590
                                                                    <h4>Icon font</h4>
2591
                                                                    <div style="margin: 10px 0 30px 0">
2592
                                                                        <i class="font-blue-hoki font-lg icon-user"></i>&nbsp;
2593
                                                                        <i class="font-blue-hoki font-lg icon-settings"></i>&nbsp;
2594
                                                                        <i class="font-blue-hoki font-lg icon-calendar"></i>
2595
                                                                        <br>
2596
                                                                        <i class="font-blue-hoki font-lg fa fa-bar-chart-o"></i>&nbsp;
2597
                                                                        <i class="font-blue-hoki font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2598
                                                                        <i class="font-blue-hoki font-lg fa fa-cogs"></i>
2599
                                                                        <br>
2600
                                                                        <i class="font-blue-hoki font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2601
                                                                        <i class="font-blue-hoki font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2602
                                                                        <i class="font-blue-hoki font-lg glyphicon glyphicon-warning-sign"></i>
2603
                                                                        <br> </div>
2604
                                                                    <h4>Background matching icon font</h4>
2605
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-hoki">
2606
                                                                        <i class="bg-font-blue-hoki font-lg icon-user"></i>&nbsp;
2607
                                                                        <i class="bg-font-blue-hoki font-lg icon-settings"></i>&nbsp;
2608
                                                                        <i class="bg-font-blue-hoki font-lg icon-calendar"></i>
2609
                                                                        <br>
2610
                                                                        <i class="bg-font-blue-hoki font-lg fa fa-bar-chart-o"></i>&nbsp;
2611
                                                                        <i class="bg-font-blue-hoki font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2612
                                                                        <i class="bg-font-blue-hoki font-lg fa fa-cogs"></i>
2613
                                                                        <br>
2614
                                                                        <i class="bg-font-blue-hoki font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2615
                                                                        <i class="bg-font-blue-hoki font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2616
                                                                        <i class="bg-font-blue-hoki font-lg glyphicon glyphicon-warning-sign"></i>
2617
                                                                        <br> </div>
2618
                                                                    <h4>Class usage</h4> <code>class="font-blue-hoki"</code> </div>
2619
                                                                <div class="tab-pane" id="blue-hoki_tab_2_content">
2620
                                                                    <div style="margin: 30px 0;">
2621
                                                                        <div class="border-blue-hoki margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue-hoki"</code> </div>
2622
                                                                    <div style="margin: 30px 0;">
2623
                                                                        <div class="bg-blue-hoki bg-font-blue-hoki margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue-hoki bg-font-blue-hoki"</code> </div>
2624
                                                                </div>
2625
                                                                <div class="tab-pane" id="blue-hoki_tab_3_content">
2626
                                                                    <div style="margin: 10px 0 30px 0">
2627
                                                                        <a href="#" class="btn uppercase blue-hoki">Button</a> &nbsp; <code>class="btn blue-hoki"</code> </div>
2628
                                                                    <div style="margin: 10px 0 30px 0">
2629
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue-hoki">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue-hoki"</code> </div>
2630
                                                                    <div style="margin: 10px 0 30px 0">
2631
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue-hoki">Button</a> &nbsp; <code>class="btn btn-circle blue-hoki"</code> </div>
2632
                                                                </div>
2633
                                                                <div class="tab-pane" id="blue-hoki_tab_4_content">
2634
                                                                    <div style="margin: 10px 0 30px 0">
2635
                                                                        <h4>Statistic Widgets</h4>
2636
                                                                        <div class="dashboard-stat blue-hoki">
2637
                                                                            <div class="visual">
2638
                                                                                <i class="fa fa-bar-chart-o"></i>
2639
                                                                            </div>
2640
                                                                            <div class="details">
2641
                                                                                <div class="number"> 12,5M$ </div>
2642
                                                                                <div class="desc"> Total Profit </div>
2643
                                                                            </div>
2644
                                                                            <a class="more" href="javascript:;"> View more
2645
                                                                                <i class="m-icon-swapright m-icon-white"></i>
2646
                                                                            </a>
2647
                                                                        </div> <code>class="dashboard-stat blue-hoki"</code> </div>
2648
                                                                </div>
2649
                                                            </div>
2650
                                                        </div>
2651
                                                    </div>
2652
                                                    <div class="modal-footer">
2653
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
2654
                                                    </div>
2655
                                                </div>
2656
                                            </div>
2657
                                        </div>
2658
                                    </div>
2659
                                    <div class="col-md-2 col-sm-2 col-xs-6">
2660
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-steel">
2661
                                            <div class="color-view bg-blue-steel bg-font-blue-steel bold uppercase"> #4B77BE </div>
2662
                                            <div class="color-info bg-white c-font-14 sbold"> blue-steel </div>
2663
                                        </div>
2664
                                        <div class="modal fade" id="demo_modal_blue-steel">
2665
                                            <div class="modal-dialog modal-lg">
2666
                                                <div class="modal-content c-square">
2667
                                                    <div class="modal-header">
2668
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2669
                                                            <span aria-hidden="true">&times;</span>
2670
                                                        </button>
2671
                                                        <h4 class="modal-title bold uppercase font-blue-steel">blue-steel</h4>
2672
                                                    </div>
2673
                                                    <div class="modal-body">
2674
                                                        <div class="tabbable-line">
2675
                                                            <ul class="nav nav-tabs uppercase bold">
2676
                                                                <li class="active">
2677
                                                                    <a href="#blue-steel_tab_1_content" data-toggle="tab">Typography</a>
2678
                                                                </li>
2679
                                                                <li>
2680
                                                                    <a href="#blue-steel_tab_2_content" data-toggle="tab">Background & Border</a>
2681
                                                                </li>
2682
                                                                <li>
2683
                                                                    <a href="#blue-steel_tab_3_content" data-toggle="tab">Buttons</a>
2684
                                                                </li>
2685
                                                                <li>
2686
                                                                    <a href="#blue-steel_tab_4_content" data-toggle="tab">Components</a>
2687
                                                                </li>
2688
                                                            </ul>
2689
                                                            <div class="tab-content">
2690
                                                                <div class="tab-pane active" id="blue-steel_tab_1_content">
2691
                                                                    <h4>Text font</h4>
2692
                                                                    <div style="margin: 10px 0 30px 0">
2693
                                                                        <span class="font-blue-steel font-lg">Some sample text goes here...</span>
2694
                                                                        <br>
2695
                                                                        <span class="font-blue-steel font-lg sbold">Some sample text goes here...</span>
2696
                                                                        <br>
2697
                                                                        <span class="font-blue-steel font-lg bold uppercase">Some sample text goes here...</span>
2698
                                                                    </div>
2699
                                                                    <h4>Background matching text font</h4>
2700
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-steel">
2701
                                                                        <span class="bg-font-blue-steel font-lg">Some sample text goes here...</span>
2702
                                                                        <br>
2703
                                                                        <span class="bg-font-blue-steel font-lg sbold">Some sample text goes here...</span>
2704
                                                                        <br>
2705
                                                                        <span class="bg-font-blue-steel font-lg bold uppercase">Some sample text goes here...</span>
2706
                                                                    </div>
2707
                                                                    <h4>Icon font</h4>
2708
                                                                    <div style="margin: 10px 0 30px 0">
2709
                                                                        <i class="font-blue-steel font-lg icon-user"></i>&nbsp;
2710
                                                                        <i class="font-blue-steel font-lg icon-settings"></i>&nbsp;
2711
                                                                        <i class="font-blue-steel font-lg icon-calendar"></i>
2712
                                                                        <br>
2713
                                                                        <i class="font-blue-steel font-lg fa fa-bar-chart-o"></i>&nbsp;
2714
                                                                        <i class="font-blue-steel font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2715
                                                                        <i class="font-blue-steel font-lg fa fa-cogs"></i>
2716
                                                                        <br>
2717
                                                                        <i class="font-blue-steel font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2718
                                                                        <i class="font-blue-steel font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2719
                                                                        <i class="font-blue-steel font-lg glyphicon glyphicon-warning-sign"></i>
2720
                                                                        <br> </div>
2721
                                                                    <h4>Background matching icon font</h4>
2722
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-steel">
2723
                                                                        <i class="bg-font-blue-steel font-lg icon-user"></i>&nbsp;
2724
                                                                        <i class="bg-font-blue-steel font-lg icon-settings"></i>&nbsp;
2725
                                                                        <i class="bg-font-blue-steel font-lg icon-calendar"></i>
2726
                                                                        <br>
2727
                                                                        <i class="bg-font-blue-steel font-lg fa fa-bar-chart-o"></i>&nbsp;
2728
                                                                        <i class="bg-font-blue-steel font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2729
                                                                        <i class="bg-font-blue-steel font-lg fa fa-cogs"></i>
2730
                                                                        <br>
2731
                                                                        <i class="bg-font-blue-steel font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2732
                                                                        <i class="bg-font-blue-steel font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2733
                                                                        <i class="bg-font-blue-steel font-lg glyphicon glyphicon-warning-sign"></i>
2734
                                                                        <br> </div>
2735
                                                                    <h4>Class usage</h4> <code>class="font-blue-steel"</code> </div>
2736
                                                                <div class="tab-pane" id="blue-steel_tab_2_content">
2737
                                                                    <div style="margin: 30px 0;">
2738
                                                                        <div class="border-blue-steel margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue-steel"</code> </div>
2739
                                                                    <div style="margin: 30px 0;">
2740
                                                                        <div class="bg-blue-steel bg-font-blue-steel margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue-steel bg-font-blue-steel"</code> </div>
2741
                                                                </div>
2742
                                                                <div class="tab-pane" id="blue-steel_tab_3_content">
2743
                                                                    <div style="margin: 10px 0 30px 0">
2744
                                                                        <a href="#" class="btn uppercase blue-steel">Button</a> &nbsp; <code>class="btn blue-steel"</code> </div>
2745
                                                                    <div style="margin: 10px 0 30px 0">
2746
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue-steel">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue-steel"</code> </div>
2747
                                                                    <div style="margin: 10px 0 30px 0">
2748
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue-steel">Button</a> &nbsp; <code>class="btn btn-circle blue-steel"</code> </div>
2749
                                                                </div>
2750
                                                                <div class="tab-pane" id="blue-steel_tab_4_content">
2751
                                                                    <div style="margin: 10px 0 30px 0">
2752
                                                                        <h4>Statistic Widgets</h4>
2753
                                                                        <div class="dashboard-stat blue-steel">
2754
                                                                            <div class="visual">
2755
                                                                                <i class="fa fa-bar-chart-o"></i>
2756
                                                                            </div>
2757
                                                                            <div class="details">
2758
                                                                                <div class="number"> 12,5M$ </div>
2759
                                                                                <div class="desc"> Total Profit </div>
2760
                                                                            </div>
2761
                                                                            <a class="more" href="javascript:;"> View more
2762
                                                                                <i class="m-icon-swapright m-icon-white"></i>
2763
                                                                            </a>
2764
                                                                        </div> <code>class="dashboard-stat blue-steel"</code> </div>
2765
                                                                </div>
2766
                                                            </div>
2767
                                                        </div>
2768
                                                    </div>
2769
                                                    <div class="modal-footer">
2770
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
2771
                                                    </div>
2772
                                                </div>
2773
                                            </div>
2774
                                        </div>
2775
                                    </div>
2776
                                    <div class="col-md-2 col-sm-2 col-xs-6">
2777
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-soft">
2778
                                            <div class="color-view bg-blue-soft bg-font-blue-soft bold uppercase"> #4c87b9 </div>
2779
                                            <div class="color-info bg-white c-font-14 sbold"> blue-soft </div>
2780
                                        </div>
2781
                                        <div class="modal fade" id="demo_modal_blue-soft">
2782
                                            <div class="modal-dialog modal-lg">
2783
                                                <div class="modal-content c-square">
2784
                                                    <div class="modal-header">
2785
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2786
                                                            <span aria-hidden="true">&times;</span>
2787
                                                        </button>
2788
                                                        <h4 class="modal-title bold uppercase font-blue-soft">blue-soft</h4>
2789
                                                    </div>
2790
                                                    <div class="modal-body">
2791
                                                        <div class="tabbable-line">
2792
                                                            <ul class="nav nav-tabs uppercase bold">
2793
                                                                <li class="active">
2794
                                                                    <a href="#blue-soft_tab_1_content" data-toggle="tab">Typography</a>
2795
                                                                </li>
2796
                                                                <li>
2797
                                                                    <a href="#blue-soft_tab_2_content" data-toggle="tab">Background & Border</a>
2798
                                                                </li>
2799
                                                                <li>
2800
                                                                    <a href="#blue-soft_tab_3_content" data-toggle="tab">Buttons</a>
2801
                                                                </li>
2802
                                                                <li>
2803
                                                                    <a href="#blue-soft_tab_4_content" data-toggle="tab">Components</a>
2804
                                                                </li>
2805
                                                            </ul>
2806
                                                            <div class="tab-content">
2807
                                                                <div class="tab-pane active" id="blue-soft_tab_1_content">
2808
                                                                    <h4>Text font</h4>
2809
                                                                    <div style="margin: 10px 0 30px 0">
2810
                                                                        <span class="font-blue-soft font-lg">Some sample text goes here...</span>
2811
                                                                        <br>
2812
                                                                        <span class="font-blue-soft font-lg sbold">Some sample text goes here...</span>
2813
                                                                        <br>
2814
                                                                        <span class="font-blue-soft font-lg bold uppercase">Some sample text goes here...</span>
2815
                                                                    </div>
2816
                                                                    <h4>Background matching text font</h4>
2817
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-soft">
2818
                                                                        <span class="bg-font-blue-soft font-lg">Some sample text goes here...</span>
2819
                                                                        <br>
2820
                                                                        <span class="bg-font-blue-soft font-lg sbold">Some sample text goes here...</span>
2821
                                                                        <br>
2822
                                                                        <span class="bg-font-blue-soft font-lg bold uppercase">Some sample text goes here...</span>
2823
                                                                    </div>
2824
                                                                    <h4>Icon font</h4>
2825
                                                                    <div style="margin: 10px 0 30px 0">
2826
                                                                        <i class="font-blue-soft font-lg icon-user"></i>&nbsp;
2827
                                                                        <i class="font-blue-soft font-lg icon-settings"></i>&nbsp;
2828
                                                                        <i class="font-blue-soft font-lg icon-calendar"></i>
2829
                                                                        <br>
2830
                                                                        <i class="font-blue-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
2831
                                                                        <i class="font-blue-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2832
                                                                        <i class="font-blue-soft font-lg fa fa-cogs"></i>
2833
                                                                        <br>
2834
                                                                        <i class="font-blue-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2835
                                                                        <i class="font-blue-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2836
                                                                        <i class="font-blue-soft font-lg glyphicon glyphicon-warning-sign"></i>
2837
                                                                        <br> </div>
2838
                                                                    <h4>Background matching icon font</h4>
2839
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-soft">
2840
                                                                        <i class="bg-font-blue-soft font-lg icon-user"></i>&nbsp;
2841
                                                                        <i class="bg-font-blue-soft font-lg icon-settings"></i>&nbsp;
2842
                                                                        <i class="bg-font-blue-soft font-lg icon-calendar"></i>
2843
                                                                        <br>
2844
                                                                        <i class="bg-font-blue-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
2845
                                                                        <i class="bg-font-blue-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2846
                                                                        <i class="bg-font-blue-soft font-lg fa fa-cogs"></i>
2847
                                                                        <br>
2848
                                                                        <i class="bg-font-blue-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2849
                                                                        <i class="bg-font-blue-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2850
                                                                        <i class="bg-font-blue-soft font-lg glyphicon glyphicon-warning-sign"></i>
2851
                                                                        <br> </div>
2852
                                                                    <h4>Class usage</h4> <code>class="font-blue-soft"</code> </div>
2853
                                                                <div class="tab-pane" id="blue-soft_tab_2_content">
2854
                                                                    <div style="margin: 30px 0;">
2855
                                                                        <div class="border-blue-soft margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue-soft"</code> </div>
2856
                                                                    <div style="margin: 30px 0;">
2857
                                                                        <div class="bg-blue-soft bg-font-blue-soft margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue-soft bg-font-blue-soft"</code> </div>
2858
                                                                </div>
2859
                                                                <div class="tab-pane" id="blue-soft_tab_3_content">
2860
                                                                    <div style="margin: 10px 0 30px 0">
2861
                                                                        <a href="#" class="btn uppercase blue-soft">Button</a> &nbsp; <code>class="btn blue-soft"</code> </div>
2862
                                                                    <div style="margin: 10px 0 30px 0">
2863
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue-soft">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue-soft"</code> </div>
2864
                                                                    <div style="margin: 10px 0 30px 0">
2865
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue-soft">Button</a> &nbsp; <code>class="btn btn-circle blue-soft"</code> </div>
2866
                                                                </div>
2867
                                                                <div class="tab-pane" id="blue-soft_tab_4_content">
2868
                                                                    <div style="margin: 10px 0 30px 0">
2869
                                                                        <h4>Statistic Widgets</h4>
2870
                                                                        <div class="dashboard-stat blue-soft">
2871
                                                                            <div class="visual">
2872
                                                                                <i class="fa fa-bar-chart-o"></i>
2873
                                                                            </div>
2874
                                                                            <div class="details">
2875
                                                                                <div class="number"> 12,5M$ </div>
2876
                                                                                <div class="desc"> Total Profit </div>
2877
                                                                            </div>
2878
                                                                            <a class="more" href="javascript:;"> View more
2879
                                                                                <i class="m-icon-swapright m-icon-white"></i>
2880
                                                                            </a>
2881
                                                                        </div> <code>class="dashboard-stat blue-soft"</code> </div>
2882
                                                                </div>
2883
                                                            </div>
2884
                                                        </div>
2885
                                                    </div>
2886
                                                    <div class="modal-footer">
2887
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
2888
                                                    </div>
2889
                                                </div>
2890
                                            </div>
2891
                                        </div>
2892
                                    </div>
2893
                                    <div class="col-md-2 col-sm-2 col-xs-6">
2894
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-dark">
2895
                                            <div class="color-view bg-blue-dark bg-font-blue-dark bold uppercase"> #5e738b </div>
2896
                                            <div class="color-info bg-white c-font-14 sbold"> blue-dark </div>
2897
                                        </div>
2898
                                        <div class="modal fade" id="demo_modal_blue-dark">
2899
                                            <div class="modal-dialog modal-lg">
2900
                                                <div class="modal-content c-square">
2901
                                                    <div class="modal-header">
2902
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
2903
                                                            <span aria-hidden="true">&times;</span>
2904
                                                        </button>
2905
                                                        <h4 class="modal-title bold uppercase font-blue-dark">blue-dark</h4>
2906
                                                    </div>
2907
                                                    <div class="modal-body">
2908
                                                        <div class="tabbable-line">
2909
                                                            <ul class="nav nav-tabs uppercase bold">
2910
                                                                <li class="active">
2911
                                                                    <a href="#blue-dark_tab_1_content" data-toggle="tab">Typography</a>
2912
                                                                </li>
2913
                                                                <li>
2914
                                                                    <a href="#blue-dark_tab_2_content" data-toggle="tab">Background & Border</a>
2915
                                                                </li>
2916
                                                                <li>
2917
                                                                    <a href="#blue-dark_tab_3_content" data-toggle="tab">Buttons</a>
2918
                                                                </li>
2919
                                                                <li>
2920
                                                                    <a href="#blue-dark_tab_4_content" data-toggle="tab">Components</a>
2921
                                                                </li>
2922
                                                            </ul>
2923
                                                            <div class="tab-content">
2924
                                                                <div class="tab-pane active" id="blue-dark_tab_1_content">
2925
                                                                    <h4>Text font</h4>
2926
                                                                    <div style="margin: 10px 0 30px 0">
2927
                                                                        <span class="font-blue-dark font-lg">Some sample text goes here...</span>
2928
                                                                        <br>
2929
                                                                        <span class="font-blue-dark font-lg sbold">Some sample text goes here...</span>
2930
                                                                        <br>
2931
                                                                        <span class="font-blue-dark font-lg bold uppercase">Some sample text goes here...</span>
2932
                                                                    </div>
2933
                                                                    <h4>Background matching text font</h4>
2934
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-dark">
2935
                                                                        <span class="bg-font-blue-dark font-lg">Some sample text goes here...</span>
2936
                                                                        <br>
2937
                                                                        <span class="bg-font-blue-dark font-lg sbold">Some sample text goes here...</span>
2938
                                                                        <br>
2939
                                                                        <span class="bg-font-blue-dark font-lg bold uppercase">Some sample text goes here...</span>
2940
                                                                    </div>
2941
                                                                    <h4>Icon font</h4>
2942
                                                                    <div style="margin: 10px 0 30px 0">
2943
                                                                        <i class="font-blue-dark font-lg icon-user"></i>&nbsp;
2944
                                                                        <i class="font-blue-dark font-lg icon-settings"></i>&nbsp;
2945
                                                                        <i class="font-blue-dark font-lg icon-calendar"></i>
2946
                                                                        <br>
2947
                                                                        <i class="font-blue-dark font-lg fa fa-bar-chart-o"></i>&nbsp;
2948
                                                                        <i class="font-blue-dark font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2949
                                                                        <i class="font-blue-dark font-lg fa fa-cogs"></i>
2950
                                                                        <br>
2951
                                                                        <i class="font-blue-dark font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2952
                                                                        <i class="font-blue-dark font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2953
                                                                        <i class="font-blue-dark font-lg glyphicon glyphicon-warning-sign"></i>
2954
                                                                        <br> </div>
2955
                                                                    <h4>Background matching icon font</h4>
2956
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-dark">
2957
                                                                        <i class="bg-font-blue-dark font-lg icon-user"></i>&nbsp;
2958
                                                                        <i class="bg-font-blue-dark font-lg icon-settings"></i>&nbsp;
2959
                                                                        <i class="bg-font-blue-dark font-lg icon-calendar"></i>
2960
                                                                        <br>
2961
                                                                        <i class="bg-font-blue-dark font-lg fa fa-bar-chart-o"></i>&nbsp;
2962
                                                                        <i class="bg-font-blue-dark font-lg fa fa-code-fork icon-settings"></i>&nbsp;
2963
                                                                        <i class="bg-font-blue-dark font-lg fa fa-cogs"></i>
2964
                                                                        <br>
2965
                                                                        <i class="bg-font-blue-dark font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
2966
                                                                        <i class="bg-font-blue-dark font-lg glyphicon glyphicon-leaf"></i>&nbsp;
2967
                                                                        <i class="bg-font-blue-dark font-lg glyphicon glyphicon-warning-sign"></i>
2968
                                                                        <br> </div>
2969
                                                                    <h4>Class usage</h4> <code>class="font-blue-dark"</code> </div>
2970
                                                                <div class="tab-pane" id="blue-dark_tab_2_content">
2971
                                                                    <div style="margin: 30px 0;">
2972
                                                                        <div class="border-blue-dark margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue-dark"</code> </div>
2973
                                                                    <div style="margin: 30px 0;">
2974
                                                                        <div class="bg-blue-dark bg-font-blue-dark margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue-dark bg-font-blue-dark"</code> </div>
2975
                                                                </div>
2976
                                                                <div class="tab-pane" id="blue-dark_tab_3_content">
2977
                                                                    <div style="margin: 10px 0 30px 0">
2978
                                                                        <a href="#" class="btn uppercase blue-dark">Button</a> &nbsp; <code>class="btn blue-dark"</code> </div>
2979
                                                                    <div style="margin: 10px 0 30px 0">
2980
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue-dark">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue-dark"</code> </div>
2981
                                                                    <div style="margin: 10px 0 30px 0">
2982
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue-dark">Button</a> &nbsp; <code>class="btn btn-circle blue-dark"</code> </div>
2983
                                                                </div>
2984
                                                                <div class="tab-pane" id="blue-dark_tab_4_content">
2985
                                                                    <div style="margin: 10px 0 30px 0">
2986
                                                                        <h4>Statistic Widgets</h4>
2987
                                                                        <div class="dashboard-stat blue-dark">
2988
                                                                            <div class="visual">
2989
                                                                                <i class="fa fa-bar-chart-o"></i>
2990
                                                                            </div>
2991
                                                                            <div class="details">
2992
                                                                                <div class="number"> 12,5M$ </div>
2993
                                                                                <div class="desc"> Total Profit </div>
2994
                                                                            </div>
2995
                                                                            <a class="more" href="javascript:;"> View more
2996
                                                                                <i class="m-icon-swapright m-icon-white"></i>
2997
                                                                            </a>
2998
                                                                        </div> <code>class="dashboard-stat blue-dark"</code> </div>
2999
                                                                </div>
3000
                                                            </div>
3001
                                                        </div>
3002
                                                    </div>
3003
                                                    <div class="modal-footer">
3004
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
3005
                                                    </div>
3006
                                                </div>
3007
                                            </div>
3008
                                        </div>
3009
                                    </div>
3010
                                    <div class="col-md-2 col-sm-2 col-xs-6">
3011
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-sharp">
3012
                                            <div class="color-view bg-blue-sharp bg-font-blue-sharp bold uppercase"> #5C9BD1 </div>
3013
                                            <div class="color-info bg-white c-font-14 sbold"> blue-sharp </div>
3014
                                        </div>
3015
                                        <div class="modal fade" id="demo_modal_blue-sharp">
3016
                                            <div class="modal-dialog modal-lg">
3017
                                                <div class="modal-content c-square">
3018
                                                    <div class="modal-header">
3019
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3020
                                                            <span aria-hidden="true">&times;</span>
3021
                                                        </button>
3022
                                                        <h4 class="modal-title bold uppercase font-blue-sharp">blue-sharp</h4>
3023
                                                    </div>
3024
                                                    <div class="modal-body">
3025
                                                        <div class="tabbable-line">
3026
                                                            <ul class="nav nav-tabs uppercase bold">
3027
                                                                <li class="active">
3028
                                                                    <a href="#blue-sharp_tab_1_content" data-toggle="tab">Typography</a>
3029
                                                                </li>
3030
                                                                <li>
3031
                                                                    <a href="#blue-sharp_tab_2_content" data-toggle="tab">Background & Border</a>
3032
                                                                </li>
3033
                                                                <li>
3034
                                                                    <a href="#blue-sharp_tab_3_content" data-toggle="tab">Buttons</a>
3035
                                                                </li>
3036
                                                                <li>
3037
                                                                    <a href="#blue-sharp_tab_4_content" data-toggle="tab">Components</a>
3038
                                                                </li>
3039
                                                            </ul>
3040
                                                            <div class="tab-content">
3041
                                                                <div class="tab-pane active" id="blue-sharp_tab_1_content">
3042
                                                                    <h4>Text font</h4>
3043
                                                                    <div style="margin: 10px 0 30px 0">
3044
                                                                        <span class="font-blue-sharp font-lg">Some sample text goes here...</span>
3045
                                                                        <br>
3046
                                                                        <span class="font-blue-sharp font-lg sbold">Some sample text goes here...</span>
3047
                                                                        <br>
3048
                                                                        <span class="font-blue-sharp font-lg bold uppercase">Some sample text goes here...</span>
3049
                                                                    </div>
3050
                                                                    <h4>Background matching text font</h4>
3051
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-sharp">
3052
                                                                        <span class="bg-font-blue-sharp font-lg">Some sample text goes here...</span>
3053
                                                                        <br>
3054
                                                                        <span class="bg-font-blue-sharp font-lg sbold">Some sample text goes here...</span>
3055
                                                                        <br>
3056
                                                                        <span class="bg-font-blue-sharp font-lg bold uppercase">Some sample text goes here...</span>
3057
                                                                    </div>
3058
                                                                    <h4>Icon font</h4>
3059
                                                                    <div style="margin: 10px 0 30px 0">
3060
                                                                        <i class="font-blue-sharp font-lg icon-user"></i>&nbsp;
3061
                                                                        <i class="font-blue-sharp font-lg icon-settings"></i>&nbsp;
3062
                                                                        <i class="font-blue-sharp font-lg icon-calendar"></i>
3063
                                                                        <br>
3064
                                                                        <i class="font-blue-sharp font-lg fa fa-bar-chart-o"></i>&nbsp;
3065
                                                                        <i class="font-blue-sharp font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3066
                                                                        <i class="font-blue-sharp font-lg fa fa-cogs"></i>
3067
                                                                        <br>
3068
                                                                        <i class="font-blue-sharp font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3069
                                                                        <i class="font-blue-sharp font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3070
                                                                        <i class="font-blue-sharp font-lg glyphicon glyphicon-warning-sign"></i>
3071
                                                                        <br> </div>
3072
                                                                    <h4>Background matching icon font</h4>
3073
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-sharp">
3074
                                                                        <i class="bg-font-blue-sharp font-lg icon-user"></i>&nbsp;
3075
                                                                        <i class="bg-font-blue-sharp font-lg icon-settings"></i>&nbsp;
3076
                                                                        <i class="bg-font-blue-sharp font-lg icon-calendar"></i>
3077
                                                                        <br>
3078
                                                                        <i class="bg-font-blue-sharp font-lg fa fa-bar-chart-o"></i>&nbsp;
3079
                                                                        <i class="bg-font-blue-sharp font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3080
                                                                        <i class="bg-font-blue-sharp font-lg fa fa-cogs"></i>
3081
                                                                        <br>
3082
                                                                        <i class="bg-font-blue-sharp font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3083
                                                                        <i class="bg-font-blue-sharp font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3084
                                                                        <i class="bg-font-blue-sharp font-lg glyphicon glyphicon-warning-sign"></i>
3085
                                                                        <br> </div>
3086
                                                                    <h4>Class usage</h4> <code>class="font-blue-sharp"</code> </div>
3087
                                                                <div class="tab-pane" id="blue-sharp_tab_2_content">
3088
                                                                    <div style="margin: 30px 0;">
3089
                                                                        <div class="border-blue-sharp margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue-sharp"</code> </div>
3090
                                                                    <div style="margin: 30px 0;">
3091
                                                                        <div class="bg-blue-sharp bg-font-blue-sharp margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue-sharp bg-font-blue-sharp"</code> </div>
3092
                                                                </div>
3093
                                                                <div class="tab-pane" id="blue-sharp_tab_3_content">
3094
                                                                    <div style="margin: 10px 0 30px 0">
3095
                                                                        <a href="#" class="btn uppercase blue-sharp">Button</a> &nbsp; <code>class="btn blue-sharp"</code> </div>
3096
                                                                    <div style="margin: 10px 0 30px 0">
3097
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue-sharp">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue-sharp"</code> </div>
3098
                                                                    <div style="margin: 10px 0 30px 0">
3099
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue-sharp">Button</a> &nbsp; <code>class="btn btn-circle blue-sharp"</code> </div>
3100
                                                                </div>
3101
                                                                <div class="tab-pane" id="blue-sharp_tab_4_content">
3102
                                                                    <div style="margin: 10px 0 30px 0">
3103
                                                                        <h4>Statistic Widgets</h4>
3104
                                                                        <div class="dashboard-stat blue-sharp">
3105
                                                                            <div class="visual">
3106
                                                                                <i class="fa fa-bar-chart-o"></i>
3107
                                                                            </div>
3108
                                                                            <div class="details">
3109
                                                                                <div class="number"> 12,5M$ </div>
3110
                                                                                <div class="desc"> Total Profit </div>
3111
                                                                            </div>
3112
                                                                            <a class="more" href="javascript:;"> View more
3113
                                                                                <i class="m-icon-swapright m-icon-white"></i>
3114
                                                                            </a>
3115
                                                                        </div> <code>class="dashboard-stat blue-sharp"</code> </div>
3116
                                                                </div>
3117
                                                            </div>
3118
                                                        </div>
3119
                                                    </div>
3120
                                                    <div class="modal-footer">
3121
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
3122
                                                    </div>
3123
                                                </div>
3124
                                            </div>
3125
                                        </div>
3126
                                    </div>
3127
                                </div>
3128
                                <div class="row">
3129
                                    <div class="col-md-2 col-sm-2 col-xs-6">
3130
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_blue-oleo">
3131
                                            <div class="color-view bg-blue-oleo bg-font-blue-oleo bold uppercase"> #94A0B2 </div>
3132
                                            <div class="color-info bg-white c-font-14 sbold"> blue-oleo </div>
3133
                                        </div>
3134
                                        <div class="modal fade" id="demo_modal_blue-oleo">
3135
                                            <div class="modal-dialog modal-lg">
3136
                                                <div class="modal-content c-square">
3137
                                                    <div class="modal-header">
3138
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3139
                                                            <span aria-hidden="true">&times;</span>
3140
                                                        </button>
3141
                                                        <h4 class="modal-title bold uppercase font-blue-oleo">blue-oleo</h4>
3142
                                                    </div>
3143
                                                    <div class="modal-body">
3144
                                                        <div class="tabbable-line">
3145
                                                            <ul class="nav nav-tabs uppercase bold">
3146
                                                                <li class="active">
3147
                                                                    <a href="#blue-oleo_tab_1_content" data-toggle="tab">Typography</a>
3148
                                                                </li>
3149
                                                                <li>
3150
                                                                    <a href="#blue-oleo_tab_2_content" data-toggle="tab">Background & Border</a>
3151
                                                                </li>
3152
                                                                <li>
3153
                                                                    <a href="#blue-oleo_tab_3_content" data-toggle="tab">Buttons</a>
3154
                                                                </li>
3155
                                                                <li>
3156
                                                                    <a href="#blue-oleo_tab_4_content" data-toggle="tab">Components</a>
3157
                                                                </li>
3158
                                                            </ul>
3159
                                                            <div class="tab-content">
3160
                                                                <div class="tab-pane active" id="blue-oleo_tab_1_content">
3161
                                                                    <h4>Text font</h4>
3162
                                                                    <div style="margin: 10px 0 30px 0">
3163
                                                                        <span class="font-blue-oleo font-lg">Some sample text goes here...</span>
3164
                                                                        <br>
3165
                                                                        <span class="font-blue-oleo font-lg sbold">Some sample text goes here...</span>
3166
                                                                        <br>
3167
                                                                        <span class="font-blue-oleo font-lg bold uppercase">Some sample text goes here...</span>
3168
                                                                    </div>
3169
                                                                    <h4>Background matching text font</h4>
3170
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-oleo">
3171
                                                                        <span class="bg-font-blue-oleo font-lg">Some sample text goes here...</span>
3172
                                                                        <br>
3173
                                                                        <span class="bg-font-blue-oleo font-lg sbold">Some sample text goes here...</span>
3174
                                                                        <br>
3175
                                                                        <span class="bg-font-blue-oleo font-lg bold uppercase">Some sample text goes here...</span>
3176
                                                                    </div>
3177
                                                                    <h4>Icon font</h4>
3178
                                                                    <div style="margin: 10px 0 30px 0">
3179
                                                                        <i class="font-blue-oleo font-lg icon-user"></i>&nbsp;
3180
                                                                        <i class="font-blue-oleo font-lg icon-settings"></i>&nbsp;
3181
                                                                        <i class="font-blue-oleo font-lg icon-calendar"></i>
3182
                                                                        <br>
3183
                                                                        <i class="font-blue-oleo font-lg fa fa-bar-chart-o"></i>&nbsp;
3184
                                                                        <i class="font-blue-oleo font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3185
                                                                        <i class="font-blue-oleo font-lg fa fa-cogs"></i>
3186
                                                                        <br>
3187
                                                                        <i class="font-blue-oleo font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3188
                                                                        <i class="font-blue-oleo font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3189
                                                                        <i class="font-blue-oleo font-lg glyphicon glyphicon-warning-sign"></i>
3190
                                                                        <br> </div>
3191
                                                                    <h4>Background matching icon font</h4>
3192
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-blue-oleo">
3193
                                                                        <i class="bg-font-blue-oleo font-lg icon-user"></i>&nbsp;
3194
                                                                        <i class="bg-font-blue-oleo font-lg icon-settings"></i>&nbsp;
3195
                                                                        <i class="bg-font-blue-oleo font-lg icon-calendar"></i>
3196
                                                                        <br>
3197
                                                                        <i class="bg-font-blue-oleo font-lg fa fa-bar-chart-o"></i>&nbsp;
3198
                                                                        <i class="bg-font-blue-oleo font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3199
                                                                        <i class="bg-font-blue-oleo font-lg fa fa-cogs"></i>
3200
                                                                        <br>
3201
                                                                        <i class="bg-font-blue-oleo font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3202
                                                                        <i class="bg-font-blue-oleo font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3203
                                                                        <i class="bg-font-blue-oleo font-lg glyphicon glyphicon-warning-sign"></i>
3204
                                                                        <br> </div>
3205
                                                                    <h4>Class usage</h4> <code>class="font-blue-oleo"</code> </div>
3206
                                                                <div class="tab-pane" id="blue-oleo_tab_2_content">
3207
                                                                    <div style="margin: 30px 0;">
3208
                                                                        <div class="border-blue-oleo margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-blue-oleo"</code> </div>
3209
                                                                    <div style="margin: 30px 0;">
3210
                                                                        <div class="bg-blue-oleo bg-font-blue-oleo margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-blue-oleo bg-font-blue-oleo"</code> </div>
3211
                                                                </div>
3212
                                                                <div class="tab-pane" id="blue-oleo_tab_3_content">
3213
                                                                    <div style="margin: 10px 0 30px 0">
3214
                                                                        <a href="#" class="btn uppercase blue-oleo">Button</a> &nbsp; <code>class="btn blue-oleo"</code> </div>
3215
                                                                    <div style="margin: 10px 0 30px 0">
3216
                                                                        <a href="#" class="btn sbold uppercase btn-outline blue-oleo">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-blue-oleo"</code> </div>
3217
                                                                    <div style="margin: 10px 0 30px 0">
3218
                                                                        <a href="#" class="btn sbold uppercase btn-circle blue-oleo">Button</a> &nbsp; <code>class="btn btn-circle blue-oleo"</code> </div>
3219
                                                                </div>
3220
                                                                <div class="tab-pane" id="blue-oleo_tab_4_content">
3221
                                                                    <div style="margin: 10px 0 30px 0">
3222
                                                                        <h4>Statistic Widgets</h4>
3223
                                                                        <div class="dashboard-stat blue-oleo">
3224
                                                                            <div class="visual">
3225
                                                                                <i class="fa fa-bar-chart-o"></i>
3226
                                                                            </div>
3227
                                                                            <div class="details">
3228
                                                                                <div class="number"> 12,5M$ </div>
3229
                                                                                <div class="desc"> Total Profit </div>
3230
                                                                            </div>
3231
                                                                            <a class="more" href="javascript:;"> View more
3232
                                                                                <i class="m-icon-swapright m-icon-white"></i>
3233
                                                                            </a>
3234
                                                                        </div> <code>class="dashboard-stat blue-oleo"</code> </div>
3235
                                                                </div>
3236
                                                            </div>
3237
                                                        </div>
3238
                                                    </div>
3239
                                                    <div class="modal-footer">
3240
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
3241
                                                    </div>
3242
                                                </div>
3243
                                            </div>
3244
                                        </div>
3245
                                    </div>
3246
                                    <div class="col-md-2 col-sm-2 col-xs-6">
3247
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green">
3248
                                            <div class="color-view bg-green bg-font-green bold uppercase"> #32c5d2 </div>
3249
                                            <div class="color-info bg-white c-font-14 sbold"> green </div>
3250
                                        </div>
3251
                                        <div class="modal fade" id="demo_modal_green">
3252
                                            <div class="modal-dialog modal-lg">
3253
                                                <div class="modal-content c-square">
3254
                                                    <div class="modal-header">
3255
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3256
                                                            <span aria-hidden="true">&times;</span>
3257
                                                        </button>
3258
                                                        <h4 class="modal-title bold uppercase font-green">green</h4>
3259
                                                    </div>
3260
                                                    <div class="modal-body">
3261
                                                        <div class="tabbable-line">
3262
                                                            <ul class="nav nav-tabs uppercase bold">
3263
                                                                <li class="active">
3264
                                                                    <a href="#green_tab_1_content" data-toggle="tab">Typography</a>
3265
                                                                </li>
3266
                                                                <li>
3267
                                                                    <a href="#green_tab_2_content" data-toggle="tab">Background & Border</a>
3268
                                                                </li>
3269
                                                                <li>
3270
                                                                    <a href="#green_tab_3_content" data-toggle="tab">Buttons</a>
3271
                                                                </li>
3272
                                                                <li>
3273
                                                                    <a href="#green_tab_4_content" data-toggle="tab">Components</a>
3274
                                                                </li>
3275
                                                            </ul>
3276
                                                            <div class="tab-content">
3277
                                                                <div class="tab-pane active" id="green_tab_1_content">
3278
                                                                    <h4>Text font</h4>
3279
                                                                    <div style="margin: 10px 0 30px 0">
3280
                                                                        <span class="font-green font-lg">Some sample text goes here...</span>
3281
                                                                        <br>
3282
                                                                        <span class="font-green font-lg sbold">Some sample text goes here...</span>
3283
                                                                        <br>
3284
                                                                        <span class="font-green font-lg bold uppercase">Some sample text goes here...</span>
3285
                                                                    </div>
3286
                                                                    <h4>Background matching text font</h4>
3287
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green">
3288
                                                                        <span class="bg-font-green font-lg">Some sample text goes here...</span>
3289
                                                                        <br>
3290
                                                                        <span class="bg-font-green font-lg sbold">Some sample text goes here...</span>
3291
                                                                        <br>
3292
                                                                        <span class="bg-font-green font-lg bold uppercase">Some sample text goes here...</span>
3293
                                                                    </div>
3294
                                                                    <h4>Icon font</h4>
3295
                                                                    <div style="margin: 10px 0 30px 0">
3296
                                                                        <i class="font-green font-lg icon-user"></i>&nbsp;
3297
                                                                        <i class="font-green font-lg icon-settings"></i>&nbsp;
3298
                                                                        <i class="font-green font-lg icon-calendar"></i>
3299
                                                                        <br>
3300
                                                                        <i class="font-green font-lg fa fa-bar-chart-o"></i>&nbsp;
3301
                                                                        <i class="font-green font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3302
                                                                        <i class="font-green font-lg fa fa-cogs"></i>
3303
                                                                        <br>
3304
                                                                        <i class="font-green font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3305
                                                                        <i class="font-green font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3306
                                                                        <i class="font-green font-lg glyphicon glyphicon-warning-sign"></i>
3307
                                                                        <br> </div>
3308
                                                                    <h4>Background matching icon font</h4>
3309
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green">
3310
                                                                        <i class="bg-font-green font-lg icon-user"></i>&nbsp;
3311
                                                                        <i class="bg-font-green font-lg icon-settings"></i>&nbsp;
3312
                                                                        <i class="bg-font-green font-lg icon-calendar"></i>
3313
                                                                        <br>
3314
                                                                        <i class="bg-font-green font-lg fa fa-bar-chart-o"></i>&nbsp;
3315
                                                                        <i class="bg-font-green font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3316
                                                                        <i class="bg-font-green font-lg fa fa-cogs"></i>
3317
                                                                        <br>
3318
                                                                        <i class="bg-font-green font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3319
                                                                        <i class="bg-font-green font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3320
                                                                        <i class="bg-font-green font-lg glyphicon glyphicon-warning-sign"></i>
3321
                                                                        <br> </div>
3322
                                                                    <h4>Class usage</h4> <code>class="font-green"</code> </div>
3323
                                                                <div class="tab-pane" id="green_tab_2_content">
3324
                                                                    <div style="margin: 30px 0;">
3325
                                                                        <div class="border-green margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green"</code> </div>
3326
                                                                    <div style="margin: 30px 0;">
3327
                                                                        <div class="bg-green bg-font-green margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green bg-font-green"</code> </div>
3328
                                                                </div>
3329
                                                                <div class="tab-pane" id="green_tab_3_content">
3330
                                                                    <div style="margin: 10px 0 30px 0">
3331
                                                                        <a href="#" class="btn uppercase green">Button</a> &nbsp; <code>class="btn green"</code> </div>
3332
                                                                    <div style="margin: 10px 0 30px 0">
3333
                                                                        <a href="#" class="btn sbold uppercase btn-outline green">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green"</code> </div>
3334
                                                                    <div style="margin: 10px 0 30px 0">
3335
                                                                        <a href="#" class="btn sbold uppercase btn-circle green">Button</a> &nbsp; <code>class="btn btn-circle green"</code> </div>
3336
                                                                </div>
3337
                                                                <div class="tab-pane" id="green_tab_4_content">
3338
                                                                    <div style="margin: 10px 0 30px 0">
3339
                                                                        <h4>Statistic Widgets</h4>
3340
                                                                        <div class="dashboard-stat green">
3341
                                                                            <div class="visual">
3342
                                                                                <i class="fa fa-bar-chart-o"></i>
3343
                                                                            </div>
3344
                                                                            <div class="details">
3345
                                                                                <div class="number"> 12,5M$ </div>
3346
                                                                                <div class="desc"> Total Profit </div>
3347
                                                                            </div>
3348
                                                                            <a class="more" href="javascript:;"> View more
3349
                                                                                <i class="m-icon-swapright m-icon-white"></i>
3350
                                                                            </a>
3351
                                                                        </div> <code>class="dashboard-stat green"</code> </div>
3352
                                                                </div>
3353
                                                            </div>
3354
                                                        </div>
3355
                                                    </div>
3356
                                                    <div class="modal-footer">
3357
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
3358
                                                    </div>
3359
                                                </div>
3360
                                            </div>
3361
                                        </div>
3362
                                    </div>
3363
                                    <div class="col-md-2 col-sm-2 col-xs-6">
3364
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-meadow">
3365
                                            <div class="color-view bg-green-meadow bg-font-green-meadow bold uppercase"> #1BBC9B </div>
3366
                                            <div class="color-info bg-white c-font-14 sbold"> green-meadow </div>
3367
                                        </div>
3368
                                        <div class="modal fade" id="demo_modal_green-meadow">
3369
                                            <div class="modal-dialog modal-lg">
3370
                                                <div class="modal-content c-square">
3371
                                                    <div class="modal-header">
3372
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3373
                                                            <span aria-hidden="true">&times;</span>
3374
                                                        </button>
3375
                                                        <h4 class="modal-title bold uppercase font-green-meadow">green-meadow</h4>
3376
                                                    </div>
3377
                                                    <div class="modal-body">
3378
                                                        <div class="tabbable-line">
3379
                                                            <ul class="nav nav-tabs uppercase bold">
3380
                                                                <li class="active">
3381
                                                                    <a href="#green-meadow_tab_1_content" data-toggle="tab">Typography</a>
3382
                                                                </li>
3383
                                                                <li>
3384
                                                                    <a href="#green-meadow_tab_2_content" data-toggle="tab">Background & Border</a>
3385
                                                                </li>
3386
                                                                <li>
3387
                                                                    <a href="#green-meadow_tab_3_content" data-toggle="tab">Buttons</a>
3388
                                                                </li>
3389
                                                                <li>
3390
                                                                    <a href="#green-meadow_tab_4_content" data-toggle="tab">Components</a>
3391
                                                                </li>
3392
                                                            </ul>
3393
                                                            <div class="tab-content">
3394
                                                                <div class="tab-pane active" id="green-meadow_tab_1_content">
3395
                                                                    <h4>Text font</h4>
3396
                                                                    <div style="margin: 10px 0 30px 0">
3397
                                                                        <span class="font-green-meadow font-lg">Some sample text goes here...</span>
3398
                                                                        <br>
3399
                                                                        <span class="font-green-meadow font-lg sbold">Some sample text goes here...</span>
3400
                                                                        <br>
3401
                                                                        <span class="font-green-meadow font-lg bold uppercase">Some sample text goes here...</span>
3402
                                                                    </div>
3403
                                                                    <h4>Background matching text font</h4>
3404
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-meadow">
3405
                                                                        <span class="bg-font-green-meadow font-lg">Some sample text goes here...</span>
3406
                                                                        <br>
3407
                                                                        <span class="bg-font-green-meadow font-lg sbold">Some sample text goes here...</span>
3408
                                                                        <br>
3409
                                                                        <span class="bg-font-green-meadow font-lg bold uppercase">Some sample text goes here...</span>
3410
                                                                    </div>
3411
                                                                    <h4>Icon font</h4>
3412
                                                                    <div style="margin: 10px 0 30px 0">
3413
                                                                        <i class="font-green-meadow font-lg icon-user"></i>&nbsp;
3414
                                                                        <i class="font-green-meadow font-lg icon-settings"></i>&nbsp;
3415
                                                                        <i class="font-green-meadow font-lg icon-calendar"></i>
3416
                                                                        <br>
3417
                                                                        <i class="font-green-meadow font-lg fa fa-bar-chart-o"></i>&nbsp;
3418
                                                                        <i class="font-green-meadow font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3419
                                                                        <i class="font-green-meadow font-lg fa fa-cogs"></i>
3420
                                                                        <br>
3421
                                                                        <i class="font-green-meadow font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3422
                                                                        <i class="font-green-meadow font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3423
                                                                        <i class="font-green-meadow font-lg glyphicon glyphicon-warning-sign"></i>
3424
                                                                        <br> </div>
3425
                                                                    <h4>Background matching icon font</h4>
3426
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-meadow">
3427
                                                                        <i class="bg-font-green-meadow font-lg icon-user"></i>&nbsp;
3428
                                                                        <i class="bg-font-green-meadow font-lg icon-settings"></i>&nbsp;
3429
                                                                        <i class="bg-font-green-meadow font-lg icon-calendar"></i>
3430
                                                                        <br>
3431
                                                                        <i class="bg-font-green-meadow font-lg fa fa-bar-chart-o"></i>&nbsp;
3432
                                                                        <i class="bg-font-green-meadow font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3433
                                                                        <i class="bg-font-green-meadow font-lg fa fa-cogs"></i>
3434
                                                                        <br>
3435
                                                                        <i class="bg-font-green-meadow font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3436
                                                                        <i class="bg-font-green-meadow font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3437
                                                                        <i class="bg-font-green-meadow font-lg glyphicon glyphicon-warning-sign"></i>
3438
                                                                        <br> </div>
3439
                                                                    <h4>Class usage</h4> <code>class="font-green-meadow"</code> </div>
3440
                                                                <div class="tab-pane" id="green-meadow_tab_2_content">
3441
                                                                    <div style="margin: 30px 0;">
3442
                                                                        <div class="border-green-meadow margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green-meadow"</code> </div>
3443
                                                                    <div style="margin: 30px 0;">
3444
                                                                        <div class="bg-green-meadow bg-font-green-meadow margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green-meadow bg-font-green-meadow"</code> </div>
3445
                                                                </div>
3446
                                                                <div class="tab-pane" id="green-meadow_tab_3_content">
3447
                                                                    <div style="margin: 10px 0 30px 0">
3448
                                                                        <a href="#" class="btn uppercase green-meadow">Button</a> &nbsp; <code>class="btn green-meadow"</code> </div>
3449
                                                                    <div style="margin: 10px 0 30px 0">
3450
                                                                        <a href="#" class="btn sbold uppercase btn-outline green-meadow">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green-meadow"</code> </div>
3451
                                                                    <div style="margin: 10px 0 30px 0">
3452
                                                                        <a href="#" class="btn sbold uppercase btn-circle green-meadow">Button</a> &nbsp; <code>class="btn btn-circle green-meadow"</code> </div>
3453
                                                                </div>
3454
                                                                <div class="tab-pane" id="green-meadow_tab_4_content">
3455
                                                                    <div style="margin: 10px 0 30px 0">
3456
                                                                        <h4>Statistic Widgets</h4>
3457
                                                                        <div class="dashboard-stat green-meadow">
3458
                                                                            <div class="visual">
3459
                                                                                <i class="fa fa-bar-chart-o"></i>
3460
                                                                            </div>
3461
                                                                            <div class="details">
3462
                                                                                <div class="number"> 12,5M$ </div>
3463
                                                                                <div class="desc"> Total Profit </div>
3464
                                                                            </div>
3465
                                                                            <a class="more" href="javascript:;"> View more
3466
                                                                                <i class="m-icon-swapright m-icon-white"></i>
3467
                                                                            </a>
3468
                                                                        </div> <code>class="dashboard-stat green-meadow"</code> </div>
3469
                                                                </div>
3470
                                                            </div>
3471
                                                        </div>
3472
                                                    </div>
3473
                                                    <div class="modal-footer">
3474
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
3475
                                                    </div>
3476
                                                </div>
3477
                                            </div>
3478
                                        </div>
3479
                                    </div>
3480
                                    <div class="col-md-2 col-sm-2 col-xs-6">
3481
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-seagreen">
3482
                                            <div class="color-view bg-green-seagreen bg-font-green-seagreen bold uppercase"> #1BA39C </div>
3483
                                            <div class="color-info bg-white c-font-14 sbold"> green-seagreen </div>
3484
                                        </div>
3485
                                        <div class="modal fade" id="demo_modal_green-seagreen">
3486
                                            <div class="modal-dialog modal-lg">
3487
                                                <div class="modal-content c-square">
3488
                                                    <div class="modal-header">
3489
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3490
                                                            <span aria-hidden="true">&times;</span>
3491
                                                        </button>
3492
                                                        <h4 class="modal-title bold uppercase font-green-seagreen">green-seagreen</h4>
3493
                                                    </div>
3494
                                                    <div class="modal-body">
3495
                                                        <div class="tabbable-line">
3496
                                                            <ul class="nav nav-tabs uppercase bold">
3497
                                                                <li class="active">
3498
                                                                    <a href="#green-seagreen_tab_1_content" data-toggle="tab">Typography</a>
3499
                                                                </li>
3500
                                                                <li>
3501
                                                                    <a href="#green-seagreen_tab_2_content" data-toggle="tab">Background & Border</a>
3502
                                                                </li>
3503
                                                                <li>
3504
                                                                    <a href="#green-seagreen_tab_3_content" data-toggle="tab">Buttons</a>
3505
                                                                </li>
3506
                                                                <li>
3507
                                                                    <a href="#green-seagreen_tab_4_content" data-toggle="tab">Components</a>
3508
                                                                </li>
3509
                                                            </ul>
3510
                                                            <div class="tab-content">
3511
                                                                <div class="tab-pane active" id="green-seagreen_tab_1_content">
3512
                                                                    <h4>Text font</h4>
3513
                                                                    <div style="margin: 10px 0 30px 0">
3514
                                                                        <span class="font-green-seagreen font-lg">Some sample text goes here...</span>
3515
                                                                        <br>
3516
                                                                        <span class="font-green-seagreen font-lg sbold">Some sample text goes here...</span>
3517
                                                                        <br>
3518
                                                                        <span class="font-green-seagreen font-lg bold uppercase">Some sample text goes here...</span>
3519
                                                                    </div>
3520
                                                                    <h4>Background matching text font</h4>
3521
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-seagreen">
3522
                                                                        <span class="bg-font-green-seagreen font-lg">Some sample text goes here...</span>
3523
                                                                        <br>
3524
                                                                        <span class="bg-font-green-seagreen font-lg sbold">Some sample text goes here...</span>
3525
                                                                        <br>
3526
                                                                        <span class="bg-font-green-seagreen font-lg bold uppercase">Some sample text goes here...</span>
3527
                                                                    </div>
3528
                                                                    <h4>Icon font</h4>
3529
                                                                    <div style="margin: 10px 0 30px 0">
3530
                                                                        <i class="font-green-seagreen font-lg icon-user"></i>&nbsp;
3531
                                                                        <i class="font-green-seagreen font-lg icon-settings"></i>&nbsp;
3532
                                                                        <i class="font-green-seagreen font-lg icon-calendar"></i>
3533
                                                                        <br>
3534
                                                                        <i class="font-green-seagreen font-lg fa fa-bar-chart-o"></i>&nbsp;
3535
                                                                        <i class="font-green-seagreen font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3536
                                                                        <i class="font-green-seagreen font-lg fa fa-cogs"></i>
3537
                                                                        <br>
3538
                                                                        <i class="font-green-seagreen font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3539
                                                                        <i class="font-green-seagreen font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3540
                                                                        <i class="font-green-seagreen font-lg glyphicon glyphicon-warning-sign"></i>
3541
                                                                        <br> </div>
3542
                                                                    <h4>Background matching icon font</h4>
3543
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-seagreen">
3544
                                                                        <i class="bg-font-green-seagreen font-lg icon-user"></i>&nbsp;
3545
                                                                        <i class="bg-font-green-seagreen font-lg icon-settings"></i>&nbsp;
3546
                                                                        <i class="bg-font-green-seagreen font-lg icon-calendar"></i>
3547
                                                                        <br>
3548
                                                                        <i class="bg-font-green-seagreen font-lg fa fa-bar-chart-o"></i>&nbsp;
3549
                                                                        <i class="bg-font-green-seagreen font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3550
                                                                        <i class="bg-font-green-seagreen font-lg fa fa-cogs"></i>
3551
                                                                        <br>
3552
                                                                        <i class="bg-font-green-seagreen font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3553
                                                                        <i class="bg-font-green-seagreen font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3554
                                                                        <i class="bg-font-green-seagreen font-lg glyphicon glyphicon-warning-sign"></i>
3555
                                                                        <br> </div>
3556
                                                                    <h4>Class usage</h4> <code>class="font-green-seagreen"</code> </div>
3557
                                                                <div class="tab-pane" id="green-seagreen_tab_2_content">
3558
                                                                    <div style="margin: 30px 0;">
3559
                                                                        <div class="border-green-seagreen margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green-seagreen"</code> </div>
3560
                                                                    <div style="margin: 30px 0;">
3561
                                                                        <div class="bg-green-seagreen bg-font-green-seagreen margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green-seagreen bg-font-green-seagreen"</code> </div>
3562
                                                                </div>
3563
                                                                <div class="tab-pane" id="green-seagreen_tab_3_content">
3564
                                                                    <div style="margin: 10px 0 30px 0">
3565
                                                                        <a href="#" class="btn uppercase green-seagreen">Button</a> &nbsp; <code>class="btn green-seagreen"</code> </div>
3566
                                                                    <div style="margin: 10px 0 30px 0">
3567
                                                                        <a href="#" class="btn sbold uppercase btn-outline green-seagreen">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green-seagreen"</code> </div>
3568
                                                                    <div style="margin: 10px 0 30px 0">
3569
                                                                        <a href="#" class="btn sbold uppercase btn-circle green-seagreen">Button</a> &nbsp; <code>class="btn btn-circle green-seagreen"</code> </div>
3570
                                                                </div>
3571
                                                                <div class="tab-pane" id="green-seagreen_tab_4_content">
3572
                                                                    <div style="margin: 10px 0 30px 0">
3573
                                                                        <h4>Statistic Widgets</h4>
3574
                                                                        <div class="dashboard-stat green-seagreen">
3575
                                                                            <div class="visual">
3576
                                                                                <i class="fa fa-bar-chart-o"></i>
3577
                                                                            </div>
3578
                                                                            <div class="details">
3579
                                                                                <div class="number"> 12,5M$ </div>
3580
                                                                                <div class="desc"> Total Profit </div>
3581
                                                                            </div>
3582
                                                                            <a class="more" href="javascript:;"> View more
3583
                                                                                <i class="m-icon-swapright m-icon-white"></i>
3584
                                                                            </a>
3585
                                                                        </div> <code>class="dashboard-stat green-seagreen"</code> </div>
3586
                                                                </div>
3587
                                                            </div>
3588
                                                        </div>
3589
                                                    </div>
3590
                                                    <div class="modal-footer">
3591
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
3592
                                                    </div>
3593
                                                </div>
3594
                                            </div>
3595
                                        </div>
3596
                                    </div>
3597
                                    <div class="col-md-2 col-sm-2 col-xs-6">
3598
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-turquoise">
3599
                                            <div class="color-view bg-green-turquoise bg-font-green-turquoise bold uppercase"> #36D7B7 </div>
3600
                                            <div class="color-info bg-white c-font-14 sbold"> green-turquoise </div>
3601
                                        </div>
3602
                                        <div class="modal fade" id="demo_modal_green-turquoise">
3603
                                            <div class="modal-dialog modal-lg">
3604
                                                <div class="modal-content c-square">
3605
                                                    <div class="modal-header">
3606
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3607
                                                            <span aria-hidden="true">&times;</span>
3608
                                                        </button>
3609
                                                        <h4 class="modal-title bold uppercase font-green-turquoise">green-turquoise</h4>
3610
                                                    </div>
3611
                                                    <div class="modal-body">
3612
                                                        <div class="tabbable-line">
3613
                                                            <ul class="nav nav-tabs uppercase bold">
3614
                                                                <li class="active">
3615
                                                                    <a href="#green-turquoise_tab_1_content" data-toggle="tab">Typography</a>
3616
                                                                </li>
3617
                                                                <li>
3618
                                                                    <a href="#green-turquoise_tab_2_content" data-toggle="tab">Background & Border</a>
3619
                                                                </li>
3620
                                                                <li>
3621
                                                                    <a href="#green-turquoise_tab_3_content" data-toggle="tab">Buttons</a>
3622
                                                                </li>
3623
                                                                <li>
3624
                                                                    <a href="#green-turquoise_tab_4_content" data-toggle="tab">Components</a>
3625
                                                                </li>
3626
                                                            </ul>
3627
                                                            <div class="tab-content">
3628
                                                                <div class="tab-pane active" id="green-turquoise_tab_1_content">
3629
                                                                    <h4>Text font</h4>
3630
                                                                    <div style="margin: 10px 0 30px 0">
3631
                                                                        <span class="font-green-turquoise font-lg">Some sample text goes here...</span>
3632
                                                                        <br>
3633
                                                                        <span class="font-green-turquoise font-lg sbold">Some sample text goes here...</span>
3634
                                                                        <br>
3635
                                                                        <span class="font-green-turquoise font-lg bold uppercase">Some sample text goes here...</span>
3636
                                                                    </div>
3637
                                                                    <h4>Background matching text font</h4>
3638
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-turquoise">
3639
                                                                        <span class="bg-font-green-turquoise font-lg">Some sample text goes here...</span>
3640
                                                                        <br>
3641
                                                                        <span class="bg-font-green-turquoise font-lg sbold">Some sample text goes here...</span>
3642
                                                                        <br>
3643
                                                                        <span class="bg-font-green-turquoise font-lg bold uppercase">Some sample text goes here...</span>
3644
                                                                    </div>
3645
                                                                    <h4>Icon font</h4>
3646
                                                                    <div style="margin: 10px 0 30px 0">
3647
                                                                        <i class="font-green-turquoise font-lg icon-user"></i>&nbsp;
3648
                                                                        <i class="font-green-turquoise font-lg icon-settings"></i>&nbsp;
3649
                                                                        <i class="font-green-turquoise font-lg icon-calendar"></i>
3650
                                                                        <br>
3651
                                                                        <i class="font-green-turquoise font-lg fa fa-bar-chart-o"></i>&nbsp;
3652
                                                                        <i class="font-green-turquoise font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3653
                                                                        <i class="font-green-turquoise font-lg fa fa-cogs"></i>
3654
                                                                        <br>
3655
                                                                        <i class="font-green-turquoise font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3656
                                                                        <i class="font-green-turquoise font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3657
                                                                        <i class="font-green-turquoise font-lg glyphicon glyphicon-warning-sign"></i>
3658
                                                                        <br> </div>
3659
                                                                    <h4>Background matching icon font</h4>
3660
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-turquoise">
3661
                                                                        <i class="bg-font-green-turquoise font-lg icon-user"></i>&nbsp;
3662
                                                                        <i class="bg-font-green-turquoise font-lg icon-settings"></i>&nbsp;
3663
                                                                        <i class="bg-font-green-turquoise font-lg icon-calendar"></i>
3664
                                                                        <br>
3665
                                                                        <i class="bg-font-green-turquoise font-lg fa fa-bar-chart-o"></i>&nbsp;
3666
                                                                        <i class="bg-font-green-turquoise font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3667
                                                                        <i class="bg-font-green-turquoise font-lg fa fa-cogs"></i>
3668
                                                                        <br>
3669
                                                                        <i class="bg-font-green-turquoise font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3670
                                                                        <i class="bg-font-green-turquoise font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3671
                                                                        <i class="bg-font-green-turquoise font-lg glyphicon glyphicon-warning-sign"></i>
3672
                                                                        <br> </div>
3673
                                                                    <h4>Class usage</h4> <code>class="font-green-turquoise"</code> </div>
3674
                                                                <div class="tab-pane" id="green-turquoise_tab_2_content">
3675
                                                                    <div style="margin: 30px 0;">
3676
                                                                        <div class="border-green-turquoise margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green-turquoise"</code> </div>
3677
                                                                    <div style="margin: 30px 0;">
3678
                                                                        <div class="bg-green-turquoise bg-font-green-turquoise margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green-turquoise bg-font-green-turquoise"</code> </div>
3679
                                                                </div>
3680
                                                                <div class="tab-pane" id="green-turquoise_tab_3_content">
3681
                                                                    <div style="margin: 10px 0 30px 0">
3682
                                                                        <a href="#" class="btn uppercase green-turquoise">Button</a> &nbsp; <code>class="btn green-turquoise"</code> </div>
3683
                                                                    <div style="margin: 10px 0 30px 0">
3684
                                                                        <a href="#" class="btn sbold uppercase btn-outline green-turquoise">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green-turquoise"</code> </div>
3685
                                                                    <div style="margin: 10px 0 30px 0">
3686
                                                                        <a href="#" class="btn sbold uppercase btn-circle green-turquoise">Button</a> &nbsp; <code>class="btn btn-circle green-turquoise"</code> </div>
3687
                                                                </div>
3688
                                                                <div class="tab-pane" id="green-turquoise_tab_4_content">
3689
                                                                    <div style="margin: 10px 0 30px 0">
3690
                                                                        <h4>Statistic Widgets</h4>
3691
                                                                        <div class="dashboard-stat green-turquoise">
3692
                                                                            <div class="visual">
3693
                                                                                <i class="fa fa-bar-chart-o"></i>
3694
                                                                            </div>
3695
                                                                            <div class="details">
3696
                                                                                <div class="number"> 12,5M$ </div>
3697
                                                                                <div class="desc"> Total Profit </div>
3698
                                                                            </div>
3699
                                                                            <a class="more" href="javascript:;"> View more
3700
                                                                                <i class="m-icon-swapright m-icon-white"></i>
3701
                                                                            </a>
3702
                                                                        </div> <code>class="dashboard-stat green-turquoise"</code> </div>
3703
                                                                </div>
3704
                                                            </div>
3705
                                                        </div>
3706
                                                    </div>
3707
                                                    <div class="modal-footer">
3708
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
3709
                                                    </div>
3710
                                                </div>
3711
                                            </div>
3712
                                        </div>
3713
                                    </div>
3714
                                    <div class="col-md-2 col-sm-2 col-xs-6">
3715
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-haze">
3716
                                            <div class="color-view bg-green-haze bg-font-green-haze bold uppercase"> #44b6ae </div>
3717
                                            <div class="color-info bg-white c-font-14 sbold"> green-haze </div>
3718
                                        </div>
3719
                                        <div class="modal fade" id="demo_modal_green-haze">
3720
                                            <div class="modal-dialog modal-lg">
3721
                                                <div class="modal-content c-square">
3722
                                                    <div class="modal-header">
3723
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3724
                                                            <span aria-hidden="true">&times;</span>
3725
                                                        </button>
3726
                                                        <h4 class="modal-title bold uppercase font-green-haze">green-haze</h4>
3727
                                                    </div>
3728
                                                    <div class="modal-body">
3729
                                                        <div class="tabbable-line">
3730
                                                            <ul class="nav nav-tabs uppercase bold">
3731
                                                                <li class="active">
3732
                                                                    <a href="#green-haze_tab_1_content" data-toggle="tab">Typography</a>
3733
                                                                </li>
3734
                                                                <li>
3735
                                                                    <a href="#green-haze_tab_2_content" data-toggle="tab">Background & Border</a>
3736
                                                                </li>
3737
                                                                <li>
3738
                                                                    <a href="#green-haze_tab_3_content" data-toggle="tab">Buttons</a>
3739
                                                                </li>
3740
                                                                <li>
3741
                                                                    <a href="#green-haze_tab_4_content" data-toggle="tab">Components</a>
3742
                                                                </li>
3743
                                                            </ul>
3744
                                                            <div class="tab-content">
3745
                                                                <div class="tab-pane active" id="green-haze_tab_1_content">
3746
                                                                    <h4>Text font</h4>
3747
                                                                    <div style="margin: 10px 0 30px 0">
3748
                                                                        <span class="font-green-haze font-lg">Some sample text goes here...</span>
3749
                                                                        <br>
3750
                                                                        <span class="font-green-haze font-lg sbold">Some sample text goes here...</span>
3751
                                                                        <br>
3752
                                                                        <span class="font-green-haze font-lg bold uppercase">Some sample text goes here...</span>
3753
                                                                    </div>
3754
                                                                    <h4>Background matching text font</h4>
3755
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-haze">
3756
                                                                        <span class="bg-font-green-haze font-lg">Some sample text goes here...</span>
3757
                                                                        <br>
3758
                                                                        <span class="bg-font-green-haze font-lg sbold">Some sample text goes here...</span>
3759
                                                                        <br>
3760
                                                                        <span class="bg-font-green-haze font-lg bold uppercase">Some sample text goes here...</span>
3761
                                                                    </div>
3762
                                                                    <h4>Icon font</h4>
3763
                                                                    <div style="margin: 10px 0 30px 0">
3764
                                                                        <i class="font-green-haze font-lg icon-user"></i>&nbsp;
3765
                                                                        <i class="font-green-haze font-lg icon-settings"></i>&nbsp;
3766
                                                                        <i class="font-green-haze font-lg icon-calendar"></i>
3767
                                                                        <br>
3768
                                                                        <i class="font-green-haze font-lg fa fa-bar-chart-o"></i>&nbsp;
3769
                                                                        <i class="font-green-haze font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3770
                                                                        <i class="font-green-haze font-lg fa fa-cogs"></i>
3771
                                                                        <br>
3772
                                                                        <i class="font-green-haze font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3773
                                                                        <i class="font-green-haze font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3774
                                                                        <i class="font-green-haze font-lg glyphicon glyphicon-warning-sign"></i>
3775
                                                                        <br> </div>
3776
                                                                    <h4>Background matching icon font</h4>
3777
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-haze">
3778
                                                                        <i class="bg-font-green-haze font-lg icon-user"></i>&nbsp;
3779
                                                                        <i class="bg-font-green-haze font-lg icon-settings"></i>&nbsp;
3780
                                                                        <i class="bg-font-green-haze font-lg icon-calendar"></i>
3781
                                                                        <br>
3782
                                                                        <i class="bg-font-green-haze font-lg fa fa-bar-chart-o"></i>&nbsp;
3783
                                                                        <i class="bg-font-green-haze font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3784
                                                                        <i class="bg-font-green-haze font-lg fa fa-cogs"></i>
3785
                                                                        <br>
3786
                                                                        <i class="bg-font-green-haze font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3787
                                                                        <i class="bg-font-green-haze font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3788
                                                                        <i class="bg-font-green-haze font-lg glyphicon glyphicon-warning-sign"></i>
3789
                                                                        <br> </div>
3790
                                                                    <h4>Class usage</h4> <code>class="font-green-haze"</code> </div>
3791
                                                                <div class="tab-pane" id="green-haze_tab_2_content">
3792
                                                                    <div style="margin: 30px 0;">
3793
                                                                        <div class="border-green-haze margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green-haze"</code> </div>
3794
                                                                    <div style="margin: 30px 0;">
3795
                                                                        <div class="bg-green-haze bg-font-green-haze margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green-haze bg-font-green-haze"</code> </div>
3796
                                                                </div>
3797
                                                                <div class="tab-pane" id="green-haze_tab_3_content">
3798
                                                                    <div style="margin: 10px 0 30px 0">
3799
                                                                        <a href="#" class="btn uppercase green-haze">Button</a> &nbsp; <code>class="btn green-haze"</code> </div>
3800
                                                                    <div style="margin: 10px 0 30px 0">
3801
                                                                        <a href="#" class="btn sbold uppercase btn-outline green-haze">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green-haze"</code> </div>
3802
                                                                    <div style="margin: 10px 0 30px 0">
3803
                                                                        <a href="#" class="btn sbold uppercase btn-circle green-haze">Button</a> &nbsp; <code>class="btn btn-circle green-haze"</code> </div>
3804
                                                                </div>
3805
                                                                <div class="tab-pane" id="green-haze_tab_4_content">
3806
                                                                    <div style="margin: 10px 0 30px 0">
3807
                                                                        <h4>Statistic Widgets</h4>
3808
                                                                        <div class="dashboard-stat green-haze">
3809
                                                                            <div class="visual">
3810
                                                                                <i class="fa fa-bar-chart-o"></i>
3811
                                                                            </div>
3812
                                                                            <div class="details">
3813
                                                                                <div class="number"> 12,5M$ </div>
3814
                                                                                <div class="desc"> Total Profit </div>
3815
                                                                            </div>
3816
                                                                            <a class="more" href="javascript:;"> View more
3817
                                                                                <i class="m-icon-swapright m-icon-white"></i>
3818
                                                                            </a>
3819
                                                                        </div> <code>class="dashboard-stat green-haze"</code> </div>
3820
                                                                </div>
3821
                                                            </div>
3822
                                                        </div>
3823
                                                    </div>
3824
                                                    <div class="modal-footer">
3825
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
3826
                                                    </div>
3827
                                                </div>
3828
                                            </div>
3829
                                        </div>
3830
                                    </div>
3831
                                </div>
3832
                                <div class="row">
3833
                                    <div class="col-md-2 col-sm-2 col-xs-6">
3834
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-jungle">
3835
                                            <div class="color-view bg-green-jungle bg-font-green-jungle bold uppercase"> #26C281 </div>
3836
                                            <div class="color-info bg-white c-font-14 sbold"> green-jungle </div>
3837
                                        </div>
3838
                                        <div class="modal fade" id="demo_modal_green-jungle">
3839
                                            <div class="modal-dialog modal-lg">
3840
                                                <div class="modal-content c-square">
3841
                                                    <div class="modal-header">
3842
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3843
                                                            <span aria-hidden="true">&times;</span>
3844
                                                        </button>
3845
                                                        <h4 class="modal-title bold uppercase font-green-jungle">green-jungle</h4>
3846
                                                    </div>
3847
                                                    <div class="modal-body">
3848
                                                        <div class="tabbable-line">
3849
                                                            <ul class="nav nav-tabs uppercase bold">
3850
                                                                <li class="active">
3851
                                                                    <a href="#green-jungle_tab_1_content" data-toggle="tab">Typography</a>
3852
                                                                </li>
3853
                                                                <li>
3854
                                                                    <a href="#green-jungle_tab_2_content" data-toggle="tab">Background & Border</a>
3855
                                                                </li>
3856
                                                                <li>
3857
                                                                    <a href="#green-jungle_tab_3_content" data-toggle="tab">Buttons</a>
3858
                                                                </li>
3859
                                                                <li>
3860
                                                                    <a href="#green-jungle_tab_4_content" data-toggle="tab">Components</a>
3861
                                                                </li>
3862
                                                            </ul>
3863
                                                            <div class="tab-content">
3864
                                                                <div class="tab-pane active" id="green-jungle_tab_1_content">
3865
                                                                    <h4>Text font</h4>
3866
                                                                    <div style="margin: 10px 0 30px 0">
3867
                                                                        <span class="font-green-jungle font-lg">Some sample text goes here...</span>
3868
                                                                        <br>
3869
                                                                        <span class="font-green-jungle font-lg sbold">Some sample text goes here...</span>
3870
                                                                        <br>
3871
                                                                        <span class="font-green-jungle font-lg bold uppercase">Some sample text goes here...</span>
3872
                                                                    </div>
3873
                                                                    <h4>Background matching text font</h4>
3874
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-jungle">
3875
                                                                        <span class="bg-font-green-jungle font-lg">Some sample text goes here...</span>
3876
                                                                        <br>
3877
                                                                        <span class="bg-font-green-jungle font-lg sbold">Some sample text goes here...</span>
3878
                                                                        <br>
3879
                                                                        <span class="bg-font-green-jungle font-lg bold uppercase">Some sample text goes here...</span>
3880
                                                                    </div>
3881
                                                                    <h4>Icon font</h4>
3882
                                                                    <div style="margin: 10px 0 30px 0">
3883
                                                                        <i class="font-green-jungle font-lg icon-user"></i>&nbsp;
3884
                                                                        <i class="font-green-jungle font-lg icon-settings"></i>&nbsp;
3885
                                                                        <i class="font-green-jungle font-lg icon-calendar"></i>
3886
                                                                        <br>
3887
                                                                        <i class="font-green-jungle font-lg fa fa-bar-chart-o"></i>&nbsp;
3888
                                                                        <i class="font-green-jungle font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3889
                                                                        <i class="font-green-jungle font-lg fa fa-cogs"></i>
3890
                                                                        <br>
3891
                                                                        <i class="font-green-jungle font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3892
                                                                        <i class="font-green-jungle font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3893
                                                                        <i class="font-green-jungle font-lg glyphicon glyphicon-warning-sign"></i>
3894
                                                                        <br> </div>
3895
                                                                    <h4>Background matching icon font</h4>
3896
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-jungle">
3897
                                                                        <i class="bg-font-green-jungle font-lg icon-user"></i>&nbsp;
3898
                                                                        <i class="bg-font-green-jungle font-lg icon-settings"></i>&nbsp;
3899
                                                                        <i class="bg-font-green-jungle font-lg icon-calendar"></i>
3900
                                                                        <br>
3901
                                                                        <i class="bg-font-green-jungle font-lg fa fa-bar-chart-o"></i>&nbsp;
3902
                                                                        <i class="bg-font-green-jungle font-lg fa fa-code-fork icon-settings"></i>&nbsp;
3903
                                                                        <i class="bg-font-green-jungle font-lg fa fa-cogs"></i>
3904
                                                                        <br>
3905
                                                                        <i class="bg-font-green-jungle font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
3906
                                                                        <i class="bg-font-green-jungle font-lg glyphicon glyphicon-leaf"></i>&nbsp;
3907
                                                                        <i class="bg-font-green-jungle font-lg glyphicon glyphicon-warning-sign"></i>
3908
                                                                        <br> </div>
3909
                                                                    <h4>Class usage</h4> <code>class="font-green-jungle"</code> </div>
3910
                                                                <div class="tab-pane" id="green-jungle_tab_2_content">
3911
                                                                    <div style="margin: 30px 0;">
3912
                                                                        <div class="border-green-jungle margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green-jungle"</code> </div>
3913
                                                                    <div style="margin: 30px 0;">
3914
                                                                        <div class="bg-green-jungle bg-font-green-jungle margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green-jungle bg-font-green-jungle"</code> </div>
3915
                                                                </div>
3916
                                                                <div class="tab-pane" id="green-jungle_tab_3_content">
3917
                                                                    <div style="margin: 10px 0 30px 0">
3918
                                                                        <a href="#" class="btn uppercase green-jungle">Button</a> &nbsp; <code>class="btn green-jungle"</code> </div>
3919
                                                                    <div style="margin: 10px 0 30px 0">
3920
                                                                        <a href="#" class="btn sbold uppercase btn-outline green-jungle">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green-jungle"</code> </div>
3921
                                                                    <div style="margin: 10px 0 30px 0">
3922
                                                                        <a href="#" class="btn sbold uppercase btn-circle green-jungle">Button</a> &nbsp; <code>class="btn btn-circle green-jungle"</code> </div>
3923
                                                                </div>
3924
                                                                <div class="tab-pane" id="green-jungle_tab_4_content">
3925
                                                                    <div style="margin: 10px 0 30px 0">
3926
                                                                        <h4>Statistic Widgets</h4>
3927
                                                                        <div class="dashboard-stat green-jungle">
3928
                                                                            <div class="visual">
3929
                                                                                <i class="fa fa-bar-chart-o"></i>
3930
                                                                            </div>
3931
                                                                            <div class="details">
3932
                                                                                <div class="number"> 12,5M$ </div>
3933
                                                                                <div class="desc"> Total Profit </div>
3934
                                                                            </div>
3935
                                                                            <a class="more" href="javascript:;"> View more
3936
                                                                                <i class="m-icon-swapright m-icon-white"></i>
3937
                                                                            </a>
3938
                                                                        </div> <code>class="dashboard-stat green-jungle"</code> </div>
3939
                                                                </div>
3940
                                                            </div>
3941
                                                        </div>
3942
                                                    </div>
3943
                                                    <div class="modal-footer">
3944
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
3945
                                                    </div>
3946
                                                </div>
3947
                                            </div>
3948
                                        </div>
3949
                                    </div>
3950
                                    <div class="col-md-2 col-sm-2 col-xs-6">
3951
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-soft">
3952
                                            <div class="color-view bg-green-soft bg-font-green-soft bold uppercase"> #3faba4 </div>
3953
                                            <div class="color-info bg-white c-font-14 sbold"> green-soft </div>
3954
                                        </div>
3955
                                        <div class="modal fade" id="demo_modal_green-soft">
3956
                                            <div class="modal-dialog modal-lg">
3957
                                                <div class="modal-content c-square">
3958
                                                    <div class="modal-header">
3959
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
3960
                                                            <span aria-hidden="true">&times;</span>
3961
                                                        </button>
3962
                                                        <h4 class="modal-title bold uppercase font-green-soft">green-soft</h4>
3963
                                                    </div>
3964
                                                    <div class="modal-body">
3965
                                                        <div class="tabbable-line">
3966
                                                            <ul class="nav nav-tabs uppercase bold">
3967
                                                                <li class="active">
3968
                                                                    <a href="#green-soft_tab_1_content" data-toggle="tab">Typography</a>
3969
                                                                </li>
3970
                                                                <li>
3971
                                                                    <a href="#green-soft_tab_2_content" data-toggle="tab">Background & Border</a>
3972
                                                                </li>
3973
                                                                <li>
3974
                                                                    <a href="#green-soft_tab_3_content" data-toggle="tab">Buttons</a>
3975
                                                                </li>
3976
                                                                <li>
3977
                                                                    <a href="#green-soft_tab_4_content" data-toggle="tab">Components</a>
3978
                                                                </li>
3979
                                                            </ul>
3980
                                                            <div class="tab-content">
3981
                                                                <div class="tab-pane active" id="green-soft_tab_1_content">
3982
                                                                    <h4>Text font</h4>
3983
                                                                    <div style="margin: 10px 0 30px 0">
3984
                                                                        <span class="font-green-soft font-lg">Some sample text goes here...</span>
3985
                                                                        <br>
3986
                                                                        <span class="font-green-soft font-lg sbold">Some sample text goes here...</span>
3987
                                                                        <br>
3988
                                                                        <span class="font-green-soft font-lg bold uppercase">Some sample text goes here...</span>
3989
                                                                    </div>
3990
                                                                    <h4>Background matching text font</h4>
3991
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-soft">
3992
                                                                        <span class="bg-font-green-soft font-lg">Some sample text goes here...</span>
3993
                                                                        <br>
3994
                                                                        <span class="bg-font-green-soft font-lg sbold">Some sample text goes here...</span>
3995
                                                                        <br>
3996
                                                                        <span class="bg-font-green-soft font-lg bold uppercase">Some sample text goes here...</span>
3997
                                                                    </div>
3998
                                                                    <h4>Icon font</h4>
3999
                                                                    <div style="margin: 10px 0 30px 0">
4000
                                                                        <i class="font-green-soft font-lg icon-user"></i>&nbsp;
4001
                                                                        <i class="font-green-soft font-lg icon-settings"></i>&nbsp;
4002
                                                                        <i class="font-green-soft font-lg icon-calendar"></i>
4003
                                                                        <br>
4004
                                                                        <i class="font-green-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
4005
                                                                        <i class="font-green-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4006
                                                                        <i class="font-green-soft font-lg fa fa-cogs"></i>
4007
                                                                        <br>
4008
                                                                        <i class="font-green-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4009
                                                                        <i class="font-green-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4010
                                                                        <i class="font-green-soft font-lg glyphicon glyphicon-warning-sign"></i>
4011
                                                                        <br> </div>
4012
                                                                    <h4>Background matching icon font</h4>
4013
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-soft">
4014
                                                                        <i class="bg-font-green-soft font-lg icon-user"></i>&nbsp;
4015
                                                                        <i class="bg-font-green-soft font-lg icon-settings"></i>&nbsp;
4016
                                                                        <i class="bg-font-green-soft font-lg icon-calendar"></i>
4017
                                                                        <br>
4018
                                                                        <i class="bg-font-green-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
4019
                                                                        <i class="bg-font-green-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4020
                                                                        <i class="bg-font-green-soft font-lg fa fa-cogs"></i>
4021
                                                                        <br>
4022
                                                                        <i class="bg-font-green-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4023
                                                                        <i class="bg-font-green-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4024
                                                                        <i class="bg-font-green-soft font-lg glyphicon glyphicon-warning-sign"></i>
4025
                                                                        <br> </div>
4026
                                                                    <h4>Class usage</h4> <code>class="font-green-soft"</code> </div>
4027
                                                                <div class="tab-pane" id="green-soft_tab_2_content">
4028
                                                                    <div style="margin: 30px 0;">
4029
                                                                        <div class="border-green-soft margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green-soft"</code> </div>
4030
                                                                    <div style="margin: 30px 0;">
4031
                                                                        <div class="bg-green-soft bg-font-green-soft margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green-soft bg-font-green-soft"</code> </div>
4032
                                                                </div>
4033
                                                                <div class="tab-pane" id="green-soft_tab_3_content">
4034
                                                                    <div style="margin: 10px 0 30px 0">
4035
                                                                        <a href="#" class="btn uppercase green-soft">Button</a> &nbsp; <code>class="btn green-soft"</code> </div>
4036
                                                                    <div style="margin: 10px 0 30px 0">
4037
                                                                        <a href="#" class="btn sbold uppercase btn-outline green-soft">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green-soft"</code> </div>
4038
                                                                    <div style="margin: 10px 0 30px 0">
4039
                                                                        <a href="#" class="btn sbold uppercase btn-circle green-soft">Button</a> &nbsp; <code>class="btn btn-circle green-soft"</code> </div>
4040
                                                                </div>
4041
                                                                <div class="tab-pane" id="green-soft_tab_4_content">
4042
                                                                    <div style="margin: 10px 0 30px 0">
4043
                                                                        <h4>Statistic Widgets</h4>
4044
                                                                        <div class="dashboard-stat green-soft">
4045
                                                                            <div class="visual">
4046
                                                                                <i class="fa fa-bar-chart-o"></i>
4047
                                                                            </div>
4048
                                                                            <div class="details">
4049
                                                                                <div class="number"> 12,5M$ </div>
4050
                                                                                <div class="desc"> Total Profit </div>
4051
                                                                            </div>
4052
                                                                            <a class="more" href="javascript:;"> View more
4053
                                                                                <i class="m-icon-swapright m-icon-white"></i>
4054
                                                                            </a>
4055
                                                                        </div> <code>class="dashboard-stat green-soft"</code> </div>
4056
                                                                </div>
4057
                                                            </div>
4058
                                                        </div>
4059
                                                    </div>
4060
                                                    <div class="modal-footer">
4061
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
4062
                                                    </div>
4063
                                                </div>
4064
                                            </div>
4065
                                        </div>
4066
                                    </div>
4067
                                    <div class="col-md-2 col-sm-2 col-xs-6">
4068
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-dark">
4069
                                            <div class="color-view bg-green-dark bg-font-green-dark bold uppercase"> #4DB3A2 </div>
4070
                                            <div class="color-info bg-white c-font-14 sbold"> green-dark </div>
4071
                                        </div>
4072
                                        <div class="modal fade" id="demo_modal_green-dark">
4073
                                            <div class="modal-dialog modal-lg">
4074
                                                <div class="modal-content c-square">
4075
                                                    <div class="modal-header">
4076
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
4077
                                                            <span aria-hidden="true">&times;</span>
4078
                                                        </button>
4079
                                                        <h4 class="modal-title bold uppercase font-green-dark">green-dark</h4>
4080
                                                    </div>
4081
                                                    <div class="modal-body">
4082
                                                        <div class="tabbable-line">
4083
                                                            <ul class="nav nav-tabs uppercase bold">
4084
                                                                <li class="active">
4085
                                                                    <a href="#green-dark_tab_1_content" data-toggle="tab">Typography</a>
4086
                                                                </li>
4087
                                                                <li>
4088
                                                                    <a href="#green-dark_tab_2_content" data-toggle="tab">Background & Border</a>
4089
                                                                </li>
4090
                                                                <li>
4091
                                                                    <a href="#green-dark_tab_3_content" data-toggle="tab">Buttons</a>
4092
                                                                </li>
4093
                                                                <li>
4094
                                                                    <a href="#green-dark_tab_4_content" data-toggle="tab">Components</a>
4095
                                                                </li>
4096
                                                            </ul>
4097
                                                            <div class="tab-content">
4098
                                                                <div class="tab-pane active" id="green-dark_tab_1_content">
4099
                                                                    <h4>Text font</h4>
4100
                                                                    <div style="margin: 10px 0 30px 0">
4101
                                                                        <span class="font-green-dark font-lg">Some sample text goes here...</span>
4102
                                                                        <br>
4103
                                                                        <span class="font-green-dark font-lg sbold">Some sample text goes here...</span>
4104
                                                                        <br>
4105
                                                                        <span class="font-green-dark font-lg bold uppercase">Some sample text goes here...</span>
4106
                                                                    </div>
4107
                                                                    <h4>Background matching text font</h4>
4108
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-dark">
4109
                                                                        <span class="bg-font-green-dark font-lg">Some sample text goes here...</span>
4110
                                                                        <br>
4111
                                                                        <span class="bg-font-green-dark font-lg sbold">Some sample text goes here...</span>
4112
                                                                        <br>
4113
                                                                        <span class="bg-font-green-dark font-lg bold uppercase">Some sample text goes here...</span>
4114
                                                                    </div>
4115
                                                                    <h4>Icon font</h4>
4116
                                                                    <div style="margin: 10px 0 30px 0">
4117
                                                                        <i class="font-green-dark font-lg icon-user"></i>&nbsp;
4118
                                                                        <i class="font-green-dark font-lg icon-settings"></i>&nbsp;
4119
                                                                        <i class="font-green-dark font-lg icon-calendar"></i>
4120
                                                                        <br>
4121
                                                                        <i class="font-green-dark font-lg fa fa-bar-chart-o"></i>&nbsp;
4122
                                                                        <i class="font-green-dark font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4123
                                                                        <i class="font-green-dark font-lg fa fa-cogs"></i>
4124
                                                                        <br>
4125
                                                                        <i class="font-green-dark font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4126
                                                                        <i class="font-green-dark font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4127
                                                                        <i class="font-green-dark font-lg glyphicon glyphicon-warning-sign"></i>
4128
                                                                        <br> </div>
4129
                                                                    <h4>Background matching icon font</h4>
4130
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-dark">
4131
                                                                        <i class="bg-font-green-dark font-lg icon-user"></i>&nbsp;
4132
                                                                        <i class="bg-font-green-dark font-lg icon-settings"></i>&nbsp;
4133
                                                                        <i class="bg-font-green-dark font-lg icon-calendar"></i>
4134
                                                                        <br>
4135
                                                                        <i class="bg-font-green-dark font-lg fa fa-bar-chart-o"></i>&nbsp;
4136
                                                                        <i class="bg-font-green-dark font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4137
                                                                        <i class="bg-font-green-dark font-lg fa fa-cogs"></i>
4138
                                                                        <br>
4139
                                                                        <i class="bg-font-green-dark font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4140
                                                                        <i class="bg-font-green-dark font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4141
                                                                        <i class="bg-font-green-dark font-lg glyphicon glyphicon-warning-sign"></i>
4142
                                                                        <br> </div>
4143
                                                                    <h4>Class usage</h4> <code>class="font-green-dark"</code> </div>
4144
                                                                <div class="tab-pane" id="green-dark_tab_2_content">
4145
                                                                    <div style="margin: 30px 0;">
4146
                                                                        <div class="border-green-dark margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green-dark"</code> </div>
4147
                                                                    <div style="margin: 30px 0;">
4148
                                                                        <div class="bg-green-dark bg-font-green-dark margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green-dark bg-font-green-dark"</code> </div>
4149
                                                                </div>
4150
                                                                <div class="tab-pane" id="green-dark_tab_3_content">
4151
                                                                    <div style="margin: 10px 0 30px 0">
4152
                                                                        <a href="#" class="btn uppercase green-dark">Button</a> &nbsp; <code>class="btn green-dark"</code> </div>
4153
                                                                    <div style="margin: 10px 0 30px 0">
4154
                                                                        <a href="#" class="btn sbold uppercase btn-outline green-dark">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green-dark"</code> </div>
4155
                                                                    <div style="margin: 10px 0 30px 0">
4156
                                                                        <a href="#" class="btn sbold uppercase btn-circle green-dark">Button</a> &nbsp; <code>class="btn btn-circle green-dark"</code> </div>
4157
                                                                </div>
4158
                                                                <div class="tab-pane" id="green-dark_tab_4_content">
4159
                                                                    <div style="margin: 10px 0 30px 0">
4160
                                                                        <h4>Statistic Widgets</h4>
4161
                                                                        <div class="dashboard-stat green-dark">
4162
                                                                            <div class="visual">
4163
                                                                                <i class="fa fa-bar-chart-o"></i>
4164
                                                                            </div>
4165
                                                                            <div class="details">
4166
                                                                                <div class="number"> 12,5M$ </div>
4167
                                                                                <div class="desc"> Total Profit </div>
4168
                                                                            </div>
4169
                                                                            <a class="more" href="javascript:;"> View more
4170
                                                                                <i class="m-icon-swapright m-icon-white"></i>
4171
                                                                            </a>
4172
                                                                        </div> <code>class="dashboard-stat green-dark"</code> </div>
4173
                                                                </div>
4174
                                                            </div>
4175
                                                        </div>
4176
                                                    </div>
4177
                                                    <div class="modal-footer">
4178
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
4179
                                                    </div>
4180
                                                </div>
4181
                                            </div>
4182
                                        </div>
4183
                                    </div>
4184
                                    <div class="col-md-2 col-sm-2 col-xs-6">
4185
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-sharp">
4186
                                            <div class="color-view bg-green-sharp bg-font-green-sharp bold uppercase"> #2ab4c0 </div>
4187
                                            <div class="color-info bg-white c-font-14 sbold"> green-sharp </div>
4188
                                        </div>
4189
                                        <div class="modal fade" id="demo_modal_green-sharp">
4190
                                            <div class="modal-dialog modal-lg">
4191
                                                <div class="modal-content c-square">
4192
                                                    <div class="modal-header">
4193
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
4194
                                                            <span aria-hidden="true">&times;</span>
4195
                                                        </button>
4196
                                                        <h4 class="modal-title bold uppercase font-green-sharp">green-sharp</h4>
4197
                                                    </div>
4198
                                                    <div class="modal-body">
4199
                                                        <div class="tabbable-line">
4200
                                                            <ul class="nav nav-tabs uppercase bold">
4201
                                                                <li class="active">
4202
                                                                    <a href="#green-sharp_tab_1_content" data-toggle="tab">Typography</a>
4203
                                                                </li>
4204
                                                                <li>
4205
                                                                    <a href="#green-sharp_tab_2_content" data-toggle="tab">Background & Border</a>
4206
                                                                </li>
4207
                                                                <li>
4208
                                                                    <a href="#green-sharp_tab_3_content" data-toggle="tab">Buttons</a>
4209
                                                                </li>
4210
                                                                <li>
4211
                                                                    <a href="#green-sharp_tab_4_content" data-toggle="tab">Components</a>
4212
                                                                </li>
4213
                                                            </ul>
4214
                                                            <div class="tab-content">
4215
                                                                <div class="tab-pane active" id="green-sharp_tab_1_content">
4216
                                                                    <h4>Text font</h4>
4217
                                                                    <div style="margin: 10px 0 30px 0">
4218
                                                                        <span class="font-green-sharp font-lg">Some sample text goes here...</span>
4219
                                                                        <br>
4220
                                                                        <span class="font-green-sharp font-lg sbold">Some sample text goes here...</span>
4221
                                                                        <br>
4222
                                                                        <span class="font-green-sharp font-lg bold uppercase">Some sample text goes here...</span>
4223
                                                                    </div>
4224
                                                                    <h4>Background matching text font</h4>
4225
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-sharp">
4226
                                                                        <span class="bg-font-green-sharp font-lg">Some sample text goes here...</span>
4227
                                                                        <br>
4228
                                                                        <span class="bg-font-green-sharp font-lg sbold">Some sample text goes here...</span>
4229
                                                                        <br>
4230
                                                                        <span class="bg-font-green-sharp font-lg bold uppercase">Some sample text goes here...</span>
4231
                                                                    </div>
4232
                                                                    <h4>Icon font</h4>
4233
                                                                    <div style="margin: 10px 0 30px 0">
4234
                                                                        <i class="font-green-sharp font-lg icon-user"></i>&nbsp;
4235
                                                                        <i class="font-green-sharp font-lg icon-settings"></i>&nbsp;
4236
                                                                        <i class="font-green-sharp font-lg icon-calendar"></i>
4237
                                                                        <br>
4238
                                                                        <i class="font-green-sharp font-lg fa fa-bar-chart-o"></i>&nbsp;
4239
                                                                        <i class="font-green-sharp font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4240
                                                                        <i class="font-green-sharp font-lg fa fa-cogs"></i>
4241
                                                                        <br>
4242
                                                                        <i class="font-green-sharp font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4243
                                                                        <i class="font-green-sharp font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4244
                                                                        <i class="font-green-sharp font-lg glyphicon glyphicon-warning-sign"></i>
4245
                                                                        <br> </div>
4246
                                                                    <h4>Background matching icon font</h4>
4247
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-sharp">
4248
                                                                        <i class="bg-font-green-sharp font-lg icon-user"></i>&nbsp;
4249
                                                                        <i class="bg-font-green-sharp font-lg icon-settings"></i>&nbsp;
4250
                                                                        <i class="bg-font-green-sharp font-lg icon-calendar"></i>
4251
                                                                        <br>
4252
                                                                        <i class="bg-font-green-sharp font-lg fa fa-bar-chart-o"></i>&nbsp;
4253
                                                                        <i class="bg-font-green-sharp font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4254
                                                                        <i class="bg-font-green-sharp font-lg fa fa-cogs"></i>
4255
                                                                        <br>
4256
                                                                        <i class="bg-font-green-sharp font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4257
                                                                        <i class="bg-font-green-sharp font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4258
                                                                        <i class="bg-font-green-sharp font-lg glyphicon glyphicon-warning-sign"></i>
4259
                                                                        <br> </div>
4260
                                                                    <h4>Class usage</h4> <code>class="font-green-sharp"</code> </div>
4261
                                                                <div class="tab-pane" id="green-sharp_tab_2_content">
4262
                                                                    <div style="margin: 30px 0;">
4263
                                                                        <div class="border-green-sharp margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green-sharp"</code> </div>
4264
                                                                    <div style="margin: 30px 0;">
4265
                                                                        <div class="bg-green-sharp bg-font-green-sharp margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green-sharp bg-font-green-sharp"</code> </div>
4266
                                                                </div>
4267
                                                                <div class="tab-pane" id="green-sharp_tab_3_content">
4268
                                                                    <div style="margin: 10px 0 30px 0">
4269
                                                                        <a href="#" class="btn uppercase green-sharp">Button</a> &nbsp; <code>class="btn green-sharp"</code> </div>
4270
                                                                    <div style="margin: 10px 0 30px 0">
4271
                                                                        <a href="#" class="btn sbold uppercase btn-outline green-sharp">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green-sharp"</code> </div>
4272
                                                                    <div style="margin: 10px 0 30px 0">
4273
                                                                        <a href="#" class="btn sbold uppercase btn-circle green-sharp">Button</a> &nbsp; <code>class="btn btn-circle green-sharp"</code> </div>
4274
                                                                </div>
4275
                                                                <div class="tab-pane" id="green-sharp_tab_4_content">
4276
                                                                    <div style="margin: 10px 0 30px 0">
4277
                                                                        <h4>Statistic Widgets</h4>
4278
                                                                        <div class="dashboard-stat green-sharp">
4279
                                                                            <div class="visual">
4280
                                                                                <i class="fa fa-bar-chart-o"></i>
4281
                                                                            </div>
4282
                                                                            <div class="details">
4283
                                                                                <div class="number"> 12,5M$ </div>
4284
                                                                                <div class="desc"> Total Profit </div>
4285
                                                                            </div>
4286
                                                                            <a class="more" href="javascript:;"> View more
4287
                                                                                <i class="m-icon-swapright m-icon-white"></i>
4288
                                                                            </a>
4289
                                                                        </div> <code>class="dashboard-stat green-sharp"</code> </div>
4290
                                                                </div>
4291
                                                            </div>
4292
                                                        </div>
4293
                                                    </div>
4294
                                                    <div class="modal-footer">
4295
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
4296
                                                    </div>
4297
                                                </div>
4298
                                            </div>
4299
                                        </div>
4300
                                    </div>
4301
                                    <div class="col-md-2 col-sm-2 col-xs-6">
4302
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_green-steel">
4303
                                            <div class="color-view bg-green-steel bg-font-green-steel bold uppercase"> #29b4b6 </div>
4304
                                            <div class="color-info bg-white c-font-14 sbold"> green-steel </div>
4305
                                        </div>
4306
                                        <div class="modal fade" id="demo_modal_green-steel">
4307
                                            <div class="modal-dialog modal-lg">
4308
                                                <div class="modal-content c-square">
4309
                                                    <div class="modal-header">
4310
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
4311
                                                            <span aria-hidden="true">&times;</span>
4312
                                                        </button>
4313
                                                        <h4 class="modal-title bold uppercase font-green-steel">green-steel</h4>
4314
                                                    </div>
4315
                                                    <div class="modal-body">
4316
                                                        <div class="tabbable-line">
4317
                                                            <ul class="nav nav-tabs uppercase bold">
4318
                                                                <li class="active">
4319
                                                                    <a href="#green-steel_tab_1_content" data-toggle="tab">Typography</a>
4320
                                                                </li>
4321
                                                                <li>
4322
                                                                    <a href="#green-steel_tab_2_content" data-toggle="tab">Background & Border</a>
4323
                                                                </li>
4324
                                                                <li>
4325
                                                                    <a href="#green-steel_tab_3_content" data-toggle="tab">Buttons</a>
4326
                                                                </li>
4327
                                                                <li>
4328
                                                                    <a href="#green-steel_tab_4_content" data-toggle="tab">Components</a>
4329
                                                                </li>
4330
                                                            </ul>
4331
                                                            <div class="tab-content">
4332
                                                                <div class="tab-pane active" id="green-steel_tab_1_content">
4333
                                                                    <h4>Text font</h4>
4334
                                                                    <div style="margin: 10px 0 30px 0">
4335
                                                                        <span class="font-green-steel font-lg">Some sample text goes here...</span>
4336
                                                                        <br>
4337
                                                                        <span class="font-green-steel font-lg sbold">Some sample text goes here...</span>
4338
                                                                        <br>
4339
                                                                        <span class="font-green-steel font-lg bold uppercase">Some sample text goes here...</span>
4340
                                                                    </div>
4341
                                                                    <h4>Background matching text font</h4>
4342
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-steel">
4343
                                                                        <span class="bg-font-green-steel font-lg">Some sample text goes here...</span>
4344
                                                                        <br>
4345
                                                                        <span class="bg-font-green-steel font-lg sbold">Some sample text goes here...</span>
4346
                                                                        <br>
4347
                                                                        <span class="bg-font-green-steel font-lg bold uppercase">Some sample text goes here...</span>
4348
                                                                    </div>
4349
                                                                    <h4>Icon font</h4>
4350
                                                                    <div style="margin: 10px 0 30px 0">
4351
                                                                        <i class="font-green-steel font-lg icon-user"></i>&nbsp;
4352
                                                                        <i class="font-green-steel font-lg icon-settings"></i>&nbsp;
4353
                                                                        <i class="font-green-steel font-lg icon-calendar"></i>
4354
                                                                        <br>
4355
                                                                        <i class="font-green-steel font-lg fa fa-bar-chart-o"></i>&nbsp;
4356
                                                                        <i class="font-green-steel font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4357
                                                                        <i class="font-green-steel font-lg fa fa-cogs"></i>
4358
                                                                        <br>
4359
                                                                        <i class="font-green-steel font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4360
                                                                        <i class="font-green-steel font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4361
                                                                        <i class="font-green-steel font-lg glyphicon glyphicon-warning-sign"></i>
4362
                                                                        <br> </div>
4363
                                                                    <h4>Background matching icon font</h4>
4364
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-green-steel">
4365
                                                                        <i class="bg-font-green-steel font-lg icon-user"></i>&nbsp;
4366
                                                                        <i class="bg-font-green-steel font-lg icon-settings"></i>&nbsp;
4367
                                                                        <i class="bg-font-green-steel font-lg icon-calendar"></i>
4368
                                                                        <br>
4369
                                                                        <i class="bg-font-green-steel font-lg fa fa-bar-chart-o"></i>&nbsp;
4370
                                                                        <i class="bg-font-green-steel font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4371
                                                                        <i class="bg-font-green-steel font-lg fa fa-cogs"></i>
4372
                                                                        <br>
4373
                                                                        <i class="bg-font-green-steel font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4374
                                                                        <i class="bg-font-green-steel font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4375
                                                                        <i class="bg-font-green-steel font-lg glyphicon glyphicon-warning-sign"></i>
4376
                                                                        <br> </div>
4377
                                                                    <h4>Class usage</h4> <code>class="font-green-steel"</code> </div>
4378
                                                                <div class="tab-pane" id="green-steel_tab_2_content">
4379
                                                                    <div style="margin: 30px 0;">
4380
                                                                        <div class="border-green-steel margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-green-steel"</code> </div>
4381
                                                                    <div style="margin: 30px 0;">
4382
                                                                        <div class="bg-green-steel bg-font-green-steel margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-green-steel bg-font-green-steel"</code> </div>
4383
                                                                </div>
4384
                                                                <div class="tab-pane" id="green-steel_tab_3_content">
4385
                                                                    <div style="margin: 10px 0 30px 0">
4386
                                                                        <a href="#" class="btn uppercase green-steel">Button</a> &nbsp; <code>class="btn green-steel"</code> </div>
4387
                                                                    <div style="margin: 10px 0 30px 0">
4388
                                                                        <a href="#" class="btn sbold uppercase btn-outline green-steel">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-green-steel"</code> </div>
4389
                                                                    <div style="margin: 10px 0 30px 0">
4390
                                                                        <a href="#" class="btn sbold uppercase btn-circle green-steel">Button</a> &nbsp; <code>class="btn btn-circle green-steel"</code> </div>
4391
                                                                </div>
4392
                                                                <div class="tab-pane" id="green-steel_tab_4_content">
4393
                                                                    <div style="margin: 10px 0 30px 0">
4394
                                                                        <h4>Statistic Widgets</h4>
4395
                                                                        <div class="dashboard-stat green-steel">
4396
                                                                            <div class="visual">
4397
                                                                                <i class="fa fa-bar-chart-o"></i>
4398
                                                                            </div>
4399
                                                                            <div class="details">
4400
                                                                                <div class="number"> 12,5M$ </div>
4401
                                                                                <div class="desc"> Total Profit </div>
4402
                                                                            </div>
4403
                                                                            <a class="more" href="javascript:;"> View more
4404
                                                                                <i class="m-icon-swapright m-icon-white"></i>
4405
                                                                            </a>
4406
                                                                        </div> <code>class="dashboard-stat green-steel"</code> </div>
4407
                                                                </div>
4408
                                                            </div>
4409
                                                        </div>
4410
                                                    </div>
4411
                                                    <div class="modal-footer">
4412
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
4413
                                                    </div>
4414
                                                </div>
4415
                                            </div>
4416
                                        </div>
4417
                                    </div>
4418
                                    <div class="col-md-2 col-sm-2 col-xs-6">
4419
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey">
4420
                                            <div class="color-view bg-grey bg-font-grey bold uppercase"> #E5E5E5 </div>
4421
                                            <div class="color-info bg-white c-font-14 sbold"> grey </div>
4422
                                        </div>
4423
                                        <div class="modal fade" id="demo_modal_grey">
4424
                                            <div class="modal-dialog modal-lg">
4425
                                                <div class="modal-content c-square">
4426
                                                    <div class="modal-header">
4427
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
4428
                                                            <span aria-hidden="true">&times;</span>
4429
                                                        </button>
4430
                                                        <h4 class="modal-title bold uppercase font-grey">grey</h4>
4431
                                                    </div>
4432
                                                    <div class="modal-body">
4433
                                                        <div class="tabbable-line">
4434
                                                            <ul class="nav nav-tabs uppercase bold">
4435
                                                                <li class="active">
4436
                                                                    <a href="#grey_tab_1_content" data-toggle="tab">Typography</a>
4437
                                                                </li>
4438
                                                                <li>
4439
                                                                    <a href="#grey_tab_2_content" data-toggle="tab">Background & Border</a>
4440
                                                                </li>
4441
                                                                <li>
4442
                                                                    <a href="#grey_tab_3_content" data-toggle="tab">Buttons</a>
4443
                                                                </li>
4444
                                                                <li>
4445
                                                                    <a href="#grey_tab_4_content" data-toggle="tab">Components</a>
4446
                                                                </li>
4447
                                                            </ul>
4448
                                                            <div class="tab-content">
4449
                                                                <div class="tab-pane active" id="grey_tab_1_content">
4450
                                                                    <h4>Text font</h4>
4451
                                                                    <div style="margin: 10px 0 30px 0">
4452
                                                                        <span class="font-grey font-lg">Some sample text goes here...</span>
4453
                                                                        <br>
4454
                                                                        <span class="font-grey font-lg sbold">Some sample text goes here...</span>
4455
                                                                        <br>
4456
                                                                        <span class="font-grey font-lg bold uppercase">Some sample text goes here...</span>
4457
                                                                    </div>
4458
                                                                    <h4>Background matching text font</h4>
4459
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey">
4460
                                                                        <span class="bg-font-grey font-lg">Some sample text goes here...</span>
4461
                                                                        <br>
4462
                                                                        <span class="bg-font-grey font-lg sbold">Some sample text goes here...</span>
4463
                                                                        <br>
4464
                                                                        <span class="bg-font-grey font-lg bold uppercase">Some sample text goes here...</span>
4465
                                                                    </div>
4466
                                                                    <h4>Icon font</h4>
4467
                                                                    <div style="margin: 10px 0 30px 0">
4468
                                                                        <i class="font-grey font-lg icon-user"></i>&nbsp;
4469
                                                                        <i class="font-grey font-lg icon-settings"></i>&nbsp;
4470
                                                                        <i class="font-grey font-lg icon-calendar"></i>
4471
                                                                        <br>
4472
                                                                        <i class="font-grey font-lg fa fa-bar-chart-o"></i>&nbsp;
4473
                                                                        <i class="font-grey font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4474
                                                                        <i class="font-grey font-lg fa fa-cogs"></i>
4475
                                                                        <br>
4476
                                                                        <i class="font-grey font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4477
                                                                        <i class="font-grey font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4478
                                                                        <i class="font-grey font-lg glyphicon glyphicon-warning-sign"></i>
4479
                                                                        <br> </div>
4480
                                                                    <h4>Background matching icon font</h4>
4481
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey">
4482
                                                                        <i class="bg-font-grey font-lg icon-user"></i>&nbsp;
4483
                                                                        <i class="bg-font-grey font-lg icon-settings"></i>&nbsp;
4484
                                                                        <i class="bg-font-grey font-lg icon-calendar"></i>
4485
                                                                        <br>
4486
                                                                        <i class="bg-font-grey font-lg fa fa-bar-chart-o"></i>&nbsp;
4487
                                                                        <i class="bg-font-grey font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4488
                                                                        <i class="bg-font-grey font-lg fa fa-cogs"></i>
4489
                                                                        <br>
4490
                                                                        <i class="bg-font-grey font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4491
                                                                        <i class="bg-font-grey font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4492
                                                                        <i class="bg-font-grey font-lg glyphicon glyphicon-warning-sign"></i>
4493
                                                                        <br> </div>
4494
                                                                    <h4>Class usage</h4> <code>class="font-grey"</code> </div>
4495
                                                                <div class="tab-pane" id="grey_tab_2_content">
4496
                                                                    <div style="margin: 30px 0;">
4497
                                                                        <div class="border-grey margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-grey"</code> </div>
4498
                                                                    <div style="margin: 30px 0;">
4499
                                                                        <div class="bg-grey bg-font-grey margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-grey bg-font-grey"</code> </div>
4500
                                                                </div>
4501
                                                                <div class="tab-pane" id="grey_tab_3_content">
4502
                                                                    <div style="margin: 10px 0 30px 0">
4503
                                                                        <a href="#" class="btn uppercase grey">Button</a> &nbsp; <code>class="btn grey"</code> </div>
4504
                                                                    <div style="margin: 10px 0 30px 0">
4505
                                                                        <a href="#" class="btn sbold uppercase btn-outline grey">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey"</code> </div>
4506
                                                                    <div style="margin: 10px 0 30px 0">
4507
                                                                        <a href="#" class="btn sbold uppercase btn-circle grey">Button</a> &nbsp; <code>class="btn btn-circle grey"</code> </div>
4508
                                                                </div>
4509
                                                                <div class="tab-pane" id="grey_tab_4_content">
4510
                                                                    <div style="margin: 10px 0 30px 0">
4511
                                                                        <h4>Statistic Widgets</h4>
4512
                                                                        <div class="dashboard-stat grey">
4513
                                                                            <div class="visual">
4514
                                                                                <i class="fa fa-bar-chart-o"></i>
4515
                                                                            </div>
4516
                                                                            <div class="details">
4517
                                                                                <div class="number"> 12,5M$ </div>
4518
                                                                                <div class="desc"> Total Profit </div>
4519
                                                                            </div>
4520
                                                                            <a class="more" href="javascript:;"> View more
4521
                                                                                <i class="m-icon-swapright m-icon-white"></i>
4522
                                                                            </a>
4523
                                                                        </div> <code>class="dashboard-stat grey"</code> </div>
4524
                                                                </div>
4525
                                                            </div>
4526
                                                        </div>
4527
                                                    </div>
4528
                                                    <div class="modal-footer">
4529
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
4530
                                                    </div>
4531
                                                </div>
4532
                                            </div>
4533
                                        </div>
4534
                                    </div>
4535
                                </div>
4536
                                <div class="row">
4537
                                    <div class="col-md-2 col-sm-2 col-xs-6">
4538
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-steel">
4539
                                            <div class="color-view bg-grey-steel bg-font-grey-steel bold uppercase"> #e9edef </div>
4540
                                            <div class="color-info bg-white c-font-14 sbold"> grey-steel </div>
4541
                                        </div>
4542
                                        <div class="modal fade" id="demo_modal_grey-steel">
4543
                                            <div class="modal-dialog modal-lg">
4544
                                                <div class="modal-content c-square">
4545
                                                    <div class="modal-header">
4546
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
4547
                                                            <span aria-hidden="true">&times;</span>
4548
                                                        </button>
4549
                                                        <h4 class="modal-title bold uppercase font-grey-steel">grey-steel</h4>
4550
                                                    </div>
4551
                                                    <div class="modal-body">
4552
                                                        <div class="tabbable-line">
4553
                                                            <ul class="nav nav-tabs uppercase bold">
4554
                                                                <li class="active">
4555
                                                                    <a href="#grey-steel_tab_1_content" data-toggle="tab">Typography</a>
4556
                                                                </li>
4557
                                                                <li>
4558
                                                                    <a href="#grey-steel_tab_2_content" data-toggle="tab">Background & Border</a>
4559
                                                                </li>
4560
                                                                <li>
4561
                                                                    <a href="#grey-steel_tab_3_content" data-toggle="tab">Buttons</a>
4562
                                                                </li>
4563
                                                                <li>
4564
                                                                    <a href="#grey-steel_tab_4_content" data-toggle="tab">Components</a>
4565
                                                                </li>
4566
                                                            </ul>
4567
                                                            <div class="tab-content">
4568
                                                                <div class="tab-pane active" id="grey-steel_tab_1_content">
4569
                                                                    <h4>Text font</h4>
4570
                                                                    <div style="margin: 10px 0 30px 0">
4571
                                                                        <span class="font-grey-steel font-lg">Some sample text goes here...</span>
4572
                                                                        <br>
4573
                                                                        <span class="font-grey-steel font-lg sbold">Some sample text goes here...</span>
4574
                                                                        <br>
4575
                                                                        <span class="font-grey-steel font-lg bold uppercase">Some sample text goes here...</span>
4576
                                                                    </div>
4577
                                                                    <h4>Background matching text font</h4>
4578
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-steel">
4579
                                                                        <span class="bg-font-grey-steel font-lg">Some sample text goes here...</span>
4580
                                                                        <br>
4581
                                                                        <span class="bg-font-grey-steel font-lg sbold">Some sample text goes here...</span>
4582
                                                                        <br>
4583
                                                                        <span class="bg-font-grey-steel font-lg bold uppercase">Some sample text goes here...</span>
4584
                                                                    </div>
4585
                                                                    <h4>Icon font</h4>
4586
                                                                    <div style="margin: 10px 0 30px 0">
4587
                                                                        <i class="font-grey-steel font-lg icon-user"></i>&nbsp;
4588
                                                                        <i class="font-grey-steel font-lg icon-settings"></i>&nbsp;
4589
                                                                        <i class="font-grey-steel font-lg icon-calendar"></i>
4590
                                                                        <br>
4591
                                                                        <i class="font-grey-steel font-lg fa fa-bar-chart-o"></i>&nbsp;
4592
                                                                        <i class="font-grey-steel font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4593
                                                                        <i class="font-grey-steel font-lg fa fa-cogs"></i>
4594
                                                                        <br>
4595
                                                                        <i class="font-grey-steel font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4596
                                                                        <i class="font-grey-steel font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4597
                                                                        <i class="font-grey-steel font-lg glyphicon glyphicon-warning-sign"></i>
4598
                                                                        <br> </div>
4599
                                                                    <h4>Background matching icon font</h4>
4600
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-steel">
4601
                                                                        <i class="bg-font-grey-steel font-lg icon-user"></i>&nbsp;
4602
                                                                        <i class="bg-font-grey-steel font-lg icon-settings"></i>&nbsp;
4603
                                                                        <i class="bg-font-grey-steel font-lg icon-calendar"></i>
4604
                                                                        <br>
4605
                                                                        <i class="bg-font-grey-steel font-lg fa fa-bar-chart-o"></i>&nbsp;
4606
                                                                        <i class="bg-font-grey-steel font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4607
                                                                        <i class="bg-font-grey-steel font-lg fa fa-cogs"></i>
4608
                                                                        <br>
4609
                                                                        <i class="bg-font-grey-steel font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4610
                                                                        <i class="bg-font-grey-steel font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4611
                                                                        <i class="bg-font-grey-steel font-lg glyphicon glyphicon-warning-sign"></i>
4612
                                                                        <br> </div>
4613
                                                                    <h4>Class usage</h4> <code>class="font-grey-steel"</code> </div>
4614
                                                                <div class="tab-pane" id="grey-steel_tab_2_content">
4615
                                                                    <div style="margin: 30px 0;">
4616
                                                                        <div class="border-grey-steel margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-grey-steel"</code> </div>
4617
                                                                    <div style="margin: 30px 0;">
4618
                                                                        <div class="bg-grey-steel bg-font-grey-steel margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-grey-steel bg-font-grey-steel"</code> </div>
4619
                                                                </div>
4620
                                                                <div class="tab-pane" id="grey-steel_tab_3_content">
4621
                                                                    <div style="margin: 10px 0 30px 0">
4622
                                                                        <a href="#" class="btn uppercase grey-steel">Button</a> &nbsp; <code>class="btn grey-steel"</code> </div>
4623
                                                                    <div style="margin: 10px 0 30px 0">
4624
                                                                        <a href="#" class="btn sbold uppercase btn-outline grey-steel">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey-steel"</code> </div>
4625
                                                                    <div style="margin: 10px 0 30px 0">
4626
                                                                        <a href="#" class="btn sbold uppercase btn-circle grey-steel">Button</a> &nbsp; <code>class="btn btn-circle grey-steel"</code> </div>
4627
                                                                </div>
4628
                                                                <div class="tab-pane" id="grey-steel_tab_4_content">
4629
                                                                    <div style="margin: 10px 0 30px 0">
4630
                                                                        <h4>Statistic Widgets</h4>
4631
                                                                        <div class="dashboard-stat grey-steel">
4632
                                                                            <div class="visual">
4633
                                                                                <i class="fa fa-bar-chart-o"></i>
4634
                                                                            </div>
4635
                                                                            <div class="details">
4636
                                                                                <div class="number"> 12,5M$ </div>
4637
                                                                                <div class="desc"> Total Profit </div>
4638
                                                                            </div>
4639
                                                                            <a class="more" href="javascript:;"> View more
4640
                                                                                <i class="m-icon-swapright m-icon-white"></i>
4641
                                                                            </a>
4642
                                                                        </div> <code>class="dashboard-stat grey-steel"</code> </div>
4643
                                                                </div>
4644
                                                            </div>
4645
                                                        </div>
4646
                                                    </div>
4647
                                                    <div class="modal-footer">
4648
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
4649
                                                    </div>
4650
                                                </div>
4651
                                            </div>
4652
                                        </div>
4653
                                    </div>
4654
                                    <div class="col-md-2 col-sm-2 col-xs-6">
4655
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-cararra">
4656
                                            <div class="color-view bg-grey-cararra bg-font-grey-cararra bold uppercase"> #fafafa </div>
4657
                                            <div class="color-info bg-white c-font-14 sbold"> grey-cararra </div>
4658
                                        </div>
4659
                                        <div class="modal fade" id="demo_modal_grey-cararra">
4660
                                            <div class="modal-dialog modal-lg">
4661
                                                <div class="modal-content c-square">
4662
                                                    <div class="modal-header">
4663
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
4664
                                                            <span aria-hidden="true">&times;</span>
4665
                                                        </button>
4666
                                                        <h4 class="modal-title bold uppercase font-grey-cararra">grey-cararra</h4>
4667
                                                    </div>
4668
                                                    <div class="modal-body">
4669
                                                        <div class="tabbable-line">
4670
                                                            <ul class="nav nav-tabs uppercase bold">
4671
                                                                <li class="active">
4672
                                                                    <a href="#grey-cararra_tab_1_content" data-toggle="tab">Typography</a>
4673
                                                                </li>
4674
                                                                <li>
4675
                                                                    <a href="#grey-cararra_tab_2_content" data-toggle="tab">Background & Border</a>
4676
                                                                </li>
4677
                                                                <li>
4678
                                                                    <a href="#grey-cararra_tab_3_content" data-toggle="tab">Buttons</a>
4679
                                                                </li>
4680
                                                                <li>
4681
                                                                    <a href="#grey-cararra_tab_4_content" data-toggle="tab">Components</a>
4682
                                                                </li>
4683
                                                            </ul>
4684
                                                            <div class="tab-content">
4685
                                                                <div class="tab-pane active" id="grey-cararra_tab_1_content">
4686
                                                                    <h4>Text font</h4>
4687
                                                                    <div style="margin: 10px 0 30px 0">
4688
                                                                        <span class="font-grey-cararra font-lg">Some sample text goes here...</span>
4689
                                                                        <br>
4690
                                                                        <span class="font-grey-cararra font-lg sbold">Some sample text goes here...</span>
4691
                                                                        <br>
4692
                                                                        <span class="font-grey-cararra font-lg bold uppercase">Some sample text goes here...</span>
4693
                                                                    </div>
4694
                                                                    <h4>Background matching text font</h4>
4695
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-cararra">
4696
                                                                        <span class="bg-font-grey-cararra font-lg">Some sample text goes here...</span>
4697
                                                                        <br>
4698
                                                                        <span class="bg-font-grey-cararra font-lg sbold">Some sample text goes here...</span>
4699
                                                                        <br>
4700
                                                                        <span class="bg-font-grey-cararra font-lg bold uppercase">Some sample text goes here...</span>
4701
                                                                    </div>
4702
                                                                    <h4>Icon font</h4>
4703
                                                                    <div style="margin: 10px 0 30px 0">
4704
                                                                        <i class="font-grey-cararra font-lg icon-user"></i>&nbsp;
4705
                                                                        <i class="font-grey-cararra font-lg icon-settings"></i>&nbsp;
4706
                                                                        <i class="font-grey-cararra font-lg icon-calendar"></i>
4707
                                                                        <br>
4708
                                                                        <i class="font-grey-cararra font-lg fa fa-bar-chart-o"></i>&nbsp;
4709
                                                                        <i class="font-grey-cararra font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4710
                                                                        <i class="font-grey-cararra font-lg fa fa-cogs"></i>
4711
                                                                        <br>
4712
                                                                        <i class="font-grey-cararra font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4713
                                                                        <i class="font-grey-cararra font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4714
                                                                        <i class="font-grey-cararra font-lg glyphicon glyphicon-warning-sign"></i>
4715
                                                                        <br> </div>
4716
                                                                    <h4>Background matching icon font</h4>
4717
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-cararra">
4718
                                                                        <i class="bg-font-grey-cararra font-lg icon-user"></i>&nbsp;
4719
                                                                        <i class="bg-font-grey-cararra font-lg icon-settings"></i>&nbsp;
4720
                                                                        <i class="bg-font-grey-cararra font-lg icon-calendar"></i>
4721
                                                                        <br>
4722
                                                                        <i class="bg-font-grey-cararra font-lg fa fa-bar-chart-o"></i>&nbsp;
4723
                                                                        <i class="bg-font-grey-cararra font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4724
                                                                        <i class="bg-font-grey-cararra font-lg fa fa-cogs"></i>
4725
                                                                        <br>
4726
                                                                        <i class="bg-font-grey-cararra font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4727
                                                                        <i class="bg-font-grey-cararra font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4728
                                                                        <i class="bg-font-grey-cararra font-lg glyphicon glyphicon-warning-sign"></i>
4729
                                                                        <br> </div>
4730
                                                                    <h4>Class usage</h4> <code>class="font-grey-cararra"</code> </div>
4731
                                                                <div class="tab-pane" id="grey-cararra_tab_2_content">
4732
                                                                    <div style="margin: 30px 0;">
4733
                                                                        <div class="border-grey-cararra margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-grey-cararra"</code> </div>
4734
                                                                    <div style="margin: 30px 0;">
4735
                                                                        <div class="bg-grey-cararra bg-font-grey-cararra margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-grey-cararra bg-font-grey-cararra"</code> </div>
4736
                                                                </div>
4737
                                                                <div class="tab-pane" id="grey-cararra_tab_3_content">
4738
                                                                    <div style="margin: 10px 0 30px 0">
4739
                                                                        <a href="#" class="btn uppercase grey-cararra">Button</a> &nbsp; <code>class="btn grey-cararra"</code> </div>
4740
                                                                    <div style="margin: 10px 0 30px 0">
4741
                                                                        <a href="#" class="btn sbold uppercase btn-outline grey-cararra">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey-cararra"</code> </div>
4742
                                                                    <div style="margin: 10px 0 30px 0">
4743
                                                                        <a href="#" class="btn sbold uppercase btn-circle grey-cararra">Button</a> &nbsp; <code>class="btn btn-circle grey-cararra"</code> </div>
4744
                                                                </div>
4745
                                                                <div class="tab-pane" id="grey-cararra_tab_4_content">
4746
                                                                    <div style="margin: 10px 0 30px 0">
4747
                                                                        <h4>Statistic Widgets</h4>
4748
                                                                        <div class="dashboard-stat grey-cararra">
4749
                                                                            <div class="visual">
4750
                                                                                <i class="fa fa-bar-chart-o"></i>
4751
                                                                            </div>
4752
                                                                            <div class="details">
4753
                                                                                <div class="number"> 12,5M$ </div>
4754
                                                                                <div class="desc"> Total Profit </div>
4755
                                                                            </div>
4756
                                                                            <a class="more" href="javascript:;"> View more
4757
                                                                                <i class="m-icon-swapright m-icon-white"></i>
4758
                                                                            </a>
4759
                                                                        </div> <code>class="dashboard-stat grey-cararra"</code> </div>
4760
                                                                </div>
4761
                                                            </div>
4762
                                                        </div>
4763
                                                    </div>
4764
                                                    <div class="modal-footer">
4765
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
4766
                                                    </div>
4767
                                                </div>
4768
                                            </div>
4769
                                        </div>
4770
                                    </div>
4771
                                    <div class="col-md-2 col-sm-2 col-xs-6">
4772
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-gallery">
4773
                                            <div class="color-view bg-grey-gallery bg-font-grey-gallery bold uppercase"> #555555 </div>
4774
                                            <div class="color-info bg-white c-font-14 sbold"> grey-gallery </div>
4775
                                        </div>
4776
                                        <div class="modal fade" id="demo_modal_grey-gallery">
4777
                                            <div class="modal-dialog modal-lg">
4778
                                                <div class="modal-content c-square">
4779
                                                    <div class="modal-header">
4780
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
4781
                                                            <span aria-hidden="true">&times;</span>
4782
                                                        </button>
4783
                                                        <h4 class="modal-title bold uppercase font-grey-gallery">grey-gallery</h4>
4784
                                                    </div>
4785
                                                    <div class="modal-body">
4786
                                                        <div class="tabbable-line">
4787
                                                            <ul class="nav nav-tabs uppercase bold">
4788
                                                                <li class="active">
4789
                                                                    <a href="#grey-gallery_tab_1_content" data-toggle="tab">Typography</a>
4790
                                                                </li>
4791
                                                                <li>
4792
                                                                    <a href="#grey-gallery_tab_2_content" data-toggle="tab">Background & Border</a>
4793
                                                                </li>
4794
                                                                <li>
4795
                                                                    <a href="#grey-gallery_tab_3_content" data-toggle="tab">Buttons</a>
4796
                                                                </li>
4797
                                                                <li>
4798
                                                                    <a href="#grey-gallery_tab_4_content" data-toggle="tab">Components</a>
4799
                                                                </li>
4800
                                                            </ul>
4801
                                                            <div class="tab-content">
4802
                                                                <div class="tab-pane active" id="grey-gallery_tab_1_content">
4803
                                                                    <h4>Text font</h4>
4804
                                                                    <div style="margin: 10px 0 30px 0">
4805
                                                                        <span class="font-grey-gallery font-lg">Some sample text goes here...</span>
4806
                                                                        <br>
4807
                                                                        <span class="font-grey-gallery font-lg sbold">Some sample text goes here...</span>
4808
                                                                        <br>
4809
                                                                        <span class="font-grey-gallery font-lg bold uppercase">Some sample text goes here...</span>
4810
                                                                    </div>
4811
                                                                    <h4>Background matching text font</h4>
4812
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-gallery">
4813
                                                                        <span class="bg-font-grey-gallery font-lg">Some sample text goes here...</span>
4814
                                                                        <br>
4815
                                                                        <span class="bg-font-grey-gallery font-lg sbold">Some sample text goes here...</span>
4816
                                                                        <br>
4817
                                                                        <span class="bg-font-grey-gallery font-lg bold uppercase">Some sample text goes here...</span>
4818
                                                                    </div>
4819
                                                                    <h4>Icon font</h4>
4820
                                                                    <div style="margin: 10px 0 30px 0">
4821
                                                                        <i class="font-grey-gallery font-lg icon-user"></i>&nbsp;
4822
                                                                        <i class="font-grey-gallery font-lg icon-settings"></i>&nbsp;
4823
                                                                        <i class="font-grey-gallery font-lg icon-calendar"></i>
4824
                                                                        <br>
4825
                                                                        <i class="font-grey-gallery font-lg fa fa-bar-chart-o"></i>&nbsp;
4826
                                                                        <i class="font-grey-gallery font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4827
                                                                        <i class="font-grey-gallery font-lg fa fa-cogs"></i>
4828
                                                                        <br>
4829
                                                                        <i class="font-grey-gallery font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4830
                                                                        <i class="font-grey-gallery font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4831
                                                                        <i class="font-grey-gallery font-lg glyphicon glyphicon-warning-sign"></i>
4832
                                                                        <br> </div>
4833
                                                                    <h4>Background matching icon font</h4>
4834
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-gallery">
4835
                                                                        <i class="bg-font-grey-gallery font-lg icon-user"></i>&nbsp;
4836
                                                                        <i class="bg-font-grey-gallery font-lg icon-settings"></i>&nbsp;
4837
                                                                        <i class="bg-font-grey-gallery font-lg icon-calendar"></i>
4838
                                                                        <br>
4839
                                                                        <i class="bg-font-grey-gallery font-lg fa fa-bar-chart-o"></i>&nbsp;
4840
                                                                        <i class="bg-font-grey-gallery font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4841
                                                                        <i class="bg-font-grey-gallery font-lg fa fa-cogs"></i>
4842
                                                                        <br>
4843
                                                                        <i class="bg-font-grey-gallery font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4844
                                                                        <i class="bg-font-grey-gallery font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4845
                                                                        <i class="bg-font-grey-gallery font-lg glyphicon glyphicon-warning-sign"></i>
4846
                                                                        <br> </div>
4847
                                                                    <h4>Class usage</h4> <code>class="font-grey-gallery"</code> </div>
4848
                                                                <div class="tab-pane" id="grey-gallery_tab_2_content">
4849
                                                                    <div style="margin: 30px 0;">
4850
                                                                        <div class="border-grey-gallery margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-grey-gallery"</code> </div>
4851
                                                                    <div style="margin: 30px 0;">
4852
                                                                        <div class="bg-grey-gallery bg-font-grey-gallery margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-grey-gallery bg-font-grey-gallery"</code> </div>
4853
                                                                </div>
4854
                                                                <div class="tab-pane" id="grey-gallery_tab_3_content">
4855
                                                                    <div style="margin: 10px 0 30px 0">
4856
                                                                        <a href="#" class="btn uppercase grey-gallery">Button</a> &nbsp; <code>class="btn grey-gallery"</code> </div>
4857
                                                                    <div style="margin: 10px 0 30px 0">
4858
                                                                        <a href="#" class="btn sbold uppercase btn-outline grey-gallery">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey-gallery"</code> </div>
4859
                                                                    <div style="margin: 10px 0 30px 0">
4860
                                                                        <a href="#" class="btn sbold uppercase btn-circle grey-gallery">Button</a> &nbsp; <code>class="btn btn-circle grey-gallery"</code> </div>
4861
                                                                </div>
4862
                                                                <div class="tab-pane" id="grey-gallery_tab_4_content">
4863
                                                                    <div style="margin: 10px 0 30px 0">
4864
                                                                        <h4>Statistic Widgets</h4>
4865
                                                                        <div class="dashboard-stat grey-gallery">
4866
                                                                            <div class="visual">
4867
                                                                                <i class="fa fa-bar-chart-o"></i>
4868
                                                                            </div>
4869
                                                                            <div class="details">
4870
                                                                                <div class="number"> 12,5M$ </div>
4871
                                                                                <div class="desc"> Total Profit </div>
4872
                                                                            </div>
4873
                                                                            <a class="more" href="javascript:;"> View more
4874
                                                                                <i class="m-icon-swapright m-icon-white"></i>
4875
                                                                            </a>
4876
                                                                        </div> <code>class="dashboard-stat grey-gallery"</code> </div>
4877
                                                                </div>
4878
                                                            </div>
4879
                                                        </div>
4880
                                                    </div>
4881
                                                    <div class="modal-footer">
4882
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
4883
                                                    </div>
4884
                                                </div>
4885
                                            </div>
4886
                                        </div>
4887
                                    </div>
4888
                                    <div class="col-md-2 col-sm-2 col-xs-6">
4889
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-cascade">
4890
                                            <div class="color-view bg-grey-cascade bg-font-grey-cascade bold uppercase"> #95A5A6 </div>
4891
                                            <div class="color-info bg-white c-font-14 sbold"> grey-cascade </div>
4892
                                        </div>
4893
                                        <div class="modal fade" id="demo_modal_grey-cascade">
4894
                                            <div class="modal-dialog modal-lg">
4895
                                                <div class="modal-content c-square">
4896
                                                    <div class="modal-header">
4897
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
4898
                                                            <span aria-hidden="true">&times;</span>
4899
                                                        </button>
4900
                                                        <h4 class="modal-title bold uppercase font-grey-cascade">grey-cascade</h4>
4901
                                                    </div>
4902
                                                    <div class="modal-body">
4903
                                                        <div class="tabbable-line">
4904
                                                            <ul class="nav nav-tabs uppercase bold">
4905
                                                                <li class="active">
4906
                                                                    <a href="#grey-cascade_tab_1_content" data-toggle="tab">Typography</a>
4907
                                                                </li>
4908
                                                                <li>
4909
                                                                    <a href="#grey-cascade_tab_2_content" data-toggle="tab">Background & Border</a>
4910
                                                                </li>
4911
                                                                <li>
4912
                                                                    <a href="#grey-cascade_tab_3_content" data-toggle="tab">Buttons</a>
4913
                                                                </li>
4914
                                                                <li>
4915
                                                                    <a href="#grey-cascade_tab_4_content" data-toggle="tab">Components</a>
4916
                                                                </li>
4917
                                                            </ul>
4918
                                                            <div class="tab-content">
4919
                                                                <div class="tab-pane active" id="grey-cascade_tab_1_content">
4920
                                                                    <h4>Text font</h4>
4921
                                                                    <div style="margin: 10px 0 30px 0">
4922
                                                                        <span class="font-grey-cascade font-lg">Some sample text goes here...</span>
4923
                                                                        <br>
4924
                                                                        <span class="font-grey-cascade font-lg sbold">Some sample text goes here...</span>
4925
                                                                        <br>
4926
                                                                        <span class="font-grey-cascade font-lg bold uppercase">Some sample text goes here...</span>
4927
                                                                    </div>
4928
                                                                    <h4>Background matching text font</h4>
4929
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-cascade">
4930
                                                                        <span class="bg-font-grey-cascade font-lg">Some sample text goes here...</span>
4931
                                                                        <br>
4932
                                                                        <span class="bg-font-grey-cascade font-lg sbold">Some sample text goes here...</span>
4933
                                                                        <br>
4934
                                                                        <span class="bg-font-grey-cascade font-lg bold uppercase">Some sample text goes here...</span>
4935
                                                                    </div>
4936
                                                                    <h4>Icon font</h4>
4937
                                                                    <div style="margin: 10px 0 30px 0">
4938
                                                                        <i class="font-grey-cascade font-lg icon-user"></i>&nbsp;
4939
                                                                        <i class="font-grey-cascade font-lg icon-settings"></i>&nbsp;
4940
                                                                        <i class="font-grey-cascade font-lg icon-calendar"></i>
4941
                                                                        <br>
4942
                                                                        <i class="font-grey-cascade font-lg fa fa-bar-chart-o"></i>&nbsp;
4943
                                                                        <i class="font-grey-cascade font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4944
                                                                        <i class="font-grey-cascade font-lg fa fa-cogs"></i>
4945
                                                                        <br>
4946
                                                                        <i class="font-grey-cascade font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4947
                                                                        <i class="font-grey-cascade font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4948
                                                                        <i class="font-grey-cascade font-lg glyphicon glyphicon-warning-sign"></i>
4949
                                                                        <br> </div>
4950
                                                                    <h4>Background matching icon font</h4>
4951
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-cascade">
4952
                                                                        <i class="bg-font-grey-cascade font-lg icon-user"></i>&nbsp;
4953
                                                                        <i class="bg-font-grey-cascade font-lg icon-settings"></i>&nbsp;
4954
                                                                        <i class="bg-font-grey-cascade font-lg icon-calendar"></i>
4955
                                                                        <br>
4956
                                                                        <i class="bg-font-grey-cascade font-lg fa fa-bar-chart-o"></i>&nbsp;
4957
                                                                        <i class="bg-font-grey-cascade font-lg fa fa-code-fork icon-settings"></i>&nbsp;
4958
                                                                        <i class="bg-font-grey-cascade font-lg fa fa-cogs"></i>
4959
                                                                        <br>
4960
                                                                        <i class="bg-font-grey-cascade font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
4961
                                                                        <i class="bg-font-grey-cascade font-lg glyphicon glyphicon-leaf"></i>&nbsp;
4962
                                                                        <i class="bg-font-grey-cascade font-lg glyphicon glyphicon-warning-sign"></i>
4963
                                                                        <br> </div>
4964
                                                                    <h4>Class usage</h4> <code>class="font-grey-cascade"</code> </div>
4965
                                                                <div class="tab-pane" id="grey-cascade_tab_2_content">
4966
                                                                    <div style="margin: 30px 0;">
4967
                                                                        <div class="border-grey-cascade margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-grey-cascade"</code> </div>
4968
                                                                    <div style="margin: 30px 0;">
4969
                                                                        <div class="bg-grey-cascade bg-font-grey-cascade margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-grey-cascade bg-font-grey-cascade"</code> </div>
4970
                                                                </div>
4971
                                                                <div class="tab-pane" id="grey-cascade_tab_3_content">
4972
                                                                    <div style="margin: 10px 0 30px 0">
4973
                                                                        <a href="#" class="btn uppercase grey-cascade">Button</a> &nbsp; <code>class="btn grey-cascade"</code> </div>
4974
                                                                    <div style="margin: 10px 0 30px 0">
4975
                                                                        <a href="#" class="btn sbold uppercase btn-outline grey-cascade">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey-cascade"</code> </div>
4976
                                                                    <div style="margin: 10px 0 30px 0">
4977
                                                                        <a href="#" class="btn sbold uppercase btn-circle grey-cascade">Button</a> &nbsp; <code>class="btn btn-circle grey-cascade"</code> </div>
4978
                                                                </div>
4979
                                                                <div class="tab-pane" id="grey-cascade_tab_4_content">
4980
                                                                    <div style="margin: 10px 0 30px 0">
4981
                                                                        <h4>Statistic Widgets</h4>
4982
                                                                        <div class="dashboard-stat grey-cascade">
4983
                                                                            <div class="visual">
4984
                                                                                <i class="fa fa-bar-chart-o"></i>
4985
                                                                            </div>
4986
                                                                            <div class="details">
4987
                                                                                <div class="number"> 12,5M$ </div>
4988
                                                                                <div class="desc"> Total Profit </div>
4989
                                                                            </div>
4990
                                                                            <a class="more" href="javascript:;"> View more
4991
                                                                                <i class="m-icon-swapright m-icon-white"></i>
4992
                                                                            </a>
4993
                                                                        </div> <code>class="dashboard-stat grey-cascade"</code> </div>
4994
                                                                </div>
4995
                                                            </div>
4996
                                                        </div>
4997
                                                    </div>
4998
                                                    <div class="modal-footer">
4999
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
5000
                                                    </div>
5001
                                                </div>
5002
                                            </div>
5003
                                        </div>
5004
                                    </div>
5005
                                    <div class="col-md-2 col-sm-2 col-xs-6">
5006
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-silver">
5007
                                            <div class="color-view bg-grey-silver bg-font-grey-silver bold uppercase"> #BFBFBF </div>
5008
                                            <div class="color-info bg-white c-font-14 sbold"> grey-silver </div>
5009
                                        </div>
5010
                                        <div class="modal fade" id="demo_modal_grey-silver">
5011
                                            <div class="modal-dialog modal-lg">
5012
                                                <div class="modal-content c-square">
5013
                                                    <div class="modal-header">
5014
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5015
                                                            <span aria-hidden="true">&times;</span>
5016
                                                        </button>
5017
                                                        <h4 class="modal-title bold uppercase font-grey-silver">grey-silver</h4>
5018
                                                    </div>
5019
                                                    <div class="modal-body">
5020
                                                        <div class="tabbable-line">
5021
                                                            <ul class="nav nav-tabs uppercase bold">
5022
                                                                <li class="active">
5023
                                                                    <a href="#grey-silver_tab_1_content" data-toggle="tab">Typography</a>
5024
                                                                </li>
5025
                                                                <li>
5026
                                                                    <a href="#grey-silver_tab_2_content" data-toggle="tab">Background & Border</a>
5027
                                                                </li>
5028
                                                                <li>
5029
                                                                    <a href="#grey-silver_tab_3_content" data-toggle="tab">Buttons</a>
5030
                                                                </li>
5031
                                                                <li>
5032
                                                                    <a href="#grey-silver_tab_4_content" data-toggle="tab">Components</a>
5033
                                                                </li>
5034
                                                            </ul>
5035
                                                            <div class="tab-content">
5036
                                                                <div class="tab-pane active" id="grey-silver_tab_1_content">
5037
                                                                    <h4>Text font</h4>
5038
                                                                    <div style="margin: 10px 0 30px 0">
5039
                                                                        <span class="font-grey-silver font-lg">Some sample text goes here...</span>
5040
                                                                        <br>
5041
                                                                        <span class="font-grey-silver font-lg sbold">Some sample text goes here...</span>
5042
                                                                        <br>
5043
                                                                        <span class="font-grey-silver font-lg bold uppercase">Some sample text goes here...</span>
5044
                                                                    </div>
5045
                                                                    <h4>Background matching text font</h4>
5046
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-silver">
5047
                                                                        <span class="bg-font-grey-silver font-lg">Some sample text goes here...</span>
5048
                                                                        <br>
5049
                                                                        <span class="bg-font-grey-silver font-lg sbold">Some sample text goes here...</span>
5050
                                                                        <br>
5051
                                                                        <span class="bg-font-grey-silver font-lg bold uppercase">Some sample text goes here...</span>
5052
                                                                    </div>
5053
                                                                    <h4>Icon font</h4>
5054
                                                                    <div style="margin: 10px 0 30px 0">
5055
                                                                        <i class="font-grey-silver font-lg icon-user"></i>&nbsp;
5056
                                                                        <i class="font-grey-silver font-lg icon-settings"></i>&nbsp;
5057
                                                                        <i class="font-grey-silver font-lg icon-calendar"></i>
5058
                                                                        <br>
5059
                                                                        <i class="font-grey-silver font-lg fa fa-bar-chart-o"></i>&nbsp;
5060
                                                                        <i class="font-grey-silver font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5061
                                                                        <i class="font-grey-silver font-lg fa fa-cogs"></i>
5062
                                                                        <br>
5063
                                                                        <i class="font-grey-silver font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5064
                                                                        <i class="font-grey-silver font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5065
                                                                        <i class="font-grey-silver font-lg glyphicon glyphicon-warning-sign"></i>
5066
                                                                        <br> </div>
5067
                                                                    <h4>Background matching icon font</h4>
5068
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-silver">
5069
                                                                        <i class="bg-font-grey-silver font-lg icon-user"></i>&nbsp;
5070
                                                                        <i class="bg-font-grey-silver font-lg icon-settings"></i>&nbsp;
5071
                                                                        <i class="bg-font-grey-silver font-lg icon-calendar"></i>
5072
                                                                        <br>
5073
                                                                        <i class="bg-font-grey-silver font-lg fa fa-bar-chart-o"></i>&nbsp;
5074
                                                                        <i class="bg-font-grey-silver font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5075
                                                                        <i class="bg-font-grey-silver font-lg fa fa-cogs"></i>
5076
                                                                        <br>
5077
                                                                        <i class="bg-font-grey-silver font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5078
                                                                        <i class="bg-font-grey-silver font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5079
                                                                        <i class="bg-font-grey-silver font-lg glyphicon glyphicon-warning-sign"></i>
5080
                                                                        <br> </div>
5081
                                                                    <h4>Class usage</h4> <code>class="font-grey-silver"</code> </div>
5082
                                                                <div class="tab-pane" id="grey-silver_tab_2_content">
5083
                                                                    <div style="margin: 30px 0;">
5084
                                                                        <div class="border-grey-silver margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-grey-silver"</code> </div>
5085
                                                                    <div style="margin: 30px 0;">
5086
                                                                        <div class="bg-grey-silver bg-font-grey-silver margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-grey-silver bg-font-grey-silver"</code> </div>
5087
                                                                </div>
5088
                                                                <div class="tab-pane" id="grey-silver_tab_3_content">
5089
                                                                    <div style="margin: 10px 0 30px 0">
5090
                                                                        <a href="#" class="btn uppercase grey-silver">Button</a> &nbsp; <code>class="btn grey-silver"</code> </div>
5091
                                                                    <div style="margin: 10px 0 30px 0">
5092
                                                                        <a href="#" class="btn sbold uppercase btn-outline grey-silver">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey-silver"</code> </div>
5093
                                                                    <div style="margin: 10px 0 30px 0">
5094
                                                                        <a href="#" class="btn sbold uppercase btn-circle grey-silver">Button</a> &nbsp; <code>class="btn btn-circle grey-silver"</code> </div>
5095
                                                                </div>
5096
                                                                <div class="tab-pane" id="grey-silver_tab_4_content">
5097
                                                                    <div style="margin: 10px 0 30px 0">
5098
                                                                        <h4>Statistic Widgets</h4>
5099
                                                                        <div class="dashboard-stat grey-silver">
5100
                                                                            <div class="visual">
5101
                                                                                <i class="fa fa-bar-chart-o"></i>
5102
                                                                            </div>
5103
                                                                            <div class="details">
5104
                                                                                <div class="number"> 12,5M$ </div>
5105
                                                                                <div class="desc"> Total Profit </div>
5106
                                                                            </div>
5107
                                                                            <a class="more" href="javascript:;"> View more
5108
                                                                                <i class="m-icon-swapright m-icon-white"></i>
5109
                                                                            </a>
5110
                                                                        </div> <code>class="dashboard-stat grey-silver"</code> </div>
5111
                                                                </div>
5112
                                                            </div>
5113
                                                        </div>
5114
                                                    </div>
5115
                                                    <div class="modal-footer">
5116
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
5117
                                                    </div>
5118
                                                </div>
5119
                                            </div>
5120
                                        </div>
5121
                                    </div>
5122
                                    <div class="col-md-2 col-sm-2 col-xs-6">
5123
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-salsa">
5124
                                            <div class="color-view bg-grey-salsa bg-font-grey-salsa bold uppercase"> #ACB5C3 </div>
5125
                                            <div class="color-info bg-white c-font-14 sbold"> grey-salsa </div>
5126
                                        </div>
5127
                                        <div class="modal fade" id="demo_modal_grey-salsa">
5128
                                            <div class="modal-dialog modal-lg">
5129
                                                <div class="modal-content c-square">
5130
                                                    <div class="modal-header">
5131
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5132
                                                            <span aria-hidden="true">&times;</span>
5133
                                                        </button>
5134
                                                        <h4 class="modal-title bold uppercase font-grey-salsa">grey-salsa</h4>
5135
                                                    </div>
5136
                                                    <div class="modal-body">
5137
                                                        <div class="tabbable-line">
5138
                                                            <ul class="nav nav-tabs uppercase bold">
5139
                                                                <li class="active">
5140
                                                                    <a href="#grey-salsa_tab_1_content" data-toggle="tab">Typography</a>
5141
                                                                </li>
5142
                                                                <li>
5143
                                                                    <a href="#grey-salsa_tab_2_content" data-toggle="tab">Background & Border</a>
5144
                                                                </li>
5145
                                                                <li>
5146
                                                                    <a href="#grey-salsa_tab_3_content" data-toggle="tab">Buttons</a>
5147
                                                                </li>
5148
                                                                <li>
5149
                                                                    <a href="#grey-salsa_tab_4_content" data-toggle="tab">Components</a>
5150
                                                                </li>
5151
                                                            </ul>
5152
                                                            <div class="tab-content">
5153
                                                                <div class="tab-pane active" id="grey-salsa_tab_1_content">
5154
                                                                    <h4>Text font</h4>
5155
                                                                    <div style="margin: 10px 0 30px 0">
5156
                                                                        <span class="font-grey-salsa font-lg">Some sample text goes here...</span>
5157
                                                                        <br>
5158
                                                                        <span class="font-grey-salsa font-lg sbold">Some sample text goes here...</span>
5159
                                                                        <br>
5160
                                                                        <span class="font-grey-salsa font-lg bold uppercase">Some sample text goes here...</span>
5161
                                                                    </div>
5162
                                                                    <h4>Background matching text font</h4>
5163
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-salsa">
5164
                                                                        <span class="bg-font-grey-salsa font-lg">Some sample text goes here...</span>
5165
                                                                        <br>
5166
                                                                        <span class="bg-font-grey-salsa font-lg sbold">Some sample text goes here...</span>
5167
                                                                        <br>
5168
                                                                        <span class="bg-font-grey-salsa font-lg bold uppercase">Some sample text goes here...</span>
5169
                                                                    </div>
5170
                                                                    <h4>Icon font</h4>
5171
                                                                    <div style="margin: 10px 0 30px 0">
5172
                                                                        <i class="font-grey-salsa font-lg icon-user"></i>&nbsp;
5173
                                                                        <i class="font-grey-salsa font-lg icon-settings"></i>&nbsp;
5174
                                                                        <i class="font-grey-salsa font-lg icon-calendar"></i>
5175
                                                                        <br>
5176
                                                                        <i class="font-grey-salsa font-lg fa fa-bar-chart-o"></i>&nbsp;
5177
                                                                        <i class="font-grey-salsa font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5178
                                                                        <i class="font-grey-salsa font-lg fa fa-cogs"></i>
5179
                                                                        <br>
5180
                                                                        <i class="font-grey-salsa font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5181
                                                                        <i class="font-grey-salsa font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5182
                                                                        <i class="font-grey-salsa font-lg glyphicon glyphicon-warning-sign"></i>
5183
                                                                        <br> </div>
5184
                                                                    <h4>Background matching icon font</h4>
5185
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-salsa">
5186
                                                                        <i class="bg-font-grey-salsa font-lg icon-user"></i>&nbsp;
5187
                                                                        <i class="bg-font-grey-salsa font-lg icon-settings"></i>&nbsp;
5188
                                                                        <i class="bg-font-grey-salsa font-lg icon-calendar"></i>
5189
                                                                        <br>
5190
                                                                        <i class="bg-font-grey-salsa font-lg fa fa-bar-chart-o"></i>&nbsp;
5191
                                                                        <i class="bg-font-grey-salsa font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5192
                                                                        <i class="bg-font-grey-salsa font-lg fa fa-cogs"></i>
5193
                                                                        <br>
5194
                                                                        <i class="bg-font-grey-salsa font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5195
                                                                        <i class="bg-font-grey-salsa font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5196
                                                                        <i class="bg-font-grey-salsa font-lg glyphicon glyphicon-warning-sign"></i>
5197
                                                                        <br> </div>
5198
                                                                    <h4>Class usage</h4> <code>class="font-grey-salsa"</code> </div>
5199
                                                                <div class="tab-pane" id="grey-salsa_tab_2_content">
5200
                                                                    <div style="margin: 30px 0;">
5201
                                                                        <div class="border-grey-salsa margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-grey-salsa"</code> </div>
5202
                                                                    <div style="margin: 30px 0;">
5203
                                                                        <div class="bg-grey-salsa bg-font-grey-salsa margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-grey-salsa bg-font-grey-salsa"</code> </div>
5204
                                                                </div>
5205
                                                                <div class="tab-pane" id="grey-salsa_tab_3_content">
5206
                                                                    <div style="margin: 10px 0 30px 0">
5207
                                                                        <a href="#" class="btn uppercase grey-salsa">Button</a> &nbsp; <code>class="btn grey-salsa"</code> </div>
5208
                                                                    <div style="margin: 10px 0 30px 0">
5209
                                                                        <a href="#" class="btn sbold uppercase btn-outline grey-salsa">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey-salsa"</code> </div>
5210
                                                                    <div style="margin: 10px 0 30px 0">
5211
                                                                        <a href="#" class="btn sbold uppercase btn-circle grey-salsa">Button</a> &nbsp; <code>class="btn btn-circle grey-salsa"</code> </div>
5212
                                                                </div>
5213
                                                                <div class="tab-pane" id="grey-salsa_tab_4_content">
5214
                                                                    <div style="margin: 10px 0 30px 0">
5215
                                                                        <h4>Statistic Widgets</h4>
5216
                                                                        <div class="dashboard-stat grey-salsa">
5217
                                                                            <div class="visual">
5218
                                                                                <i class="fa fa-bar-chart-o"></i>
5219
                                                                            </div>
5220
                                                                            <div class="details">
5221
                                                                                <div class="number"> 12,5M$ </div>
5222
                                                                                <div class="desc"> Total Profit </div>
5223
                                                                            </div>
5224
                                                                            <a class="more" href="javascript:;"> View more
5225
                                                                                <i class="m-icon-swapright m-icon-white"></i>
5226
                                                                            </a>
5227
                                                                        </div> <code>class="dashboard-stat grey-salsa"</code> </div>
5228
                                                                </div>
5229
                                                            </div>
5230
                                                        </div>
5231
                                                    </div>
5232
                                                    <div class="modal-footer">
5233
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
5234
                                                    </div>
5235
                                                </div>
5236
                                            </div>
5237
                                        </div>
5238
                                    </div>
5239
                                </div>
5240
                                <div class="row">
5241
                                    <div class="col-md-2 col-sm-2 col-xs-6">
5242
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-salt">
5243
                                            <div class="color-view bg-grey-salt bg-font-grey-salt bold uppercase"> #bfcad1 </div>
5244
                                            <div class="color-info bg-white c-font-14 sbold"> grey-salt </div>
5245
                                        </div>
5246
                                        <div class="modal fade" id="demo_modal_grey-salt">
5247
                                            <div class="modal-dialog modal-lg">
5248
                                                <div class="modal-content c-square">
5249
                                                    <div class="modal-header">
5250
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5251
                                                            <span aria-hidden="true">&times;</span>
5252
                                                        </button>
5253
                                                        <h4 class="modal-title bold uppercase font-grey-salt">grey-salt</h4>
5254
                                                    </div>
5255
                                                    <div class="modal-body">
5256
                                                        <div class="tabbable-line">
5257
                                                            <ul class="nav nav-tabs uppercase bold">
5258
                                                                <li class="active">
5259
                                                                    <a href="#grey-salt_tab_1_content" data-toggle="tab">Typography</a>
5260
                                                                </li>
5261
                                                                <li>
5262
                                                                    <a href="#grey-salt_tab_2_content" data-toggle="tab">Background & Border</a>
5263
                                                                </li>
5264
                                                                <li>
5265
                                                                    <a href="#grey-salt_tab_3_content" data-toggle="tab">Buttons</a>
5266
                                                                </li>
5267
                                                                <li>
5268
                                                                    <a href="#grey-salt_tab_4_content" data-toggle="tab">Components</a>
5269
                                                                </li>
5270
                                                            </ul>
5271
                                                            <div class="tab-content">
5272
                                                                <div class="tab-pane active" id="grey-salt_tab_1_content">
5273
                                                                    <h4>Text font</h4>
5274
                                                                    <div style="margin: 10px 0 30px 0">
5275
                                                                        <span class="font-grey-salt font-lg">Some sample text goes here...</span>
5276
                                                                        <br>
5277
                                                                        <span class="font-grey-salt font-lg sbold">Some sample text goes here...</span>
5278
                                                                        <br>
5279
                                                                        <span class="font-grey-salt font-lg bold uppercase">Some sample text goes here...</span>
5280
                                                                    </div>
5281
                                                                    <h4>Background matching text font</h4>
5282
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-salt">
5283
                                                                        <span class="bg-font-grey-salt font-lg">Some sample text goes here...</span>
5284
                                                                        <br>
5285
                                                                        <span class="bg-font-grey-salt font-lg sbold">Some sample text goes here...</span>
5286
                                                                        <br>
5287
                                                                        <span class="bg-font-grey-salt font-lg bold uppercase">Some sample text goes here...</span>
5288
                                                                    </div>
5289
                                                                    <h4>Icon font</h4>
5290
                                                                    <div style="margin: 10px 0 30px 0">
5291
                                                                        <i class="font-grey-salt font-lg icon-user"></i>&nbsp;
5292
                                                                        <i class="font-grey-salt font-lg icon-settings"></i>&nbsp;
5293
                                                                        <i class="font-grey-salt font-lg icon-calendar"></i>
5294
                                                                        <br>
5295
                                                                        <i class="font-grey-salt font-lg fa fa-bar-chart-o"></i>&nbsp;
5296
                                                                        <i class="font-grey-salt font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5297
                                                                        <i class="font-grey-salt font-lg fa fa-cogs"></i>
5298
                                                                        <br>
5299
                                                                        <i class="font-grey-salt font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5300
                                                                        <i class="font-grey-salt font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5301
                                                                        <i class="font-grey-salt font-lg glyphicon glyphicon-warning-sign"></i>
5302
                                                                        <br> </div>
5303
                                                                    <h4>Background matching icon font</h4>
5304
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-salt">
5305
                                                                        <i class="bg-font-grey-salt font-lg icon-user"></i>&nbsp;
5306
                                                                        <i class="bg-font-grey-salt font-lg icon-settings"></i>&nbsp;
5307
                                                                        <i class="bg-font-grey-salt font-lg icon-calendar"></i>
5308
                                                                        <br>
5309
                                                                        <i class="bg-font-grey-salt font-lg fa fa-bar-chart-o"></i>&nbsp;
5310
                                                                        <i class="bg-font-grey-salt font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5311
                                                                        <i class="bg-font-grey-salt font-lg fa fa-cogs"></i>
5312
                                                                        <br>
5313
                                                                        <i class="bg-font-grey-salt font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5314
                                                                        <i class="bg-font-grey-salt font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5315
                                                                        <i class="bg-font-grey-salt font-lg glyphicon glyphicon-warning-sign"></i>
5316
                                                                        <br> </div>
5317
                                                                    <h4>Class usage</h4> <code>class="font-grey-salt"</code> </div>
5318
                                                                <div class="tab-pane" id="grey-salt_tab_2_content">
5319
                                                                    <div style="margin: 30px 0;">
5320
                                                                        <div class="border-grey-salt margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-grey-salt"</code> </div>
5321
                                                                    <div style="margin: 30px 0;">
5322
                                                                        <div class="bg-grey-salt bg-font-grey-salt margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-grey-salt bg-font-grey-salt"</code> </div>
5323
                                                                </div>
5324
                                                                <div class="tab-pane" id="grey-salt_tab_3_content">
5325
                                                                    <div style="margin: 10px 0 30px 0">
5326
                                                                        <a href="#" class="btn uppercase grey-salt">Button</a> &nbsp; <code>class="btn grey-salt"</code> </div>
5327
                                                                    <div style="margin: 10px 0 30px 0">
5328
                                                                        <a href="#" class="btn sbold uppercase btn-outline grey-salt">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey-salt"</code> </div>
5329
                                                                    <div style="margin: 10px 0 30px 0">
5330
                                                                        <a href="#" class="btn sbold uppercase btn-circle grey-salt">Button</a> &nbsp; <code>class="btn btn-circle grey-salt"</code> </div>
5331
                                                                </div>
5332
                                                                <div class="tab-pane" id="grey-salt_tab_4_content">
5333
                                                                    <div style="margin: 10px 0 30px 0">
5334
                                                                        <h4>Statistic Widgets</h4>
5335
                                                                        <div class="dashboard-stat grey-salt">
5336
                                                                            <div class="visual">
5337
                                                                                <i class="fa fa-bar-chart-o"></i>
5338
                                                                            </div>
5339
                                                                            <div class="details">
5340
                                                                                <div class="number"> 12,5M$ </div>
5341
                                                                                <div class="desc"> Total Profit </div>
5342
                                                                            </div>
5343
                                                                            <a class="more" href="javascript:;"> View more
5344
                                                                                <i class="m-icon-swapright m-icon-white"></i>
5345
                                                                            </a>
5346
                                                                        </div> <code>class="dashboard-stat grey-salt"</code> </div>
5347
                                                                </div>
5348
                                                            </div>
5349
                                                        </div>
5350
                                                    </div>
5351
                                                    <div class="modal-footer">
5352
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
5353
                                                    </div>
5354
                                                </div>
5355
                                            </div>
5356
                                        </div>
5357
                                    </div>
5358
                                    <div class="col-md-2 col-sm-2 col-xs-6">
5359
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_grey-mint">
5360
                                            <div class="color-view bg-grey-mint bg-font-grey-mint bold uppercase"> #525e64 </div>
5361
                                            <div class="color-info bg-white c-font-14 sbold"> grey-mint </div>
5362
                                        </div>
5363
                                        <div class="modal fade" id="demo_modal_grey-mint">
5364
                                            <div class="modal-dialog modal-lg">
5365
                                                <div class="modal-content c-square">
5366
                                                    <div class="modal-header">
5367
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5368
                                                            <span aria-hidden="true">&times;</span>
5369
                                                        </button>
5370
                                                        <h4 class="modal-title bold uppercase font-grey-mint">grey-mint</h4>
5371
                                                    </div>
5372
                                                    <div class="modal-body">
5373
                                                        <div class="tabbable-line">
5374
                                                            <ul class="nav nav-tabs uppercase bold">
5375
                                                                <li class="active">
5376
                                                                    <a href="#grey-mint_tab_1_content" data-toggle="tab">Typography</a>
5377
                                                                </li>
5378
                                                                <li>
5379
                                                                    <a href="#grey-mint_tab_2_content" data-toggle="tab">Background & Border</a>
5380
                                                                </li>
5381
                                                                <li>
5382
                                                                    <a href="#grey-mint_tab_3_content" data-toggle="tab">Buttons</a>
5383
                                                                </li>
5384
                                                                <li>
5385
                                                                    <a href="#grey-mint_tab_4_content" data-toggle="tab">Components</a>
5386
                                                                </li>
5387
                                                            </ul>
5388
                                                            <div class="tab-content">
5389
                                                                <div class="tab-pane active" id="grey-mint_tab_1_content">
5390
                                                                    <h4>Text font</h4>
5391
                                                                    <div style="margin: 10px 0 30px 0">
5392
                                                                        <span class="font-grey-mint font-lg">Some sample text goes here...</span>
5393
                                                                        <br>
5394
                                                                        <span class="font-grey-mint font-lg sbold">Some sample text goes here...</span>
5395
                                                                        <br>
5396
                                                                        <span class="font-grey-mint font-lg bold uppercase">Some sample text goes here...</span>
5397
                                                                    </div>
5398
                                                                    <h4>Background matching text font</h4>
5399
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-mint">
5400
                                                                        <span class="bg-font-grey-mint font-lg">Some sample text goes here...</span>
5401
                                                                        <br>
5402
                                                                        <span class="bg-font-grey-mint font-lg sbold">Some sample text goes here...</span>
5403
                                                                        <br>
5404
                                                                        <span class="bg-font-grey-mint font-lg bold uppercase">Some sample text goes here...</span>
5405
                                                                    </div>
5406
                                                                    <h4>Icon font</h4>
5407
                                                                    <div style="margin: 10px 0 30px 0">
5408
                                                                        <i class="font-grey-mint font-lg icon-user"></i>&nbsp;
5409
                                                                        <i class="font-grey-mint font-lg icon-settings"></i>&nbsp;
5410
                                                                        <i class="font-grey-mint font-lg icon-calendar"></i>
5411
                                                                        <br>
5412
                                                                        <i class="font-grey-mint font-lg fa fa-bar-chart-o"></i>&nbsp;
5413
                                                                        <i class="font-grey-mint font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5414
                                                                        <i class="font-grey-mint font-lg fa fa-cogs"></i>
5415
                                                                        <br>
5416
                                                                        <i class="font-grey-mint font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5417
                                                                        <i class="font-grey-mint font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5418
                                                                        <i class="font-grey-mint font-lg glyphicon glyphicon-warning-sign"></i>
5419
                                                                        <br> </div>
5420
                                                                    <h4>Background matching icon font</h4>
5421
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-grey-mint">
5422
                                                                        <i class="bg-font-grey-mint font-lg icon-user"></i>&nbsp;
5423
                                                                        <i class="bg-font-grey-mint font-lg icon-settings"></i>&nbsp;
5424
                                                                        <i class="bg-font-grey-mint font-lg icon-calendar"></i>
5425
                                                                        <br>
5426
                                                                        <i class="bg-font-grey-mint font-lg fa fa-bar-chart-o"></i>&nbsp;
5427
                                                                        <i class="bg-font-grey-mint font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5428
                                                                        <i class="bg-font-grey-mint font-lg fa fa-cogs"></i>
5429
                                                                        <br>
5430
                                                                        <i class="bg-font-grey-mint font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5431
                                                                        <i class="bg-font-grey-mint font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5432
                                                                        <i class="bg-font-grey-mint font-lg glyphicon glyphicon-warning-sign"></i>
5433
                                                                        <br> </div>
5434
                                                                    <h4>Class usage</h4> <code>class="font-grey-mint"</code> </div>
5435
                                                                <div class="tab-pane" id="grey-mint_tab_2_content">
5436
                                                                    <div style="margin: 30px 0;">
5437
                                                                        <div class="border-grey-mint margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-grey-mint"</code> </div>
5438
                                                                    <div style="margin: 30px 0;">
5439
                                                                        <div class="bg-grey-mint bg-font-grey-mint margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-grey-mint bg-font-grey-mint"</code> </div>
5440
                                                                </div>
5441
                                                                <div class="tab-pane" id="grey-mint_tab_3_content">
5442
                                                                    <div style="margin: 10px 0 30px 0">
5443
                                                                        <a href="#" class="btn uppercase grey-mint">Button</a> &nbsp; <code>class="btn grey-mint"</code> </div>
5444
                                                                    <div style="margin: 10px 0 30px 0">
5445
                                                                        <a href="#" class="btn sbold uppercase btn-outline grey-mint">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-grey-mint"</code> </div>
5446
                                                                    <div style="margin: 10px 0 30px 0">
5447
                                                                        <a href="#" class="btn sbold uppercase btn-circle grey-mint">Button</a> &nbsp; <code>class="btn btn-circle grey-mint"</code> </div>
5448
                                                                </div>
5449
                                                                <div class="tab-pane" id="grey-mint_tab_4_content">
5450
                                                                    <div style="margin: 10px 0 30px 0">
5451
                                                                        <h4>Statistic Widgets</h4>
5452
                                                                        <div class="dashboard-stat grey-mint">
5453
                                                                            <div class="visual">
5454
                                                                                <i class="fa fa-bar-chart-o"></i>
5455
                                                                            </div>
5456
                                                                            <div class="details">
5457
                                                                                <div class="number"> 12,5M$ </div>
5458
                                                                                <div class="desc"> Total Profit </div>
5459
                                                                            </div>
5460
                                                                            <a class="more" href="javascript:;"> View more
5461
                                                                                <i class="m-icon-swapright m-icon-white"></i>
5462
                                                                            </a>
5463
                                                                        </div> <code>class="dashboard-stat grey-mint"</code> </div>
5464
                                                                </div>
5465
                                                            </div>
5466
                                                        </div>
5467
                                                    </div>
5468
                                                    <div class="modal-footer">
5469
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
5470
                                                    </div>
5471
                                                </div>
5472
                                            </div>
5473
                                        </div>
5474
                                    </div>
5475
                                    <div class="col-md-2 col-sm-2 col-xs-6">
5476
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red">
5477
                                            <div class="color-view bg-red bg-font-red bold uppercase"> #e7505a </div>
5478
                                            <div class="color-info bg-white c-font-14 sbold"> red </div>
5479
                                        </div>
5480
                                        <div class="modal fade" id="demo_modal_red">
5481
                                            <div class="modal-dialog modal-lg">
5482
                                                <div class="modal-content c-square">
5483
                                                    <div class="modal-header">
5484
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5485
                                                            <span aria-hidden="true">&times;</span>
5486
                                                        </button>
5487
                                                        <h4 class="modal-title bold uppercase font-red">red</h4>
5488
                                                    </div>
5489
                                                    <div class="modal-body">
5490
                                                        <div class="tabbable-line">
5491
                                                            <ul class="nav nav-tabs uppercase bold">
5492
                                                                <li class="active">
5493
                                                                    <a href="#red_tab_1_content" data-toggle="tab">Typography</a>
5494
                                                                </li>
5495
                                                                <li>
5496
                                                                    <a href="#red_tab_2_content" data-toggle="tab">Background & Border</a>
5497
                                                                </li>
5498
                                                                <li>
5499
                                                                    <a href="#red_tab_3_content" data-toggle="tab">Buttons</a>
5500
                                                                </li>
5501
                                                                <li>
5502
                                                                    <a href="#red_tab_4_content" data-toggle="tab">Components</a>
5503
                                                                </li>
5504
                                                            </ul>
5505
                                                            <div class="tab-content">
5506
                                                                <div class="tab-pane active" id="red_tab_1_content">
5507
                                                                    <h4>Text font</h4>
5508
                                                                    <div style="margin: 10px 0 30px 0">
5509
                                                                        <span class="font-red font-lg">Some sample text goes here...</span>
5510
                                                                        <br>
5511
                                                                        <span class="font-red font-lg sbold">Some sample text goes here...</span>
5512
                                                                        <br>
5513
                                                                        <span class="font-red font-lg bold uppercase">Some sample text goes here...</span>
5514
                                                                    </div>
5515
                                                                    <h4>Background matching text font</h4>
5516
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red">
5517
                                                                        <span class="bg-font-red font-lg">Some sample text goes here...</span>
5518
                                                                        <br>
5519
                                                                        <span class="bg-font-red font-lg sbold">Some sample text goes here...</span>
5520
                                                                        <br>
5521
                                                                        <span class="bg-font-red font-lg bold uppercase">Some sample text goes here...</span>
5522
                                                                    </div>
5523
                                                                    <h4>Icon font</h4>
5524
                                                                    <div style="margin: 10px 0 30px 0">
5525
                                                                        <i class="font-red font-lg icon-user"></i>&nbsp;
5526
                                                                        <i class="font-red font-lg icon-settings"></i>&nbsp;
5527
                                                                        <i class="font-red font-lg icon-calendar"></i>
5528
                                                                        <br>
5529
                                                                        <i class="font-red font-lg fa fa-bar-chart-o"></i>&nbsp;
5530
                                                                        <i class="font-red font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5531
                                                                        <i class="font-red font-lg fa fa-cogs"></i>
5532
                                                                        <br>
5533
                                                                        <i class="font-red font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5534
                                                                        <i class="font-red font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5535
                                                                        <i class="font-red font-lg glyphicon glyphicon-warning-sign"></i>
5536
                                                                        <br> </div>
5537
                                                                    <h4>Background matching icon font</h4>
5538
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red">
5539
                                                                        <i class="bg-font-red font-lg icon-user"></i>&nbsp;
5540
                                                                        <i class="bg-font-red font-lg icon-settings"></i>&nbsp;
5541
                                                                        <i class="bg-font-red font-lg icon-calendar"></i>
5542
                                                                        <br>
5543
                                                                        <i class="bg-font-red font-lg fa fa-bar-chart-o"></i>&nbsp;
5544
                                                                        <i class="bg-font-red font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5545
                                                                        <i class="bg-font-red font-lg fa fa-cogs"></i>
5546
                                                                        <br>
5547
                                                                        <i class="bg-font-red font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5548
                                                                        <i class="bg-font-red font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5549
                                                                        <i class="bg-font-red font-lg glyphicon glyphicon-warning-sign"></i>
5550
                                                                        <br> </div>
5551
                                                                    <h4>Class usage</h4> <code>class="font-red"</code> </div>
5552
                                                                <div class="tab-pane" id="red_tab_2_content">
5553
                                                                    <div style="margin: 30px 0;">
5554
                                                                        <div class="border-red margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-red"</code> </div>
5555
                                                                    <div style="margin: 30px 0;">
5556
                                                                        <div class="bg-red bg-font-red margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-red bg-font-red"</code> </div>
5557
                                                                </div>
5558
                                                                <div class="tab-pane" id="red_tab_3_content">
5559
                                                                    <div style="margin: 10px 0 30px 0">
5560
                                                                        <a href="#" class="btn uppercase red">Button</a> &nbsp; <code>class="btn red"</code> </div>
5561
                                                                    <div style="margin: 10px 0 30px 0">
5562
                                                                        <a href="#" class="btn sbold uppercase btn-outline red">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-red"</code> </div>
5563
                                                                    <div style="margin: 10px 0 30px 0">
5564
                                                                        <a href="#" class="btn sbold uppercase btn-circle red">Button</a> &nbsp; <code>class="btn btn-circle red"</code> </div>
5565
                                                                </div>
5566
                                                                <div class="tab-pane" id="red_tab_4_content">
5567
                                                                    <div style="margin: 10px 0 30px 0">
5568
                                                                        <h4>Statistic Widgets</h4>
5569
                                                                        <div class="dashboard-stat red">
5570
                                                                            <div class="visual">
5571
                                                                                <i class="fa fa-bar-chart-o"></i>
5572
                                                                            </div>
5573
                                                                            <div class="details">
5574
                                                                                <div class="number"> 12,5M$ </div>
5575
                                                                                <div class="desc"> Total Profit </div>
5576
                                                                            </div>
5577
                                                                            <a class="more" href="javascript:;"> View more
5578
                                                                                <i class="m-icon-swapright m-icon-white"></i>
5579
                                                                            </a>
5580
                                                                        </div> <code>class="dashboard-stat red"</code> </div>
5581
                                                                </div>
5582
                                                            </div>
5583
                                                        </div>
5584
                                                    </div>
5585
                                                    <div class="modal-footer">
5586
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
5587
                                                    </div>
5588
                                                </div>
5589
                                            </div>
5590
                                        </div>
5591
                                    </div>
5592
                                    <div class="col-md-2 col-sm-2 col-xs-6">
5593
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-pink">
5594
                                            <div class="color-view bg-red-pink bg-font-red-pink bold uppercase"> #E08283 </div>
5595
                                            <div class="color-info bg-white c-font-14 sbold"> red-pink </div>
5596
                                        </div>
5597
                                        <div class="modal fade" id="demo_modal_red-pink">
5598
                                            <div class="modal-dialog modal-lg">
5599
                                                <div class="modal-content c-square">
5600
                                                    <div class="modal-header">
5601
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5602
                                                            <span aria-hidden="true">&times;</span>
5603
                                                        </button>
5604
                                                        <h4 class="modal-title bold uppercase font-red-pink">red-pink</h4>
5605
                                                    </div>
5606
                                                    <div class="modal-body">
5607
                                                        <div class="tabbable-line">
5608
                                                            <ul class="nav nav-tabs uppercase bold">
5609
                                                                <li class="active">
5610
                                                                    <a href="#red-pink_tab_1_content" data-toggle="tab">Typography</a>
5611
                                                                </li>
5612
                                                                <li>
5613
                                                                    <a href="#red-pink_tab_2_content" data-toggle="tab">Background & Border</a>
5614
                                                                </li>
5615
                                                                <li>
5616
                                                                    <a href="#red-pink_tab_3_content" data-toggle="tab">Buttons</a>
5617
                                                                </li>
5618
                                                                <li>
5619
                                                                    <a href="#red-pink_tab_4_content" data-toggle="tab">Components</a>
5620
                                                                </li>
5621
                                                            </ul>
5622
                                                            <div class="tab-content">
5623
                                                                <div class="tab-pane active" id="red-pink_tab_1_content">
5624
                                                                    <h4>Text font</h4>
5625
                                                                    <div style="margin: 10px 0 30px 0">
5626
                                                                        <span class="font-red-pink font-lg">Some sample text goes here...</span>
5627
                                                                        <br>
5628
                                                                        <span class="font-red-pink font-lg sbold">Some sample text goes here...</span>
5629
                                                                        <br>
5630
                                                                        <span class="font-red-pink font-lg bold uppercase">Some sample text goes here...</span>
5631
                                                                    </div>
5632
                                                                    <h4>Background matching text font</h4>
5633
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-pink">
5634
                                                                        <span class="bg-font-red-pink font-lg">Some sample text goes here...</span>
5635
                                                                        <br>
5636
                                                                        <span class="bg-font-red-pink font-lg sbold">Some sample text goes here...</span>
5637
                                                                        <br>
5638
                                                                        <span class="bg-font-red-pink font-lg bold uppercase">Some sample text goes here...</span>
5639
                                                                    </div>
5640
                                                                    <h4>Icon font</h4>
5641
                                                                    <div style="margin: 10px 0 30px 0">
5642
                                                                        <i class="font-red-pink font-lg icon-user"></i>&nbsp;
5643
                                                                        <i class="font-red-pink font-lg icon-settings"></i>&nbsp;
5644
                                                                        <i class="font-red-pink font-lg icon-calendar"></i>
5645
                                                                        <br>
5646
                                                                        <i class="font-red-pink font-lg fa fa-bar-chart-o"></i>&nbsp;
5647
                                                                        <i class="font-red-pink font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5648
                                                                        <i class="font-red-pink font-lg fa fa-cogs"></i>
5649
                                                                        <br>
5650
                                                                        <i class="font-red-pink font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5651
                                                                        <i class="font-red-pink font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5652
                                                                        <i class="font-red-pink font-lg glyphicon glyphicon-warning-sign"></i>
5653
                                                                        <br> </div>
5654
                                                                    <h4>Background matching icon font</h4>
5655
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-pink">
5656
                                                                        <i class="bg-font-red-pink font-lg icon-user"></i>&nbsp;
5657
                                                                        <i class="bg-font-red-pink font-lg icon-settings"></i>&nbsp;
5658
                                                                        <i class="bg-font-red-pink font-lg icon-calendar"></i>
5659
                                                                        <br>
5660
                                                                        <i class="bg-font-red-pink font-lg fa fa-bar-chart-o"></i>&nbsp;
5661
                                                                        <i class="bg-font-red-pink font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5662
                                                                        <i class="bg-font-red-pink font-lg fa fa-cogs"></i>
5663
                                                                        <br>
5664
                                                                        <i class="bg-font-red-pink font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5665
                                                                        <i class="bg-font-red-pink font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5666
                                                                        <i class="bg-font-red-pink font-lg glyphicon glyphicon-warning-sign"></i>
5667
                                                                        <br> </div>
5668
                                                                    <h4>Class usage</h4> <code>class="font-red-pink"</code> </div>
5669
                                                                <div class="tab-pane" id="red-pink_tab_2_content">
5670
                                                                    <div style="margin: 30px 0;">
5671
                                                                        <div class="border-red-pink margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-red-pink"</code> </div>
5672
                                                                    <div style="margin: 30px 0;">
5673
                                                                        <div class="bg-red-pink bg-font-red-pink margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-red-pink bg-font-red-pink"</code> </div>
5674
                                                                </div>
5675
                                                                <div class="tab-pane" id="red-pink_tab_3_content">
5676
                                                                    <div style="margin: 10px 0 30px 0">
5677
                                                                        <a href="#" class="btn uppercase red-pink">Button</a> &nbsp; <code>class="btn red-pink"</code> </div>
5678
                                                                    <div style="margin: 10px 0 30px 0">
5679
                                                                        <a href="#" class="btn sbold uppercase btn-outline red-pink">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-red-pink"</code> </div>
5680
                                                                    <div style="margin: 10px 0 30px 0">
5681
                                                                        <a href="#" class="btn sbold uppercase btn-circle red-pink">Button</a> &nbsp; <code>class="btn btn-circle red-pink"</code> </div>
5682
                                                                </div>
5683
                                                                <div class="tab-pane" id="red-pink_tab_4_content">
5684
                                                                    <div style="margin: 10px 0 30px 0">
5685
                                                                        <h4>Statistic Widgets</h4>
5686
                                                                        <div class="dashboard-stat red-pink">
5687
                                                                            <div class="visual">
5688
                                                                                <i class="fa fa-bar-chart-o"></i>
5689
                                                                            </div>
5690
                                                                            <div class="details">
5691
                                                                                <div class="number"> 12,5M$ </div>
5692
                                                                                <div class="desc"> Total Profit </div>
5693
                                                                            </div>
5694
                                                                            <a class="more" href="javascript:;"> View more
5695
                                                                                <i class="m-icon-swapright m-icon-white"></i>
5696
                                                                            </a>
5697
                                                                        </div> <code>class="dashboard-stat red-pink"</code> </div>
5698
                                                                </div>
5699
                                                            </div>
5700
                                                        </div>
5701
                                                    </div>
5702
                                                    <div class="modal-footer">
5703
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
5704
                                                    </div>
5705
                                                </div>
5706
                                            </div>
5707
                                        </div>
5708
                                    </div>
5709
                                    <div class="col-md-2 col-sm-2 col-xs-6">
5710
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-sunglo">
5711
                                            <div class="color-view bg-red-sunglo bg-font-red-sunglo bold uppercase"> #E26A6A </div>
5712
                                            <div class="color-info bg-white c-font-14 sbold"> red-sunglo </div>
5713
                                        </div>
5714
                                        <div class="modal fade" id="demo_modal_red-sunglo">
5715
                                            <div class="modal-dialog modal-lg">
5716
                                                <div class="modal-content c-square">
5717
                                                    <div class="modal-header">
5718
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5719
                                                            <span aria-hidden="true">&times;</span>
5720
                                                        </button>
5721
                                                        <h4 class="modal-title bold uppercase font-red-sunglo">red-sunglo</h4>
5722
                                                    </div>
5723
                                                    <div class="modal-body">
5724
                                                        <div class="tabbable-line">
5725
                                                            <ul class="nav nav-tabs uppercase bold">
5726
                                                                <li class="active">
5727
                                                                    <a href="#red-sunglo_tab_1_content" data-toggle="tab">Typography</a>
5728
                                                                </li>
5729
                                                                <li>
5730
                                                                    <a href="#red-sunglo_tab_2_content" data-toggle="tab">Background & Border</a>
5731
                                                                </li>
5732
                                                                <li>
5733
                                                                    <a href="#red-sunglo_tab_3_content" data-toggle="tab">Buttons</a>
5734
                                                                </li>
5735
                                                                <li>
5736
                                                                    <a href="#red-sunglo_tab_4_content" data-toggle="tab">Components</a>
5737
                                                                </li>
5738
                                                            </ul>
5739
                                                            <div class="tab-content">
5740
                                                                <div class="tab-pane active" id="red-sunglo_tab_1_content">
5741
                                                                    <h4>Text font</h4>
5742
                                                                    <div style="margin: 10px 0 30px 0">
5743
                                                                        <span class="font-red-sunglo font-lg">Some sample text goes here...</span>
5744
                                                                        <br>
5745
                                                                        <span class="font-red-sunglo font-lg sbold">Some sample text goes here...</span>
5746
                                                                        <br>
5747
                                                                        <span class="font-red-sunglo font-lg bold uppercase">Some sample text goes here...</span>
5748
                                                                    </div>
5749
                                                                    <h4>Background matching text font</h4>
5750
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-sunglo">
5751
                                                                        <span class="bg-font-red-sunglo font-lg">Some sample text goes here...</span>
5752
                                                                        <br>
5753
                                                                        <span class="bg-font-red-sunglo font-lg sbold">Some sample text goes here...</span>
5754
                                                                        <br>
5755
                                                                        <span class="bg-font-red-sunglo font-lg bold uppercase">Some sample text goes here...</span>
5756
                                                                    </div>
5757
                                                                    <h4>Icon font</h4>
5758
                                                                    <div style="margin: 10px 0 30px 0">
5759
                                                                        <i class="font-red-sunglo font-lg icon-user"></i>&nbsp;
5760
                                                                        <i class="font-red-sunglo font-lg icon-settings"></i>&nbsp;
5761
                                                                        <i class="font-red-sunglo font-lg icon-calendar"></i>
5762
                                                                        <br>
5763
                                                                        <i class="font-red-sunglo font-lg fa fa-bar-chart-o"></i>&nbsp;
5764
                                                                        <i class="font-red-sunglo font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5765
                                                                        <i class="font-red-sunglo font-lg fa fa-cogs"></i>
5766
                                                                        <br>
5767
                                                                        <i class="font-red-sunglo font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5768
                                                                        <i class="font-red-sunglo font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5769
                                                                        <i class="font-red-sunglo font-lg glyphicon glyphicon-warning-sign"></i>
5770
                                                                        <br> </div>
5771
                                                                    <h4>Background matching icon font</h4>
5772
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-sunglo">
5773
                                                                        <i class="bg-font-red-sunglo font-lg icon-user"></i>&nbsp;
5774
                                                                        <i class="bg-font-red-sunglo font-lg icon-settings"></i>&nbsp;
5775
                                                                        <i class="bg-font-red-sunglo font-lg icon-calendar"></i>
5776
                                                                        <br>
5777
                                                                        <i class="bg-font-red-sunglo font-lg fa fa-bar-chart-o"></i>&nbsp;
5778
                                                                        <i class="bg-font-red-sunglo font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5779
                                                                        <i class="bg-font-red-sunglo font-lg fa fa-cogs"></i>
5780
                                                                        <br>
5781
                                                                        <i class="bg-font-red-sunglo font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5782
                                                                        <i class="bg-font-red-sunglo font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5783
                                                                        <i class="bg-font-red-sunglo font-lg glyphicon glyphicon-warning-sign"></i>
5784
                                                                        <br> </div>
5785
                                                                    <h4>Class usage</h4> <code>class="font-red-sunglo"</code> </div>
5786
                                                                <div class="tab-pane" id="red-sunglo_tab_2_content">
5787
                                                                    <div style="margin: 30px 0;">
5788
                                                                        <div class="border-red-sunglo margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-red-sunglo"</code> </div>
5789
                                                                    <div style="margin: 30px 0;">
5790
                                                                        <div class="bg-red-sunglo bg-font-red-sunglo margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-red-sunglo bg-font-red-sunglo"</code> </div>
5791
                                                                </div>
5792
                                                                <div class="tab-pane" id="red-sunglo_tab_3_content">
5793
                                                                    <div style="margin: 10px 0 30px 0">
5794
                                                                        <a href="#" class="btn uppercase red-sunglo">Button</a> &nbsp; <code>class="btn red-sunglo"</code> </div>
5795
                                                                    <div style="margin: 10px 0 30px 0">
5796
                                                                        <a href="#" class="btn sbold uppercase btn-outline red-sunglo">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-red-sunglo"</code> </div>
5797
                                                                    <div style="margin: 10px 0 30px 0">
5798
                                                                        <a href="#" class="btn sbold uppercase btn-circle red-sunglo">Button</a> &nbsp; <code>class="btn btn-circle red-sunglo"</code> </div>
5799
                                                                </div>
5800
                                                                <div class="tab-pane" id="red-sunglo_tab_4_content">
5801
                                                                    <div style="margin: 10px 0 30px 0">
5802
                                                                        <h4>Statistic Widgets</h4>
5803
                                                                        <div class="dashboard-stat red-sunglo">
5804
                                                                            <div class="visual">
5805
                                                                                <i class="fa fa-bar-chart-o"></i>
5806
                                                                            </div>
5807
                                                                            <div class="details">
5808
                                                                                <div class="number"> 12,5M$ </div>
5809
                                                                                <div class="desc"> Total Profit </div>
5810
                                                                            </div>
5811
                                                                            <a class="more" href="javascript:;"> View more
5812
                                                                                <i class="m-icon-swapright m-icon-white"></i>
5813
                                                                            </a>
5814
                                                                        </div> <code>class="dashboard-stat red-sunglo"</code> </div>
5815
                                                                </div>
5816
                                                            </div>
5817
                                                        </div>
5818
                                                    </div>
5819
                                                    <div class="modal-footer">
5820
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
5821
                                                    </div>
5822
                                                </div>
5823
                                            </div>
5824
                                        </div>
5825
                                    </div>
5826
                                    <div class="col-md-2 col-sm-2 col-xs-6">
5827
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-intense">
5828
                                            <div class="color-view bg-red-intense bg-font-red-intense bold uppercase"> #e35b5a </div>
5829
                                            <div class="color-info bg-white c-font-14 sbold"> red-intense </div>
5830
                                        </div>
5831
                                        <div class="modal fade" id="demo_modal_red-intense">
5832
                                            <div class="modal-dialog modal-lg">
5833
                                                <div class="modal-content c-square">
5834
                                                    <div class="modal-header">
5835
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5836
                                                            <span aria-hidden="true">&times;</span>
5837
                                                        </button>
5838
                                                        <h4 class="modal-title bold uppercase font-red-intense">red-intense</h4>
5839
                                                    </div>
5840
                                                    <div class="modal-body">
5841
                                                        <div class="tabbable-line">
5842
                                                            <ul class="nav nav-tabs uppercase bold">
5843
                                                                <li class="active">
5844
                                                                    <a href="#red-intense_tab_1_content" data-toggle="tab">Typography</a>
5845
                                                                </li>
5846
                                                                <li>
5847
                                                                    <a href="#red-intense_tab_2_content" data-toggle="tab">Background & Border</a>
5848
                                                                </li>
5849
                                                                <li>
5850
                                                                    <a href="#red-intense_tab_3_content" data-toggle="tab">Buttons</a>
5851
                                                                </li>
5852
                                                                <li>
5853
                                                                    <a href="#red-intense_tab_4_content" data-toggle="tab">Components</a>
5854
                                                                </li>
5855
                                                            </ul>
5856
                                                            <div class="tab-content">
5857
                                                                <div class="tab-pane active" id="red-intense_tab_1_content">
5858
                                                                    <h4>Text font</h4>
5859
                                                                    <div style="margin: 10px 0 30px 0">
5860
                                                                        <span class="font-red-intense font-lg">Some sample text goes here...</span>
5861
                                                                        <br>
5862
                                                                        <span class="font-red-intense font-lg sbold">Some sample text goes here...</span>
5863
                                                                        <br>
5864
                                                                        <span class="font-red-intense font-lg bold uppercase">Some sample text goes here...</span>
5865
                                                                    </div>
5866
                                                                    <h4>Background matching text font</h4>
5867
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-intense">
5868
                                                                        <span class="bg-font-red-intense font-lg">Some sample text goes here...</span>
5869
                                                                        <br>
5870
                                                                        <span class="bg-font-red-intense font-lg sbold">Some sample text goes here...</span>
5871
                                                                        <br>
5872
                                                                        <span class="bg-font-red-intense font-lg bold uppercase">Some sample text goes here...</span>
5873
                                                                    </div>
5874
                                                                    <h4>Icon font</h4>
5875
                                                                    <div style="margin: 10px 0 30px 0">
5876
                                                                        <i class="font-red-intense font-lg icon-user"></i>&nbsp;
5877
                                                                        <i class="font-red-intense font-lg icon-settings"></i>&nbsp;
5878
                                                                        <i class="font-red-intense font-lg icon-calendar"></i>
5879
                                                                        <br>
5880
                                                                        <i class="font-red-intense font-lg fa fa-bar-chart-o"></i>&nbsp;
5881
                                                                        <i class="font-red-intense font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5882
                                                                        <i class="font-red-intense font-lg fa fa-cogs"></i>
5883
                                                                        <br>
5884
                                                                        <i class="font-red-intense font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5885
                                                                        <i class="font-red-intense font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5886
                                                                        <i class="font-red-intense font-lg glyphicon glyphicon-warning-sign"></i>
5887
                                                                        <br> </div>
5888
                                                                    <h4>Background matching icon font</h4>
5889
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-intense">
5890
                                                                        <i class="bg-font-red-intense font-lg icon-user"></i>&nbsp;
5891
                                                                        <i class="bg-font-red-intense font-lg icon-settings"></i>&nbsp;
5892
                                                                        <i class="bg-font-red-intense font-lg icon-calendar"></i>
5893
                                                                        <br>
5894
                                                                        <i class="bg-font-red-intense font-lg fa fa-bar-chart-o"></i>&nbsp;
5895
                                                                        <i class="bg-font-red-intense font-lg fa fa-code-fork icon-settings"></i>&nbsp;
5896
                                                                        <i class="bg-font-red-intense font-lg fa fa-cogs"></i>
5897
                                                                        <br>
5898
                                                                        <i class="bg-font-red-intense font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
5899
                                                                        <i class="bg-font-red-intense font-lg glyphicon glyphicon-leaf"></i>&nbsp;
5900
                                                                        <i class="bg-font-red-intense font-lg glyphicon glyphicon-warning-sign"></i>
5901
                                                                        <br> </div>
5902
                                                                    <h4>Class usage</h4> <code>class="font-red-intense"</code> </div>
5903
                                                                <div class="tab-pane" id="red-intense_tab_2_content">
5904
                                                                    <div style="margin: 30px 0;">
5905
                                                                        <div class="border-red-intense margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-red-intense"</code> </div>
5906
                                                                    <div style="margin: 30px 0;">
5907
                                                                        <div class="bg-red-intense bg-font-red-intense margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-red-intense bg-font-red-intense"</code> </div>
5908
                                                                </div>
5909
                                                                <div class="tab-pane" id="red-intense_tab_3_content">
5910
                                                                    <div style="margin: 10px 0 30px 0">
5911
                                                                        <a href="#" class="btn uppercase red-intense">Button</a> &nbsp; <code>class="btn red-intense"</code> </div>
5912
                                                                    <div style="margin: 10px 0 30px 0">
5913
                                                                        <a href="#" class="btn sbold uppercase btn-outline red-intense">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-red-intense"</code> </div>
5914
                                                                    <div style="margin: 10px 0 30px 0">
5915
                                                                        <a href="#" class="btn sbold uppercase btn-circle red-intense">Button</a> &nbsp; <code>class="btn btn-circle red-intense"</code> </div>
5916
                                                                </div>
5917
                                                                <div class="tab-pane" id="red-intense_tab_4_content">
5918
                                                                    <div style="margin: 10px 0 30px 0">
5919
                                                                        <h4>Statistic Widgets</h4>
5920
                                                                        <div class="dashboard-stat red-intense">
5921
                                                                            <div class="visual">
5922
                                                                                <i class="fa fa-bar-chart-o"></i>
5923
                                                                            </div>
5924
                                                                            <div class="details">
5925
                                                                                <div class="number"> 12,5M$ </div>
5926
                                                                                <div class="desc"> Total Profit </div>
5927
                                                                            </div>
5928
                                                                            <a class="more" href="javascript:;"> View more
5929
                                                                                <i class="m-icon-swapright m-icon-white"></i>
5930
                                                                            </a>
5931
                                                                        </div> <code>class="dashboard-stat red-intense"</code> </div>
5932
                                                                </div>
5933
                                                            </div>
5934
                                                        </div>
5935
                                                    </div>
5936
                                                    <div class="modal-footer">
5937
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
5938
                                                    </div>
5939
                                                </div>
5940
                                            </div>
5941
                                        </div>
5942
                                    </div>
5943
                                </div>
5944
                                <div class="row">
5945
                                    <div class="col-md-2 col-sm-2 col-xs-6">
5946
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-thunderbird">
5947
                                            <div class="color-view bg-red-thunderbird bg-font-red-thunderbird bold uppercase"> #D91E18 </div>
5948
                                            <div class="color-info bg-white c-font-14 sbold"> red-thunderbird </div>
5949
                                        </div>
5950
                                        <div class="modal fade" id="demo_modal_red-thunderbird">
5951
                                            <div class="modal-dialog modal-lg">
5952
                                                <div class="modal-content c-square">
5953
                                                    <div class="modal-header">
5954
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
5955
                                                            <span aria-hidden="true">&times;</span>
5956
                                                        </button>
5957
                                                        <h4 class="modal-title bold uppercase font-red-thunderbird">red-thunderbird</h4>
5958
                                                    </div>
5959
                                                    <div class="modal-body">
5960
                                                        <div class="tabbable-line">
5961
                                                            <ul class="nav nav-tabs uppercase bold">
5962
                                                                <li class="active">
5963
                                                                    <a href="#red-thunderbird_tab_1_content" data-toggle="tab">Typography</a>
5964
                                                                </li>
5965
                                                                <li>
5966
                                                                    <a href="#red-thunderbird_tab_2_content" data-toggle="tab">Background & Border</a>
5967
                                                                </li>
5968
                                                                <li>
5969
                                                                    <a href="#red-thunderbird_tab_3_content" data-toggle="tab">Buttons</a>
5970
                                                                </li>
5971
                                                                <li>
5972
                                                                    <a href="#red-thunderbird_tab_4_content" data-toggle="tab">Components</a>
5973
                                                                </li>
5974
                                                            </ul>
5975
                                                            <div class="tab-content">
5976
                                                                <div class="tab-pane active" id="red-thunderbird_tab_1_content">
5977
                                                                    <h4>Text font</h4>
5978
                                                                    <div style="margin: 10px 0 30px 0">
5979
                                                                        <span class="font-red-thunderbird font-lg">Some sample text goes here...</span>
5980
                                                                        <br>
5981
                                                                        <span class="font-red-thunderbird font-lg sbold">Some sample text goes here...</span>
5982
                                                                        <br>
5983
                                                                        <span class="font-red-thunderbird font-lg bold uppercase">Some sample text goes here...</span>
5984
                                                                    </div>
5985
                                                                    <h4>Background matching text font</h4>
5986
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-thunderbird">
5987
                                                                        <span class="bg-font-red-thunderbird font-lg">Some sample text goes here...</span>
5988
                                                                        <br>
5989
                                                                        <span class="bg-font-red-thunderbird font-lg sbold">Some sample text goes here...</span>
5990
                                                                        <br>
5991
                                                                        <span class="bg-font-red-thunderbird font-lg bold uppercase">Some sample text goes here...</span>
5992
                                                                    </div>
5993
                                                                    <h4>Icon font</h4>
5994
                                                                    <div style="margin: 10px 0 30px 0">
5995
                                                                        <i class="font-red-thunderbird font-lg icon-user"></i>&nbsp;
5996
                                                                        <i class="font-red-thunderbird font-lg icon-settings"></i>&nbsp;
5997
                                                                        <i class="font-red-thunderbird font-lg icon-calendar"></i>
5998
                                                                        <br>
5999
                                                                        <i class="font-red-thunderbird font-lg fa fa-bar-chart-o"></i>&nbsp;
6000
                                                                        <i class="font-red-thunderbird font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6001
                                                                        <i class="font-red-thunderbird font-lg fa fa-cogs"></i>
6002
                                                                        <br>
6003
                                                                        <i class="font-red-thunderbird font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6004
                                                                        <i class="font-red-thunderbird font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6005
                                                                        <i class="font-red-thunderbird font-lg glyphicon glyphicon-warning-sign"></i>
6006
                                                                        <br> </div>
6007
                                                                    <h4>Background matching icon font</h4>
6008
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-thunderbird">
6009
                                                                        <i class="bg-font-red-thunderbird font-lg icon-user"></i>&nbsp;
6010
                                                                        <i class="bg-font-red-thunderbird font-lg icon-settings"></i>&nbsp;
6011
                                                                        <i class="bg-font-red-thunderbird font-lg icon-calendar"></i>
6012
                                                                        <br>
6013
                                                                        <i class="bg-font-red-thunderbird font-lg fa fa-bar-chart-o"></i>&nbsp;
6014
                                                                        <i class="bg-font-red-thunderbird font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6015
                                                                        <i class="bg-font-red-thunderbird font-lg fa fa-cogs"></i>
6016
                                                                        <br>
6017
                                                                        <i class="bg-font-red-thunderbird font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6018
                                                                        <i class="bg-font-red-thunderbird font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6019
                                                                        <i class="bg-font-red-thunderbird font-lg glyphicon glyphicon-warning-sign"></i>
6020
                                                                        <br> </div>
6021
                                                                    <h4>Class usage</h4> <code>class="font-red-thunderbird"</code> </div>
6022
                                                                <div class="tab-pane" id="red-thunderbird_tab_2_content">
6023
                                                                    <div style="margin: 30px 0;">
6024
                                                                        <div class="border-red-thunderbird margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-red-thunderbird"</code> </div>
6025
                                                                    <div style="margin: 30px 0;">
6026
                                                                        <div class="bg-red-thunderbird bg-font-red-thunderbird margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-red-thunderbird bg-font-red-thunderbird"</code> </div>
6027
                                                                </div>
6028
                                                                <div class="tab-pane" id="red-thunderbird_tab_3_content">
6029
                                                                    <div style="margin: 10px 0 30px 0">
6030
                                                                        <a href="#" class="btn uppercase red-thunderbird">Button</a> &nbsp; <code>class="btn red-thunderbird"</code> </div>
6031
                                                                    <div style="margin: 10px 0 30px 0">
6032
                                                                        <a href="#" class="btn sbold uppercase btn-outline red-thunderbird">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-red-thunderbird"</code> </div>
6033
                                                                    <div style="margin: 10px 0 30px 0">
6034
                                                                        <a href="#" class="btn sbold uppercase btn-circle red-thunderbird">Button</a> &nbsp; <code>class="btn btn-circle red-thunderbird"</code> </div>
6035
                                                                </div>
6036
                                                                <div class="tab-pane" id="red-thunderbird_tab_4_content">
6037
                                                                    <div style="margin: 10px 0 30px 0">
6038
                                                                        <h4>Statistic Widgets</h4>
6039
                                                                        <div class="dashboard-stat red-thunderbird">
6040
                                                                            <div class="visual">
6041
                                                                                <i class="fa fa-bar-chart-o"></i>
6042
                                                                            </div>
6043
                                                                            <div class="details">
6044
                                                                                <div class="number"> 12,5M$ </div>
6045
                                                                                <div class="desc"> Total Profit </div>
6046
                                                                            </div>
6047
                                                                            <a class="more" href="javascript:;"> View more
6048
                                                                                <i class="m-icon-swapright m-icon-white"></i>
6049
                                                                            </a>
6050
                                                                        </div> <code>class="dashboard-stat red-thunderbird"</code> </div>
6051
                                                                </div>
6052
                                                            </div>
6053
                                                        </div>
6054
                                                    </div>
6055
                                                    <div class="modal-footer">
6056
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
6057
                                                    </div>
6058
                                                </div>
6059
                                            </div>
6060
                                        </div>
6061
                                    </div>
6062
                                    <div class="col-md-2 col-sm-2 col-xs-6">
6063
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-flamingo">
6064
                                            <div class="color-view bg-red-flamingo bg-font-red-flamingo bold uppercase"> #EF4836 </div>
6065
                                            <div class="color-info bg-white c-font-14 sbold"> red-flamingo </div>
6066
                                        </div>
6067
                                        <div class="modal fade" id="demo_modal_red-flamingo">
6068
                                            <div class="modal-dialog modal-lg">
6069
                                                <div class="modal-content c-square">
6070
                                                    <div class="modal-header">
6071
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
6072
                                                            <span aria-hidden="true">&times;</span>
6073
                                                        </button>
6074
                                                        <h4 class="modal-title bold uppercase font-red-flamingo">red-flamingo</h4>
6075
                                                    </div>
6076
                                                    <div class="modal-body">
6077
                                                        <div class="tabbable-line">
6078
                                                            <ul class="nav nav-tabs uppercase bold">
6079
                                                                <li class="active">
6080
                                                                    <a href="#red-flamingo_tab_1_content" data-toggle="tab">Typography</a>
6081
                                                                </li>
6082
                                                                <li>
6083
                                                                    <a href="#red-flamingo_tab_2_content" data-toggle="tab">Background & Border</a>
6084
                                                                </li>
6085
                                                                <li>
6086
                                                                    <a href="#red-flamingo_tab_3_content" data-toggle="tab">Buttons</a>
6087
                                                                </li>
6088
                                                                <li>
6089
                                                                    <a href="#red-flamingo_tab_4_content" data-toggle="tab">Components</a>
6090
                                                                </li>
6091
                                                            </ul>
6092
                                                            <div class="tab-content">
6093
                                                                <div class="tab-pane active" id="red-flamingo_tab_1_content">
6094
                                                                    <h4>Text font</h4>
6095
                                                                    <div style="margin: 10px 0 30px 0">
6096
                                                                        <span class="font-red-flamingo font-lg">Some sample text goes here...</span>
6097
                                                                        <br>
6098
                                                                        <span class="font-red-flamingo font-lg sbold">Some sample text goes here...</span>
6099
                                                                        <br>
6100
                                                                        <span class="font-red-flamingo font-lg bold uppercase">Some sample text goes here...</span>
6101
                                                                    </div>
6102
                                                                    <h4>Background matching text font</h4>
6103
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-flamingo">
6104
                                                                        <span class="bg-font-red-flamingo font-lg">Some sample text goes here...</span>
6105
                                                                        <br>
6106
                                                                        <span class="bg-font-red-flamingo font-lg sbold">Some sample text goes here...</span>
6107
                                                                        <br>
6108
                                                                        <span class="bg-font-red-flamingo font-lg bold uppercase">Some sample text goes here...</span>
6109
                                                                    </div>
6110
                                                                    <h4>Icon font</h4>
6111
                                                                    <div style="margin: 10px 0 30px 0">
6112
                                                                        <i class="font-red-flamingo font-lg icon-user"></i>&nbsp;
6113
                                                                        <i class="font-red-flamingo font-lg icon-settings"></i>&nbsp;
6114
                                                                        <i class="font-red-flamingo font-lg icon-calendar"></i>
6115
                                                                        <br>
6116
                                                                        <i class="font-red-flamingo font-lg fa fa-bar-chart-o"></i>&nbsp;
6117
                                                                        <i class="font-red-flamingo font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6118
                                                                        <i class="font-red-flamingo font-lg fa fa-cogs"></i>
6119
                                                                        <br>
6120
                                                                        <i class="font-red-flamingo font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6121
                                                                        <i class="font-red-flamingo font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6122
                                                                        <i class="font-red-flamingo font-lg glyphicon glyphicon-warning-sign"></i>
6123
                                                                        <br> </div>
6124
                                                                    <h4>Background matching icon font</h4>
6125
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-flamingo">
6126
                                                                        <i class="bg-font-red-flamingo font-lg icon-user"></i>&nbsp;
6127
                                                                        <i class="bg-font-red-flamingo font-lg icon-settings"></i>&nbsp;
6128
                                                                        <i class="bg-font-red-flamingo font-lg icon-calendar"></i>
6129
                                                                        <br>
6130
                                                                        <i class="bg-font-red-flamingo font-lg fa fa-bar-chart-o"></i>&nbsp;
6131
                                                                        <i class="bg-font-red-flamingo font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6132
                                                                        <i class="bg-font-red-flamingo font-lg fa fa-cogs"></i>
6133
                                                                        <br>
6134
                                                                        <i class="bg-font-red-flamingo font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6135
                                                                        <i class="bg-font-red-flamingo font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6136
                                                                        <i class="bg-font-red-flamingo font-lg glyphicon glyphicon-warning-sign"></i>
6137
                                                                        <br> </div>
6138
                                                                    <h4>Class usage</h4> <code>class="font-red-flamingo"</code> </div>
6139
                                                                <div class="tab-pane" id="red-flamingo_tab_2_content">
6140
                                                                    <div style="margin: 30px 0;">
6141
                                                                        <div class="border-red-flamingo margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-red-flamingo"</code> </div>
6142
                                                                    <div style="margin: 30px 0;">
6143
                                                                        <div class="bg-red-flamingo bg-font-red-flamingo margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-red-flamingo bg-font-red-flamingo"</code> </div>
6144
                                                                </div>
6145
                                                                <div class="tab-pane" id="red-flamingo_tab_3_content">
6146
                                                                    <div style="margin: 10px 0 30px 0">
6147
                                                                        <a href="#" class="btn uppercase red-flamingo">Button</a> &nbsp; <code>class="btn red-flamingo"</code> </div>
6148
                                                                    <div style="margin: 10px 0 30px 0">
6149
                                                                        <a href="#" class="btn sbold uppercase btn-outline red-flamingo">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-red-flamingo"</code> </div>
6150
                                                                    <div style="margin: 10px 0 30px 0">
6151
                                                                        <a href="#" class="btn sbold uppercase btn-circle red-flamingo">Button</a> &nbsp; <code>class="btn btn-circle red-flamingo"</code> </div>
6152
                                                                </div>
6153
                                                                <div class="tab-pane" id="red-flamingo_tab_4_content">
6154
                                                                    <div style="margin: 10px 0 30px 0">
6155
                                                                        <h4>Statistic Widgets</h4>
6156
                                                                        <div class="dashboard-stat red-flamingo">
6157
                                                                            <div class="visual">
6158
                                                                                <i class="fa fa-bar-chart-o"></i>
6159
                                                                            </div>
6160
                                                                            <div class="details">
6161
                                                                                <div class="number"> 12,5M$ </div>
6162
                                                                                <div class="desc"> Total Profit </div>
6163
                                                                            </div>
6164
                                                                            <a class="more" href="javascript:;"> View more
6165
                                                                                <i class="m-icon-swapright m-icon-white"></i>
6166
                                                                            </a>
6167
                                                                        </div> <code>class="dashboard-stat red-flamingo"</code> </div>
6168
                                                                </div>
6169
                                                            </div>
6170
                                                        </div>
6171
                                                    </div>
6172
                                                    <div class="modal-footer">
6173
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
6174
                                                    </div>
6175
                                                </div>
6176
                                            </div>
6177
                                        </div>
6178
                                    </div>
6179
                                    <div class="col-md-2 col-sm-2 col-xs-6">
6180
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-soft">
6181
                                            <div class="color-view bg-red-soft bg-font-red-soft bold uppercase"> #d05454 </div>
6182
                                            <div class="color-info bg-white c-font-14 sbold"> red-soft </div>
6183
                                        </div>
6184
                                        <div class="modal fade" id="demo_modal_red-soft">
6185
                                            <div class="modal-dialog modal-lg">
6186
                                                <div class="modal-content c-square">
6187
                                                    <div class="modal-header">
6188
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
6189
                                                            <span aria-hidden="true">&times;</span>
6190
                                                        </button>
6191
                                                        <h4 class="modal-title bold uppercase font-red-soft">red-soft</h4>
6192
                                                    </div>
6193
                                                    <div class="modal-body">
6194
                                                        <div class="tabbable-line">
6195
                                                            <ul class="nav nav-tabs uppercase bold">
6196
                                                                <li class="active">
6197
                                                                    <a href="#red-soft_tab_1_content" data-toggle="tab">Typography</a>
6198
                                                                </li>
6199
                                                                <li>
6200
                                                                    <a href="#red-soft_tab_2_content" data-toggle="tab">Background & Border</a>
6201
                                                                </li>
6202
                                                                <li>
6203
                                                                    <a href="#red-soft_tab_3_content" data-toggle="tab">Buttons</a>
6204
                                                                </li>
6205
                                                                <li>
6206
                                                                    <a href="#red-soft_tab_4_content" data-toggle="tab">Components</a>
6207
                                                                </li>
6208
                                                            </ul>
6209
                                                            <div class="tab-content">
6210
                                                                <div class="tab-pane active" id="red-soft_tab_1_content">
6211
                                                                    <h4>Text font</h4>
6212
                                                                    <div style="margin: 10px 0 30px 0">
6213
                                                                        <span class="font-red-soft font-lg">Some sample text goes here...</span>
6214
                                                                        <br>
6215
                                                                        <span class="font-red-soft font-lg sbold">Some sample text goes here...</span>
6216
                                                                        <br>
6217
                                                                        <span class="font-red-soft font-lg bold uppercase">Some sample text goes here...</span>
6218
                                                                    </div>
6219
                                                                    <h4>Background matching text font</h4>
6220
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-soft">
6221
                                                                        <span class="bg-font-red-soft font-lg">Some sample text goes here...</span>
6222
                                                                        <br>
6223
                                                                        <span class="bg-font-red-soft font-lg sbold">Some sample text goes here...</span>
6224
                                                                        <br>
6225
                                                                        <span class="bg-font-red-soft font-lg bold uppercase">Some sample text goes here...</span>
6226
                                                                    </div>
6227
                                                                    <h4>Icon font</h4>
6228
                                                                    <div style="margin: 10px 0 30px 0">
6229
                                                                        <i class="font-red-soft font-lg icon-user"></i>&nbsp;
6230
                                                                        <i class="font-red-soft font-lg icon-settings"></i>&nbsp;
6231
                                                                        <i class="font-red-soft font-lg icon-calendar"></i>
6232
                                                                        <br>
6233
                                                                        <i class="font-red-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
6234
                                                                        <i class="font-red-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6235
                                                                        <i class="font-red-soft font-lg fa fa-cogs"></i>
6236
                                                                        <br>
6237
                                                                        <i class="font-red-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6238
                                                                        <i class="font-red-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6239
                                                                        <i class="font-red-soft font-lg glyphicon glyphicon-warning-sign"></i>
6240
                                                                        <br> </div>
6241
                                                                    <h4>Background matching icon font</h4>
6242
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-soft">
6243
                                                                        <i class="bg-font-red-soft font-lg icon-user"></i>&nbsp;
6244
                                                                        <i class="bg-font-red-soft font-lg icon-settings"></i>&nbsp;
6245
                                                                        <i class="bg-font-red-soft font-lg icon-calendar"></i>
6246
                                                                        <br>
6247
                                                                        <i class="bg-font-red-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
6248
                                                                        <i class="bg-font-red-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6249
                                                                        <i class="bg-font-red-soft font-lg fa fa-cogs"></i>
6250
                                                                        <br>
6251
                                                                        <i class="bg-font-red-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6252
                                                                        <i class="bg-font-red-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6253
                                                                        <i class="bg-font-red-soft font-lg glyphicon glyphicon-warning-sign"></i>
6254
                                                                        <br> </div>
6255
                                                                    <h4>Class usage</h4> <code>class="font-red-soft"</code> </div>
6256
                                                                <div class="tab-pane" id="red-soft_tab_2_content">
6257
                                                                    <div style="margin: 30px 0;">
6258
                                                                        <div class="border-red-soft margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-red-soft"</code> </div>
6259
                                                                    <div style="margin: 30px 0;">
6260
                                                                        <div class="bg-red-soft bg-font-red-soft margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-red-soft bg-font-red-soft"</code> </div>
6261
                                                                </div>
6262
                                                                <div class="tab-pane" id="red-soft_tab_3_content">
6263
                                                                    <div style="margin: 10px 0 30px 0">
6264
                                                                        <a href="#" class="btn uppercase red-soft">Button</a> &nbsp; <code>class="btn red-soft"</code> </div>
6265
                                                                    <div style="margin: 10px 0 30px 0">
6266
                                                                        <a href="#" class="btn sbold uppercase btn-outline red-soft">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-red-soft"</code> </div>
6267
                                                                    <div style="margin: 10px 0 30px 0">
6268
                                                                        <a href="#" class="btn sbold uppercase btn-circle red-soft">Button</a> &nbsp; <code>class="btn btn-circle red-soft"</code> </div>
6269
                                                                </div>
6270
                                                                <div class="tab-pane" id="red-soft_tab_4_content">
6271
                                                                    <div style="margin: 10px 0 30px 0">
6272
                                                                        <h4>Statistic Widgets</h4>
6273
                                                                        <div class="dashboard-stat red-soft">
6274
                                                                            <div class="visual">
6275
                                                                                <i class="fa fa-bar-chart-o"></i>
6276
                                                                            </div>
6277
                                                                            <div class="details">
6278
                                                                                <div class="number"> 12,5M$ </div>
6279
                                                                                <div class="desc"> Total Profit </div>
6280
                                                                            </div>
6281
                                                                            <a class="more" href="javascript:;"> View more
6282
                                                                                <i class="m-icon-swapright m-icon-white"></i>
6283
                                                                            </a>
6284
                                                                        </div> <code>class="dashboard-stat red-soft"</code> </div>
6285
                                                                </div>
6286
                                                            </div>
6287
                                                        </div>
6288
                                                    </div>
6289
                                                    <div class="modal-footer">
6290
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
6291
                                                    </div>
6292
                                                </div>
6293
                                            </div>
6294
                                        </div>
6295
                                    </div>
6296
                                    <div class="col-md-2 col-sm-2 col-xs-6">
6297
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-haze">
6298
                                            <div class="color-view bg-red-haze bg-font-red-haze bold uppercase"> #f36a5a </div>
6299
                                            <div class="color-info bg-white c-font-14 sbold"> red-haze </div>
6300
                                        </div>
6301
                                        <div class="modal fade" id="demo_modal_red-haze">
6302
                                            <div class="modal-dialog modal-lg">
6303
                                                <div class="modal-content c-square">
6304
                                                    <div class="modal-header">
6305
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
6306
                                                            <span aria-hidden="true">&times;</span>
6307
                                                        </button>
6308
                                                        <h4 class="modal-title bold uppercase font-red-haze">red-haze</h4>
6309
                                                    </div>
6310
                                                    <div class="modal-body">
6311
                                                        <div class="tabbable-line">
6312
                                                            <ul class="nav nav-tabs uppercase bold">
6313
                                                                <li class="active">
6314
                                                                    <a href="#red-haze_tab_1_content" data-toggle="tab">Typography</a>
6315
                                                                </li>
6316
                                                                <li>
6317
                                                                    <a href="#red-haze_tab_2_content" data-toggle="tab">Background & Border</a>
6318
                                                                </li>
6319
                                                                <li>
6320
                                                                    <a href="#red-haze_tab_3_content" data-toggle="tab">Buttons</a>
6321
                                                                </li>
6322
                                                                <li>
6323
                                                                    <a href="#red-haze_tab_4_content" data-toggle="tab">Components</a>
6324
                                                                </li>
6325
                                                            </ul>
6326
                                                            <div class="tab-content">
6327
                                                                <div class="tab-pane active" id="red-haze_tab_1_content">
6328
                                                                    <h4>Text font</h4>
6329
                                                                    <div style="margin: 10px 0 30px 0">
6330
                                                                        <span class="font-red-haze font-lg">Some sample text goes here...</span>
6331
                                                                        <br>
6332
                                                                        <span class="font-red-haze font-lg sbold">Some sample text goes here...</span>
6333
                                                                        <br>
6334
                                                                        <span class="font-red-haze font-lg bold uppercase">Some sample text goes here...</span>
6335
                                                                    </div>
6336
                                                                    <h4>Background matching text font</h4>
6337
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-haze">
6338
                                                                        <span class="bg-font-red-haze font-lg">Some sample text goes here...</span>
6339
                                                                        <br>
6340
                                                                        <span class="bg-font-red-haze font-lg sbold">Some sample text goes here...</span>
6341
                                                                        <br>
6342
                                                                        <span class="bg-font-red-haze font-lg bold uppercase">Some sample text goes here...</span>
6343
                                                                    </div>
6344
                                                                    <h4>Icon font</h4>
6345
                                                                    <div style="margin: 10px 0 30px 0">
6346
                                                                        <i class="font-red-haze font-lg icon-user"></i>&nbsp;
6347
                                                                        <i class="font-red-haze font-lg icon-settings"></i>&nbsp;
6348
                                                                        <i class="font-red-haze font-lg icon-calendar"></i>
6349
                                                                        <br>
6350
                                                                        <i class="font-red-haze font-lg fa fa-bar-chart-o"></i>&nbsp;
6351
                                                                        <i class="font-red-haze font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6352
                                                                        <i class="font-red-haze font-lg fa fa-cogs"></i>
6353
                                                                        <br>
6354
                                                                        <i class="font-red-haze font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6355
                                                                        <i class="font-red-haze font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6356
                                                                        <i class="font-red-haze font-lg glyphicon glyphicon-warning-sign"></i>
6357
                                                                        <br> </div>
6358
                                                                    <h4>Background matching icon font</h4>
6359
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-haze">
6360
                                                                        <i class="bg-font-red-haze font-lg icon-user"></i>&nbsp;
6361
                                                                        <i class="bg-font-red-haze font-lg icon-settings"></i>&nbsp;
6362
                                                                        <i class="bg-font-red-haze font-lg icon-calendar"></i>
6363
                                                                        <br>
6364
                                                                        <i class="bg-font-red-haze font-lg fa fa-bar-chart-o"></i>&nbsp;
6365
                                                                        <i class="bg-font-red-haze font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6366
                                                                        <i class="bg-font-red-haze font-lg fa fa-cogs"></i>
6367
                                                                        <br>
6368
                                                                        <i class="bg-font-red-haze font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6369
                                                                        <i class="bg-font-red-haze font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6370
                                                                        <i class="bg-font-red-haze font-lg glyphicon glyphicon-warning-sign"></i>
6371
                                                                        <br> </div>
6372
                                                                    <h4>Class usage</h4> <code>class="font-red-haze"</code> </div>
6373
                                                                <div class="tab-pane" id="red-haze_tab_2_content">
6374
                                                                    <div style="margin: 30px 0;">
6375
                                                                        <div class="border-red-haze margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-red-haze"</code> </div>
6376
                                                                    <div style="margin: 30px 0;">
6377
                                                                        <div class="bg-red-haze bg-font-red-haze margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-red-haze bg-font-red-haze"</code> </div>
6378
                                                                </div>
6379
                                                                <div class="tab-pane" id="red-haze_tab_3_content">
6380
                                                                    <div style="margin: 10px 0 30px 0">
6381
                                                                        <a href="#" class="btn uppercase red-haze">Button</a> &nbsp; <code>class="btn red-haze"</code> </div>
6382
                                                                    <div style="margin: 10px 0 30px 0">
6383
                                                                        <a href="#" class="btn sbold uppercase btn-outline red-haze">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-red-haze"</code> </div>
6384
                                                                    <div style="margin: 10px 0 30px 0">
6385
                                                                        <a href="#" class="btn sbold uppercase btn-circle red-haze">Button</a> &nbsp; <code>class="btn btn-circle red-haze"</code> </div>
6386
                                                                </div>
6387
                                                                <div class="tab-pane" id="red-haze_tab_4_content">
6388
                                                                    <div style="margin: 10px 0 30px 0">
6389
                                                                        <h4>Statistic Widgets</h4>
6390
                                                                        <div class="dashboard-stat red-haze">
6391
                                                                            <div class="visual">
6392
                                                                                <i class="fa fa-bar-chart-o"></i>
6393
                                                                            </div>
6394
                                                                            <div class="details">
6395
                                                                                <div class="number"> 12,5M$ </div>
6396
                                                                                <div class="desc"> Total Profit </div>
6397
                                                                            </div>
6398
                                                                            <a class="more" href="javascript:;"> View more
6399
                                                                                <i class="m-icon-swapright m-icon-white"></i>
6400
                                                                            </a>
6401
                                                                        </div> <code>class="dashboard-stat red-haze"</code> </div>
6402
                                                                </div>
6403
                                                            </div>
6404
                                                        </div>
6405
                                                    </div>
6406
                                                    <div class="modal-footer">
6407
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
6408
                                                    </div>
6409
                                                </div>
6410
                                            </div>
6411
                                        </div>
6412
                                    </div>
6413
                                    <div class="col-md-2 col-sm-2 col-xs-6">
6414
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_red-mint">
6415
                                            <div class="color-view bg-red-mint bg-font-red-mint bold uppercase"> #e43a45 </div>
6416
                                            <div class="color-info bg-white c-font-14 sbold"> red-mint </div>
6417
                                        </div>
6418
                                        <div class="modal fade" id="demo_modal_red-mint">
6419
                                            <div class="modal-dialog modal-lg">
6420
                                                <div class="modal-content c-square">
6421
                                                    <div class="modal-header">
6422
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
6423
                                                            <span aria-hidden="true">&times;</span>
6424
                                                        </button>
6425
                                                        <h4 class="modal-title bold uppercase font-red-mint">red-mint</h4>
6426
                                                    </div>
6427
                                                    <div class="modal-body">
6428
                                                        <div class="tabbable-line">
6429
                                                            <ul class="nav nav-tabs uppercase bold">
6430
                                                                <li class="active">
6431
                                                                    <a href="#red-mint_tab_1_content" data-toggle="tab">Typography</a>
6432
                                                                </li>
6433
                                                                <li>
6434
                                                                    <a href="#red-mint_tab_2_content" data-toggle="tab">Background & Border</a>
6435
                                                                </li>
6436
                                                                <li>
6437
                                                                    <a href="#red-mint_tab_3_content" data-toggle="tab">Buttons</a>
6438
                                                                </li>
6439
                                                                <li>
6440
                                                                    <a href="#red-mint_tab_4_content" data-toggle="tab">Components</a>
6441
                                                                </li>
6442
                                                            </ul>
6443
                                                            <div class="tab-content">
6444
                                                                <div class="tab-pane active" id="red-mint_tab_1_content">
6445
                                                                    <h4>Text font</h4>
6446
                                                                    <div style="margin: 10px 0 30px 0">
6447
                                                                        <span class="font-red-mint font-lg">Some sample text goes here...</span>
6448
                                                                        <br>
6449
                                                                        <span class="font-red-mint font-lg sbold">Some sample text goes here...</span>
6450
                                                                        <br>
6451
                                                                        <span class="font-red-mint font-lg bold uppercase">Some sample text goes here...</span>
6452
                                                                    </div>
6453
                                                                    <h4>Background matching text font</h4>
6454
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-mint">
6455
                                                                        <span class="bg-font-red-mint font-lg">Some sample text goes here...</span>
6456
                                                                        <br>
6457
                                                                        <span class="bg-font-red-mint font-lg sbold">Some sample text goes here...</span>
6458
                                                                        <br>
6459
                                                                        <span class="bg-font-red-mint font-lg bold uppercase">Some sample text goes here...</span>
6460
                                                                    </div>
6461
                                                                    <h4>Icon font</h4>
6462
                                                                    <div style="margin: 10px 0 30px 0">
6463
                                                                        <i class="font-red-mint font-lg icon-user"></i>&nbsp;
6464
                                                                        <i class="font-red-mint font-lg icon-settings"></i>&nbsp;
6465
                                                                        <i class="font-red-mint font-lg icon-calendar"></i>
6466
                                                                        <br>
6467
                                                                        <i class="font-red-mint font-lg fa fa-bar-chart-o"></i>&nbsp;
6468
                                                                        <i class="font-red-mint font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6469
                                                                        <i class="font-red-mint font-lg fa fa-cogs"></i>
6470
                                                                        <br>
6471
                                                                        <i class="font-red-mint font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6472
                                                                        <i class="font-red-mint font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6473
                                                                        <i class="font-red-mint font-lg glyphicon glyphicon-warning-sign"></i>
6474
                                                                        <br> </div>
6475
                                                                    <h4>Background matching icon font</h4>
6476
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-red-mint">
6477
                                                                        <i class="bg-font-red-mint font-lg icon-user"></i>&nbsp;
6478
                                                                        <i class="bg-font-red-mint font-lg icon-settings"></i>&nbsp;
6479
                                                                        <i class="bg-font-red-mint font-lg icon-calendar"></i>
6480
                                                                        <br>
6481
                                                                        <i class="bg-font-red-mint font-lg fa fa-bar-chart-o"></i>&nbsp;
6482
                                                                        <i class="bg-font-red-mint font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6483
                                                                        <i class="bg-font-red-mint font-lg fa fa-cogs"></i>
6484
                                                                        <br>
6485
                                                                        <i class="bg-font-red-mint font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6486
                                                                        <i class="bg-font-red-mint font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6487
                                                                        <i class="bg-font-red-mint font-lg glyphicon glyphicon-warning-sign"></i>
6488
                                                                        <br> </div>
6489
                                                                    <h4>Class usage</h4> <code>class="font-red-mint"</code> </div>
6490
                                                                <div class="tab-pane" id="red-mint_tab_2_content">
6491
                                                                    <div style="margin: 30px 0;">
6492
                                                                        <div class="border-red-mint margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-red-mint"</code> </div>
6493
                                                                    <div style="margin: 30px 0;">
6494
                                                                        <div class="bg-red-mint bg-font-red-mint margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-red-mint bg-font-red-mint"</code> </div>
6495
                                                                </div>
6496
                                                                <div class="tab-pane" id="red-mint_tab_3_content">
6497
                                                                    <div style="margin: 10px 0 30px 0">
6498
                                                                        <a href="#" class="btn uppercase red-mint">Button</a> &nbsp; <code>class="btn red-mint"</code> </div>
6499
                                                                    <div style="margin: 10px 0 30px 0">
6500
                                                                        <a href="#" class="btn sbold uppercase btn-outline red-mint">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-red-mint"</code> </div>
6501
                                                                    <div style="margin: 10px 0 30px 0">
6502
                                                                        <a href="#" class="btn sbold uppercase btn-circle red-mint">Button</a> &nbsp; <code>class="btn btn-circle red-mint"</code> </div>
6503
                                                                </div>
6504
                                                                <div class="tab-pane" id="red-mint_tab_4_content">
6505
                                                                    <div style="margin: 10px 0 30px 0">
6506
                                                                        <h4>Statistic Widgets</h4>
6507
                                                                        <div class="dashboard-stat red-mint">
6508
                                                                            <div class="visual">
6509
                                                                                <i class="fa fa-bar-chart-o"></i>
6510
                                                                            </div>
6511
                                                                            <div class="details">
6512
                                                                                <div class="number"> 12,5M$ </div>
6513
                                                                                <div class="desc"> Total Profit </div>
6514
                                                                            </div>
6515
                                                                            <a class="more" href="javascript:;"> View more
6516
                                                                                <i class="m-icon-swapright m-icon-white"></i>
6517
                                                                            </a>
6518
                                                                        </div> <code>class="dashboard-stat red-mint"</code> </div>
6519
                                                                </div>
6520
                                                            </div>
6521
                                                        </div>
6522
                                                    </div>
6523
                                                    <div class="modal-footer">
6524
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
6525
                                                    </div>
6526
                                                </div>
6527
                                            </div>
6528
                                        </div>
6529
                                    </div>
6530
                                    <div class="col-md-2 col-sm-2 col-xs-6">
6531
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow">
6532
                                            <div class="color-view bg-yellow bg-font-yellow bold uppercase"> #c49f47 </div>
6533
                                            <div class="color-info bg-white c-font-14 sbold"> yellow </div>
6534
                                        </div>
6535
                                        <div class="modal fade" id="demo_modal_yellow">
6536
                                            <div class="modal-dialog modal-lg">
6537
                                                <div class="modal-content c-square">
6538
                                                    <div class="modal-header">
6539
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
6540
                                                            <span aria-hidden="true">&times;</span>
6541
                                                        </button>
6542
                                                        <h4 class="modal-title bold uppercase font-yellow">yellow</h4>
6543
                                                    </div>
6544
                                                    <div class="modal-body">
6545
                                                        <div class="tabbable-line">
6546
                                                            <ul class="nav nav-tabs uppercase bold">
6547
                                                                <li class="active">
6548
                                                                    <a href="#yellow_tab_1_content" data-toggle="tab">Typography</a>
6549
                                                                </li>
6550
                                                                <li>
6551
                                                                    <a href="#yellow_tab_2_content" data-toggle="tab">Background & Border</a>
6552
                                                                </li>
6553
                                                                <li>
6554
                                                                    <a href="#yellow_tab_3_content" data-toggle="tab">Buttons</a>
6555
                                                                </li>
6556
                                                                <li>
6557
                                                                    <a href="#yellow_tab_4_content" data-toggle="tab">Components</a>
6558
                                                                </li>
6559
                                                            </ul>
6560
                                                            <div class="tab-content">
6561
                                                                <div class="tab-pane active" id="yellow_tab_1_content">
6562
                                                                    <h4>Text font</h4>
6563
                                                                    <div style="margin: 10px 0 30px 0">
6564
                                                                        <span class="font-yellow font-lg">Some sample text goes here...</span>
6565
                                                                        <br>
6566
                                                                        <span class="font-yellow font-lg sbold">Some sample text goes here...</span>
6567
                                                                        <br>
6568
                                                                        <span class="font-yellow font-lg bold uppercase">Some sample text goes here...</span>
6569
                                                                    </div>
6570
                                                                    <h4>Background matching text font</h4>
6571
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow">
6572
                                                                        <span class="bg-font-yellow font-lg">Some sample text goes here...</span>
6573
                                                                        <br>
6574
                                                                        <span class="bg-font-yellow font-lg sbold">Some sample text goes here...</span>
6575
                                                                        <br>
6576
                                                                        <span class="bg-font-yellow font-lg bold uppercase">Some sample text goes here...</span>
6577
                                                                    </div>
6578
                                                                    <h4>Icon font</h4>
6579
                                                                    <div style="margin: 10px 0 30px 0">
6580
                                                                        <i class="font-yellow font-lg icon-user"></i>&nbsp;
6581
                                                                        <i class="font-yellow font-lg icon-settings"></i>&nbsp;
6582
                                                                        <i class="font-yellow font-lg icon-calendar"></i>
6583
                                                                        <br>
6584
                                                                        <i class="font-yellow font-lg fa fa-bar-chart-o"></i>&nbsp;
6585
                                                                        <i class="font-yellow font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6586
                                                                        <i class="font-yellow font-lg fa fa-cogs"></i>
6587
                                                                        <br>
6588
                                                                        <i class="font-yellow font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6589
                                                                        <i class="font-yellow font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6590
                                                                        <i class="font-yellow font-lg glyphicon glyphicon-warning-sign"></i>
6591
                                                                        <br> </div>
6592
                                                                    <h4>Background matching icon font</h4>
6593
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow">
6594
                                                                        <i class="bg-font-yellow font-lg icon-user"></i>&nbsp;
6595
                                                                        <i class="bg-font-yellow font-lg icon-settings"></i>&nbsp;
6596
                                                                        <i class="bg-font-yellow font-lg icon-calendar"></i>
6597
                                                                        <br>
6598
                                                                        <i class="bg-font-yellow font-lg fa fa-bar-chart-o"></i>&nbsp;
6599
                                                                        <i class="bg-font-yellow font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6600
                                                                        <i class="bg-font-yellow font-lg fa fa-cogs"></i>
6601
                                                                        <br>
6602
                                                                        <i class="bg-font-yellow font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6603
                                                                        <i class="bg-font-yellow font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6604
                                                                        <i class="bg-font-yellow font-lg glyphicon glyphicon-warning-sign"></i>
6605
                                                                        <br> </div>
6606
                                                                    <h4>Class usage</h4> <code>class="font-yellow"</code> </div>
6607
                                                                <div class="tab-pane" id="yellow_tab_2_content">
6608
                                                                    <div style="margin: 30px 0;">
6609
                                                                        <div class="border-yellow margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-yellow"</code> </div>
6610
                                                                    <div style="margin: 30px 0;">
6611
                                                                        <div class="bg-yellow bg-font-yellow margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-yellow bg-font-yellow"</code> </div>
6612
                                                                </div>
6613
                                                                <div class="tab-pane" id="yellow_tab_3_content">
6614
                                                                    <div style="margin: 10px 0 30px 0">
6615
                                                                        <a href="#" class="btn uppercase yellow">Button</a> &nbsp; <code>class="btn yellow"</code> </div>
6616
                                                                    <div style="margin: 10px 0 30px 0">
6617
                                                                        <a href="#" class="btn sbold uppercase btn-outline yellow">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-yellow"</code> </div>
6618
                                                                    <div style="margin: 10px 0 30px 0">
6619
                                                                        <a href="#" class="btn sbold uppercase btn-circle yellow">Button</a> &nbsp; <code>class="btn btn-circle yellow"</code> </div>
6620
                                                                </div>
6621
                                                                <div class="tab-pane" id="yellow_tab_4_content">
6622
                                                                    <div style="margin: 10px 0 30px 0">
6623
                                                                        <h4>Statistic Widgets</h4>
6624
                                                                        <div class="dashboard-stat yellow">
6625
                                                                            <div class="visual">
6626
                                                                                <i class="fa fa-bar-chart-o"></i>
6627
                                                                            </div>
6628
                                                                            <div class="details">
6629
                                                                                <div class="number"> 12,5M$ </div>
6630
                                                                                <div class="desc"> Total Profit </div>
6631
                                                                            </div>
6632
                                                                            <a class="more" href="javascript:;"> View more
6633
                                                                                <i class="m-icon-swapright m-icon-white"></i>
6634
                                                                            </a>
6635
                                                                        </div> <code>class="dashboard-stat yellow"</code> </div>
6636
                                                                </div>
6637
                                                            </div>
6638
                                                        </div>
6639
                                                    </div>
6640
                                                    <div class="modal-footer">
6641
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
6642
                                                    </div>
6643
                                                </div>
6644
                                            </div>
6645
                                        </div>
6646
                                    </div>
6647
                                </div>
6648
                                <div class="row">
6649
                                    <div class="col-md-2 col-sm-2 col-xs-6">
6650
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-gold">
6651
                                            <div class="color-view bg-yellow-gold bg-font-yellow-gold bold uppercase"> #E87E04 </div>
6652
                                            <div class="color-info bg-white c-font-14 sbold"> yellow-gold </div>
6653
                                        </div>
6654
                                        <div class="modal fade" id="demo_modal_yellow-gold">
6655
                                            <div class="modal-dialog modal-lg">
6656
                                                <div class="modal-content c-square">
6657
                                                    <div class="modal-header">
6658
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
6659
                                                            <span aria-hidden="true">&times;</span>
6660
                                                        </button>
6661
                                                        <h4 class="modal-title bold uppercase font-yellow-gold">yellow-gold</h4>
6662
                                                    </div>
6663
                                                    <div class="modal-body">
6664
                                                        <div class="tabbable-line">
6665
                                                            <ul class="nav nav-tabs uppercase bold">
6666
                                                                <li class="active">
6667
                                                                    <a href="#yellow-gold_tab_1_content" data-toggle="tab">Typography</a>
6668
                                                                </li>
6669
                                                                <li>
6670
                                                                    <a href="#yellow-gold_tab_2_content" data-toggle="tab">Background & Border</a>
6671
                                                                </li>
6672
                                                                <li>
6673
                                                                    <a href="#yellow-gold_tab_3_content" data-toggle="tab">Buttons</a>
6674
                                                                </li>
6675
                                                                <li>
6676
                                                                    <a href="#yellow-gold_tab_4_content" data-toggle="tab">Components</a>
6677
                                                                </li>
6678
                                                            </ul>
6679
                                                            <div class="tab-content">
6680
                                                                <div class="tab-pane active" id="yellow-gold_tab_1_content">
6681
                                                                    <h4>Text font</h4>
6682
                                                                    <div style="margin: 10px 0 30px 0">
6683
                                                                        <span class="font-yellow-gold font-lg">Some sample text goes here...</span>
6684
                                                                        <br>
6685
                                                                        <span class="font-yellow-gold font-lg sbold">Some sample text goes here...</span>
6686
                                                                        <br>
6687
                                                                        <span class="font-yellow-gold font-lg bold uppercase">Some sample text goes here...</span>
6688
                                                                    </div>
6689
                                                                    <h4>Background matching text font</h4>
6690
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-gold">
6691
                                                                        <span class="bg-font-yellow-gold font-lg">Some sample text goes here...</span>
6692
                                                                        <br>
6693
                                                                        <span class="bg-font-yellow-gold font-lg sbold">Some sample text goes here...</span>
6694
                                                                        <br>
6695
                                                                        <span class="bg-font-yellow-gold font-lg bold uppercase">Some sample text goes here...</span>
6696
                                                                    </div>
6697
                                                                    <h4>Icon font</h4>
6698
                                                                    <div style="margin: 10px 0 30px 0">
6699
                                                                        <i class="font-yellow-gold font-lg icon-user"></i>&nbsp;
6700
                                                                        <i class="font-yellow-gold font-lg icon-settings"></i>&nbsp;
6701
                                                                        <i class="font-yellow-gold font-lg icon-calendar"></i>
6702
                                                                        <br>
6703
                                                                        <i class="font-yellow-gold font-lg fa fa-bar-chart-o"></i>&nbsp;
6704
                                                                        <i class="font-yellow-gold font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6705
                                                                        <i class="font-yellow-gold font-lg fa fa-cogs"></i>
6706
                                                                        <br>
6707
                                                                        <i class="font-yellow-gold font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6708
                                                                        <i class="font-yellow-gold font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6709
                                                                        <i class="font-yellow-gold font-lg glyphicon glyphicon-warning-sign"></i>
6710
                                                                        <br> </div>
6711
                                                                    <h4>Background matching icon font</h4>
6712
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-gold">
6713
                                                                        <i class="bg-font-yellow-gold font-lg icon-user"></i>&nbsp;
6714
                                                                        <i class="bg-font-yellow-gold font-lg icon-settings"></i>&nbsp;
6715
                                                                        <i class="bg-font-yellow-gold font-lg icon-calendar"></i>
6716
                                                                        <br>
6717
                                                                        <i class="bg-font-yellow-gold font-lg fa fa-bar-chart-o"></i>&nbsp;
6718
                                                                        <i class="bg-font-yellow-gold font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6719
                                                                        <i class="bg-font-yellow-gold font-lg fa fa-cogs"></i>
6720
                                                                        <br>
6721
                                                                        <i class="bg-font-yellow-gold font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6722
                                                                        <i class="bg-font-yellow-gold font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6723
                                                                        <i class="bg-font-yellow-gold font-lg glyphicon glyphicon-warning-sign"></i>
6724
                                                                        <br> </div>
6725
                                                                    <h4>Class usage</h4> <code>class="font-yellow-gold"</code> </div>
6726
                                                                <div class="tab-pane" id="yellow-gold_tab_2_content">
6727
                                                                    <div style="margin: 30px 0;">
6728
                                                                        <div class="border-yellow-gold margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-yellow-gold"</code> </div>
6729
                                                                    <div style="margin: 30px 0;">
6730
                                                                        <div class="bg-yellow-gold bg-font-yellow-gold margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-yellow-gold bg-font-yellow-gold"</code> </div>
6731
                                                                </div>
6732
                                                                <div class="tab-pane" id="yellow-gold_tab_3_content">
6733
                                                                    <div style="margin: 10px 0 30px 0">
6734
                                                                        <a href="#" class="btn uppercase yellow-gold">Button</a> &nbsp; <code>class="btn yellow-gold"</code> </div>
6735
                                                                    <div style="margin: 10px 0 30px 0">
6736
                                                                        <a href="#" class="btn sbold uppercase btn-outline yellow-gold">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-yellow-gold"</code> </div>
6737
                                                                    <div style="margin: 10px 0 30px 0">
6738
                                                                        <a href="#" class="btn sbold uppercase btn-circle yellow-gold">Button</a> &nbsp; <code>class="btn btn-circle yellow-gold"</code> </div>
6739
                                                                </div>
6740
                                                                <div class="tab-pane" id="yellow-gold_tab_4_content">
6741
                                                                    <div style="margin: 10px 0 30px 0">
6742
                                                                        <h4>Statistic Widgets</h4>
6743
                                                                        <div class="dashboard-stat yellow-gold">
6744
                                                                            <div class="visual">
6745
                                                                                <i class="fa fa-bar-chart-o"></i>
6746
                                                                            </div>
6747
                                                                            <div class="details">
6748
                                                                                <div class="number"> 12,5M$ </div>
6749
                                                                                <div class="desc"> Total Profit </div>
6750
                                                                            </div>
6751
                                                                            <a class="more" href="javascript:;"> View more
6752
                                                                                <i class="m-icon-swapright m-icon-white"></i>
6753
                                                                            </a>
6754
                                                                        </div> <code>class="dashboard-stat yellow-gold"</code> </div>
6755
                                                                </div>
6756
                                                            </div>
6757
                                                        </div>
6758
                                                    </div>
6759
                                                    <div class="modal-footer">
6760
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
6761
                                                    </div>
6762
                                                </div>
6763
                                            </div>
6764
                                        </div>
6765
                                    </div>
6766
                                    <div class="col-md-2 col-sm-2 col-xs-6">
6767
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-casablanca">
6768
                                            <div class="color-view bg-yellow-casablanca bg-font-yellow-casablanca bold uppercase"> #f2784b </div>
6769
                                            <div class="color-info bg-white c-font-14 sbold"> yellow-casablanca </div>
6770
                                        </div>
6771
                                        <div class="modal fade" id="demo_modal_yellow-casablanca">
6772
                                            <div class="modal-dialog modal-lg">
6773
                                                <div class="modal-content c-square">
6774
                                                    <div class="modal-header">
6775
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
6776
                                                            <span aria-hidden="true">&times;</span>
6777
                                                        </button>
6778
                                                        <h4 class="modal-title bold uppercase font-yellow-casablanca">yellow-casablanca</h4>
6779
                                                    </div>
6780
                                                    <div class="modal-body">
6781
                                                        <div class="tabbable-line">
6782
                                                            <ul class="nav nav-tabs uppercase bold">
6783
                                                                <li class="active">
6784
                                                                    <a href="#yellow-casablanca_tab_1_content" data-toggle="tab">Typography</a>
6785
                                                                </li>
6786
                                                                <li>
6787
                                                                    <a href="#yellow-casablanca_tab_2_content" data-toggle="tab">Background & Border</a>
6788
                                                                </li>
6789
                                                                <li>
6790
                                                                    <a href="#yellow-casablanca_tab_3_content" data-toggle="tab">Buttons</a>
6791
                                                                </li>
6792
                                                                <li>
6793
                                                                    <a href="#yellow-casablanca_tab_4_content" data-toggle="tab">Components</a>
6794
                                                                </li>
6795
                                                            </ul>
6796
                                                            <div class="tab-content">
6797
                                                                <div class="tab-pane active" id="yellow-casablanca_tab_1_content">
6798
                                                                    <h4>Text font</h4>
6799
                                                                    <div style="margin: 10px 0 30px 0">
6800
                                                                        <span class="font-yellow-casablanca font-lg">Some sample text goes here...</span>
6801
                                                                        <br>
6802
                                                                        <span class="font-yellow-casablanca font-lg sbold">Some sample text goes here...</span>
6803
                                                                        <br>
6804
                                                                        <span class="font-yellow-casablanca font-lg bold uppercase">Some sample text goes here...</span>
6805
                                                                    </div>
6806
                                                                    <h4>Background matching text font</h4>
6807
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-casablanca">
6808
                                                                        <span class="bg-font-yellow-casablanca font-lg">Some sample text goes here...</span>
6809
                                                                        <br>
6810
                                                                        <span class="bg-font-yellow-casablanca font-lg sbold">Some sample text goes here...</span>
6811
                                                                        <br>
6812
                                                                        <span class="bg-font-yellow-casablanca font-lg bold uppercase">Some sample text goes here...</span>
6813
                                                                    </div>
6814
                                                                    <h4>Icon font</h4>
6815
                                                                    <div style="margin: 10px 0 30px 0">
6816
                                                                        <i class="font-yellow-casablanca font-lg icon-user"></i>&nbsp;
6817
                                                                        <i class="font-yellow-casablanca font-lg icon-settings"></i>&nbsp;
6818
                                                                        <i class="font-yellow-casablanca font-lg icon-calendar"></i>
6819
                                                                        <br>
6820
                                                                        <i class="font-yellow-casablanca font-lg fa fa-bar-chart-o"></i>&nbsp;
6821
                                                                        <i class="font-yellow-casablanca font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6822
                                                                        <i class="font-yellow-casablanca font-lg fa fa-cogs"></i>
6823
                                                                        <br>
6824
                                                                        <i class="font-yellow-casablanca font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6825
                                                                        <i class="font-yellow-casablanca font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6826
                                                                        <i class="font-yellow-casablanca font-lg glyphicon glyphicon-warning-sign"></i>
6827
                                                                        <br> </div>
6828
                                                                    <h4>Background matching icon font</h4>
6829
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-casablanca">
6830
                                                                        <i class="bg-font-yellow-casablanca font-lg icon-user"></i>&nbsp;
6831
                                                                        <i class="bg-font-yellow-casablanca font-lg icon-settings"></i>&nbsp;
6832
                                                                        <i class="bg-font-yellow-casablanca font-lg icon-calendar"></i>
6833
                                                                        <br>
6834
                                                                        <i class="bg-font-yellow-casablanca font-lg fa fa-bar-chart-o"></i>&nbsp;
6835
                                                                        <i class="bg-font-yellow-casablanca font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6836
                                                                        <i class="bg-font-yellow-casablanca font-lg fa fa-cogs"></i>
6837
                                                                        <br>
6838
                                                                        <i class="bg-font-yellow-casablanca font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6839
                                                                        <i class="bg-font-yellow-casablanca font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6840
                                                                        <i class="bg-font-yellow-casablanca font-lg glyphicon glyphicon-warning-sign"></i>
6841
                                                                        <br> </div>
6842
                                                                    <h4>Class usage</h4> <code>class="font-yellow-casablanca"</code> </div>
6843
                                                                <div class="tab-pane" id="yellow-casablanca_tab_2_content">
6844
                                                                    <div style="margin: 30px 0;">
6845
                                                                        <div class="border-yellow-casablanca margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-yellow-casablanca"</code> </div>
6846
                                                                    <div style="margin: 30px 0;">
6847
                                                                        <div class="bg-yellow-casablanca bg-font-yellow-casablanca margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-yellow-casablanca bg-font-yellow-casablanca"</code> </div>
6848
                                                                </div>
6849
                                                                <div class="tab-pane" id="yellow-casablanca_tab_3_content">
6850
                                                                    <div style="margin: 10px 0 30px 0">
6851
                                                                        <a href="#" class="btn uppercase yellow-casablanca">Button</a> &nbsp; <code>class="btn yellow-casablanca"</code> </div>
6852
                                                                    <div style="margin: 10px 0 30px 0">
6853
                                                                        <a href="#" class="btn sbold uppercase btn-outline yellow-casablanca">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-yellow-casablanca"</code> </div>
6854
                                                                    <div style="margin: 10px 0 30px 0">
6855
                                                                        <a href="#" class="btn sbold uppercase btn-circle yellow-casablanca">Button</a> &nbsp; <code>class="btn btn-circle yellow-casablanca"</code> </div>
6856
                                                                </div>
6857
                                                                <div class="tab-pane" id="yellow-casablanca_tab_4_content">
6858
                                                                    <div style="margin: 10px 0 30px 0">
6859
                                                                        <h4>Statistic Widgets</h4>
6860
                                                                        <div class="dashboard-stat yellow-casablanca">
6861
                                                                            <div class="visual">
6862
                                                                                <i class="fa fa-bar-chart-o"></i>
6863
                                                                            </div>
6864
                                                                            <div class="details">
6865
                                                                                <div class="number"> 12,5M$ </div>
6866
                                                                                <div class="desc"> Total Profit </div>
6867
                                                                            </div>
6868
                                                                            <a class="more" href="javascript:;"> View more
6869
                                                                                <i class="m-icon-swapright m-icon-white"></i>
6870
                                                                            </a>
6871
                                                                        </div> <code>class="dashboard-stat yellow-casablanca"</code> </div>
6872
                                                                </div>
6873
                                                            </div>
6874
                                                        </div>
6875
                                                    </div>
6876
                                                    <div class="modal-footer">
6877
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
6878
                                                    </div>
6879
                                                </div>
6880
                                            </div>
6881
                                        </div>
6882
                                    </div>
6883
                                    <div class="col-md-2 col-sm-2 col-xs-6">
6884
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-crusta">
6885
                                            <div class="color-view bg-yellow-crusta bg-font-yellow-crusta bold uppercase"> #f3c200 </div>
6886
                                            <div class="color-info bg-white c-font-14 sbold"> yellow-crusta </div>
6887
                                        </div>
6888
                                        <div class="modal fade" id="demo_modal_yellow-crusta">
6889
                                            <div class="modal-dialog modal-lg">
6890
                                                <div class="modal-content c-square">
6891
                                                    <div class="modal-header">
6892
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
6893
                                                            <span aria-hidden="true">&times;</span>
6894
                                                        </button>
6895
                                                        <h4 class="modal-title bold uppercase font-yellow-crusta">yellow-crusta</h4>
6896
                                                    </div>
6897
                                                    <div class="modal-body">
6898
                                                        <div class="tabbable-line">
6899
                                                            <ul class="nav nav-tabs uppercase bold">
6900
                                                                <li class="active">
6901
                                                                    <a href="#yellow-crusta_tab_1_content" data-toggle="tab">Typography</a>
6902
                                                                </li>
6903
                                                                <li>
6904
                                                                    <a href="#yellow-crusta_tab_2_content" data-toggle="tab">Background & Border</a>
6905
                                                                </li>
6906
                                                                <li>
6907
                                                                    <a href="#yellow-crusta_tab_3_content" data-toggle="tab">Buttons</a>
6908
                                                                </li>
6909
                                                                <li>
6910
                                                                    <a href="#yellow-crusta_tab_4_content" data-toggle="tab">Components</a>
6911
                                                                </li>
6912
                                                            </ul>
6913
                                                            <div class="tab-content">
6914
                                                                <div class="tab-pane active" id="yellow-crusta_tab_1_content">
6915
                                                                    <h4>Text font</h4>
6916
                                                                    <div style="margin: 10px 0 30px 0">
6917
                                                                        <span class="font-yellow-crusta font-lg">Some sample text goes here...</span>
6918
                                                                        <br>
6919
                                                                        <span class="font-yellow-crusta font-lg sbold">Some sample text goes here...</span>
6920
                                                                        <br>
6921
                                                                        <span class="font-yellow-crusta font-lg bold uppercase">Some sample text goes here...</span>
6922
                                                                    </div>
6923
                                                                    <h4>Background matching text font</h4>
6924
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-crusta">
6925
                                                                        <span class="bg-font-yellow-crusta font-lg">Some sample text goes here...</span>
6926
                                                                        <br>
6927
                                                                        <span class="bg-font-yellow-crusta font-lg sbold">Some sample text goes here...</span>
6928
                                                                        <br>
6929
                                                                        <span class="bg-font-yellow-crusta font-lg bold uppercase">Some sample text goes here...</span>
6930
                                                                    </div>
6931
                                                                    <h4>Icon font</h4>
6932
                                                                    <div style="margin: 10px 0 30px 0">
6933
                                                                        <i class="font-yellow-crusta font-lg icon-user"></i>&nbsp;
6934
                                                                        <i class="font-yellow-crusta font-lg icon-settings"></i>&nbsp;
6935
                                                                        <i class="font-yellow-crusta font-lg icon-calendar"></i>
6936
                                                                        <br>
6937
                                                                        <i class="font-yellow-crusta font-lg fa fa-bar-chart-o"></i>&nbsp;
6938
                                                                        <i class="font-yellow-crusta font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6939
                                                                        <i class="font-yellow-crusta font-lg fa fa-cogs"></i>
6940
                                                                        <br>
6941
                                                                        <i class="font-yellow-crusta font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6942
                                                                        <i class="font-yellow-crusta font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6943
                                                                        <i class="font-yellow-crusta font-lg glyphicon glyphicon-warning-sign"></i>
6944
                                                                        <br> </div>
6945
                                                                    <h4>Background matching icon font</h4>
6946
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-crusta">
6947
                                                                        <i class="bg-font-yellow-crusta font-lg icon-user"></i>&nbsp;
6948
                                                                        <i class="bg-font-yellow-crusta font-lg icon-settings"></i>&nbsp;
6949
                                                                        <i class="bg-font-yellow-crusta font-lg icon-calendar"></i>
6950
                                                                        <br>
6951
                                                                        <i class="bg-font-yellow-crusta font-lg fa fa-bar-chart-o"></i>&nbsp;
6952
                                                                        <i class="bg-font-yellow-crusta font-lg fa fa-code-fork icon-settings"></i>&nbsp;
6953
                                                                        <i class="bg-font-yellow-crusta font-lg fa fa-cogs"></i>
6954
                                                                        <br>
6955
                                                                        <i class="bg-font-yellow-crusta font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
6956
                                                                        <i class="bg-font-yellow-crusta font-lg glyphicon glyphicon-leaf"></i>&nbsp;
6957
                                                                        <i class="bg-font-yellow-crusta font-lg glyphicon glyphicon-warning-sign"></i>
6958
                                                                        <br> </div>
6959
                                                                    <h4>Class usage</h4> <code>class="font-yellow-crusta"</code> </div>
6960
                                                                <div class="tab-pane" id="yellow-crusta_tab_2_content">
6961
                                                                    <div style="margin: 30px 0;">
6962
                                                                        <div class="border-yellow-crusta margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-yellow-crusta"</code> </div>
6963
                                                                    <div style="margin: 30px 0;">
6964
                                                                        <div class="bg-yellow-crusta bg-font-yellow-crusta margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-yellow-crusta bg-font-yellow-crusta"</code> </div>
6965
                                                                </div>
6966
                                                                <div class="tab-pane" id="yellow-crusta_tab_3_content">
6967
                                                                    <div style="margin: 10px 0 30px 0">
6968
                                                                        <a href="#" class="btn uppercase yellow-crusta">Button</a> &nbsp; <code>class="btn yellow-crusta"</code> </div>
6969
                                                                    <div style="margin: 10px 0 30px 0">
6970
                                                                        <a href="#" class="btn sbold uppercase btn-outline yellow-crusta">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-yellow-crusta"</code> </div>
6971
                                                                    <div style="margin: 10px 0 30px 0">
6972
                                                                        <a href="#" class="btn sbold uppercase btn-circle yellow-crusta">Button</a> &nbsp; <code>class="btn btn-circle yellow-crusta"</code> </div>
6973
                                                                </div>
6974
                                                                <div class="tab-pane" id="yellow-crusta_tab_4_content">
6975
                                                                    <div style="margin: 10px 0 30px 0">
6976
                                                                        <h4>Statistic Widgets</h4>
6977
                                                                        <div class="dashboard-stat yellow-crusta">
6978
                                                                            <div class="visual">
6979
                                                                                <i class="fa fa-bar-chart-o"></i>
6980
                                                                            </div>
6981
                                                                            <div class="details">
6982
                                                                                <div class="number"> 12,5M$ </div>
6983
                                                                                <div class="desc"> Total Profit </div>
6984
                                                                            </div>
6985
                                                                            <a class="more" href="javascript:;"> View more
6986
                                                                                <i class="m-icon-swapright m-icon-white"></i>
6987
                                                                            </a>
6988
                                                                        </div> <code>class="dashboard-stat yellow-crusta"</code> </div>
6989
                                                                </div>
6990
                                                            </div>
6991
                                                        </div>
6992
                                                    </div>
6993
                                                    <div class="modal-footer">
6994
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
6995
                                                    </div>
6996
                                                </div>
6997
                                            </div>
6998
                                        </div>
6999
                                    </div>
7000
                                    <div class="col-md-2 col-sm-2 col-xs-6">
7001
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-lemon">
7002
                                            <div class="color-view bg-yellow-lemon bg-font-yellow-lemon bold uppercase"> #F7CA18 </div>
7003
                                            <div class="color-info bg-white c-font-14 sbold"> yellow-lemon </div>
7004
                                        </div>
7005
                                        <div class="modal fade" id="demo_modal_yellow-lemon">
7006
                                            <div class="modal-dialog modal-lg">
7007
                                                <div class="modal-content c-square">
7008
                                                    <div class="modal-header">
7009
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7010
                                                            <span aria-hidden="true">&times;</span>
7011
                                                        </button>
7012
                                                        <h4 class="modal-title bold uppercase font-yellow-lemon">yellow-lemon</h4>
7013
                                                    </div>
7014
                                                    <div class="modal-body">
7015
                                                        <div class="tabbable-line">
7016
                                                            <ul class="nav nav-tabs uppercase bold">
7017
                                                                <li class="active">
7018
                                                                    <a href="#yellow-lemon_tab_1_content" data-toggle="tab">Typography</a>
7019
                                                                </li>
7020
                                                                <li>
7021
                                                                    <a href="#yellow-lemon_tab_2_content" data-toggle="tab">Background & Border</a>
7022
                                                                </li>
7023
                                                                <li>
7024
                                                                    <a href="#yellow-lemon_tab_3_content" data-toggle="tab">Buttons</a>
7025
                                                                </li>
7026
                                                                <li>
7027
                                                                    <a href="#yellow-lemon_tab_4_content" data-toggle="tab">Components</a>
7028
                                                                </li>
7029
                                                            </ul>
7030
                                                            <div class="tab-content">
7031
                                                                <div class="tab-pane active" id="yellow-lemon_tab_1_content">
7032
                                                                    <h4>Text font</h4>
7033
                                                                    <div style="margin: 10px 0 30px 0">
7034
                                                                        <span class="font-yellow-lemon font-lg">Some sample text goes here...</span>
7035
                                                                        <br>
7036
                                                                        <span class="font-yellow-lemon font-lg sbold">Some sample text goes here...</span>
7037
                                                                        <br>
7038
                                                                        <span class="font-yellow-lemon font-lg bold uppercase">Some sample text goes here...</span>
7039
                                                                    </div>
7040
                                                                    <h4>Background matching text font</h4>
7041
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-lemon">
7042
                                                                        <span class="bg-font-yellow-lemon font-lg">Some sample text goes here...</span>
7043
                                                                        <br>
7044
                                                                        <span class="bg-font-yellow-lemon font-lg sbold">Some sample text goes here...</span>
7045
                                                                        <br>
7046
                                                                        <span class="bg-font-yellow-lemon font-lg bold uppercase">Some sample text goes here...</span>
7047
                                                                    </div>
7048
                                                                    <h4>Icon font</h4>
7049
                                                                    <div style="margin: 10px 0 30px 0">
7050
                                                                        <i class="font-yellow-lemon font-lg icon-user"></i>&nbsp;
7051
                                                                        <i class="font-yellow-lemon font-lg icon-settings"></i>&nbsp;
7052
                                                                        <i class="font-yellow-lemon font-lg icon-calendar"></i>
7053
                                                                        <br>
7054
                                                                        <i class="font-yellow-lemon font-lg fa fa-bar-chart-o"></i>&nbsp;
7055
                                                                        <i class="font-yellow-lemon font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7056
                                                                        <i class="font-yellow-lemon font-lg fa fa-cogs"></i>
7057
                                                                        <br>
7058
                                                                        <i class="font-yellow-lemon font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7059
                                                                        <i class="font-yellow-lemon font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7060
                                                                        <i class="font-yellow-lemon font-lg glyphicon glyphicon-warning-sign"></i>
7061
                                                                        <br> </div>
7062
                                                                    <h4>Background matching icon font</h4>
7063
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-lemon">
7064
                                                                        <i class="bg-font-yellow-lemon font-lg icon-user"></i>&nbsp;
7065
                                                                        <i class="bg-font-yellow-lemon font-lg icon-settings"></i>&nbsp;
7066
                                                                        <i class="bg-font-yellow-lemon font-lg icon-calendar"></i>
7067
                                                                        <br>
7068
                                                                        <i class="bg-font-yellow-lemon font-lg fa fa-bar-chart-o"></i>&nbsp;
7069
                                                                        <i class="bg-font-yellow-lemon font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7070
                                                                        <i class="bg-font-yellow-lemon font-lg fa fa-cogs"></i>
7071
                                                                        <br>
7072
                                                                        <i class="bg-font-yellow-lemon font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7073
                                                                        <i class="bg-font-yellow-lemon font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7074
                                                                        <i class="bg-font-yellow-lemon font-lg glyphicon glyphicon-warning-sign"></i>
7075
                                                                        <br> </div>
7076
                                                                    <h4>Class usage</h4> <code>class="font-yellow-lemon"</code> </div>
7077
                                                                <div class="tab-pane" id="yellow-lemon_tab_2_content">
7078
                                                                    <div style="margin: 30px 0;">
7079
                                                                        <div class="border-yellow-lemon margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-yellow-lemon"</code> </div>
7080
                                                                    <div style="margin: 30px 0;">
7081
                                                                        <div class="bg-yellow-lemon bg-font-yellow-lemon margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-yellow-lemon bg-font-yellow-lemon"</code> </div>
7082
                                                                </div>
7083
                                                                <div class="tab-pane" id="yellow-lemon_tab_3_content">
7084
                                                                    <div style="margin: 10px 0 30px 0">
7085
                                                                        <a href="#" class="btn uppercase yellow-lemon">Button</a> &nbsp; <code>class="btn yellow-lemon"</code> </div>
7086
                                                                    <div style="margin: 10px 0 30px 0">
7087
                                                                        <a href="#" class="btn sbold uppercase btn-outline yellow-lemon">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-yellow-lemon"</code> </div>
7088
                                                                    <div style="margin: 10px 0 30px 0">
7089
                                                                        <a href="#" class="btn sbold uppercase btn-circle yellow-lemon">Button</a> &nbsp; <code>class="btn btn-circle yellow-lemon"</code> </div>
7090
                                                                </div>
7091
                                                                <div class="tab-pane" id="yellow-lemon_tab_4_content">
7092
                                                                    <div style="margin: 10px 0 30px 0">
7093
                                                                        <h4>Statistic Widgets</h4>
7094
                                                                        <div class="dashboard-stat yellow-lemon">
7095
                                                                            <div class="visual">
7096
                                                                                <i class="fa fa-bar-chart-o"></i>
7097
                                                                            </div>
7098
                                                                            <div class="details">
7099
                                                                                <div class="number"> 12,5M$ </div>
7100
                                                                                <div class="desc"> Total Profit </div>
7101
                                                                            </div>
7102
                                                                            <a class="more" href="javascript:;"> View more
7103
                                                                                <i class="m-icon-swapright m-icon-white"></i>
7104
                                                                            </a>
7105
                                                                        </div> <code>class="dashboard-stat yellow-lemon"</code> </div>
7106
                                                                </div>
7107
                                                            </div>
7108
                                                        </div>
7109
                                                    </div>
7110
                                                    <div class="modal-footer">
7111
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
7112
                                                    </div>
7113
                                                </div>
7114
                                            </div>
7115
                                        </div>
7116
                                    </div>
7117
                                    <div class="col-md-2 col-sm-2 col-xs-6">
7118
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-saffron">
7119
                                            <div class="color-view bg-yellow-saffron bg-font-yellow-saffron bold uppercase"> #F4D03F </div>
7120
                                            <div class="color-info bg-white c-font-14 sbold"> yellow-saffron </div>
7121
                                        </div>
7122
                                        <div class="modal fade" id="demo_modal_yellow-saffron">
7123
                                            <div class="modal-dialog modal-lg">
7124
                                                <div class="modal-content c-square">
7125
                                                    <div class="modal-header">
7126
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7127
                                                            <span aria-hidden="true">&times;</span>
7128
                                                        </button>
7129
                                                        <h4 class="modal-title bold uppercase font-yellow-saffron">yellow-saffron</h4>
7130
                                                    </div>
7131
                                                    <div class="modal-body">
7132
                                                        <div class="tabbable-line">
7133
                                                            <ul class="nav nav-tabs uppercase bold">
7134
                                                                <li class="active">
7135
                                                                    <a href="#yellow-saffron_tab_1_content" data-toggle="tab">Typography</a>
7136
                                                                </li>
7137
                                                                <li>
7138
                                                                    <a href="#yellow-saffron_tab_2_content" data-toggle="tab">Background & Border</a>
7139
                                                                </li>
7140
                                                                <li>
7141
                                                                    <a href="#yellow-saffron_tab_3_content" data-toggle="tab">Buttons</a>
7142
                                                                </li>
7143
                                                                <li>
7144
                                                                    <a href="#yellow-saffron_tab_4_content" data-toggle="tab">Components</a>
7145
                                                                </li>
7146
                                                            </ul>
7147
                                                            <div class="tab-content">
7148
                                                                <div class="tab-pane active" id="yellow-saffron_tab_1_content">
7149
                                                                    <h4>Text font</h4>
7150
                                                                    <div style="margin: 10px 0 30px 0">
7151
                                                                        <span class="font-yellow-saffron font-lg">Some sample text goes here...</span>
7152
                                                                        <br>
7153
                                                                        <span class="font-yellow-saffron font-lg sbold">Some sample text goes here...</span>
7154
                                                                        <br>
7155
                                                                        <span class="font-yellow-saffron font-lg bold uppercase">Some sample text goes here...</span>
7156
                                                                    </div>
7157
                                                                    <h4>Background matching text font</h4>
7158
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-saffron">
7159
                                                                        <span class="bg-font-yellow-saffron font-lg">Some sample text goes here...</span>
7160
                                                                        <br>
7161
                                                                        <span class="bg-font-yellow-saffron font-lg sbold">Some sample text goes here...</span>
7162
                                                                        <br>
7163
                                                                        <span class="bg-font-yellow-saffron font-lg bold uppercase">Some sample text goes here...</span>
7164
                                                                    </div>
7165
                                                                    <h4>Icon font</h4>
7166
                                                                    <div style="margin: 10px 0 30px 0">
7167
                                                                        <i class="font-yellow-saffron font-lg icon-user"></i>&nbsp;
7168
                                                                        <i class="font-yellow-saffron font-lg icon-settings"></i>&nbsp;
7169
                                                                        <i class="font-yellow-saffron font-lg icon-calendar"></i>
7170
                                                                        <br>
7171
                                                                        <i class="font-yellow-saffron font-lg fa fa-bar-chart-o"></i>&nbsp;
7172
                                                                        <i class="font-yellow-saffron font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7173
                                                                        <i class="font-yellow-saffron font-lg fa fa-cogs"></i>
7174
                                                                        <br>
7175
                                                                        <i class="font-yellow-saffron font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7176
                                                                        <i class="font-yellow-saffron font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7177
                                                                        <i class="font-yellow-saffron font-lg glyphicon glyphicon-warning-sign"></i>
7178
                                                                        <br> </div>
7179
                                                                    <h4>Background matching icon font</h4>
7180
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-saffron">
7181
                                                                        <i class="bg-font-yellow-saffron font-lg icon-user"></i>&nbsp;
7182
                                                                        <i class="bg-font-yellow-saffron font-lg icon-settings"></i>&nbsp;
7183
                                                                        <i class="bg-font-yellow-saffron font-lg icon-calendar"></i>
7184
                                                                        <br>
7185
                                                                        <i class="bg-font-yellow-saffron font-lg fa fa-bar-chart-o"></i>&nbsp;
7186
                                                                        <i class="bg-font-yellow-saffron font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7187
                                                                        <i class="bg-font-yellow-saffron font-lg fa fa-cogs"></i>
7188
                                                                        <br>
7189
                                                                        <i class="bg-font-yellow-saffron font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7190
                                                                        <i class="bg-font-yellow-saffron font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7191
                                                                        <i class="bg-font-yellow-saffron font-lg glyphicon glyphicon-warning-sign"></i>
7192
                                                                        <br> </div>
7193
                                                                    <h4>Class usage</h4> <code>class="font-yellow-saffron"</code> </div>
7194
                                                                <div class="tab-pane" id="yellow-saffron_tab_2_content">
7195
                                                                    <div style="margin: 30px 0;">
7196
                                                                        <div class="border-yellow-saffron margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-yellow-saffron"</code> </div>
7197
                                                                    <div style="margin: 30px 0;">
7198
                                                                        <div class="bg-yellow-saffron bg-font-yellow-saffron margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-yellow-saffron bg-font-yellow-saffron"</code> </div>
7199
                                                                </div>
7200
                                                                <div class="tab-pane" id="yellow-saffron_tab_3_content">
7201
                                                                    <div style="margin: 10px 0 30px 0">
7202
                                                                        <a href="#" class="btn uppercase yellow-saffron">Button</a> &nbsp; <code>class="btn yellow-saffron"</code> </div>
7203
                                                                    <div style="margin: 10px 0 30px 0">
7204
                                                                        <a href="#" class="btn sbold uppercase btn-outline yellow-saffron">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-yellow-saffron"</code> </div>
7205
                                                                    <div style="margin: 10px 0 30px 0">
7206
                                                                        <a href="#" class="btn sbold uppercase btn-circle yellow-saffron">Button</a> &nbsp; <code>class="btn btn-circle yellow-saffron"</code> </div>
7207
                                                                </div>
7208
                                                                <div class="tab-pane" id="yellow-saffron_tab_4_content">
7209
                                                                    <div style="margin: 10px 0 30px 0">
7210
                                                                        <h4>Statistic Widgets</h4>
7211
                                                                        <div class="dashboard-stat yellow-saffron">
7212
                                                                            <div class="visual">
7213
                                                                                <i class="fa fa-bar-chart-o"></i>
7214
                                                                            </div>
7215
                                                                            <div class="details">
7216
                                                                                <div class="number"> 12,5M$ </div>
7217
                                                                                <div class="desc"> Total Profit </div>
7218
                                                                            </div>
7219
                                                                            <a class="more" href="javascript:;"> View more
7220
                                                                                <i class="m-icon-swapright m-icon-white"></i>
7221
                                                                            </a>
7222
                                                                        </div> <code>class="dashboard-stat yellow-saffron"</code> </div>
7223
                                                                </div>
7224
                                                            </div>
7225
                                                        </div>
7226
                                                    </div>
7227
                                                    <div class="modal-footer">
7228
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
7229
                                                    </div>
7230
                                                </div>
7231
                                            </div>
7232
                                        </div>
7233
                                    </div>
7234
                                    <div class="col-md-2 col-sm-2 col-xs-6">
7235
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-soft">
7236
                                            <div class="color-view bg-yellow-soft bg-font-yellow-soft bold uppercase"> #c8d046 </div>
7237
                                            <div class="color-info bg-white c-font-14 sbold"> yellow-soft </div>
7238
                                        </div>
7239
                                        <div class="modal fade" id="demo_modal_yellow-soft">
7240
                                            <div class="modal-dialog modal-lg">
7241
                                                <div class="modal-content c-square">
7242
                                                    <div class="modal-header">
7243
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7244
                                                            <span aria-hidden="true">&times;</span>
7245
                                                        </button>
7246
                                                        <h4 class="modal-title bold uppercase font-yellow-soft">yellow-soft</h4>
7247
                                                    </div>
7248
                                                    <div class="modal-body">
7249
                                                        <div class="tabbable-line">
7250
                                                            <ul class="nav nav-tabs uppercase bold">
7251
                                                                <li class="active">
7252
                                                                    <a href="#yellow-soft_tab_1_content" data-toggle="tab">Typography</a>
7253
                                                                </li>
7254
                                                                <li>
7255
                                                                    <a href="#yellow-soft_tab_2_content" data-toggle="tab">Background & Border</a>
7256
                                                                </li>
7257
                                                                <li>
7258
                                                                    <a href="#yellow-soft_tab_3_content" data-toggle="tab">Buttons</a>
7259
                                                                </li>
7260
                                                                <li>
7261
                                                                    <a href="#yellow-soft_tab_4_content" data-toggle="tab">Components</a>
7262
                                                                </li>
7263
                                                            </ul>
7264
                                                            <div class="tab-content">
7265
                                                                <div class="tab-pane active" id="yellow-soft_tab_1_content">
7266
                                                                    <h4>Text font</h4>
7267
                                                                    <div style="margin: 10px 0 30px 0">
7268
                                                                        <span class="font-yellow-soft font-lg">Some sample text goes here...</span>
7269
                                                                        <br>
7270
                                                                        <span class="font-yellow-soft font-lg sbold">Some sample text goes here...</span>
7271
                                                                        <br>
7272
                                                                        <span class="font-yellow-soft font-lg bold uppercase">Some sample text goes here...</span>
7273
                                                                    </div>
7274
                                                                    <h4>Background matching text font</h4>
7275
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-soft">
7276
                                                                        <span class="bg-font-yellow-soft font-lg">Some sample text goes here...</span>
7277
                                                                        <br>
7278
                                                                        <span class="bg-font-yellow-soft font-lg sbold">Some sample text goes here...</span>
7279
                                                                        <br>
7280
                                                                        <span class="bg-font-yellow-soft font-lg bold uppercase">Some sample text goes here...</span>
7281
                                                                    </div>
7282
                                                                    <h4>Icon font</h4>
7283
                                                                    <div style="margin: 10px 0 30px 0">
7284
                                                                        <i class="font-yellow-soft font-lg icon-user"></i>&nbsp;
7285
                                                                        <i class="font-yellow-soft font-lg icon-settings"></i>&nbsp;
7286
                                                                        <i class="font-yellow-soft font-lg icon-calendar"></i>
7287
                                                                        <br>
7288
                                                                        <i class="font-yellow-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
7289
                                                                        <i class="font-yellow-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7290
                                                                        <i class="font-yellow-soft font-lg fa fa-cogs"></i>
7291
                                                                        <br>
7292
                                                                        <i class="font-yellow-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7293
                                                                        <i class="font-yellow-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7294
                                                                        <i class="font-yellow-soft font-lg glyphicon glyphicon-warning-sign"></i>
7295
                                                                        <br> </div>
7296
                                                                    <h4>Background matching icon font</h4>
7297
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-soft">
7298
                                                                        <i class="bg-font-yellow-soft font-lg icon-user"></i>&nbsp;
7299
                                                                        <i class="bg-font-yellow-soft font-lg icon-settings"></i>&nbsp;
7300
                                                                        <i class="bg-font-yellow-soft font-lg icon-calendar"></i>
7301
                                                                        <br>
7302
                                                                        <i class="bg-font-yellow-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
7303
                                                                        <i class="bg-font-yellow-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7304
                                                                        <i class="bg-font-yellow-soft font-lg fa fa-cogs"></i>
7305
                                                                        <br>
7306
                                                                        <i class="bg-font-yellow-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7307
                                                                        <i class="bg-font-yellow-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7308
                                                                        <i class="bg-font-yellow-soft font-lg glyphicon glyphicon-warning-sign"></i>
7309
                                                                        <br> </div>
7310
                                                                    <h4>Class usage</h4> <code>class="font-yellow-soft"</code> </div>
7311
                                                                <div class="tab-pane" id="yellow-soft_tab_2_content">
7312
                                                                    <div style="margin: 30px 0;">
7313
                                                                        <div class="border-yellow-soft margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-yellow-soft"</code> </div>
7314
                                                                    <div style="margin: 30px 0;">
7315
                                                                        <div class="bg-yellow-soft bg-font-yellow-soft margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-yellow-soft bg-font-yellow-soft"</code> </div>
7316
                                                                </div>
7317
                                                                <div class="tab-pane" id="yellow-soft_tab_3_content">
7318
                                                                    <div style="margin: 10px 0 30px 0">
7319
                                                                        <a href="#" class="btn uppercase yellow-soft">Button</a> &nbsp; <code>class="btn yellow-soft"</code> </div>
7320
                                                                    <div style="margin: 10px 0 30px 0">
7321
                                                                        <a href="#" class="btn sbold uppercase btn-outline yellow-soft">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-yellow-soft"</code> </div>
7322
                                                                    <div style="margin: 10px 0 30px 0">
7323
                                                                        <a href="#" class="btn sbold uppercase btn-circle yellow-soft">Button</a> &nbsp; <code>class="btn btn-circle yellow-soft"</code> </div>
7324
                                                                </div>
7325
                                                                <div class="tab-pane" id="yellow-soft_tab_4_content">
7326
                                                                    <div style="margin: 10px 0 30px 0">
7327
                                                                        <h4>Statistic Widgets</h4>
7328
                                                                        <div class="dashboard-stat yellow-soft">
7329
                                                                            <div class="visual">
7330
                                                                                <i class="fa fa-bar-chart-o"></i>
7331
                                                                            </div>
7332
                                                                            <div class="details">
7333
                                                                                <div class="number"> 12,5M$ </div>
7334
                                                                                <div class="desc"> Total Profit </div>
7335
                                                                            </div>
7336
                                                                            <a class="more" href="javascript:;"> View more
7337
                                                                                <i class="m-icon-swapright m-icon-white"></i>
7338
                                                                            </a>
7339
                                                                        </div> <code>class="dashboard-stat yellow-soft"</code> </div>
7340
                                                                </div>
7341
                                                            </div>
7342
                                                        </div>
7343
                                                    </div>
7344
                                                    <div class="modal-footer">
7345
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
7346
                                                    </div>
7347
                                                </div>
7348
                                            </div>
7349
                                        </div>
7350
                                    </div>
7351
                                </div>
7352
                                <div class="row">
7353
                                    <div class="col-md-2 col-sm-2 col-xs-6">
7354
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-haze">
7355
                                            <div class="color-view bg-yellow-haze bg-font-yellow-haze bold uppercase"> #c5bf66 </div>
7356
                                            <div class="color-info bg-white c-font-14 sbold"> yellow-haze </div>
7357
                                        </div>
7358
                                        <div class="modal fade" id="demo_modal_yellow-haze">
7359
                                            <div class="modal-dialog modal-lg">
7360
                                                <div class="modal-content c-square">
7361
                                                    <div class="modal-header">
7362
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7363
                                                            <span aria-hidden="true">&times;</span>
7364
                                                        </button>
7365
                                                        <h4 class="modal-title bold uppercase font-yellow-haze">yellow-haze</h4>
7366
                                                    </div>
7367
                                                    <div class="modal-body">
7368
                                                        <div class="tabbable-line">
7369
                                                            <ul class="nav nav-tabs uppercase bold">
7370
                                                                <li class="active">
7371
                                                                    <a href="#yellow-haze_tab_1_content" data-toggle="tab">Typography</a>
7372
                                                                </li>
7373
                                                                <li>
7374
                                                                    <a href="#yellow-haze_tab_2_content" data-toggle="tab">Background & Border</a>
7375
                                                                </li>
7376
                                                                <li>
7377
                                                                    <a href="#yellow-haze_tab_3_content" data-toggle="tab">Buttons</a>
7378
                                                                </li>
7379
                                                                <li>
7380
                                                                    <a href="#yellow-haze_tab_4_content" data-toggle="tab">Components</a>
7381
                                                                </li>
7382
                                                            </ul>
7383
                                                            <div class="tab-content">
7384
                                                                <div class="tab-pane active" id="yellow-haze_tab_1_content">
7385
                                                                    <h4>Text font</h4>
7386
                                                                    <div style="margin: 10px 0 30px 0">
7387
                                                                        <span class="font-yellow-haze font-lg">Some sample text goes here...</span>
7388
                                                                        <br>
7389
                                                                        <span class="font-yellow-haze font-lg sbold">Some sample text goes here...</span>
7390
                                                                        <br>
7391
                                                                        <span class="font-yellow-haze font-lg bold uppercase">Some sample text goes here...</span>
7392
                                                                    </div>
7393
                                                                    <h4>Background matching text font</h4>
7394
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-haze">
7395
                                                                        <span class="bg-font-yellow-haze font-lg">Some sample text goes here...</span>
7396
                                                                        <br>
7397
                                                                        <span class="bg-font-yellow-haze font-lg sbold">Some sample text goes here...</span>
7398
                                                                        <br>
7399
                                                                        <span class="bg-font-yellow-haze font-lg bold uppercase">Some sample text goes here...</span>
7400
                                                                    </div>
7401
                                                                    <h4>Icon font</h4>
7402
                                                                    <div style="margin: 10px 0 30px 0">
7403
                                                                        <i class="font-yellow-haze font-lg icon-user"></i>&nbsp;
7404
                                                                        <i class="font-yellow-haze font-lg icon-settings"></i>&nbsp;
7405
                                                                        <i class="font-yellow-haze font-lg icon-calendar"></i>
7406
                                                                        <br>
7407
                                                                        <i class="font-yellow-haze font-lg fa fa-bar-chart-o"></i>&nbsp;
7408
                                                                        <i class="font-yellow-haze font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7409
                                                                        <i class="font-yellow-haze font-lg fa fa-cogs"></i>
7410
                                                                        <br>
7411
                                                                        <i class="font-yellow-haze font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7412
                                                                        <i class="font-yellow-haze font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7413
                                                                        <i class="font-yellow-haze font-lg glyphicon glyphicon-warning-sign"></i>
7414
                                                                        <br> </div>
7415
                                                                    <h4>Background matching icon font</h4>
7416
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-haze">
7417
                                                                        <i class="bg-font-yellow-haze font-lg icon-user"></i>&nbsp;
7418
                                                                        <i class="bg-font-yellow-haze font-lg icon-settings"></i>&nbsp;
7419
                                                                        <i class="bg-font-yellow-haze font-lg icon-calendar"></i>
7420
                                                                        <br>
7421
                                                                        <i class="bg-font-yellow-haze font-lg fa fa-bar-chart-o"></i>&nbsp;
7422
                                                                        <i class="bg-font-yellow-haze font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7423
                                                                        <i class="bg-font-yellow-haze font-lg fa fa-cogs"></i>
7424
                                                                        <br>
7425
                                                                        <i class="bg-font-yellow-haze font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7426
                                                                        <i class="bg-font-yellow-haze font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7427
                                                                        <i class="bg-font-yellow-haze font-lg glyphicon glyphicon-warning-sign"></i>
7428
                                                                        <br> </div>
7429
                                                                    <h4>Class usage</h4> <code>class="font-yellow-haze"</code> </div>
7430
                                                                <div class="tab-pane" id="yellow-haze_tab_2_content">
7431
                                                                    <div style="margin: 30px 0;">
7432
                                                                        <div class="border-yellow-haze margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-yellow-haze"</code> </div>
7433
                                                                    <div style="margin: 30px 0;">
7434
                                                                        <div class="bg-yellow-haze bg-font-yellow-haze margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-yellow-haze bg-font-yellow-haze"</code> </div>
7435
                                                                </div>
7436
                                                                <div class="tab-pane" id="yellow-haze_tab_3_content">
7437
                                                                    <div style="margin: 10px 0 30px 0">
7438
                                                                        <a href="#" class="btn uppercase yellow-haze">Button</a> &nbsp; <code>class="btn yellow-haze"</code> </div>
7439
                                                                    <div style="margin: 10px 0 30px 0">
7440
                                                                        <a href="#" class="btn sbold uppercase btn-outline yellow-haze">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-yellow-haze"</code> </div>
7441
                                                                    <div style="margin: 10px 0 30px 0">
7442
                                                                        <a href="#" class="btn sbold uppercase btn-circle yellow-haze">Button</a> &nbsp; <code>class="btn btn-circle yellow-haze"</code> </div>
7443
                                                                </div>
7444
                                                                <div class="tab-pane" id="yellow-haze_tab_4_content">
7445
                                                                    <div style="margin: 10px 0 30px 0">
7446
                                                                        <h4>Statistic Widgets</h4>
7447
                                                                        <div class="dashboard-stat yellow-haze">
7448
                                                                            <div class="visual">
7449
                                                                                <i class="fa fa-bar-chart-o"></i>
7450
                                                                            </div>
7451
                                                                            <div class="details">
7452
                                                                                <div class="number"> 12,5M$ </div>
7453
                                                                                <div class="desc"> Total Profit </div>
7454
                                                                            </div>
7455
                                                                            <a class="more" href="javascript:;"> View more
7456
                                                                                <i class="m-icon-swapright m-icon-white"></i>
7457
                                                                            </a>
7458
                                                                        </div> <code>class="dashboard-stat yellow-haze"</code> </div>
7459
                                                                </div>
7460
                                                            </div>
7461
                                                        </div>
7462
                                                    </div>
7463
                                                    <div class="modal-footer">
7464
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
7465
                                                    </div>
7466
                                                </div>
7467
                                            </div>
7468
                                        </div>
7469
                                    </div>
7470
                                    <div class="col-md-2 col-sm-2 col-xs-6">
7471
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_yellow-mint">
7472
                                            <div class="color-view bg-yellow-mint bg-font-yellow-mint bold uppercase"> #c5b96b </div>
7473
                                            <div class="color-info bg-white c-font-14 sbold"> yellow-mint </div>
7474
                                        </div>
7475
                                        <div class="modal fade" id="demo_modal_yellow-mint">
7476
                                            <div class="modal-dialog modal-lg">
7477
                                                <div class="modal-content c-square">
7478
                                                    <div class="modal-header">
7479
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7480
                                                            <span aria-hidden="true">&times;</span>
7481
                                                        </button>
7482
                                                        <h4 class="modal-title bold uppercase font-yellow-mint">yellow-mint</h4>
7483
                                                    </div>
7484
                                                    <div class="modal-body">
7485
                                                        <div class="tabbable-line">
7486
                                                            <ul class="nav nav-tabs uppercase bold">
7487
                                                                <li class="active">
7488
                                                                    <a href="#yellow-mint_tab_1_content" data-toggle="tab">Typography</a>
7489
                                                                </li>
7490
                                                                <li>
7491
                                                                    <a href="#yellow-mint_tab_2_content" data-toggle="tab">Background & Border</a>
7492
                                                                </li>
7493
                                                                <li>
7494
                                                                    <a href="#yellow-mint_tab_3_content" data-toggle="tab">Buttons</a>
7495
                                                                </li>
7496
                                                                <li>
7497
                                                                    <a href="#yellow-mint_tab_4_content" data-toggle="tab">Components</a>
7498
                                                                </li>
7499
                                                            </ul>
7500
                                                            <div class="tab-content">
7501
                                                                <div class="tab-pane active" id="yellow-mint_tab_1_content">
7502
                                                                    <h4>Text font</h4>
7503
                                                                    <div style="margin: 10px 0 30px 0">
7504
                                                                        <span class="font-yellow-mint font-lg">Some sample text goes here...</span>
7505
                                                                        <br>
7506
                                                                        <span class="font-yellow-mint font-lg sbold">Some sample text goes here...</span>
7507
                                                                        <br>
7508
                                                                        <span class="font-yellow-mint font-lg bold uppercase">Some sample text goes here...</span>
7509
                                                                    </div>
7510
                                                                    <h4>Background matching text font</h4>
7511
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-mint">
7512
                                                                        <span class="bg-font-yellow-mint font-lg">Some sample text goes here...</span>
7513
                                                                        <br>
7514
                                                                        <span class="bg-font-yellow-mint font-lg sbold">Some sample text goes here...</span>
7515
                                                                        <br>
7516
                                                                        <span class="bg-font-yellow-mint font-lg bold uppercase">Some sample text goes here...</span>
7517
                                                                    </div>
7518
                                                                    <h4>Icon font</h4>
7519
                                                                    <div style="margin: 10px 0 30px 0">
7520
                                                                        <i class="font-yellow-mint font-lg icon-user"></i>&nbsp;
7521
                                                                        <i class="font-yellow-mint font-lg icon-settings"></i>&nbsp;
7522
                                                                        <i class="font-yellow-mint font-lg icon-calendar"></i>
7523
                                                                        <br>
7524
                                                                        <i class="font-yellow-mint font-lg fa fa-bar-chart-o"></i>&nbsp;
7525
                                                                        <i class="font-yellow-mint font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7526
                                                                        <i class="font-yellow-mint font-lg fa fa-cogs"></i>
7527
                                                                        <br>
7528
                                                                        <i class="font-yellow-mint font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7529
                                                                        <i class="font-yellow-mint font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7530
                                                                        <i class="font-yellow-mint font-lg glyphicon glyphicon-warning-sign"></i>
7531
                                                                        <br> </div>
7532
                                                                    <h4>Background matching icon font</h4>
7533
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-yellow-mint">
7534
                                                                        <i class="bg-font-yellow-mint font-lg icon-user"></i>&nbsp;
7535
                                                                        <i class="bg-font-yellow-mint font-lg icon-settings"></i>&nbsp;
7536
                                                                        <i class="bg-font-yellow-mint font-lg icon-calendar"></i>
7537
                                                                        <br>
7538
                                                                        <i class="bg-font-yellow-mint font-lg fa fa-bar-chart-o"></i>&nbsp;
7539
                                                                        <i class="bg-font-yellow-mint font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7540
                                                                        <i class="bg-font-yellow-mint font-lg fa fa-cogs"></i>
7541
                                                                        <br>
7542
                                                                        <i class="bg-font-yellow-mint font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7543
                                                                        <i class="bg-font-yellow-mint font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7544
                                                                        <i class="bg-font-yellow-mint font-lg glyphicon glyphicon-warning-sign"></i>
7545
                                                                        <br> </div>
7546
                                                                    <h4>Class usage</h4> <code>class="font-yellow-mint"</code> </div>
7547
                                                                <div class="tab-pane" id="yellow-mint_tab_2_content">
7548
                                                                    <div style="margin: 30px 0;">
7549
                                                                        <div class="border-yellow-mint margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-yellow-mint"</code> </div>
7550
                                                                    <div style="margin: 30px 0;">
7551
                                                                        <div class="bg-yellow-mint bg-font-yellow-mint margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-yellow-mint bg-font-yellow-mint"</code> </div>
7552
                                                                </div>
7553
                                                                <div class="tab-pane" id="yellow-mint_tab_3_content">
7554
                                                                    <div style="margin: 10px 0 30px 0">
7555
                                                                        <a href="#" class="btn uppercase yellow-mint">Button</a> &nbsp; <code>class="btn yellow-mint"</code> </div>
7556
                                                                    <div style="margin: 10px 0 30px 0">
7557
                                                                        <a href="#" class="btn sbold uppercase btn-outline yellow-mint">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-yellow-mint"</code> </div>
7558
                                                                    <div style="margin: 10px 0 30px 0">
7559
                                                                        <a href="#" class="btn sbold uppercase btn-circle yellow-mint">Button</a> &nbsp; <code>class="btn btn-circle yellow-mint"</code> </div>
7560
                                                                </div>
7561
                                                                <div class="tab-pane" id="yellow-mint_tab_4_content">
7562
                                                                    <div style="margin: 10px 0 30px 0">
7563
                                                                        <h4>Statistic Widgets</h4>
7564
                                                                        <div class="dashboard-stat yellow-mint">
7565
                                                                            <div class="visual">
7566
                                                                                <i class="fa fa-bar-chart-o"></i>
7567
                                                                            </div>
7568
                                                                            <div class="details">
7569
                                                                                <div class="number"> 12,5M$ </div>
7570
                                                                                <div class="desc"> Total Profit </div>
7571
                                                                            </div>
7572
                                                                            <a class="more" href="javascript:;"> View more
7573
                                                                                <i class="m-icon-swapright m-icon-white"></i>
7574
                                                                            </a>
7575
                                                                        </div> <code>class="dashboard-stat yellow-mint"</code> </div>
7576
                                                                </div>
7577
                                                            </div>
7578
                                                        </div>
7579
                                                    </div>
7580
                                                    <div class="modal-footer">
7581
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
7582
                                                    </div>
7583
                                                </div>
7584
                                            </div>
7585
                                        </div>
7586
                                    </div>
7587
                                    <div class="col-md-2 col-sm-2 col-xs-6">
7588
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple">
7589
                                            <div class="color-view bg-purple bg-font-purple bold uppercase"> #8E44AD </div>
7590
                                            <div class="color-info bg-white c-font-14 sbold"> purple </div>
7591
                                        </div>
7592
                                        <div class="modal fade" id="demo_modal_purple">
7593
                                            <div class="modal-dialog modal-lg">
7594
                                                <div class="modal-content c-square">
7595
                                                    <div class="modal-header">
7596
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7597
                                                            <span aria-hidden="true">&times;</span>
7598
                                                        </button>
7599
                                                        <h4 class="modal-title bold uppercase font-purple">purple</h4>
7600
                                                    </div>
7601
                                                    <div class="modal-body">
7602
                                                        <div class="tabbable-line">
7603
                                                            <ul class="nav nav-tabs uppercase bold">
7604
                                                                <li class="active">
7605
                                                                    <a href="#purple_tab_1_content" data-toggle="tab">Typography</a>
7606
                                                                </li>
7607
                                                                <li>
7608
                                                                    <a href="#purple_tab_2_content" data-toggle="tab">Background & Border</a>
7609
                                                                </li>
7610
                                                                <li>
7611
                                                                    <a href="#purple_tab_3_content" data-toggle="tab">Buttons</a>
7612
                                                                </li>
7613
                                                                <li>
7614
                                                                    <a href="#purple_tab_4_content" data-toggle="tab">Components</a>
7615
                                                                </li>
7616
                                                            </ul>
7617
                                                            <div class="tab-content">
7618
                                                                <div class="tab-pane active" id="purple_tab_1_content">
7619
                                                                    <h4>Text font</h4>
7620
                                                                    <div style="margin: 10px 0 30px 0">
7621
                                                                        <span class="font-purple font-lg">Some sample text goes here...</span>
7622
                                                                        <br>
7623
                                                                        <span class="font-purple font-lg sbold">Some sample text goes here...</span>
7624
                                                                        <br>
7625
                                                                        <span class="font-purple font-lg bold uppercase">Some sample text goes here...</span>
7626
                                                                    </div>
7627
                                                                    <h4>Background matching text font</h4>
7628
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple">
7629
                                                                        <span class="bg-font-purple font-lg">Some sample text goes here...</span>
7630
                                                                        <br>
7631
                                                                        <span class="bg-font-purple font-lg sbold">Some sample text goes here...</span>
7632
                                                                        <br>
7633
                                                                        <span class="bg-font-purple font-lg bold uppercase">Some sample text goes here...</span>
7634
                                                                    </div>
7635
                                                                    <h4>Icon font</h4>
7636
                                                                    <div style="margin: 10px 0 30px 0">
7637
                                                                        <i class="font-purple font-lg icon-user"></i>&nbsp;
7638
                                                                        <i class="font-purple font-lg icon-settings"></i>&nbsp;
7639
                                                                        <i class="font-purple font-lg icon-calendar"></i>
7640
                                                                        <br>
7641
                                                                        <i class="font-purple font-lg fa fa-bar-chart-o"></i>&nbsp;
7642
                                                                        <i class="font-purple font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7643
                                                                        <i class="font-purple font-lg fa fa-cogs"></i>
7644
                                                                        <br>
7645
                                                                        <i class="font-purple font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7646
                                                                        <i class="font-purple font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7647
                                                                        <i class="font-purple font-lg glyphicon glyphicon-warning-sign"></i>
7648
                                                                        <br> </div>
7649
                                                                    <h4>Background matching icon font</h4>
7650
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple">
7651
                                                                        <i class="bg-font-purple font-lg icon-user"></i>&nbsp;
7652
                                                                        <i class="bg-font-purple font-lg icon-settings"></i>&nbsp;
7653
                                                                        <i class="bg-font-purple font-lg icon-calendar"></i>
7654
                                                                        <br>
7655
                                                                        <i class="bg-font-purple font-lg fa fa-bar-chart-o"></i>&nbsp;
7656
                                                                        <i class="bg-font-purple font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7657
                                                                        <i class="bg-font-purple font-lg fa fa-cogs"></i>
7658
                                                                        <br>
7659
                                                                        <i class="bg-font-purple font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7660
                                                                        <i class="bg-font-purple font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7661
                                                                        <i class="bg-font-purple font-lg glyphicon glyphicon-warning-sign"></i>
7662
                                                                        <br> </div>
7663
                                                                    <h4>Class usage</h4> <code>class="font-purple"</code> </div>
7664
                                                                <div class="tab-pane" id="purple_tab_2_content">
7665
                                                                    <div style="margin: 30px 0;">
7666
                                                                        <div class="border-purple margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-purple"</code> </div>
7667
                                                                    <div style="margin: 30px 0;">
7668
                                                                        <div class="bg-purple bg-font-purple margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-purple bg-font-purple"</code> </div>
7669
                                                                </div>
7670
                                                                <div class="tab-pane" id="purple_tab_3_content">
7671
                                                                    <div style="margin: 10px 0 30px 0">
7672
                                                                        <a href="#" class="btn uppercase purple">Button</a> &nbsp; <code>class="btn purple"</code> </div>
7673
                                                                    <div style="margin: 10px 0 30px 0">
7674
                                                                        <a href="#" class="btn sbold uppercase btn-outline purple">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple"</code> </div>
7675
                                                                    <div style="margin: 10px 0 30px 0">
7676
                                                                        <a href="#" class="btn sbold uppercase btn-circle purple">Button</a> &nbsp; <code>class="btn btn-circle purple"</code> </div>
7677
                                                                </div>
7678
                                                                <div class="tab-pane" id="purple_tab_4_content">
7679
                                                                    <div style="margin: 10px 0 30px 0">
7680
                                                                        <h4>Statistic Widgets</h4>
7681
                                                                        <div class="dashboard-stat purple">
7682
                                                                            <div class="visual">
7683
                                                                                <i class="fa fa-bar-chart-o"></i>
7684
                                                                            </div>
7685
                                                                            <div class="details">
7686
                                                                                <div class="number"> 12,5M$ </div>
7687
                                                                                <div class="desc"> Total Profit </div>
7688
                                                                            </div>
7689
                                                                            <a class="more" href="javascript:;"> View more
7690
                                                                                <i class="m-icon-swapright m-icon-white"></i>
7691
                                                                            </a>
7692
                                                                        </div> <code>class="dashboard-stat purple"</code> </div>
7693
                                                                </div>
7694
                                                            </div>
7695
                                                        </div>
7696
                                                    </div>
7697
                                                    <div class="modal-footer">
7698
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
7699
                                                    </div>
7700
                                                </div>
7701
                                            </div>
7702
                                        </div>
7703
                                    </div>
7704
                                    <div class="col-md-2 col-sm-2 col-xs-6">
7705
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-plum">
7706
                                            <div class="color-view bg-purple-plum bg-font-purple-plum bold uppercase"> #8775a7 </div>
7707
                                            <div class="color-info bg-white c-font-14 sbold"> purple-plum </div>
7708
                                        </div>
7709
                                        <div class="modal fade" id="demo_modal_purple-plum">
7710
                                            <div class="modal-dialog modal-lg">
7711
                                                <div class="modal-content c-square">
7712
                                                    <div class="modal-header">
7713
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7714
                                                            <span aria-hidden="true">&times;</span>
7715
                                                        </button>
7716
                                                        <h4 class="modal-title bold uppercase font-purple-plum">purple-plum</h4>
7717
                                                    </div>
7718
                                                    <div class="modal-body">
7719
                                                        <div class="tabbable-line">
7720
                                                            <ul class="nav nav-tabs uppercase bold">
7721
                                                                <li class="active">
7722
                                                                    <a href="#purple-plum_tab_1_content" data-toggle="tab">Typography</a>
7723
                                                                </li>
7724
                                                                <li>
7725
                                                                    <a href="#purple-plum_tab_2_content" data-toggle="tab">Background & Border</a>
7726
                                                                </li>
7727
                                                                <li>
7728
                                                                    <a href="#purple-plum_tab_3_content" data-toggle="tab">Buttons</a>
7729
                                                                </li>
7730
                                                                <li>
7731
                                                                    <a href="#purple-plum_tab_4_content" data-toggle="tab">Components</a>
7732
                                                                </li>
7733
                                                            </ul>
7734
                                                            <div class="tab-content">
7735
                                                                <div class="tab-pane active" id="purple-plum_tab_1_content">
7736
                                                                    <h4>Text font</h4>
7737
                                                                    <div style="margin: 10px 0 30px 0">
7738
                                                                        <span class="font-purple-plum font-lg">Some sample text goes here...</span>
7739
                                                                        <br>
7740
                                                                        <span class="font-purple-plum font-lg sbold">Some sample text goes here...</span>
7741
                                                                        <br>
7742
                                                                        <span class="font-purple-plum font-lg bold uppercase">Some sample text goes here...</span>
7743
                                                                    </div>
7744
                                                                    <h4>Background matching text font</h4>
7745
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-plum">
7746
                                                                        <span class="bg-font-purple-plum font-lg">Some sample text goes here...</span>
7747
                                                                        <br>
7748
                                                                        <span class="bg-font-purple-plum font-lg sbold">Some sample text goes here...</span>
7749
                                                                        <br>
7750
                                                                        <span class="bg-font-purple-plum font-lg bold uppercase">Some sample text goes here...</span>
7751
                                                                    </div>
7752
                                                                    <h4>Icon font</h4>
7753
                                                                    <div style="margin: 10px 0 30px 0">
7754
                                                                        <i class="font-purple-plum font-lg icon-user"></i>&nbsp;
7755
                                                                        <i class="font-purple-plum font-lg icon-settings"></i>&nbsp;
7756
                                                                        <i class="font-purple-plum font-lg icon-calendar"></i>
7757
                                                                        <br>
7758
                                                                        <i class="font-purple-plum font-lg fa fa-bar-chart-o"></i>&nbsp;
7759
                                                                        <i class="font-purple-plum font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7760
                                                                        <i class="font-purple-plum font-lg fa fa-cogs"></i>
7761
                                                                        <br>
7762
                                                                        <i class="font-purple-plum font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7763
                                                                        <i class="font-purple-plum font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7764
                                                                        <i class="font-purple-plum font-lg glyphicon glyphicon-warning-sign"></i>
7765
                                                                        <br> </div>
7766
                                                                    <h4>Background matching icon font</h4>
7767
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-plum">
7768
                                                                        <i class="bg-font-purple-plum font-lg icon-user"></i>&nbsp;
7769
                                                                        <i class="bg-font-purple-plum font-lg icon-settings"></i>&nbsp;
7770
                                                                        <i class="bg-font-purple-plum font-lg icon-calendar"></i>
7771
                                                                        <br>
7772
                                                                        <i class="bg-font-purple-plum font-lg fa fa-bar-chart-o"></i>&nbsp;
7773
                                                                        <i class="bg-font-purple-plum font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7774
                                                                        <i class="bg-font-purple-plum font-lg fa fa-cogs"></i>
7775
                                                                        <br>
7776
                                                                        <i class="bg-font-purple-plum font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7777
                                                                        <i class="bg-font-purple-plum font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7778
                                                                        <i class="bg-font-purple-plum font-lg glyphicon glyphicon-warning-sign"></i>
7779
                                                                        <br> </div>
7780
                                                                    <h4>Class usage</h4> <code>class="font-purple-plum"</code> </div>
7781
                                                                <div class="tab-pane" id="purple-plum_tab_2_content">
7782
                                                                    <div style="margin: 30px 0;">
7783
                                                                        <div class="border-purple-plum margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-purple-plum"</code> </div>
7784
                                                                    <div style="margin: 30px 0;">
7785
                                                                        <div class="bg-purple-plum bg-font-purple-plum margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-purple-plum bg-font-purple-plum"</code> </div>
7786
                                                                </div>
7787
                                                                <div class="tab-pane" id="purple-plum_tab_3_content">
7788
                                                                    <div style="margin: 10px 0 30px 0">
7789
                                                                        <a href="#" class="btn uppercase purple-plum">Button</a> &nbsp; <code>class="btn purple-plum"</code> </div>
7790
                                                                    <div style="margin: 10px 0 30px 0">
7791
                                                                        <a href="#" class="btn sbold uppercase btn-outline purple-plum">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple-plum"</code> </div>
7792
                                                                    <div style="margin: 10px 0 30px 0">
7793
                                                                        <a href="#" class="btn sbold uppercase btn-circle purple-plum">Button</a> &nbsp; <code>class="btn btn-circle purple-plum"</code> </div>
7794
                                                                </div>
7795
                                                                <div class="tab-pane" id="purple-plum_tab_4_content">
7796
                                                                    <div style="margin: 10px 0 30px 0">
7797
                                                                        <h4>Statistic Widgets</h4>
7798
                                                                        <div class="dashboard-stat purple-plum">
7799
                                                                            <div class="visual">
7800
                                                                                <i class="fa fa-bar-chart-o"></i>
7801
                                                                            </div>
7802
                                                                            <div class="details">
7803
                                                                                <div class="number"> 12,5M$ </div>
7804
                                                                                <div class="desc"> Total Profit </div>
7805
                                                                            </div>
7806
                                                                            <a class="more" href="javascript:;"> View more
7807
                                                                                <i class="m-icon-swapright m-icon-white"></i>
7808
                                                                            </a>
7809
                                                                        </div> <code>class="dashboard-stat purple-plum"</code> </div>
7810
                                                                </div>
7811
                                                            </div>
7812
                                                        </div>
7813
                                                    </div>
7814
                                                    <div class="modal-footer">
7815
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
7816
                                                    </div>
7817
                                                </div>
7818
                                            </div>
7819
                                        </div>
7820
                                    </div>
7821
                                    <div class="col-md-2 col-sm-2 col-xs-6">
7822
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-medium">
7823
                                            <div class="color-view bg-purple-medium bg-font-purple-medium bold uppercase"> #BF55EC </div>
7824
                                            <div class="color-info bg-white c-font-14 sbold"> purple-medium </div>
7825
                                        </div>
7826
                                        <div class="modal fade" id="demo_modal_purple-medium">
7827
                                            <div class="modal-dialog modal-lg">
7828
                                                <div class="modal-content c-square">
7829
                                                    <div class="modal-header">
7830
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7831
                                                            <span aria-hidden="true">&times;</span>
7832
                                                        </button>
7833
                                                        <h4 class="modal-title bold uppercase font-purple-medium">purple-medium</h4>
7834
                                                    </div>
7835
                                                    <div class="modal-body">
7836
                                                        <div class="tabbable-line">
7837
                                                            <ul class="nav nav-tabs uppercase bold">
7838
                                                                <li class="active">
7839
                                                                    <a href="#purple-medium_tab_1_content" data-toggle="tab">Typography</a>
7840
                                                                </li>
7841
                                                                <li>
7842
                                                                    <a href="#purple-medium_tab_2_content" data-toggle="tab">Background & Border</a>
7843
                                                                </li>
7844
                                                                <li>
7845
                                                                    <a href="#purple-medium_tab_3_content" data-toggle="tab">Buttons</a>
7846
                                                                </li>
7847
                                                                <li>
7848
                                                                    <a href="#purple-medium_tab_4_content" data-toggle="tab">Components</a>
7849
                                                                </li>
7850
                                                            </ul>
7851
                                                            <div class="tab-content">
7852
                                                                <div class="tab-pane active" id="purple-medium_tab_1_content">
7853
                                                                    <h4>Text font</h4>
7854
                                                                    <div style="margin: 10px 0 30px 0">
7855
                                                                        <span class="font-purple-medium font-lg">Some sample text goes here...</span>
7856
                                                                        <br>
7857
                                                                        <span class="font-purple-medium font-lg sbold">Some sample text goes here...</span>
7858
                                                                        <br>
7859
                                                                        <span class="font-purple-medium font-lg bold uppercase">Some sample text goes here...</span>
7860
                                                                    </div>
7861
                                                                    <h4>Background matching text font</h4>
7862
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-medium">
7863
                                                                        <span class="bg-font-purple-medium font-lg">Some sample text goes here...</span>
7864
                                                                        <br>
7865
                                                                        <span class="bg-font-purple-medium font-lg sbold">Some sample text goes here...</span>
7866
                                                                        <br>
7867
                                                                        <span class="bg-font-purple-medium font-lg bold uppercase">Some sample text goes here...</span>
7868
                                                                    </div>
7869
                                                                    <h4>Icon font</h4>
7870
                                                                    <div style="margin: 10px 0 30px 0">
7871
                                                                        <i class="font-purple-medium font-lg icon-user"></i>&nbsp;
7872
                                                                        <i class="font-purple-medium font-lg icon-settings"></i>&nbsp;
7873
                                                                        <i class="font-purple-medium font-lg icon-calendar"></i>
7874
                                                                        <br>
7875
                                                                        <i class="font-purple-medium font-lg fa fa-bar-chart-o"></i>&nbsp;
7876
                                                                        <i class="font-purple-medium font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7877
                                                                        <i class="font-purple-medium font-lg fa fa-cogs"></i>
7878
                                                                        <br>
7879
                                                                        <i class="font-purple-medium font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7880
                                                                        <i class="font-purple-medium font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7881
                                                                        <i class="font-purple-medium font-lg glyphicon glyphicon-warning-sign"></i>
7882
                                                                        <br> </div>
7883
                                                                    <h4>Background matching icon font</h4>
7884
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-medium">
7885
                                                                        <i class="bg-font-purple-medium font-lg icon-user"></i>&nbsp;
7886
                                                                        <i class="bg-font-purple-medium font-lg icon-settings"></i>&nbsp;
7887
                                                                        <i class="bg-font-purple-medium font-lg icon-calendar"></i>
7888
                                                                        <br>
7889
                                                                        <i class="bg-font-purple-medium font-lg fa fa-bar-chart-o"></i>&nbsp;
7890
                                                                        <i class="bg-font-purple-medium font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7891
                                                                        <i class="bg-font-purple-medium font-lg fa fa-cogs"></i>
7892
                                                                        <br>
7893
                                                                        <i class="bg-font-purple-medium font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7894
                                                                        <i class="bg-font-purple-medium font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7895
                                                                        <i class="bg-font-purple-medium font-lg glyphicon glyphicon-warning-sign"></i>
7896
                                                                        <br> </div>
7897
                                                                    <h4>Class usage</h4> <code>class="font-purple-medium"</code> </div>
7898
                                                                <div class="tab-pane" id="purple-medium_tab_2_content">
7899
                                                                    <div style="margin: 30px 0;">
7900
                                                                        <div class="border-purple-medium margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-purple-medium"</code> </div>
7901
                                                                    <div style="margin: 30px 0;">
7902
                                                                        <div class="bg-purple-medium bg-font-purple-medium margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-purple-medium bg-font-purple-medium"</code> </div>
7903
                                                                </div>
7904
                                                                <div class="tab-pane" id="purple-medium_tab_3_content">
7905
                                                                    <div style="margin: 10px 0 30px 0">
7906
                                                                        <a href="#" class="btn uppercase purple-medium">Button</a> &nbsp; <code>class="btn purple-medium"</code> </div>
7907
                                                                    <div style="margin: 10px 0 30px 0">
7908
                                                                        <a href="#" class="btn sbold uppercase btn-outline purple-medium">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple-medium"</code> </div>
7909
                                                                    <div style="margin: 10px 0 30px 0">
7910
                                                                        <a href="#" class="btn sbold uppercase btn-circle purple-medium">Button</a> &nbsp; <code>class="btn btn-circle purple-medium"</code> </div>
7911
                                                                </div>
7912
                                                                <div class="tab-pane" id="purple-medium_tab_4_content">
7913
                                                                    <div style="margin: 10px 0 30px 0">
7914
                                                                        <h4>Statistic Widgets</h4>
7915
                                                                        <div class="dashboard-stat purple-medium">
7916
                                                                            <div class="visual">
7917
                                                                                <i class="fa fa-bar-chart-o"></i>
7918
                                                                            </div>
7919
                                                                            <div class="details">
7920
                                                                                <div class="number"> 12,5M$ </div>
7921
                                                                                <div class="desc"> Total Profit </div>
7922
                                                                            </div>
7923
                                                                            <a class="more" href="javascript:;"> View more
7924
                                                                                <i class="m-icon-swapright m-icon-white"></i>
7925
                                                                            </a>
7926
                                                                        </div> <code>class="dashboard-stat purple-medium"</code> </div>
7927
                                                                </div>
7928
                                                            </div>
7929
                                                        </div>
7930
                                                    </div>
7931
                                                    <div class="modal-footer">
7932
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
7933
                                                    </div>
7934
                                                </div>
7935
                                            </div>
7936
                                        </div>
7937
                                    </div>
7938
                                    <div class="col-md-2 col-sm-2 col-xs-6">
7939
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-studio">
7940
                                            <div class="color-view bg-purple-studio bg-font-purple-studio bold uppercase"> #8E44AD </div>
7941
                                            <div class="color-info bg-white c-font-14 sbold"> purple-studio </div>
7942
                                        </div>
7943
                                        <div class="modal fade" id="demo_modal_purple-studio">
7944
                                            <div class="modal-dialog modal-lg">
7945
                                                <div class="modal-content c-square">
7946
                                                    <div class="modal-header">
7947
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
7948
                                                            <span aria-hidden="true">&times;</span>
7949
                                                        </button>
7950
                                                        <h4 class="modal-title bold uppercase font-purple-studio">purple-studio</h4>
7951
                                                    </div>
7952
                                                    <div class="modal-body">
7953
                                                        <div class="tabbable-line">
7954
                                                            <ul class="nav nav-tabs uppercase bold">
7955
                                                                <li class="active">
7956
                                                                    <a href="#purple-studio_tab_1_content" data-toggle="tab">Typography</a>
7957
                                                                </li>
7958
                                                                <li>
7959
                                                                    <a href="#purple-studio_tab_2_content" data-toggle="tab">Background & Border</a>
7960
                                                                </li>
7961
                                                                <li>
7962
                                                                    <a href="#purple-studio_tab_3_content" data-toggle="tab">Buttons</a>
7963
                                                                </li>
7964
                                                                <li>
7965
                                                                    <a href="#purple-studio_tab_4_content" data-toggle="tab">Components</a>
7966
                                                                </li>
7967
                                                            </ul>
7968
                                                            <div class="tab-content">
7969
                                                                <div class="tab-pane active" id="purple-studio_tab_1_content">
7970
                                                                    <h4>Text font</h4>
7971
                                                                    <div style="margin: 10px 0 30px 0">
7972
                                                                        <span class="font-purple-studio font-lg">Some sample text goes here...</span>
7973
                                                                        <br>
7974
                                                                        <span class="font-purple-studio font-lg sbold">Some sample text goes here...</span>
7975
                                                                        <br>
7976
                                                                        <span class="font-purple-studio font-lg bold uppercase">Some sample text goes here...</span>
7977
                                                                    </div>
7978
                                                                    <h4>Background matching text font</h4>
7979
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-studio">
7980
                                                                        <span class="bg-font-purple-studio font-lg">Some sample text goes here...</span>
7981
                                                                        <br>
7982
                                                                        <span class="bg-font-purple-studio font-lg sbold">Some sample text goes here...</span>
7983
                                                                        <br>
7984
                                                                        <span class="bg-font-purple-studio font-lg bold uppercase">Some sample text goes here...</span>
7985
                                                                    </div>
7986
                                                                    <h4>Icon font</h4>
7987
                                                                    <div style="margin: 10px 0 30px 0">
7988
                                                                        <i class="font-purple-studio font-lg icon-user"></i>&nbsp;
7989
                                                                        <i class="font-purple-studio font-lg icon-settings"></i>&nbsp;
7990
                                                                        <i class="font-purple-studio font-lg icon-calendar"></i>
7991
                                                                        <br>
7992
                                                                        <i class="font-purple-studio font-lg fa fa-bar-chart-o"></i>&nbsp;
7993
                                                                        <i class="font-purple-studio font-lg fa fa-code-fork icon-settings"></i>&nbsp;
7994
                                                                        <i class="font-purple-studio font-lg fa fa-cogs"></i>
7995
                                                                        <br>
7996
                                                                        <i class="font-purple-studio font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
7997
                                                                        <i class="font-purple-studio font-lg glyphicon glyphicon-leaf"></i>&nbsp;
7998
                                                                        <i class="font-purple-studio font-lg glyphicon glyphicon-warning-sign"></i>
7999
                                                                        <br> </div>
8000
                                                                    <h4>Background matching icon font</h4>
8001
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-studio">
8002
                                                                        <i class="bg-font-purple-studio font-lg icon-user"></i>&nbsp;
8003
                                                                        <i class="bg-font-purple-studio font-lg icon-settings"></i>&nbsp;
8004
                                                                        <i class="bg-font-purple-studio font-lg icon-calendar"></i>
8005
                                                                        <br>
8006
                                                                        <i class="bg-font-purple-studio font-lg fa fa-bar-chart-o"></i>&nbsp;
8007
                                                                        <i class="bg-font-purple-studio font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8008
                                                                        <i class="bg-font-purple-studio font-lg fa fa-cogs"></i>
8009
                                                                        <br>
8010
                                                                        <i class="bg-font-purple-studio font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8011
                                                                        <i class="bg-font-purple-studio font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8012
                                                                        <i class="bg-font-purple-studio font-lg glyphicon glyphicon-warning-sign"></i>
8013
                                                                        <br> </div>
8014
                                                                    <h4>Class usage</h4> <code>class="font-purple-studio"</code> </div>
8015
                                                                <div class="tab-pane" id="purple-studio_tab_2_content">
8016
                                                                    <div style="margin: 30px 0;">
8017
                                                                        <div class="border-purple-studio margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-purple-studio"</code> </div>
8018
                                                                    <div style="margin: 30px 0;">
8019
                                                                        <div class="bg-purple-studio bg-font-purple-studio margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-purple-studio bg-font-purple-studio"</code> </div>
8020
                                                                </div>
8021
                                                                <div class="tab-pane" id="purple-studio_tab_3_content">
8022
                                                                    <div style="margin: 10px 0 30px 0">
8023
                                                                        <a href="#" class="btn uppercase purple-studio">Button</a> &nbsp; <code>class="btn purple-studio"</code> </div>
8024
                                                                    <div style="margin: 10px 0 30px 0">
8025
                                                                        <a href="#" class="btn sbold uppercase btn-outline purple-studio">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple-studio"</code> </div>
8026
                                                                    <div style="margin: 10px 0 30px 0">
8027
                                                                        <a href="#" class="btn sbold uppercase btn-circle purple-studio">Button</a> &nbsp; <code>class="btn btn-circle purple-studio"</code> </div>
8028
                                                                </div>
8029
                                                                <div class="tab-pane" id="purple-studio_tab_4_content">
8030
                                                                    <div style="margin: 10px 0 30px 0">
8031
                                                                        <h4>Statistic Widgets</h4>
8032
                                                                        <div class="dashboard-stat purple-studio">
8033
                                                                            <div class="visual">
8034
                                                                                <i class="fa fa-bar-chart-o"></i>
8035
                                                                            </div>
8036
                                                                            <div class="details">
8037
                                                                                <div class="number"> 12,5M$ </div>
8038
                                                                                <div class="desc"> Total Profit </div>
8039
                                                                            </div>
8040
                                                                            <a class="more" href="javascript:;"> View more
8041
                                                                                <i class="m-icon-swapright m-icon-white"></i>
8042
                                                                            </a>
8043
                                                                        </div> <code>class="dashboard-stat purple-studio"</code> </div>
8044
                                                                </div>
8045
                                                            </div>
8046
                                                        </div>
8047
                                                    </div>
8048
                                                    <div class="modal-footer">
8049
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
8050
                                                    </div>
8051
                                                </div>
8052
                                            </div>
8053
                                        </div>
8054
                                    </div>
8055
                                </div>
8056
                                <div class="row">
8057
                                    <div class="col-md-2 col-sm-2 col-xs-6">
8058
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-wisteria">
8059
                                            <div class="color-view bg-purple-wisteria bg-font-purple-wisteria bold uppercase"> #9B59B6 </div>
8060
                                            <div class="color-info bg-white c-font-14 sbold"> purple-wisteria </div>
8061
                                        </div>
8062
                                        <div class="modal fade" id="demo_modal_purple-wisteria">
8063
                                            <div class="modal-dialog modal-lg">
8064
                                                <div class="modal-content c-square">
8065
                                                    <div class="modal-header">
8066
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8067
                                                            <span aria-hidden="true">&times;</span>
8068
                                                        </button>
8069
                                                        <h4 class="modal-title bold uppercase font-purple-wisteria">purple-wisteria</h4>
8070
                                                    </div>
8071
                                                    <div class="modal-body">
8072
                                                        <div class="tabbable-line">
8073
                                                            <ul class="nav nav-tabs uppercase bold">
8074
                                                                <li class="active">
8075
                                                                    <a href="#purple-wisteria_tab_1_content" data-toggle="tab">Typography</a>
8076
                                                                </li>
8077
                                                                <li>
8078
                                                                    <a href="#purple-wisteria_tab_2_content" data-toggle="tab">Background & Border</a>
8079
                                                                </li>
8080
                                                                <li>
8081
                                                                    <a href="#purple-wisteria_tab_3_content" data-toggle="tab">Buttons</a>
8082
                                                                </li>
8083
                                                                <li>
8084
                                                                    <a href="#purple-wisteria_tab_4_content" data-toggle="tab">Components</a>
8085
                                                                </li>
8086
                                                            </ul>
8087
                                                            <div class="tab-content">
8088
                                                                <div class="tab-pane active" id="purple-wisteria_tab_1_content">
8089
                                                                    <h4>Text font</h4>
8090
                                                                    <div style="margin: 10px 0 30px 0">
8091
                                                                        <span class="font-purple-wisteria font-lg">Some sample text goes here...</span>
8092
                                                                        <br>
8093
                                                                        <span class="font-purple-wisteria font-lg sbold">Some sample text goes here...</span>
8094
                                                                        <br>
8095
                                                                        <span class="font-purple-wisteria font-lg bold uppercase">Some sample text goes here...</span>
8096
                                                                    </div>
8097
                                                                    <h4>Background matching text font</h4>
8098
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-wisteria">
8099
                                                                        <span class="bg-font-purple-wisteria font-lg">Some sample text goes here...</span>
8100
                                                                        <br>
8101
                                                                        <span class="bg-font-purple-wisteria font-lg sbold">Some sample text goes here...</span>
8102
                                                                        <br>
8103
                                                                        <span class="bg-font-purple-wisteria font-lg bold uppercase">Some sample text goes here...</span>
8104
                                                                    </div>
8105
                                                                    <h4>Icon font</h4>
8106
                                                                    <div style="margin: 10px 0 30px 0">
8107
                                                                        <i class="font-purple-wisteria font-lg icon-user"></i>&nbsp;
8108
                                                                        <i class="font-purple-wisteria font-lg icon-settings"></i>&nbsp;
8109
                                                                        <i class="font-purple-wisteria font-lg icon-calendar"></i>
8110
                                                                        <br>
8111
                                                                        <i class="font-purple-wisteria font-lg fa fa-bar-chart-o"></i>&nbsp;
8112
                                                                        <i class="font-purple-wisteria font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8113
                                                                        <i class="font-purple-wisteria font-lg fa fa-cogs"></i>
8114
                                                                        <br>
8115
                                                                        <i class="font-purple-wisteria font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8116
                                                                        <i class="font-purple-wisteria font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8117
                                                                        <i class="font-purple-wisteria font-lg glyphicon glyphicon-warning-sign"></i>
8118
                                                                        <br> </div>
8119
                                                                    <h4>Background matching icon font</h4>
8120
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-wisteria">
8121
                                                                        <i class="bg-font-purple-wisteria font-lg icon-user"></i>&nbsp;
8122
                                                                        <i class="bg-font-purple-wisteria font-lg icon-settings"></i>&nbsp;
8123
                                                                        <i class="bg-font-purple-wisteria font-lg icon-calendar"></i>
8124
                                                                        <br>
8125
                                                                        <i class="bg-font-purple-wisteria font-lg fa fa-bar-chart-o"></i>&nbsp;
8126
                                                                        <i class="bg-font-purple-wisteria font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8127
                                                                        <i class="bg-font-purple-wisteria font-lg fa fa-cogs"></i>
8128
                                                                        <br>
8129
                                                                        <i class="bg-font-purple-wisteria font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8130
                                                                        <i class="bg-font-purple-wisteria font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8131
                                                                        <i class="bg-font-purple-wisteria font-lg glyphicon glyphicon-warning-sign"></i>
8132
                                                                        <br> </div>
8133
                                                                    <h4>Class usage</h4> <code>class="font-purple-wisteria"</code> </div>
8134
                                                                <div class="tab-pane" id="purple-wisteria_tab_2_content">
8135
                                                                    <div style="margin: 30px 0;">
8136
                                                                        <div class="border-purple-wisteria margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-purple-wisteria"</code> </div>
8137
                                                                    <div style="margin: 30px 0;">
8138
                                                                        <div class="bg-purple-wisteria bg-font-purple-wisteria margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-purple-wisteria bg-font-purple-wisteria"</code> </div>
8139
                                                                </div>
8140
                                                                <div class="tab-pane" id="purple-wisteria_tab_3_content">
8141
                                                                    <div style="margin: 10px 0 30px 0">
8142
                                                                        <a href="#" class="btn uppercase purple-wisteria">Button</a> &nbsp; <code>class="btn purple-wisteria"</code> </div>
8143
                                                                    <div style="margin: 10px 0 30px 0">
8144
                                                                        <a href="#" class="btn sbold uppercase btn-outline purple-wisteria">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple-wisteria"</code> </div>
8145
                                                                    <div style="margin: 10px 0 30px 0">
8146
                                                                        <a href="#" class="btn sbold uppercase btn-circle purple-wisteria">Button</a> &nbsp; <code>class="btn btn-circle purple-wisteria"</code> </div>
8147
                                                                </div>
8148
                                                                <div class="tab-pane" id="purple-wisteria_tab_4_content">
8149
                                                                    <div style="margin: 10px 0 30px 0">
8150
                                                                        <h4>Statistic Widgets</h4>
8151
                                                                        <div class="dashboard-stat purple-wisteria">
8152
                                                                            <div class="visual">
8153
                                                                                <i class="fa fa-bar-chart-o"></i>
8154
                                                                            </div>
8155
                                                                            <div class="details">
8156
                                                                                <div class="number"> 12,5M$ </div>
8157
                                                                                <div class="desc"> Total Profit </div>
8158
                                                                            </div>
8159
                                                                            <a class="more" href="javascript:;"> View more
8160
                                                                                <i class="m-icon-swapright m-icon-white"></i>
8161
                                                                            </a>
8162
                                                                        </div> <code>class="dashboard-stat purple-wisteria"</code> </div>
8163
                                                                </div>
8164
                                                            </div>
8165
                                                        </div>
8166
                                                    </div>
8167
                                                    <div class="modal-footer">
8168
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
8169
                                                    </div>
8170
                                                </div>
8171
                                            </div>
8172
                                        </div>
8173
                                    </div>
8174
                                    <div class="col-md-2 col-sm-2 col-xs-6">
8175
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-seance">
8176
                                            <div class="color-view bg-purple-seance bg-font-purple-seance bold uppercase"> #9A12B3 </div>
8177
                                            <div class="color-info bg-white c-font-14 sbold"> purple-seance </div>
8178
                                        </div>
8179
                                        <div class="modal fade" id="demo_modal_purple-seance">
8180
                                            <div class="modal-dialog modal-lg">
8181
                                                <div class="modal-content c-square">
8182
                                                    <div class="modal-header">
8183
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8184
                                                            <span aria-hidden="true">&times;</span>
8185
                                                        </button>
8186
                                                        <h4 class="modal-title bold uppercase font-purple-seance">purple-seance</h4>
8187
                                                    </div>
8188
                                                    <div class="modal-body">
8189
                                                        <div class="tabbable-line">
8190
                                                            <ul class="nav nav-tabs uppercase bold">
8191
                                                                <li class="active">
8192
                                                                    <a href="#purple-seance_tab_1_content" data-toggle="tab">Typography</a>
8193
                                                                </li>
8194
                                                                <li>
8195
                                                                    <a href="#purple-seance_tab_2_content" data-toggle="tab">Background & Border</a>
8196
                                                                </li>
8197
                                                                <li>
8198
                                                                    <a href="#purple-seance_tab_3_content" data-toggle="tab">Buttons</a>
8199
                                                                </li>
8200
                                                                <li>
8201
                                                                    <a href="#purple-seance_tab_4_content" data-toggle="tab">Components</a>
8202
                                                                </li>
8203
                                                            </ul>
8204
                                                            <div class="tab-content">
8205
                                                                <div class="tab-pane active" id="purple-seance_tab_1_content">
8206
                                                                    <h4>Text font</h4>
8207
                                                                    <div style="margin: 10px 0 30px 0">
8208
                                                                        <span class="font-purple-seance font-lg">Some sample text goes here...</span>
8209
                                                                        <br>
8210
                                                                        <span class="font-purple-seance font-lg sbold">Some sample text goes here...</span>
8211
                                                                        <br>
8212
                                                                        <span class="font-purple-seance font-lg bold uppercase">Some sample text goes here...</span>
8213
                                                                    </div>
8214
                                                                    <h4>Background matching text font</h4>
8215
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-seance">
8216
                                                                        <span class="bg-font-purple-seance font-lg">Some sample text goes here...</span>
8217
                                                                        <br>
8218
                                                                        <span class="bg-font-purple-seance font-lg sbold">Some sample text goes here...</span>
8219
                                                                        <br>
8220
                                                                        <span class="bg-font-purple-seance font-lg bold uppercase">Some sample text goes here...</span>
8221
                                                                    </div>
8222
                                                                    <h4>Icon font</h4>
8223
                                                                    <div style="margin: 10px 0 30px 0">
8224
                                                                        <i class="font-purple-seance font-lg icon-user"></i>&nbsp;
8225
                                                                        <i class="font-purple-seance font-lg icon-settings"></i>&nbsp;
8226
                                                                        <i class="font-purple-seance font-lg icon-calendar"></i>
8227
                                                                        <br>
8228
                                                                        <i class="font-purple-seance font-lg fa fa-bar-chart-o"></i>&nbsp;
8229
                                                                        <i class="font-purple-seance font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8230
                                                                        <i class="font-purple-seance font-lg fa fa-cogs"></i>
8231
                                                                        <br>
8232
                                                                        <i class="font-purple-seance font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8233
                                                                        <i class="font-purple-seance font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8234
                                                                        <i class="font-purple-seance font-lg glyphicon glyphicon-warning-sign"></i>
8235
                                                                        <br> </div>
8236
                                                                    <h4>Background matching icon font</h4>
8237
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-seance">
8238
                                                                        <i class="bg-font-purple-seance font-lg icon-user"></i>&nbsp;
8239
                                                                        <i class="bg-font-purple-seance font-lg icon-settings"></i>&nbsp;
8240
                                                                        <i class="bg-font-purple-seance font-lg icon-calendar"></i>
8241
                                                                        <br>
8242
                                                                        <i class="bg-font-purple-seance font-lg fa fa-bar-chart-o"></i>&nbsp;
8243
                                                                        <i class="bg-font-purple-seance font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8244
                                                                        <i class="bg-font-purple-seance font-lg fa fa-cogs"></i>
8245
                                                                        <br>
8246
                                                                        <i class="bg-font-purple-seance font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8247
                                                                        <i class="bg-font-purple-seance font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8248
                                                                        <i class="bg-font-purple-seance font-lg glyphicon glyphicon-warning-sign"></i>
8249
                                                                        <br> </div>
8250
                                                                    <h4>Class usage</h4> <code>class="font-purple-seance"</code> </div>
8251
                                                                <div class="tab-pane" id="purple-seance_tab_2_content">
8252
                                                                    <div style="margin: 30px 0;">
8253
                                                                        <div class="border-purple-seance margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-purple-seance"</code> </div>
8254
                                                                    <div style="margin: 30px 0;">
8255
                                                                        <div class="bg-purple-seance bg-font-purple-seance margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-purple-seance bg-font-purple-seance"</code> </div>
8256
                                                                </div>
8257
                                                                <div class="tab-pane" id="purple-seance_tab_3_content">
8258
                                                                    <div style="margin: 10px 0 30px 0">
8259
                                                                        <a href="#" class="btn uppercase purple-seance">Button</a> &nbsp; <code>class="btn purple-seance"</code> </div>
8260
                                                                    <div style="margin: 10px 0 30px 0">
8261
                                                                        <a href="#" class="btn sbold uppercase btn-outline purple-seance">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple-seance"</code> </div>
8262
                                                                    <div style="margin: 10px 0 30px 0">
8263
                                                                        <a href="#" class="btn sbold uppercase btn-circle purple-seance">Button</a> &nbsp; <code>class="btn btn-circle purple-seance"</code> </div>
8264
                                                                </div>
8265
                                                                <div class="tab-pane" id="purple-seance_tab_4_content">
8266
                                                                    <div style="margin: 10px 0 30px 0">
8267
                                                                        <h4>Statistic Widgets</h4>
8268
                                                                        <div class="dashboard-stat purple-seance">
8269
                                                                            <div class="visual">
8270
                                                                                <i class="fa fa-bar-chart-o"></i>
8271
                                                                            </div>
8272
                                                                            <div class="details">
8273
                                                                                <div class="number"> 12,5M$ </div>
8274
                                                                                <div class="desc"> Total Profit </div>
8275
                                                                            </div>
8276
                                                                            <a class="more" href="javascript:;"> View more
8277
                                                                                <i class="m-icon-swapright m-icon-white"></i>
8278
                                                                            </a>
8279
                                                                        </div> <code>class="dashboard-stat purple-seance"</code> </div>
8280
                                                                </div>
8281
                                                            </div>
8282
                                                        </div>
8283
                                                    </div>
8284
                                                    <div class="modal-footer">
8285
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
8286
                                                    </div>
8287
                                                </div>
8288
                                            </div>
8289
                                        </div>
8290
                                    </div>
8291
                                    <div class="col-md-2 col-sm-2 col-xs-6">
8292
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-intense">
8293
                                            <div class="color-view bg-purple-intense bg-font-purple-intense bold uppercase"> #8775a7 </div>
8294
                                            <div class="color-info bg-white c-font-14 sbold"> purple-intense </div>
8295
                                        </div>
8296
                                        <div class="modal fade" id="demo_modal_purple-intense">
8297
                                            <div class="modal-dialog modal-lg">
8298
                                                <div class="modal-content c-square">
8299
                                                    <div class="modal-header">
8300
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8301
                                                            <span aria-hidden="true">&times;</span>
8302
                                                        </button>
8303
                                                        <h4 class="modal-title bold uppercase font-purple-intense">purple-intense</h4>
8304
                                                    </div>
8305
                                                    <div class="modal-body">
8306
                                                        <div class="tabbable-line">
8307
                                                            <ul class="nav nav-tabs uppercase bold">
8308
                                                                <li class="active">
8309
                                                                    <a href="#purple-intense_tab_1_content" data-toggle="tab">Typography</a>
8310
                                                                </li>
8311
                                                                <li>
8312
                                                                    <a href="#purple-intense_tab_2_content" data-toggle="tab">Background & Border</a>
8313
                                                                </li>
8314
                                                                <li>
8315
                                                                    <a href="#purple-intense_tab_3_content" data-toggle="tab">Buttons</a>
8316
                                                                </li>
8317
                                                                <li>
8318
                                                                    <a href="#purple-intense_tab_4_content" data-toggle="tab">Components</a>
8319
                                                                </li>
8320
                                                            </ul>
8321
                                                            <div class="tab-content">
8322
                                                                <div class="tab-pane active" id="purple-intense_tab_1_content">
8323
                                                                    <h4>Text font</h4>
8324
                                                                    <div style="margin: 10px 0 30px 0">
8325
                                                                        <span class="font-purple-intense font-lg">Some sample text goes here...</span>
8326
                                                                        <br>
8327
                                                                        <span class="font-purple-intense font-lg sbold">Some sample text goes here...</span>
8328
                                                                        <br>
8329
                                                                        <span class="font-purple-intense font-lg bold uppercase">Some sample text goes here...</span>
8330
                                                                    </div>
8331
                                                                    <h4>Background matching text font</h4>
8332
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-intense">
8333
                                                                        <span class="bg-font-purple-intense font-lg">Some sample text goes here...</span>
8334
                                                                        <br>
8335
                                                                        <span class="bg-font-purple-intense font-lg sbold">Some sample text goes here...</span>
8336
                                                                        <br>
8337
                                                                        <span class="bg-font-purple-intense font-lg bold uppercase">Some sample text goes here...</span>
8338
                                                                    </div>
8339
                                                                    <h4>Icon font</h4>
8340
                                                                    <div style="margin: 10px 0 30px 0">
8341
                                                                        <i class="font-purple-intense font-lg icon-user"></i>&nbsp;
8342
                                                                        <i class="font-purple-intense font-lg icon-settings"></i>&nbsp;
8343
                                                                        <i class="font-purple-intense font-lg icon-calendar"></i>
8344
                                                                        <br>
8345
                                                                        <i class="font-purple-intense font-lg fa fa-bar-chart-o"></i>&nbsp;
8346
                                                                        <i class="font-purple-intense font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8347
                                                                        <i class="font-purple-intense font-lg fa fa-cogs"></i>
8348
                                                                        <br>
8349
                                                                        <i class="font-purple-intense font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8350
                                                                        <i class="font-purple-intense font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8351
                                                                        <i class="font-purple-intense font-lg glyphicon glyphicon-warning-sign"></i>
8352
                                                                        <br> </div>
8353
                                                                    <h4>Background matching icon font</h4>
8354
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-intense">
8355
                                                                        <i class="bg-font-purple-intense font-lg icon-user"></i>&nbsp;
8356
                                                                        <i class="bg-font-purple-intense font-lg icon-settings"></i>&nbsp;
8357
                                                                        <i class="bg-font-purple-intense font-lg icon-calendar"></i>
8358
                                                                        <br>
8359
                                                                        <i class="bg-font-purple-intense font-lg fa fa-bar-chart-o"></i>&nbsp;
8360
                                                                        <i class="bg-font-purple-intense font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8361
                                                                        <i class="bg-font-purple-intense font-lg fa fa-cogs"></i>
8362
                                                                        <br>
8363
                                                                        <i class="bg-font-purple-intense font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8364
                                                                        <i class="bg-font-purple-intense font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8365
                                                                        <i class="bg-font-purple-intense font-lg glyphicon glyphicon-warning-sign"></i>
8366
                                                                        <br> </div>
8367
                                                                    <h4>Class usage</h4> <code>class="font-purple-intense"</code> </div>
8368
                                                                <div class="tab-pane" id="purple-intense_tab_2_content">
8369
                                                                    <div style="margin: 30px 0;">
8370
                                                                        <div class="border-purple-intense margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-purple-intense"</code> </div>
8371
                                                                    <div style="margin: 30px 0;">
8372
                                                                        <div class="bg-purple-intense bg-font-purple-intense margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-purple-intense bg-font-purple-intense"</code> </div>
8373
                                                                </div>
8374
                                                                <div class="tab-pane" id="purple-intense_tab_3_content">
8375
                                                                    <div style="margin: 10px 0 30px 0">
8376
                                                                        <a href="#" class="btn uppercase purple-intense">Button</a> &nbsp; <code>class="btn purple-intense"</code> </div>
8377
                                                                    <div style="margin: 10px 0 30px 0">
8378
                                                                        <a href="#" class="btn sbold uppercase btn-outline purple-intense">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple-intense"</code> </div>
8379
                                                                    <div style="margin: 10px 0 30px 0">
8380
                                                                        <a href="#" class="btn sbold uppercase btn-circle purple-intense">Button</a> &nbsp; <code>class="btn btn-circle purple-intense"</code> </div>
8381
                                                                </div>
8382
                                                                <div class="tab-pane" id="purple-intense_tab_4_content">
8383
                                                                    <div style="margin: 10px 0 30px 0">
8384
                                                                        <h4>Statistic Widgets</h4>
8385
                                                                        <div class="dashboard-stat purple-intense">
8386
                                                                            <div class="visual">
8387
                                                                                <i class="fa fa-bar-chart-o"></i>
8388
                                                                            </div>
8389
                                                                            <div class="details">
8390
                                                                                <div class="number"> 12,5M$ </div>
8391
                                                                                <div class="desc"> Total Profit </div>
8392
                                                                            </div>
8393
                                                                            <a class="more" href="javascript:;"> View more
8394
                                                                                <i class="m-icon-swapright m-icon-white"></i>
8395
                                                                            </a>
8396
                                                                        </div> <code>class="dashboard-stat purple-intense"</code> </div>
8397
                                                                </div>
8398
                                                            </div>
8399
                                                        </div>
8400
                                                    </div>
8401
                                                    <div class="modal-footer">
8402
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
8403
                                                    </div>
8404
                                                </div>
8405
                                            </div>
8406
                                        </div>
8407
                                    </div>
8408
                                    <div class="col-md-2 col-sm-2 col-xs-6">
8409
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-sharp">
8410
                                            <div class="color-view bg-purple-sharp bg-font-purple-sharp bold uppercase"> #796799 </div>
8411
                                            <div class="color-info bg-white c-font-14 sbold"> purple-sharp </div>
8412
                                        </div>
8413
                                        <div class="modal fade" id="demo_modal_purple-sharp">
8414
                                            <div class="modal-dialog modal-lg">
8415
                                                <div class="modal-content c-square">
8416
                                                    <div class="modal-header">
8417
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8418
                                                            <span aria-hidden="true">&times;</span>
8419
                                                        </button>
8420
                                                        <h4 class="modal-title bold uppercase font-purple-sharp">purple-sharp</h4>
8421
                                                    </div>
8422
                                                    <div class="modal-body">
8423
                                                        <div class="tabbable-line">
8424
                                                            <ul class="nav nav-tabs uppercase bold">
8425
                                                                <li class="active">
8426
                                                                    <a href="#purple-sharp_tab_1_content" data-toggle="tab">Typography</a>
8427
                                                                </li>
8428
                                                                <li>
8429
                                                                    <a href="#purple-sharp_tab_2_content" data-toggle="tab">Background & Border</a>
8430
                                                                </li>
8431
                                                                <li>
8432
                                                                    <a href="#purple-sharp_tab_3_content" data-toggle="tab">Buttons</a>
8433
                                                                </li>
8434
                                                                <li>
8435
                                                                    <a href="#purple-sharp_tab_4_content" data-toggle="tab">Components</a>
8436
                                                                </li>
8437
                                                            </ul>
8438
                                                            <div class="tab-content">
8439
                                                                <div class="tab-pane active" id="purple-sharp_tab_1_content">
8440
                                                                    <h4>Text font</h4>
8441
                                                                    <div style="margin: 10px 0 30px 0">
8442
                                                                        <span class="font-purple-sharp font-lg">Some sample text goes here...</span>
8443
                                                                        <br>
8444
                                                                        <span class="font-purple-sharp font-lg sbold">Some sample text goes here...</span>
8445
                                                                        <br>
8446
                                                                        <span class="font-purple-sharp font-lg bold uppercase">Some sample text goes here...</span>
8447
                                                                    </div>
8448
                                                                    <h4>Background matching text font</h4>
8449
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-sharp">
8450
                                                                        <span class="bg-font-purple-sharp font-lg">Some sample text goes here...</span>
8451
                                                                        <br>
8452
                                                                        <span class="bg-font-purple-sharp font-lg sbold">Some sample text goes here...</span>
8453
                                                                        <br>
8454
                                                                        <span class="bg-font-purple-sharp font-lg bold uppercase">Some sample text goes here...</span>
8455
                                                                    </div>
8456
                                                                    <h4>Icon font</h4>
8457
                                                                    <div style="margin: 10px 0 30px 0">
8458
                                                                        <i class="font-purple-sharp font-lg icon-user"></i>&nbsp;
8459
                                                                        <i class="font-purple-sharp font-lg icon-settings"></i>&nbsp;
8460
                                                                        <i class="font-purple-sharp font-lg icon-calendar"></i>
8461
                                                                        <br>
8462
                                                                        <i class="font-purple-sharp font-lg fa fa-bar-chart-o"></i>&nbsp;
8463
                                                                        <i class="font-purple-sharp font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8464
                                                                        <i class="font-purple-sharp font-lg fa fa-cogs"></i>
8465
                                                                        <br>
8466
                                                                        <i class="font-purple-sharp font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8467
                                                                        <i class="font-purple-sharp font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8468
                                                                        <i class="font-purple-sharp font-lg glyphicon glyphicon-warning-sign"></i>
8469
                                                                        <br> </div>
8470
                                                                    <h4>Background matching icon font</h4>
8471
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-sharp">
8472
                                                                        <i class="bg-font-purple-sharp font-lg icon-user"></i>&nbsp;
8473
                                                                        <i class="bg-font-purple-sharp font-lg icon-settings"></i>&nbsp;
8474
                                                                        <i class="bg-font-purple-sharp font-lg icon-calendar"></i>
8475
                                                                        <br>
8476
                                                                        <i class="bg-font-purple-sharp font-lg fa fa-bar-chart-o"></i>&nbsp;
8477
                                                                        <i class="bg-font-purple-sharp font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8478
                                                                        <i class="bg-font-purple-sharp font-lg fa fa-cogs"></i>
8479
                                                                        <br>
8480
                                                                        <i class="bg-font-purple-sharp font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8481
                                                                        <i class="bg-font-purple-sharp font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8482
                                                                        <i class="bg-font-purple-sharp font-lg glyphicon glyphicon-warning-sign"></i>
8483
                                                                        <br> </div>
8484
                                                                    <h4>Class usage</h4> <code>class="font-purple-sharp"</code> </div>
8485
                                                                <div class="tab-pane" id="purple-sharp_tab_2_content">
8486
                                                                    <div style="margin: 30px 0;">
8487
                                                                        <div class="border-purple-sharp margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-purple-sharp"</code> </div>
8488
                                                                    <div style="margin: 30px 0;">
8489
                                                                        <div class="bg-purple-sharp bg-font-purple-sharp margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-purple-sharp bg-font-purple-sharp"</code> </div>
8490
                                                                </div>
8491
                                                                <div class="tab-pane" id="purple-sharp_tab_3_content">
8492
                                                                    <div style="margin: 10px 0 30px 0">
8493
                                                                        <a href="#" class="btn uppercase purple-sharp">Button</a> &nbsp; <code>class="btn purple-sharp"</code> </div>
8494
                                                                    <div style="margin: 10px 0 30px 0">
8495
                                                                        <a href="#" class="btn sbold uppercase btn-outline purple-sharp">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple-sharp"</code> </div>
8496
                                                                    <div style="margin: 10px 0 30px 0">
8497
                                                                        <a href="#" class="btn sbold uppercase btn-circle purple-sharp">Button</a> &nbsp; <code>class="btn btn-circle purple-sharp"</code> </div>
8498
                                                                </div>
8499
                                                                <div class="tab-pane" id="purple-sharp_tab_4_content">
8500
                                                                    <div style="margin: 10px 0 30px 0">
8501
                                                                        <h4>Statistic Widgets</h4>
8502
                                                                        <div class="dashboard-stat purple-sharp">
8503
                                                                            <div class="visual">
8504
                                                                                <i class="fa fa-bar-chart-o"></i>
8505
                                                                            </div>
8506
                                                                            <div class="details">
8507
                                                                                <div class="number"> 12,5M$ </div>
8508
                                                                                <div class="desc"> Total Profit </div>
8509
                                                                            </div>
8510
                                                                            <a class="more" href="javascript:;"> View more
8511
                                                                                <i class="m-icon-swapright m-icon-white"></i>
8512
                                                                            </a>
8513
                                                                        </div> <code>class="dashboard-stat purple-sharp"</code> </div>
8514
                                                                </div>
8515
                                                            </div>
8516
                                                        </div>
8517
                                                    </div>
8518
                                                    <div class="modal-footer">
8519
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
8520
                                                    </div>
8521
                                                </div>
8522
                                            </div>
8523
                                        </div>
8524
                                    </div>
8525
                                    <div class="col-md-2 col-sm-2 col-xs-6">
8526
                                        <div class="color-demo tooltips" data-original-title="Click to view demos for this color" data-toggle="modal" data-target="#demo_modal_purple-soft">
8527
                                            <div class="color-view bg-purple-soft bg-font-purple-soft bold uppercase"> #8877a9 </div>
8528
                                            <div class="color-info bg-white c-font-14 sbold"> purple-soft </div>
8529
                                        </div>
8530
                                        <div class="modal fade" id="demo_modal_purple-soft">
8531
                                            <div class="modal-dialog modal-lg">
8532
                                                <div class="modal-content c-square">
8533
                                                    <div class="modal-header">
8534
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
8535
                                                            <span aria-hidden="true">&times;</span>
8536
                                                        </button>
8537
                                                        <h4 class="modal-title bold uppercase font-purple-soft">purple-soft</h4>
8538
                                                    </div>
8539
                                                    <div class="modal-body">
8540
                                                        <div class="tabbable-line">
8541
                                                            <ul class="nav nav-tabs uppercase bold">
8542
                                                                <li class="active">
8543
                                                                    <a href="#purple-soft_tab_1_content" data-toggle="tab">Typography</a>
8544
                                                                </li>
8545
                                                                <li>
8546
                                                                    <a href="#purple-soft_tab_2_content" data-toggle="tab">Background & Border</a>
8547
                                                                </li>
8548
                                                                <li>
8549
                                                                    <a href="#purple-soft_tab_3_content" data-toggle="tab">Buttons</a>
8550
                                                                </li>
8551
                                                                <li>
8552
                                                                    <a href="#purple-soft_tab_4_content" data-toggle="tab">Components</a>
8553
                                                                </li>
8554
                                                            </ul>
8555
                                                            <div class="tab-content">
8556
                                                                <div class="tab-pane active" id="purple-soft_tab_1_content">
8557
                                                                    <h4>Text font</h4>
8558
                                                                    <div style="margin: 10px 0 30px 0">
8559
                                                                        <span class="font-purple-soft font-lg">Some sample text goes here...</span>
8560
                                                                        <br>
8561
                                                                        <span class="font-purple-soft font-lg sbold">Some sample text goes here...</span>
8562
                                                                        <br>
8563
                                                                        <span class="font-purple-soft font-lg bold uppercase">Some sample text goes here...</span>
8564
                                                                    </div>
8565
                                                                    <h4>Background matching text font</h4>
8566
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-soft">
8567
                                                                        <span class="bg-font-purple-soft font-lg">Some sample text goes here...</span>
8568
                                                                        <br>
8569
                                                                        <span class="bg-font-purple-soft font-lg sbold">Some sample text goes here...</span>
8570
                                                                        <br>
8571
                                                                        <span class="bg-font-purple-soft font-lg bold uppercase">Some sample text goes here...</span>
8572
                                                                    </div>
8573
                                                                    <h4>Icon font</h4>
8574
                                                                    <div style="margin: 10px 0 30px 0">
8575
                                                                        <i class="font-purple-soft font-lg icon-user"></i>&nbsp;
8576
                                                                        <i class="font-purple-soft font-lg icon-settings"></i>&nbsp;
8577
                                                                        <i class="font-purple-soft font-lg icon-calendar"></i>
8578
                                                                        <br>
8579
                                                                        <i class="font-purple-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
8580
                                                                        <i class="font-purple-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8581
                                                                        <i class="font-purple-soft font-lg fa fa-cogs"></i>
8582
                                                                        <br>
8583
                                                                        <i class="font-purple-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8584
                                                                        <i class="font-purple-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8585
                                                                        <i class="font-purple-soft font-lg glyphicon glyphicon-warning-sign"></i>
8586
                                                                        <br> </div>
8587
                                                                    <h4>Background matching icon font</h4>
8588
                                                                    <div style="margin: 10px 0 30px 0; padding: 10px" class="bg-purple-soft">
8589
                                                                        <i class="bg-font-purple-soft font-lg icon-user"></i>&nbsp;
8590
                                                                        <i class="bg-font-purple-soft font-lg icon-settings"></i>&nbsp;
8591
                                                                        <i class="bg-font-purple-soft font-lg icon-calendar"></i>
8592
                                                                        <br>
8593
                                                                        <i class="bg-font-purple-soft font-lg fa fa-bar-chart-o"></i>&nbsp;
8594
                                                                        <i class="bg-font-purple-soft font-lg fa fa-code-fork icon-settings"></i>&nbsp;
8595
                                                                        <i class="bg-font-purple-soft font-lg fa fa-cogs"></i>
8596
                                                                        <br>
8597
                                                                        <i class="bg-font-purple-soft font-lg glyphicon glyphicon-star-empty"></i>&nbsp;
8598
                                                                        <i class="bg-font-purple-soft font-lg glyphicon glyphicon-leaf"></i>&nbsp;
8599
                                                                        <i class="bg-font-purple-soft font-lg glyphicon glyphicon-warning-sign"></i>
8600
                                                                        <br> </div>
8601
                                                                    <h4>Class usage</h4> <code>class="font-purple-soft"</code> </div>
8602
                                                                <div class="tab-pane" id="purple-soft_tab_2_content">
8603
                                                                    <div style="margin: 30px 0;">
8604
                                                                        <div class="border-purple-soft margin-bottom-10" style="padding: 10px; border: 2px solid #fff;"> Box with custom border color </div> <code>class="border-purple-soft"</code> </div>
8605
                                                                    <div style="margin: 30px 0;">
8606
                                                                        <div class="bg-purple-soft bg-font-purple-soft margin-bottom-10" style="padding: 10px; "> Box with custom background color </div> <code>class="bg-purple-soft bg-font-purple-soft"</code> </div>
8607
                                                                </div>
8608
                                                                <div class="tab-pane" id="purple-soft_tab_3_content">
8609
                                                                    <div style="margin: 10px 0 30px 0">
8610
                                                                        <a href="#" class="btn uppercase purple-soft">Button</a> &nbsp; <code>class="btn purple-soft"</code> </div>
8611
                                                                    <div style="margin: 10px 0 30px 0">
8612
                                                                        <a href="#" class="btn sbold uppercase btn-outline purple-soft">Button</a> &nbsp; <code>class="c-btn-border-1x c-btn-purple-soft"</code> </div>
8613
                                                                    <div style="margin: 10px 0 30px 0">
8614
                                                                        <a href="#" class="btn sbold uppercase btn-circle purple-soft">Button</a> &nbsp; <code>class="btn btn-circle purple-soft"</code> </div>
8615
                                                                </div>
8616
                                                                <div class="tab-pane" id="purple-soft_tab_4_content">
8617
                                                                    <div style="margin: 10px 0 30px 0">
8618
                                                                        <h4>Statistic Widgets</h4>
8619
                                                                        <div class="dashboard-stat purple-soft">
8620
                                                                            <div class="visual">
8621
                                                                                <i class="fa fa-bar-chart-o"></i>
8622
                                                                            </div>
8623
                                                                            <div class="details">
8624
                                                                                <div class="number"> 12,5M$ </div>
8625
                                                                                <div class="desc"> Total Profit </div>
8626
                                                                            </div>
8627
                                                                            <a class="more" href="javascript:;"> View more
8628
                                                                                <i class="m-icon-swapright m-icon-white"></i>
8629
                                                                            </a>
8630
                                                                        </div> <code>class="dashboard-stat purple-soft"</code> </div>
8631
                                                                </div>
8632
                                                            </div>
8633
                                                        </div>
8634
                                                    </div>
8635
                                                    <div class="modal-footer">
8636
                                                        <button type="button" class="btn btn-outline dark sbold uppercase" data-dismiss="modal">Close</button>
8637
                                                    </div>
8638
                                                </div>
8639
                                            </div>
8640
                                        </div>
8641
                                    </div>
8642
                                </div>
8643
                            </div>
8644
                        </div>
8645
                    </div>
8646
                    <!-- END CONTENT BODY -->
8647
                </div>
8648
                <!-- END CONTENT -->
8649
                <!-- BEGIN QUICK SIDEBAR -->
8650
                <a href="javascript:;" class="page-quick-sidebar-toggler">
8651
                    <i class="icon-login"></i>
8652
                </a>
8653
                <div class="page-quick-sidebar-wrapper" data-close-on-body-click="false">
8654
                    <div class="page-quick-sidebar">
8655
                        <ul class="nav nav-tabs">
8656
                            <li class="active">
8657
                                <a href="javascript:;" data-target="#quick_sidebar_tab_1" data-toggle="tab"> Users
8658
                                    <span class="badge badge-danger">2</span>
8659
                                </a>
8660
                            </li>
8661
                            <li>
8662
                                <a href="javascript:;" data-target="#quick_sidebar_tab_2" data-toggle="tab"> Alerts
8663
                                    <span class="badge badge-success">7</span>
8664
                                </a>
8665
                            </li>
8666
                            <li class="dropdown">
8667
                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> More
8668
                                    <i class="fa fa-angle-down"></i>
8669
                                </a>
8670
                                <ul class="dropdown-menu pull-right">
8671
                                    <li>
8672
                                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
8673
                                            <i class="icon-bell"></i> Alerts </a>
8674
                                    </li>
8675
                                    <li>
8676
                                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
8677
                                            <i class="icon-info"></i> Notifications </a>
8678
                                    </li>
8679
                                    <li>
8680
                                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
8681
                                            <i class="icon-speech"></i> Activities </a>
8682
                                    </li>
8683
                                    <li class="divider"></li>
8684
                                    <li>
8685
                                        <a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
8686
                                            <i class="icon-settings"></i> Settings </a>
8687
                                    </li>
8688
                                </ul>
8689
                            </li>
8690
                        </ul>
8691
                        <div class="tab-content">
8692
                            <div class="tab-pane active page-quick-sidebar-chat" id="quick_sidebar_tab_1">
8693
                                <div class="page-quick-sidebar-chat-users" data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list">
8694
                                    <h3 class="list-heading">Staff</h3>
8695
                                    <ul class="media-list list-items">
8696
                                        <li class="media">
8697
                                            <div class="media-status">
8698
                                                <span class="badge badge-success">8</span>
8699
                                            </div>
8700
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar3.jpg" alt="...">
8701
                                            <div class="media-body">
8702
                                                <h4 class="media-heading">Bob Nilson</h4>
8703
                                                <div class="media-heading-sub"> Project Manager </div>
8704
                                            </div>
8705
                                        </li>
8706
                                        <li class="media">
8707
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar1.jpg" alt="...">
8708
                                            <div class="media-body">
8709
                                                <h4 class="media-heading">Nick Larson</h4>
8710
                                                <div class="media-heading-sub"> Art Director </div>
8711
                                            </div>
8712
                                        </li>
8713
                                        <li class="media">
8714
                                            <div class="media-status">
8715
                                                <span class="badge badge-danger">3</span>
8716
                                            </div>
8717
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar4.jpg" alt="...">
8718
                                            <div class="media-body">
8719
                                                <h4 class="media-heading">Deon Hubert</h4>
8720
                                                <div class="media-heading-sub"> CTO </div>
8721
                                            </div>
8722
                                        </li>
8723
                                        <li class="media">
8724
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar2.jpg" alt="...">
8725
                                            <div class="media-body">
8726
                                                <h4 class="media-heading">Ella Wong</h4>
8727
                                                <div class="media-heading-sub"> CEO </div>
8728
                                            </div>
8729
                                        </li>
8730
                                    </ul>
8731
                                    <h3 class="list-heading">Customers</h3>
8732
                                    <ul class="media-list list-items">
8733
                                        <li class="media">
8734
                                            <div class="media-status">
8735
                                                <span class="badge badge-warning">2</span>
8736
                                            </div>
8737
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar6.jpg" alt="...">
8738
                                            <div class="media-body">
8739
                                                <h4 class="media-heading">Lara Kunis</h4>
8740
                                                <div class="media-heading-sub"> CEO, Loop Inc </div>
8741
                                                <div class="media-heading-small"> Last seen 03:10 AM </div>
8742
                                            </div>
8743
                                        </li>
8744
                                        <li class="media">
8745
                                            <div class="media-status">
8746
                                                <span class="label label-sm label-success">new</span>
8747
                                            </div>
8748
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar7.jpg" alt="...">
8749
                                            <div class="media-body">
8750
                                                <h4 class="media-heading">Ernie Kyllonen</h4>
8751
                                                <div class="media-heading-sub"> Project Manager,
8752
                                                    <br> SmartBizz PTL </div>
8753
                                            </div>
8754
                                        </li>
8755
                                        <li class="media">
8756
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar8.jpg" alt="...">
8757
                                            <div class="media-body">
8758
                                                <h4 class="media-heading">Lisa Stone</h4>
8759
                                                <div class="media-heading-sub"> CTO, Keort Inc </div>
8760
                                                <div class="media-heading-small"> Last seen 13:10 PM </div>
8761
                                            </div>
8762
                                        </li>
8763
                                        <li class="media">
8764
                                            <div class="media-status">
8765
                                                <span class="badge badge-success">7</span>
8766
                                            </div>
8767
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar9.jpg" alt="...">
8768
                                            <div class="media-body">
8769
                                                <h4 class="media-heading">Deon Portalatin</h4>
8770
                                                <div class="media-heading-sub"> CFO, H&D LTD </div>
8771
                                            </div>
8772
                                        </li>
8773
                                        <li class="media">
8774
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar10.jpg" alt="...">
8775
                                            <div class="media-body">
8776
                                                <h4 class="media-heading">Irina Savikova</h4>
8777
                                                <div class="media-heading-sub"> CEO, Tizda Motors Inc </div>
8778
                                            </div>
8779
                                        </li>
8780
                                        <li class="media">
8781
                                            <div class="media-status">
8782
                                                <span class="badge badge-danger">4</span>
8783
                                            </div>
8784
                                            <img class="media-object" src="../assets/layouts/layout/img/avatar11.jpg" alt="...">
8785
                                            <div class="media-body">
8786
                                                <h4 class="media-heading">Maria Gomez</h4>
8787
                                                <div class="media-heading-sub"> Manager, Infomatic Inc </div>
8788
                                                <div class="media-heading-small"> Last seen 03:10 AM </div>
8789
                                            </div>
8790
                                        </li>
8791
                                    </ul>
8792
                                </div>
8793
                                <div class="page-quick-sidebar-item">
8794
                                    <div class="page-quick-sidebar-chat-user">
8795
                                        <div class="page-quick-sidebar-nav">
8796
                                            <a href="javascript:;" class="page-quick-sidebar-back-to-list">
8797
                                                <i class="icon-arrow-left"></i>Back</a>
8798
                                        </div>
8799
                                        <div class="page-quick-sidebar-chat-user-messages">
8800
                                            <div class="post out">
8801
                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
8802
                                                <div class="message">
8803
                                                    <span class="arrow"></span>
8804
                                                    <a href="javascript:;" class="name">Bob Nilson</a>
8805
                                                    <span class="datetime">20:15</span>
8806
                                                    <span class="body"> When could you send me the report ? </span>
8807
                                                </div>
8808
                                            </div>
8809
                                            <div class="post in">
8810
                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
8811
                                                <div class="message">
8812
                                                    <span class="arrow"></span>
8813
                                                    <a href="javascript:;" class="name">Ella Wong</a>
8814
                                                    <span class="datetime">20:15</span>
8815
                                                    <span class="body"> Its almost done. I will be sending it shortly </span>
8816
                                                </div>
8817
                                            </div>
8818
                                            <div class="post out">
8819
                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
8820
                                                <div class="message">
8821
                                                    <span class="arrow"></span>
8822
                                                    <a href="javascript:;" class="name">Bob Nilson</a>
8823
                                                    <span class="datetime">20:15</span>
8824
                                                    <span class="body"> Alright. Thanks! :) </span>
8825
                                                </div>
8826
                                            </div>
8827
                                            <div class="post in">
8828
                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
8829
                                                <div class="message">
8830
                                                    <span class="arrow"></span>
8831
                                                    <a href="javascript:;" class="name">Ella Wong</a>
8832
                                                    <span class="datetime">20:16</span>
8833
                                                    <span class="body"> You are most welcome. Sorry for the delay. </span>
8834
                                                </div>
8835
                                            </div>
8836
                                            <div class="post out">
8837
                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
8838
                                                <div class="message">
8839
                                                    <span class="arrow"></span>
8840
                                                    <a href="javascript:;" class="name">Bob Nilson</a>
8841
                                                    <span class="datetime">20:17</span>
8842
                                                    <span class="body"> No probs. Just take your time :) </span>
8843
                                                </div>
8844
                                            </div>
8845
                                            <div class="post in">
8846
                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
8847
                                                <div class="message">
8848
                                                    <span class="arrow"></span>
8849
                                                    <a href="javascript:;" class="name">Ella Wong</a>
8850
                                                    <span class="datetime">20:40</span>
8851
                                                    <span class="body"> Alright. I just emailed it to you. </span>
8852
                                                </div>
8853
                                            </div>
8854
                                            <div class="post out">
8855
                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
8856
                                                <div class="message">
8857
                                                    <span class="arrow"></span>
8858
                                                    <a href="javascript:;" class="name">Bob Nilson</a>
8859
                                                    <span class="datetime">20:17</span>
8860
                                                    <span class="body"> Great! Thanks. Will check it right away. </span>
8861
                                                </div>
8862
                                            </div>
8863
                                            <div class="post in">
8864
                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
8865
                                                <div class="message">
8866
                                                    <span class="arrow"></span>
8867
                                                    <a href="javascript:;" class="name">Ella Wong</a>
8868
                                                    <span class="datetime">20:40</span>
8869
                                                    <span class="body"> Please let me know if you have any comment. </span>
8870
                                                </div>
8871
                                            </div>
8872
                                            <div class="post out">
8873
                                                <img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
8874
                                                <div class="message">
8875
                                                    <span class="arrow"></span>
8876
                                                    <a href="javascript:;" class="name">Bob Nilson</a>
8877
                                                    <span class="datetime">20:17</span>
8878
                                                    <span class="body"> Sure. I will check and buzz you if anything needs to be corrected. </span>
8879
                                                </div>
8880
                                            </div>
8881
                                        </div>
8882
                                        <div class="page-quick-sidebar-chat-user-form">
8883
                                            <div class="input-group">
8884
                                                <input type="text" class="form-control" placeholder="Type a message here...">
8885
                                                <div class="input-group-btn">
8886
                                                    <button type="button" class="btn green">
8887
                                                        <i class="icon-paper-clip"></i>
8888
                                                    </button>
8889
                                                </div>
8890
                                            </div>
8891
                                        </div>
8892
                                    </div>
8893
                                </div>
8894
                            </div>
8895
                            <div class="tab-pane page-quick-sidebar-alerts" id="quick_sidebar_tab_2">
8896
                                <div class="page-quick-sidebar-alerts-list">
8897
                                    <h3 class="list-heading">General</h3>
8898
                                    <ul class="feeds list-items">
8899
                                        <li>
8900
                                            <div class="col1">
8901
                                                <div class="cont">
8902
                                                    <div class="cont-col1">
8903
                                                        <div class="label label-sm label-info">
8904
                                                            <i class="fa fa-check"></i>
8905
                                                        </div>
8906
                                                    </div>
8907
                                                    <div class="cont-col2">
8908
                                                        <div class="desc"> You have 4 pending tasks.
8909
                                                            <span class="label label-sm label-warning "> Take action
8910
                                                                <i class="fa fa-share"></i>
8911
                                                            </span>
8912
                                                        </div>
8913
                                                    </div>
8914
                                                </div>
8915
                                            </div>
8916
                                            <div class="col2">
8917
                                                <div class="date"> Just now </div>
8918
                                            </div>
8919
                                        </li>
8920
                                        <li>
8921
                                            <a href="javascript:;">
8922
                                                <div class="col1">
8923
                                                    <div class="cont">
8924
                                                        <div class="cont-col1">
8925
                                                            <div class="label label-sm label-success">
8926
                                                                <i class="fa fa-bar-chart-o"></i>
8927
                                                            </div>
8928
                                                        </div>
8929
                                                        <div class="cont-col2">
8930
                                                            <div class="desc"> Finance Report for year 2013 has been released. </div>
8931
                                                        </div>
8932
                                                    </div>
8933
                                                </div>
8934
                                                <div class="col2">
8935
                                                    <div class="date"> 20 mins </div>
8936
                                                </div>
8937
                                            </a>
8938
                                        </li>
8939
                                        <li>
8940
                                            <div class="col1">
8941
                                                <div class="cont">
8942
                                                    <div class="cont-col1">
8943
                                                        <div class="label label-sm label-danger">
8944
                                                            <i class="fa fa-user"></i>
8945
                                                        </div>
8946
                                                    </div>
8947
                                                    <div class="cont-col2">
8948
                                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
8949
                                                    </div>
8950
                                                </div>
8951
                                            </div>
8952
                                            <div class="col2">
8953
                                                <div class="date"> 24 mins </div>
8954
                                            </div>
8955
                                        </li>
8956
                                        <li>
8957
                                            <div class="col1">
8958
                                                <div class="cont">
8959
                                                    <div class="cont-col1">
8960
                                                        <div class="label label-sm label-info">
8961
                                                            <i class="fa fa-shopping-cart"></i>
8962
                                                        </div>
8963
                                                    </div>
8964
                                                    <div class="cont-col2">
8965
                                                        <div class="desc"> New order received with
8966
                                                            <span class="label label-sm label-success"> Reference Number: DR23923 </span>
8967
                                                        </div>
8968
                                                    </div>
8969
                                                </div>
8970
                                            </div>
8971
                                            <div class="col2">
8972
                                                <div class="date"> 30 mins </div>
8973
                                            </div>
8974
                                        </li>
8975
                                        <li>
8976
                                            <div class="col1">
8977
                                                <div class="cont">
8978
                                                    <div class="cont-col1">
8979
                                                        <div class="label label-sm label-success">
8980
                                                            <i class="fa fa-user"></i>
8981
                                                        </div>
8982
                                                    </div>
8983
                                                    <div class="cont-col2">
8984
                                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
8985
                                                    </div>
8986
                                                </div>
8987
                                            </div>
8988
                                            <div class="col2">
8989
                                                <div class="date"> 24 mins </div>
8990
                                            </div>
8991
                                        </li>
8992
                                        <li>
8993
                                            <div class="col1">
8994
                                                <div class="cont">
8995
                                                    <div class="cont-col1">
8996
                                                        <div class="label label-sm label-info">
8997
                                                            <i class="fa fa-bell-o"></i>
8998
                                                        </div>
8999
                                                    </div>
9000
                                                    <div class="cont-col2">
9001
                                                        <div class="desc"> Web server hardware needs to be upgraded.
9002
                                                            <span class="label label-sm label-warning"> Overdue </span>
9003
                                                        </div>
9004
                                                    </div>
9005
                                                </div>
9006
                                            </div>
9007
                                            <div class="col2">
9008
                                                <div class="date"> 2 hours </div>
9009
                                            </div>
9010
                                        </li>
9011
                                        <li>
9012
                                            <a href="javascript:;">
9013
                                                <div class="col1">
9014
                                                    <div class="cont">
9015
                                                        <div class="cont-col1">
9016
                                                            <div class="label label-sm label-default">
9017
                                                                <i class="fa fa-briefcase"></i>
9018
                                                            </div>
9019
                                                        </div>
9020
                                                        <div class="cont-col2">
9021
                                                            <div class="desc"> IPO Report for year 2013 has been released. </div>
9022
                                                        </div>
9023
                                                    </div>
9024
                                                </div>
9025
                                                <div class="col2">
9026
                                                    <div class="date"> 20 mins </div>
9027
                                                </div>
9028
                                            </a>
9029
                                        </li>
9030
                                    </ul>
9031
                                    <h3 class="list-heading">System</h3>
9032
                                    <ul class="feeds list-items">
9033
                                        <li>
9034
                                            <div class="col1">
9035
                                                <div class="cont">
9036
                                                    <div class="cont-col1">
9037
                                                        <div class="label label-sm label-info">
9038
                                                            <i class="fa fa-check"></i>
9039
                                                        </div>
9040
                                                    </div>
9041
                                                    <div class="cont-col2">
9042
                                                        <div class="desc"> You have 4 pending tasks.
9043
                                                            <span class="label label-sm label-warning "> Take action
9044
                                                                <i class="fa fa-share"></i>
9045
                                                            </span>
9046
                                                        </div>
9047
                                                    </div>
9048
                                                </div>
9049
                                            </div>
9050
                                            <div class="col2">
9051
                                                <div class="date"> Just now </div>
9052
                                            </div>
9053
                                        </li>
9054
                                        <li>
9055
                                            <a href="javascript:;">
9056
                                                <div class="col1">
9057
                                                    <div class="cont">
9058
                                                        <div class="cont-col1">
9059
                                                            <div class="label label-sm label-danger">
9060
                                                                <i class="fa fa-bar-chart-o"></i>
9061
                                                            </div>
9062
                                                        </div>
9063
                                                        <div class="cont-col2">
9064
                                                            <div class="desc"> Finance Report for year 2013 has been released. </div>
9065
                                                        </div>
9066
                                                    </div>
9067
                                                </div>
9068
                                                <div class="col2">
9069
                                                    <div class="date"> 20 mins </div>
9070
                                                </div>
9071
                                            </a>
9072
                                        </li>
9073
                                        <li>
9074
                                            <div class="col1">
9075
                                                <div class="cont">
9076
                                                    <div class="cont-col1">
9077
                                                        <div class="label label-sm label-default">
9078
                                                            <i class="fa fa-user"></i>
9079
                                                        </div>
9080
                                                    </div>
9081
                                                    <div class="cont-col2">
9082
                                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
9083
                                                    </div>
9084
                                                </div>
9085
                                            </div>
9086
                                            <div class="col2">
9087
                                                <div class="date"> 24 mins </div>
9088
                                            </div>
9089
                                        </li>
9090
                                        <li>
9091
                                            <div class="col1">
9092
                                                <div class="cont">
9093
                                                    <div class="cont-col1">
9094
                                                        <div class="label label-sm label-info">
9095
                                                            <i class="fa fa-shopping-cart"></i>
9096
                                                        </div>
9097
                                                    </div>
9098
                                                    <div class="cont-col2">
9099
                                                        <div class="desc"> New order received with
9100
                                                            <span class="label label-sm label-success"> Reference Number: DR23923 </span>
9101
                                                        </div>
9102
                                                    </div>
9103
                                                </div>
9104
                                            </div>
9105
                                            <div class="col2">
9106
                                                <div class="date"> 30 mins </div>
9107
                                            </div>
9108
                                        </li>
9109
                                        <li>
9110
                                            <div class="col1">
9111
                                                <div class="cont">
9112
                                                    <div class="cont-col1">
9113
                                                        <div class="label label-sm label-success">
9114
                                                            <i class="fa fa-user"></i>
9115
                                                        </div>
9116
                                                    </div>
9117
                                                    <div class="cont-col2">
9118
                                                        <div class="desc"> You have 5 pending membership that requires a quick review. </div>
9119
                                                    </div>
9120
                                                </div>
9121
                                            </div>
9122
                                            <div class="col2">
9123
                                                <div class="date"> 24 mins </div>
9124
                                            </div>
9125
                                        </li>
9126
                                        <li>
9127
                                            <div class="col1">
9128
                                                <div class="cont">
9129
                                                    <div class="cont-col1">
9130
                                                        <div class="label label-sm label-warning">
9131
                                                            <i class="fa fa-bell-o"></i>
9132
                                                        </div>
9133
                                                    </div>
9134
                                                    <div class="cont-col2">
9135
                                                        <div class="desc"> Web server hardware needs to be upgraded.
9136
                                                            <span class="label label-sm label-default "> Overdue </span>
9137
                                                        </div>
9138
                                                    </div>
9139
                                                </div>
9140
                                            </div>
9141
                                            <div class="col2">
9142
                                                <div class="date"> 2 hours </div>
9143
                                            </div>
9144
                                        </li>
9145
                                        <li>
9146
                                            <a href="javascript:;">
9147
                                                <div class="col1">
9148
                                                    <div class="cont">
9149
                                                        <div class="cont-col1">
9150
                                                            <div class="label label-sm label-info">
9151
                                                                <i class="fa fa-briefcase"></i>
9152
                                                            </div>
9153
                                                        </div>
9154
                                                        <div class="cont-col2">
9155
                                                            <div class="desc"> IPO Report for year 2013 has been released. </div>
9156
                                                        </div>
9157
                                                    </div>
9158
                                                </div>
9159
                                                <div class="col2">
9160
                                                    <div class="date"> 20 mins </div>
9161
                                                </div>
9162
                                            </a>
9163
                                        </li>
9164
                                    </ul>
9165
                                </div>
9166
                            </div>
9167
                            <div class="tab-pane page-quick-sidebar-settings" id="quick_sidebar_tab_3">
9168
                                <div class="page-quick-sidebar-settings-list">
9169
                                    <h3 class="list-heading">General Settings</h3>
9170
                                    <ul class="list-items borderless">
9171
                                        <li> Enable Notifications
9172
                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
9173
                                        <li> Allow Tracking
9174
                                            <input type="checkbox" class="make-switch" data-size="small" data-on-color="info" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
9175
                                        <li> Log Errors
9176
                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
9177
                                        <li> Auto Sumbit Issues
9178
                                            <input type="checkbox" class="make-switch" data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
9179
                                        <li> Enable SMS Alerts
9180
                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
9181
                                    </ul>
9182
                                    <h3 class="list-heading">System Settings</h3>
9183
                                    <ul class="list-items borderless">
9184
                                        <li> Security Level
9185
                                            <select class="form-control input-inline input-sm input-small">
9186
                                                <option value="1">Normal</option>
9187
                                                <option value="2" selected>Medium</option>
9188
                                                <option value="e">High</option>
9189
                                            </select>
9190
                                        </li>
9191
                                        <li> Failed Email Attempts
9192
                                            <input class="form-control input-inline input-sm input-small" value="5" /> </li>
9193
                                        <li> Secondary SMTP Port
9194
                                            <input class="form-control input-inline input-sm input-small" value="3560" /> </li>
9195
                                        <li> Notify On System Error
9196
                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="danger" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
9197
                                        <li> Notify On SMTP Error
9198
                                            <input type="checkbox" class="make-switch" checked data-size="small" data-on-color="warning" data-on-text="ON" data-off-color="default" data-off-text="OFF"> </li>
9199
                                    </ul>
9200
                                    <div class="inner-content">
9201
                                        <button class="btn btn-success">
9202
                                            <i class="icon-settings"></i> Save Changes</button>
9203
                                    </div>
9204
                                </div>
9205
                            </div>
9206
                        </div>
9207
                    </div>
9208
                </div>
9209
                <!-- END QUICK SIDEBAR -->
9210
            </div>
9211
            <!-- END CONTAINER -->
9212
            <!-- BEGIN FOOTER -->
9213
            <div class="page-footer">
9214
                <div class="page-footer-inner"> 2016 &copy; Metronic Theme By
9215
                    <a target="_blank" href="http://keenthemes.com">Keenthemes</a> &nbsp;|&nbsp;
9216
                    <a href="http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes" title="Purchase Metronic just for 27$ and get lifetime updates for free" target="_blank">Purchase Metronic!</a>
9217
                </div>
9218
                <div class="scroll-to-top">
9219
                    <i class="icon-arrow-up"></i>
9220
                </div>
9221
            </div>
9222
            <!-- END FOOTER -->
9223
        </div>
9224
        <!--[if lt IE 9]>
9225
<script src="../assets/global/plugins/respond.min.js"></script>
9226
<script src="../assets/global/plugins/excanvas.min.js"></script> 
9227
<![endif]-->
9228
        <!-- BEGIN CORE PLUGINS -->
9229
        <script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
9230
        <script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
9231
        <script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
9232
        <script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
9233
        <script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
9234
        <script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
9235
        <!-- END CORE PLUGINS -->
9236
        <!-- BEGIN THEME GLOBAL SCRIPTS -->
9237
        <script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
9238
        <!-- END THEME GLOBAL SCRIPTS -->
9239
        <!-- BEGIN THEME LAYOUT SCRIPTS -->
9240
        <script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
9241
        <script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
9242
        <script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
9243
        <!-- END THEME LAYOUT SCRIPTS -->
9244
    </body>