/*    _____                              _____          _                  ______________
     |  __ \                            / ____|        | |                /             /,
     | |__) |____      _____ _ __ ___  | |     ___   __| | ___           / @powerscode //
     |  ___/ _ \ \ /\ / / _ \ '__/ __| | |    / _ \ / _` |/ _ \         /             //
     | |  | (_) \ V  V /  __/ |  \__ \ | |___| (_) | (_| |  __/        /_____________//
     |_|   \___/ \_/\_/ \___|_|  |___/  \_____\___/ \__,_|\___|       (____________(*/



/* Inactive
****************************************************************/
#TopMenu,
#LeftMenu,
main,
footer {
	opacity: 1;
	transition: opacity .25s;
}
.inactive #TopMenu,
.inactive #LeftMenu,
.inactive main,
.inactive footer {
	opacity: 0;
}

.themOnly #TopMenu,
.themOnly #LeftMenu,
.themOnly main,
.themOnly footer {
	opacity: 0;
}

/* LAYOUT MAIN
****************************************************************/
html {
	position: relative;
	min-height: 100%;
}
body {
	padding-bottom: 260px; 
}
#TopMenu {
	/*uses bootstrap navbar*/
}
#LeftMenu {
	position: fixed;
	left: 0;
	top: 50px;
	z-index: 100;
	width: 180px;
	height: 100%;
} 
main {
	position: relative;
	z-index: 20;
	margin: 80px 0 0 220PX;
}
footer {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 22;
	width: 100%;
	height: 160px;	
}



/* TYPOGRAPHY
****************************************************************/
.roboto {
    font-family: 'Roboto', sans-serif;
}

.fjalla,
.navbar-brand {
	font-family: 'Fjalla One', sans-serif;  
}

.patua,
h1, .h1,
h2, .h2,
.box-head {
	font-family: 'Patua One', sans-serif;	
}

/* HEADING
****************************************************************/

h1.page-heading span{
	display: inline-block;
	background: rgba(255,255,255,.5);
	padding: 5px 15px;
	border-radius: 3px;
}

main .wrapper h1,
main .wrapper h2,
main .wrapper h3 {
}
main .wrapper h1,
main .wrapper .h1 { 
	margin-top: 48px;
	font-size: 20px;
}
main .wrapper h2,
main .wrapper .h2 {
	margin-top: 24px;
	font-size: 18px;
}
main .wrapper h3 {
	margin-top: 12px;
	font-size: 16px;
		font-weight: bold;
}




/* LEFT MENU
****************************************************************/
#LeftMenu {
	background-color: #444;
	padding: 20px 0 60px 0;
	line-height: 1.5;
	overflow-y: auto;
} 
#LeftMenu h2 {
	padding-left: 16px;
	font-size: 21px;
	color: #fff;
} 
.pageOption {
	display: block;
	padding-left: 16px;
	text-decoration: none;
	cursor: pointer;
	border: 0 solid #eee;
	border-left: 0px solid #5F5F5F;
	color: #fff;
	transition: border-width 0.5s, padding 1s, background-color 1s;
}

.pageOption:hover {
	border-left: 10px solid #1BFFFF;
}
.pageOption.active {
	position: relative;
	border-left: 10px solid #1bffff;
	color: #000 !important;
	background: #1bffff;
	box-shadow: 0px 0px 10px 5px rgba(0,255,255,0.4);
}
.pageOption.active:hover {
	opacity: 1;
    border-left-width: 20px;
}
.pageOption .catHomePage {color: gold;}
.pageOption.active .catHomePage {color: #970101;}


/* NAVBAR
****************************************************************/
.navbar,
.navbar-brand  {
	padding: 0;
}	
.nav-link {
	padding: 0.8rem 1rem;
}
.navbar-dark {
	background-color: #000;
	z-index: 200;
}	
.navbar-brand {
	font-size: 24px;
	width: 152px;
}
.nav-item.active {
    background: #1bffff;
    box-shadow: 0px 0px 50px 50px rgba(100, 255, 255, 0.4);
}
.nav-item.active a {
    color: #000 !important;
}

/* MAIN
****************************************************************/
.wrapper {
	display: inline-block;
	width: 70%;
}
aside {
	display: inline-block;
	width: 26%;
	margin-left: 1.5%;
	vertical-align: top
}
@media (max-width: 768px) {
	main {
		margin-left: 45px;
		margin-right: 15px;
	}
	.wrapper,
	aside {
	    width: 100%;
	    display: block;
	}
}


/* FOOTER
****************************************************************/
footer {
	background-color: #EFEFEF ;
	color: #333;
}
footer span {
	position: relative;
	top: 13px;
}
.innerFooter {
	color: #777;
	width: auto;
	margin: 0 0 0 230px;
	padding-top: 30px;
}
.innerFooter h4{
	margin-bottom: 0;
	color: #777;
}
@media (max-width: 768px) {
	footer {
		height: auto;
	}
	.innerFooter {
		margin-left: 45px;
	}
}





/* CARD
****************************************************************/
.card-header { 
	background-color: #3E61A3; 
	color:#ffffff;
	font-weight: bold;
}
.card-header a { 
	color:#ffffff; 
	font-weight: bold;
	text-decoration: none;
}


/* TABLE
****************************************************************/
.table-head td, 
.table-head th { background-color: #3E61A3; color:#ffffff;}
.table-head a { color:#ffffff; }

.bl-links {
	float: right;
	text-align: right;
	width:  50%;
}
.bl-link {
	font-size: 20px;
	padding-right: .25rem;
	margin-right: .25rem;
	text-decoration: none;
	color: #0d6efd;
	cursor: pointer;
}
.bl-link-white {
	color: #fff;
}

.bl-link:not(.fa) {
	text-decoration: underline;
	font-size: 14px;
}

.bl-link:last-child {
	padding-right: 0px; 
	margin-right: 0px;	
}

/* TABULATOR
****************************************************************/
.tabulator,
.tabulator .tabulator-header {
	border: 0;
	background-color: #fff;
}
.tabulator-row {
	background-color: #fff;
	border-bottom: 1px solid #dee2e6;
}
.tabulator-row.tabulator-row-even {
	background-color: #f2f2f2;
}
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
	color: #fff;
	background-color: #3E61A3;
}	
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
	opacity: .8;
}
.tabulator .tabulator-header .tabulator-col {
	text-align: center;
}
.tabulator .tabulator-header .tabulator-col,
.tabulator-row .tabulator-cell {
	border-right: 2px solid #fff;

}
.tabulator-row.tabulator-selectable:hover {
	background-color: #fff6bf;
}


/* BS FORM
****************************************************************/
.admin .form-control, 
.admin .form-select {
  font-size: 14px;
  width: auto;
}