/*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;
	font-family: 'Roboto', sans-serif;
}

body {
  font-family: 'Roboto', sans-serif;
}
/** 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) }
}

/*********************
	Main Page BOX
*********************/

.BOXgrid-container {
  display: grid;
 padding-top: 20px;
	
 /* grid-template-columns: 30% 70%; */
  grid-template-columns: repeat(2, 1fr);  Creates 4 equal-width columns 
  gap: 20px; /* Adds spacing between columns */
  max-width: 1500px; /* Optional: Set a maximum width for the container */
  margin: 0 auto; /* Centers the container on the page */
}

.BOXgrid-item {
  /* Styles for your column content */
  padding: 10px;

  background-color: #ffffff;
  border: 0px solid #ccc;
}




/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
  .BOXgrid-container {
    grid-template-columns: repeat(2, 1fr); /* Two columns on tablets */
  }
}

@media screen and (max-width: 480px) {
  .BOXgrid-container {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
}

/*********************
	Main Page BOX
*********************/

.BOXcontainer {
  display: flex; /* Enables Flexbox for the container */
  justify-content: center; /* Centers the columns horizontally */
  align-items: flex-start; /* Aligns items to the start of the cross-axis (top) */
  max-width: 1500px; /* Optional: Set a maximum width for the container */
  margin: 0 auto; /* Centers the container on the page */
  gap: 10px; /* Adds space between columns */
  padding: 10px; /* Adds padding around the columns */
}

.BOXcolumn {
  flex: 1; /* Allows columns to grow and shrink equally */
  min-width: 200px; /* Optional: Set a minimum width for each column */
  background-color: #FFFFFF; /* Example background color */
  border: 1px solid #ccc; /* Example border */
  padding: 15px; /* Padding within each column */
  text-align: left; /* Centers text within each column */
}

/* Optional: Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .BOXcontainer {
    flex-wrap: wrap; /* Allows columns to wrap to the next line */
  }
  .BOXcolumn {
    flex: 1 1 45%; /* Adjusts column width for smaller screens */
  }
}

@media (max-width: 480px) {
  .BOXcolumn {
    flex: 1 1 100%; /* Columns stack on very small screens */
  }
}

/*********************
	HOVER COLOUR BOX
*********************/

.color-box {
  width: 450px;
  height: 40px;
  padding-top: 20px;
  padding-bottom: 10px;
  padding-left: 10px;
  background-color: #003D7C; /* Default background color */
  color: white;
	
  display: flex;
  justify-content: left;
  align-items: center;
  transition: background-color 0.3s ease; /* Smooth transition for color change */
}

.color-box:hover {
	
 background-color: gray; /* Background color on hover */
  cursor: pointer; /* Changes cursor to a pointer on hover */
}


.INDEXcontainer {
  position: relative;
  width: 100%;
}

.INDEXimage {
  display: block;
  width: 100%;
  height: auto;
}

.INDEXoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #EF7C00;
}

.INDEXcontainer:hover .INDEXoverlay {
  opacity: 1;
  cursor: pointer; /* Changes cursor to a pointer on hover */
}

.INDEXtext {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/*********************
	Main Page BOX FULLSCREEN
*********************/

.BOXfullcontainer {
  display: flex; /* Enables Flexbox for the container */
  justify-content: center; /* Centers the columns horizontally */
  align-items: flex-start; /* Aligns items to the start of the cross-axis (top) */
  max-width: 100%; /* Optional: Set a maximum width for the container */
  margin: 0 auto; /* Centers the container on the page */
  gap: 0px; /* Adds space between columns */
  padding: 0px; /* Adds padding around the columns */
}

.BOXfullcolumn {
  flex: 1; /* Allows columns to grow and shrink equally */
  /*max-width: 300px; /* Optional: Set a maximum width for the container */
  /* min-width: 200px; /* Optional: Set a minimum width for each column */
  background-color: #FFFFFF; /* Example background color */
  border: 1px solid #ccc; /* Example border */
  padding: 0px; /* Padding within each column */
  text-align: left; /* Centers text within each column */
}

/* Optional: Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .BOXfullcontainer {
    flex-wrap: wrap; /* Allows columns to wrap to the next line */
  }
  .BOXfullcolumn {
    flex: 1 1 45%; /* Adjusts column width for smaller screens */
  }
}

@media (max-width: 480px) {
  .BOXfullcolumn {
    flex: 1 1 100%; /* Columns stack on very small screens */
  }
}





.IMAGEheader {
  text-align: center;
  padding: 0px; 
}

.IMAGErow {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0px; /* change this to have padding around the image */
}

/* Create four equal columns that sits next to each other */
.IMAGEcolumn {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0px; /* change this to have padding around the image */
}

.IMAGEcolumn img {
  margin-top: 0px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .IMAGEcolumn {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .IMAGEcolumn {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}