html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

h1, h2, h3, h4, h5 {
	color: #57023d;
}

/* Ensure the table takes full width */
#tblAdminReports {
	width: 100%;
}

/* Set column widths */
.link-col {
	width: 10%; /* 10% for link columns */
}

.desc-col {
	width: 45%; /* 45% for description columns (each) */
}

/* Add underline to title rows */
.underline-rowreports {
	border-bottom: 2px solid black !important; 
	color: black;/* Adjust thickness and color as needed */
	height: 0; /* Ensure there's no additional height from padding */
	margin: 0; /* Remove margin if any */
	padding: 0; /* Remove padding if any */
}


/*Style for screen sizes*/

/* Default style */

.responsive-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

	.responsive-container .column {
		flex: 1 1 33%; /* Grow to fill space, but don't shrink below 33% of the container's width */
		box-sizing: border-box;
		padding: 10px;
	}

@media (max-width: 768px) { /* Adjust this breakpoint as needed */
	.responsive-container .column {
		flex: 1 1 100%; /* Each column takes full width on small screens */
	}
}

.thumbnail-image {
	width: 150px; /* Default size for larger screens */
	height: auto;
}

.thumbnail-column {
	width: 160px; /* Slightly larger than the image to accommodate padding/margins */
}

/* Media queries for screens narrower than 600px (e.g., phones) */
@media (max-width: 600px) {
	.thumbnail-image {
		width: 50px; /* Smaller size for smaller screens */
	}

	.thumbnail-column {
		width: 60px; /* Adjust the column width as well */
	}
}

.table-responsive {
	overflow-x: auto; /* Enable horizontal scrolling */
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
}

	.table-responsive table {
		min-width: 1000px; /* Set the minimum width of the table */
}
/*Custom Styles*/

.navbar-light .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.1); /* Optional: changes the border color if needed */
}

.navbar-light .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


.nav-link-primary {
	text-decoration: none;
	padding: 10px;
	font-size: 1.2em !important;
	line-height: 1.5em !important;
	color: #fff !important; /* Use !important to override any other styles */
}

	/* Optional: Ensure the color doesn't change on hover */
	.nav-link-primary:hover, .nav-link-primary:focus {
		color: white;
		text-decoration: none; /* Removes underline on hover */
	}


.navbar-nav {
	display: flex !important;  /*Use flexbox to arrange child elements in a row */
}

.nav-item {
	margin-right: 10px !important;  /*Add some space between each list item */
}


/* Banner */
#Banner {
	display: flex;
	justify-content: center;
	align-items: flex-start; /* Align items to the top */
	padding-top: 20px;
	padding-bottom: 20px;
	width: 100%;
	box-sizing: border-box;
}

.banner-content {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1296px; /* Optional: to control the overall width */
	margin: 0 auto; /* Centers the content */
}

.left-side {
	width: 40%; /* Adjust width for the left side */
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* Aligns title and image to the left */
	margin: 0; /* Remove any extra margin */
}

	.left-side h3 {
		margin-bottom: 10px; /* Adds space between title and image */
		text-align: left; /* Ensures the title is aligned to the left */
	}

	.left-side img {
		width: 100%; /* Makes the image responsive */
		height: auto;
		margin: 0; /* Remove any margin around the image */
	}

.right-side {
	width: 55%; /* Adjust the width of the text */
	padding-left: 20px;
}

	.right-side p {
		font-size: 16px;
		line-height: 1.6;
		margin: 0; /* Remove any margin around the text */
	}

/* Media query for smaller screens (mobile view) */
@media (max-width: 768px) {
	.banner-content {
		flex-direction: column; /* Stack the left and right sections vertically */
		align-items: center; /* Center content horizontally */
	}

	.left-side {
		width: 80%; /* Adjust width to make it smaller on mobile */
		margin-bottom: 15px; /* Add space between image and text */
	}

	.right-side {
		width: 80%; /* Adjust width to make it smaller on mobile */
		padding-left: 0; /* Remove left padding */
		text-align: center; /* Center the text on mobile */
	}
}


#tblAdminReports td:first-child {
	width: 15%;
}
#tblAdminReports, #tblAdminReports th, #tblAdminReports td {
	border: none; /* Removes borders */
}
#tblAdminReports {
	margin: 0; /* Removes margins */
	width: 80%;
}
.title-row td {
	/* Assuming you want the title to span across all columns for clarity */
	column-span: all; /* This property doesn't exist in CSS */
	text-align: left;
	font-weight: bold;
}

.profile-image {
	max-width: 250px; /* Added to set the maximum width */
}
.profile-image-directory {
	max-width: 150px;
}

.green-tick {
	max-width: 20px;
}

.btn-disabled {
	background-color: #cccccc;
	color: #666666;
	cursor: not-allowed;
}

.no-border-spacing-table {
	border-collapse: separate;
	border-spacing: 10px 0; /* Adjust the '10px' as needed for horizontal spacing */
	width: 100%; /* Adjust based on your layout needs */
}

	.no-border-spacing-table td {
		border: none; /* Ensures no borders */
		padding: 5px; /* Adds some padding inside cells */
		background-color: #f8f8f8; /* Light grey background, adjust as needed */
		width: 33%;
	}



/* ------------------------------------ Temp Styles */
.divider {
	width: 100%;
	/*height: 4rem;*/
	height: 0;
}

.bg-white {
	background: #fff;
}

.bg-light {
	background: #eee;
}

.bg-mid {
	background: #ddd;
}

.color-panel {
	width: 90%;
	padding: 1rem;
	margin: 1rem auto;
}

/* ------------------------------------ Colours */
.purple {
	color: #8a1564;
}



.purple-dark {
	color: #57023d;
}

.gold {
	color: #fbaf01;
}

.grey {
	color: #585856;
}

.dark-grey {
	color: 323232;
}

.green-dark {
	color: #264c3f;
}

.light-green-bg {
	background-color: #e6f6f5;
}

.dark-green-bg {
	background-color: #264c3f;
}

.dark-purple-bg {
	background-color: #57023d;
}

.yellow-bg {
	background-color: #fee7b3;
}

.white {
	color: #fff;
}


.bt-purple {
    background: #8a1564;
}
.btn:hover {
    background: #323232;
    cursor: pointer;
}



.bt-gold {
	background: #fbaf01;
	color: #8a1564 !important;
}


.txt-purple {
	color: #8a1564 !important;
}

.txt-gold {
	color: #fbaf01 !important;
}