@charset "utf-8";
/*	
Title # Top 5
Date #  24 April 2020
*/

*{ padding: 0px; margin: 0px; }

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{ padding: 0px; margin: 0px; background: #FFF; font-family: Roboto,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif; font-weight: normal; line-height:24px; color:#72777a;; letter-spacing: .2px; }


@font-face {
  font-family: 'FontAwesome';
  src: url('fontawesome-webfont.eot?v=4.5.0');
  src: url('../font/FontAwesome/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../font/FontAwesome/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../font/FontAwesome/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../font/FontAwesome/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../font/FontAwesome/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


.body-full{ width: 100%; float: left; position: relative; background: #fff; }


img{ max-width:100%; height:auto; }


h1,h2,h3,h4,h5{ letter-spacing: .5px; }

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  /*width: 70%;*/
  margin: auto;
}

a{ text-decoration:none; }
a:hover{ text-decoration:none; }

:focus {
outline: 0;
}
button:focus {
    outline: 0 !important;
}


.table > thead > tr > th{ border:none; font-size:12px; font-weight:normal; color:#666666; } 
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th{ border:none; font-size:12px; font-weight:normal; color:#000; line-height:20px; } 


	
/* ================================================== Start Header ========================================================== */

.header-full{ width: 100%; float: left; position: fixed; background: #fff; border-bottom: 1px solid rgba(0,0,0,.0625); box-shadow: 0px 0px 2px 0px #bdcad0; z-index:99; }

header{
		width:100%;
		padding:20px 0px;
		float:left;
		position:relative;
		}
		
  header img{ width:auto; height:80px; }
  
  .user-name{
	  		 width:auto;
			 padding:0px 2% 0px 0px;
			 float:right;
			 position:relative;
			 font-size:14px; font-weight:400; color:#313435; line-height:22px;
  			}
			
	  .user-name img{ width:2rem; height:auto; margin-right:10px; vertical-align:middle; border-radius: 50%; }


/* =============================================================== End Header ================================================================== */



/* =============================================================== Start Sign In ================================================================== */

.signin{
		width:600px;
		padding:20px 20px;
		border-radius:5px;
		position:relative;
		margin:200px auto 30px;
		border: 1px solid rgba(0,0,0,.0625);
		box-shadow: 0px 0px 2px 0px #bdcad0;
		}
		
	.signin h2{ font-size: 22px; font-weight: 300; line-height: 25px; color: #313435; margin-bottom: 25px; }
	
	.signin .form-group label{ font-size:14px; font-weight:400; color:#343a40; line-height:22px; margin-bottom:5px; }
					
	.signin .form-control { font-size: 14px; font-weight: 400; line-height: 20px; color: #343a40; padding: 10px 10px; height: 40px; width: 100%; display: inline-block; border: 1px solid #ced4da; background: #FFF; border-radius: 5px; margin-bottom: 0px; }
	.signin .form-control::placeholder { color: #868e96; opacity: 1; }
	
	.signin .form-check{ display:inline-block; }
	
		.signin .form-check label{ font-size:14px; font-weight:400; color:#343a40; line-height:22px; margin-bottom:15px; }	
	
	
	.signin .btn-primary{
							width:auto;
							float: right;
							padding:8px 10px;
							background:#0c83e2;
							border: 1px solid #0c83e2;
							height:30px;
							border-radius:5px;
							font-size:14px; font-weight:400; color:#FFF; line-height:20px; text-align:center; display:inline-block; height:auto; cursor:pointer;
							}
							
@media (max-width: 767px) {

.signin{
		width:100%;
		margin:150px auto 30px;
		}	
	
}

/* =============================================================== End Sign In ================================================================== */




/* =============================================================== Start Side Bar ================================================================== */

.sidebar{
		 width:220px;
		 background:#FFF;
		 float:left;
		 position:fixed;
		 min-height: 100%;
		 z-index: 9999;
		 height: 100%;
		 border-right: 1px solid rgba(0,0,0,.0625);
		 box-shadow: 0px 0px 2px 0px #bdcad0;
		}
		
.logo{
	  width:100%;
	  padding:11px 0px;
	  float:left;
	  position:relative;
	  text-align:center;
	  border-right: 1px solid rgba(0,0,0,.0625);
	  border-bottom: 1px solid rgba(0,0,0,.0625);
	  box-shadow: 0px 0px 2px 0px #bdcad0;
	}
	
	.logo img{ width:auto; height:50px; }

/* ---------- Start Sub Menu ---------- */ 
		
		
.navbar{ width:100%; padding:20px 0px; }

.navbar .navbar-toggle{ display:none; }

.navbar-nav li{ margin:0px; padding:0px; font-size:15px; font-weight:500; color:#72777a; line-height:25px; position:relative; width:100%; float:left; padding:0px 0px; }
	.navbar-nav li a{ color:#72777a; padding: 10px 20px; display:block; }
		.navbar-nav li a:hover{ color:#000; }
		.navbar-nav li a:hover .fa{ color:#000; }
	.navbar-nav li a.active{ color:#000; }
	.navbar-nav li a.active .fa{ color:#000; }

	.navbar-nav li span{ margin-left:10px; }
		
	.navbar-nav li .fa{ color:#72777a; font-size:20px; line-height:20px; vertical-align:text-bottom; }
	
		.navbar-nav li .fa-home{ color:#2196f3; }
		.navbar-nav li .fa-pencil{ color:#03a9f4; }
		.navbar-nav li .fa-sliders{ color:#ff9800; }
		.navbar-nav li .fa-files-o{ color:#f44336; }
	
	.navbar-nav li .fa-angle-down{ color:#72777a; font-size:20px; line-height:20px; vertical-align:middle; float:right; }

								 
 	.collapse:not(.show) { display: block; }
 
		.navbar ul.dropdown-menu{
								width:100%;
								padding:0px 15px 0px 55px;
								margin-left:0px;
								position:relative;
								top:0px;
								border:0px;
								background:#FFF;
								border-radius:0px;		  
								}

		.navbar-nav li ul li{ font-size:15px; line-height:25px; color:#72777a; font-weight:400; }
			.navbar-nav li ul li a{ color:#72777a; display:block; padding:5px 0px; }
				.navbar-nav li ul li a:hover{ color:#000; }
	
	.navbar-nav li:hover > ul.dropdown-menu{ display: block; position:relative; }
	
	.navbar-nav .dropdown-toggle::after{
										width:auto;
										position:absolute;
										right:25px;
										top:10px;
										z-index:2;
										text-align:right;
										vertical-align: middle;
										content: "\f107";
										border:0px;
										font-family: 'FontAwesome'; color:#72777a; font-size:20px; line-height:20px; vertical-align:middle;
										}
 
.open-sidebar{
			width:20px;
			float:left;
			position:absolute;
			left:15px;
			top:25px;
			z-index:9999;
			cursor:pointer;
			}
			
	.open-sidebar .fa{ color:#72777a; font-size:30px; line-height:30px; }
	
.close-sidebar{
			width:20px;
			float:left;
			position:absolute;
			right:15px;
			top:25px;
			z-index:2;
			cursor:pointer;
			display:none;
			}
			
	.close-sidebar .fa{ color:#72777a; font-size:30px; line-height:30px; }
								
@media (max-width: 1023px) {

.sidebar{
		 width:200px;
		}
				

}


@media (max-width: 767px) {
	
.sidebar{
		 display:none;
		}
		
.logo{
	  width:100%;
	  padding:11px 20px;
	  text-align:left;
	}

.close-sidebar{			
			display:block;
			}
				

}


/* ---------- End Sub Menu ---------- */ 

/* =============================================================== End Side Bar ================================================================== */




/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Body <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.body-wrapper{
			background: #f9fafb;
			z-index: 0;
			position: relative;
			border: 0;
			width: calc(100% - 220px);
			float: right;
			padding: 100px 35px 25px;
			}
			
	.body-wrapper h1{ font-size:21px; font-weight:500; color:#313435; line-height:25px; margin-bottom:30px; }
	
	
@media (max-width: 1023px) {

.body-wrapper{
			min-height: 100vh;
			width: calc(100% - 200px);
			padding: 100px 35px 25px;
			}				

}


@media (max-width: 767px) {

.body-wrapper{
			min-height: 100vh;
			width: calc(100% - 0px);
			padding: 100px 35px 25px;
			}				

}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Body <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */




/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Form Body <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.form-body{
		width:650px;
		padding:20px 20px;
		float:left;		
		position:relative;
		background:#FFF;
		border: 1px solid rgba(0,0,0,.0625);
		}
		
	.form-body h2{ font-size: 15px; font-weight: 500; line-height: 25px; color: #313435; margin-bottom: 15px; }
	
	.form-body .form-group label{ font-size:14px; font-weight:400; color:#72777a; line-height:22px; margin-bottom:5px; }
					
	.form-body .form-control { font-size: 14px; font-weight: 400; line-height: 20px; color: #72777a; padding: 10px 10px; height: 40px; width: 100%; display: inline-block; border: 1px solid #ced4da; background: #FFF; border-radius: 5px; margin-bottom: 0px; }
	.form-body .form-control::placeholder { color: #72777a; opacity: 1; }
	
	.form-body .form-check{ width:100%; float:left; } 
	
		.form-body .form-check label{ font-size:14px; font-weight:400; color:#72777a; line-height:22px; margin-bottom:15px; }	
	
	
	.form-body .btn-primary{
							width:auto;
							float: none;
							padding:8px 10px;
							background:#0c83e2;
							border: 1px solid #0c83e2;
							height:30px;
							border-radius:5px;
							font-size:14px; font-weight:400; color:#FFF; line-height:20px; text-align:center; display:inline-block; height:auto; cursor:pointer;
							}
							
.form-inputbox{
			width:100%;
			display:block;
			float:left;
			}
			
	.form-inputbox .form-group:nth-child(1){ width:50%; float:left; }
	.form-inputbox .form-group:nth-child(2){ width:50%; float:left; padding:0px 0px 0px 5%; }
	.form-inputbox .form-group:nth-child(3){ width:20%; float:left; }		
			

		
							
@media (max-width: 1023px) {

.form-body{
		width:100%;
		}	
	
}


@media (max-width: 767px) {

.form-inputbox .form-group:nth-child(1){ width:100%; }
.form-inputbox .form-group:nth-child(2){ width:100%; padding:0px 0px; }
.form-inputbox .form-group:nth-child(3){ width:100%; }	
	
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Form Body <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Data Table <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.datatable-body{
				width:100%;
				padding:20px 20px 10px;
				float:left;				
				position:relative;
				background:#FFF;
				border: 1px solid rgba(0,0,0,.0625);
				}
		
	.datatable-body h2{ font-size: 21px; font-weight: 500; line-height: 25px; color: #313435; margin-bottom: 20px; }
	
	
	.datatable-body .table-responsive{ margin-bottom:10px; }
	
	.datatable-body .table-responsive table thead tr th{ border:1px solid #e9ecef; border-bottom:2px solid #e9ecef; padding:10px 10px; font-size:14px; font-weight:500; color:#72777a; line-height:22px; vertical-align:middle; white-space:nowrap; }
	
	.datatable-body .table-responsive table tbody tr td{ border:1px solid #e9ecef; padding:10px 10px; font-size:14px; font-weight:400; color:#72777a; line-height:22px; vertical-align:middle; }
	
	.datatable-body .table-responsive table tfoot tr td{ border:1px solid #e9ecef; padding:10px 10px; font-size:14px; font-weight:500; color:#72777a; line-height:22px; vertical-align:middle; }
	
	.table-striped tbody tr:nth-of-type(2n+1) { background-color: rgba(0,0,0,.05); }
		
	
	.datatables-length{	
					   width:auto;
					   float:left;
					   position:relative;	
					   margin-top:5px;				   
					  }
					  
		.datatables-length label{ font-size:14px; font-weight:400; color:#313435; line-height:22px; margin-bottom:10px; }
		
			.datatables-length label select{ border: 1px solid rgba(0,0,0,.0625); border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; height: 35px; font-size: 14px; padding: 5px; margin-left: 5px; margin-right: 5px; color: #72777a; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in;	transition: all .2s ease-in; }
			.datatables-length label input{ border: 1px solid rgba(0,0,0,.0625); border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; height: 35px; font-size: 14px; padding: 5px; margin-left: 5px; margin-right: 5px; color: #72777a; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in;	transition: all .2s ease-in; }
			
			
	.datatables-filter{	
					   width:auto;
					   float:right;
					   position:relative;	
					   margin-top:5px;				   
					  }
					  
		.datatables-filter label{ font-size:14px; font-weight:400; color:#313435; line-height:22px; margin-bottom:10px; }
		
			.datatables-filter label input{ border: 1px solid rgba(0,0,0,.0625); border-radius: 2px; -webkit-box-shadow: none; box-shadow: none; height: 35px; font-size: 14px; margin-left: 15px; padding: 5px; color: #72777a; -webkit-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; }
			
			
	.page-number{
			width:auto;
			float:right;
			position:relative;
			margin-bottom:10px;
			}
			
	
	.page-number ul{ padding:0px; margin:0px; display:block; }
	.page-number ul li{ padding:0px; margin:0px; display:inline-block; float:left; }
	
	.page-number .page-link{
							min-width:35px;
							position: relative;
							display: block;
							padding:0px 10px;							
							font-size:14px; font-weight:400; color: #72777a; line-height: 30px; text-align:center;
							background-color: #FFF;
							border: 0px;
							border-radius:2px;
							margin:5px 5px;
							}
		
		.page-number .page-link:hover{ background:#7774e7; color:#FFF; }
		.page-number .page-link.active{ background:#7774e7; color:#FFF; }
							


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Data Table <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Start Footer <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */

.footer-full{ width:100%; float:left; position:relative; background:#FFF; border-top: 1px solid rgba(0,0,0,.0625); border-bottom: 1px solid rgba(0,0,0,.0625); }
		

footer{
		width:100%;
		padding:20px 20px 20px 280px;
		position:relative;
		font-size: 15px; font-weight: 400; line-height: 25px; color: #7c8695; text-align:center;
		}
		

@media (max-width: 1023px) {

footer{
		padding:20px 20px 20px 200px;
		}				

}


@media (max-width: 767px) {

footer{
		padding:20px 20px;
		}				

}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> End Footer <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */