/*Custom Styling Here*/

/*********************
	Global Variables
*********************/

:root {
  --main-web-color: #ef7c00;
}



/*********************
	TL Divisions
*********************/

.div-head {
	border: 1px solid white;
	background-color: var(--main-web-color);
	color: white;
	font-weight: bold;
	padding: 8px;
}

.div-body {
	border: 1px solid white;
	background-color: #f2f2f2;
	padding: 8px;
}

/** Alternating the colours between rows for better contrasts **/
/***** Used with single column / individual <div> tables *****/
.div-body-alt:nth-child(5n+1) { background-color: #e6e6e6;}
.div-body-alt:nth-child(5n+2) { background-color: #efefef;}
.div-body-alt:nth-child(5n+3) { background-color: #ececec;}
.div-body-alt:nth-child(5n+4) { background-color: #e9e9e9;}
/***** Used with 2 column <div> tables *****/
.div-body-alt-2:nth-child(4n+1), .div-body-alt-2:nth-child(4n+2) { background-color: #e6e6e6;}

.div-main { 
	background-color: var(--main-web-color);
	color: white;
	font-weight: bold;
	padding: 15px;
}

.div-main-error { 
	background-color: DarkRed;
	color: WhiteSmoke;
	font-size: 12px;
	font-weight: bold;
	padding: 8px;
}

.div-main-warning { 
	background-color: Orange;
	color: Black;
	font-size: 12px;
	font-weight: bold;
	font-style: italic;
	padding: 8px;
}

.div-session {
	font-size: 11px;
	text-align: right;
}
.div-session font { cursor: help; }



/*********************
	TL Fonts
*********************/

.fs-7 { font-size: 0.8rem; }
.fs-8 { font-size: 0.7rem; }
.fs-9 { font-size: 0.6rem; }

.p-head { 
	color: Night;
	font-size: 1.6rem; 
	font-weight: bold;
}

.font-logout {
	padding-top: 2px;
	padding-left: 12px;
}

.font-menu-title {
	color: var(--main-web-color);
	font-weight: bold;
	padding-right: 16px;
}

.icon-interact-btn i {
	color: #808080;
}
.icon-interact-btn i:hover { color: var(--main-web-color); }



/*********************
	TL Headers
*********************/

.mobile-title { 
	background-color: var(--main-web-color);
	color: WhiteSmoke;
	padding: 14px;
}

ul li a.mobile-bars{
	color: #aaa;
}
ul li a.mobile-bars:hover{ 
	color: var(--main-web-color);
}



/*********************
	TL Lists
*********************/

.ul-full-width {
	font-size: 12px;
	list-style-type: square;
	margin: 0;
	padding: 16px;
	padding-left: 24px;
}



/*********************
	Miscellaneous
*********************/

.backtotop {
	background: none;
	margin: 0;
	position: fixed;
	bottom: 0;
	right: 10px;
	width: 50px;
	height: 55px;
	z-index: 100;
	display: none;
	text-decoration: none;
}
.backtotop i {
	font-size: 45px;
	color: #808080;
}
.backtotop i:hover { color: var(--main-web-color); }

@media screen and (max-width:991px) {
	.min-d-height { min-height:calc(100vh - 266px) }
	.min-d-height-wHeader { min-height:calc(100vh - 315px) }
	.min-d-height-wHeader-wFooterBreadcrumbs { min-height:calc(100vh - 335px) }
	.min-d-height-wHeader-wHeaderBreadcrumbs-wFooterBreadcrumbs { min-height:calc(100vh - 382px) }
}

@media screen and (min-width:991px) {
	.min-d-height { min-height:calc(100vh - 362px) }
	.min-d-height-wHeader { min-height:calc(100vh - 428px) }
	.min-d-height-wHeader-wFooterBreadcrumbs { min-height:calc(100vh - 448px) }
	.min-d-height-wHeader-wHeaderBreadcrumbs-wFooterBreadcrumbs { min-height:calc(100vh - 495px) }
}