
<!--begin: Head -->
<div class="kt-head kt-head--skin-dark kt-head--fit-x kt-head--fit-b" style="background-image: url(assets/media/misc/bg-1.jpg)">
	<h3 class="kt-head__title">
		User Notifications
		&nbsp;
		<span class="btn btn-success btn-sm btn-bold btn-font-md">23 new</span>
	</h3>
	<ul class="nav nav-tabs nav-tabs-line nav-tabs-bold nav-tabs-line-3x nav-tabs-line-success kt-notification-item-padding-x" role="tablist">
		<li class="nav-item">
			<a class="nav-link active show" data-toggle="tab" href="#topbar_notifications_notifications" role="tab" aria-selected="true">Alerts</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#topbar_notifications_events" role="tab" aria-selected="false">Events</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#topbar_notifications_logs" role="tab" aria-selected="false">Logs</a>
		</li>
	</ul>
</div>

<!--end: Head -->
<div class="tab-content">
	<div class="tab-pane active show" id="topbar_notifications_notifications" role="tabpanel">
		<div class="kt-notification kt-margin-t-10 kt-margin-b-10 kt-scroll" data-scroll="true" data-height="300" data-mobile-height="200">
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-line-chart kt-font-success"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New order has been received
					</div>
					<div class="kt-notification__item-time">
						2 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-box-1 kt-font-brand"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New customer is registered
					</div>
					<div class="kt-notification__item-time">
						3 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-chart2 kt-font-danger"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						Application has been approved
					</div>
					<div class="kt-notification__item-time">
						3 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-image-file kt-font-warning"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New file has been uploaded
					</div>
					<div class="kt-notification__item-time">
						5 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-drop kt-font-info"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New user feedback received
					</div>
					<div class="kt-notification__item-time">
						8 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-pie-chart-2 kt-font-success"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						System reboot has been successfully completed
					</div>
					<div class="kt-notification__item-time">
						12 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-favourite kt-font-danger"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New order has been placed
					</div>
					<div class="kt-notification__item-time">
						15 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item kt-notification__item--read">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-safe kt-font-primary"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						Company meeting canceled
					</div>
					<div class="kt-notification__item-time">
						19 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-psd kt-font-success"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New report has been received
					</div>
					<div class="kt-notification__item-time">
						23 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon-download-1 kt-font-danger"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						Finance report has been generated
					</div>
					<div class="kt-notification__item-time">
						25 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon-security kt-font-warning"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New customer comment recieved
					</div>
					<div class="kt-notification__item-time">
						2 days ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-pie-chart kt-font-success"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New customer is registered
					</div>
					<div class="kt-notification__item-time">
						3 days ago
					</div>
				</div>
			</a>
		</div>
	</div>
	<div class="tab-pane" id="topbar_notifications_events" role="tabpanel">
		<div class="kt-notification kt-margin-t-10 kt-margin-b-10 kt-scroll" data-scroll="true" data-height="300" data-mobile-height="200">
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-psd kt-font-success"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New report has been received
					</div>
					<div class="kt-notification__item-time">
						23 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon-download-1 kt-font-danger"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						Finance report has been generated
					</div>
					<div class="kt-notification__item-time">
						25 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-line-chart kt-font-success"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New order has been received
					</div>
					<div class="kt-notification__item-time">
						2 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-box-1 kt-font-brand"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New customer is registered
					</div>
					<div class="kt-notification__item-time">
						3 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-chart2 kt-font-danger"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						Application has been approved
					</div>
					<div class="kt-notification__item-time">
						3 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-image-file kt-font-warning"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New file has been uploaded
					</div>
					<div class="kt-notification__item-time">
						5 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-drop kt-font-info"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New user feedback received
					</div>
					<div class="kt-notification__item-time">
						8 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-pie-chart-2 kt-font-success"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						System reboot has been successfully completed
					</div>
					<div class="kt-notification__item-time">
						12 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-favourite kt-font-brand"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New order has been placed
					</div>
					<div class="kt-notification__item-time">
						15 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item kt-notification__item--read">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-safe kt-font-primary"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						Company meeting canceled
					</div>
					<div class="kt-notification__item-time">
						19 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-psd kt-font-success"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New report has been received
					</div>
					<div class="kt-notification__item-time">
						23 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon-download-1 kt-font-danger"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						Finance report has been generated
					</div>
					<div class="kt-notification__item-time">
						25 hrs ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon-security kt-font-warning"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New customer comment recieved
					</div>
					<div class="kt-notification__item-time">
						2 days ago
					</div>
				</div>
			</a>
			<a href="#" class="kt-notification__item">
				<div class="kt-notification__item-icon">
					<i class="flaticon2-pie-chart kt-font-success"></i>
				</div>
				<div class="kt-notification__item-details">
					<div class="kt-notification__item-title">
						New customer is registered
					</div>
					<div class="kt-notification__item-time">
						3 days ago
					</div>
				</div>
			</a>
		</div>
	</div>
	<div class="tab-pane" id="topbar_notifications_logs" role="tabpanel">
		<div class="kt-grid kt-grid--ver" style="min-height: 200px;">
			<div class="kt-grid kt-grid--hor kt-grid__item kt-grid__item--fluid kt-grid__item--middle">
				<div class="kt-grid__item kt-grid__item--middle kt-align-center">
					All caught up!
					<br>No new notifications.
				</div>
			</div>
		</div>
	</div>
</div>