/* Optional: Ensure the body and html take up full height */
html, body {
	height: 100%;
	margin: 0;
}
/* Make the image responsive */
img {
	max-width: 100%; /* Ensure the image can't exceed the container width */
	height: auto; /* Maintain aspect ratio */
	display: block; /* Remove bottom space (like line-height) */
	/*margin: 0 auto; /* Center the image horizontally */
}

h1 {
	position: relative; /* Or another positioning value */
	top: 0;
	left: 0;
}
/* Optional: Center the image vertically and horizontally */
.image-container {
	height: 100%; /* Take full height of the viewport */
	display: flex;
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
}

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}

.container {
	display: flex;
	max-width: 90%;
}
/*
.form-container {
    width: 50%;
    padding: 20px;
    background-color: #f4f4f4;
} */
/* Container to hold the form */
.form-container {
	width: 100%; /* Ensure the container is responsive */
	max-width: 60%; /* Optional: Set a maximum width for the container */
	margin: 0 auto; /* Center the container horizontally */
	padding: 20px;
	box-sizing: border-box;
	/* Include padding in the element's total width and height */
	border: 1px solid #ccc;
	/* Optional: Add a border around the container */
	overflow: hidden; /* Prevent the form from overflowing the container */
	background-color: #f4f4f4;
}

/* Form styling */
.form {
	display: flex;
	flex-direction: column; /* Stack form elements vertically */
	gap: 10px; /* Optional: Space between form elements */
	width: 100%;
	box-sizing: border-box; /* Prevent overflow of form elements */
}

.output-container {
	position: relative;
	width: 40%;
	padding: 40px;
	/*padding-top: 50px;*/
	background-color: #f4f4f4;
	/*border-left: 2px solid #ddd;*/
	/* white-space: pre-wrap;  Make sure long JSON strings wrap properly */
}

.logo {
	font-size: 25px;
	margin-bottom: 30px;
	text-align: center;
	color: #ffff;
	font-family: arial;
	font-weight: 500;
	border-bottom: 1px solid #d3d3d3;
	padding-bottom: 20px;
}

.page-title {
	padding: 15px 0;
	font-size: 26px;
	font-family: arial;
	font-weight: 500;
}

input, select {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

button {
	padding: 10px 20px 10px 10px;
	font-size: 18px;
	background-color: #313751;
	color: #FFFF;
	border: none;
	border-radius: 5px !important;
	cursor: pointer;
	outline: none; /* Remove the outline (focus border) */
}

button:hover {
	color: #FFA500;
}

/* Table Styling */
table {
	width: 100%;
	margin-top: 20px;
	padding: 20px;
	border-collapse: collapse;
}

th, td {
	padding: 10px;
	text-align: left;
	border: 1px solid #ddd;
	vertical-align: middle;
}

th {
	background-color: #f2f2f2; /* Light grey background for headers */
	vertical-align: top;
}

/* Set the width of each column */
td:first-child, th:first-child {
	width: 24%; /* First column takes up 40% */
}

td:last-child, th:last-child {
	width: 76%; /* Second column takes up 60% */
}

tr:nth-child(even) {
	background-color: #f9f9f9; /* Alternating row colors */
}

table td.quantity {
	text-align: center;
}

/* Form Styling */
form {
	margin-top: 20px;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

label {
	display: block;
	margin-bottom: 8px;
	font-size: 1em;
	color: #555;
}

input[type="text"], input[type="email"], input[type="password"] {
	width: 95%;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

textarea {
	width: 100%;
	height: 1400px;
	padding: 15px !important;
	/*font-size: 16px !important;*/
	border: 1px solid #ccc;
	border-radius: 5px;
	color: #808080;
}

input[type="submit"] {
	background-color: #3498db;
	color: white;
	border: none;
	cursor: pointer;
	padding: 10px 20px;
}

input[type="submit"]:hover {
	background-color: #2980b9;
}

/* Basic styling for pretty-printed JSON */
pre {
	background-color: #fff;
	border-radius: 8px;
	font-family: monospace;
	white-space: pre-wrap; /* Make sure long JSON strings wrap properly */
	word-wrap: break-word;
	overflow-wrap: break-word;
	width: 100%;
	padding: 10px;
	font-size: 12px;
	/*border: 1px solid #ccc;*/
}

/* Style the tab links (tabs) */
.tab-links {
	list-style-type: none;
	margin: 5px;
	padding: 0;
	display: flex;
}

.tab-links li {
	display: inline;
	margin: 0;
}

.tab-links a {
	display: inline-block;
	text-decoration: none; /* Remove default underline */
	color: #313751;
	font-size: 18px;
	border-bottom: 3px solid #ccc; /* Use border for underline */
	padding-bottom: 5px; /* Adjust the space between text and underline */
	transition: background-color 0.3s;
	margin-bottom: 10px;
	margin-right: 30px;
}

.tab-links a:hover {
	text-decoration: none;
	border-bottom: 3px solid #313751;
	color: #313751;
}

/* Active tab styling - Use PAR blue*/
.tab-links li.active a {
	border-bottom: 3px solid #FFA500; /* Orange color for active tab */
	color: #313751; /* Change text color to match the active tab */
	font-weight: 600;
}

/* Tab content 
.tab-content {
    margin-top: 20px;
}*/
.tab-pane {
	display: none;
	/*padding: 20px;*/
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 0 0 5px 5px;
	margin-bottom: 25px;
}

.tab-pane.active {
	display: block;
}

/* Fine print styles */
.fine-print {
	font-size: 12px; /* Smaller text than regular content */
	color: #666; /* Lighter text color for subtlety */
	font-family: Arial, sans-serif; /* Clean, readable font */
	line-height: 1.5; /* Ensure it's readable */
	margin-top: 20px; /* Space above fine print */
	text-align: left;
}

.downloads-fine-print {
	font-size: 16px;
	text-decoration: none !important;
}

footer {
	font-size: 0.8em; /* Same small font size */
	color: #666;
	text-align: left;
	padding: 10px;
	border-top: 1px solid #d3d3d3;
}

/* Ensure the sidebar is fixed to the left */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 250px !important;
	background-color: #313751;
	padding-top: 20px;
	padding-right: 20px;
}

/* Make the main content area push to the right to avoid overlap with the sidebar */
.main-content {
	margin-left: 250px;
	padding: 20px;
}

.nav-link {
	color: #FFFF;
	font-weight: 400;
	transition: color 0.3s ease;
}

.nav-link:hover {
	color: #FFFF; /* Orange color on hover */
	background-color: #A0C1D1;
}

/* Class to disable hover effect */
.no-hover:hover {
	color: #000; /* Default color again */
	cursor: default; /* Optional: make it not look clickable */
}

/* Highlight the active link */
.nav-link.active {
	color: #FFFFFF;
	background-color: #4C6A92;
}

/* Style for non-clickable section headers */
.nav-item>.nav-category {
	color: #ffff; /* Set a default color */
	cursor: default; /* Change the cursor to indicate it's not clickable */
	font-size: 18px;
}

/* Optional: Add margin or padding to make the sections visually separated */
.nav-item>.nav-link {
	margin-bottom: 5px;
	font-size: 16px;
}

.welcome-note {
	text-align: justify;
	font-size: 18px;
	font-family: arial;
	line-height: 2;
	max-width: 1600px;
	padding-right: 20px;
}

.top-button-container {
	position: fixed; /* Keep this fixed to the viewport */
	bottom: 20px; /* Same bottom positioning as the button */
	left: 50%; /* Center horizontally */
	transform: translateX(-50%); /* Adjust to truly center the button */
	display: inline-block;
	/* Ensures the tooltip is positioned correctly relative to the button */
}

/* Tooltip text (hidden by default) */
.tooltiptext {
	visibility: hidden; /* Initially hidden */
	width: 120px;
	font-size: small;
	background-color: #FFA500;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	position: absolute;
	z-index: 1000;
	bottom: 125%; /* Position the tooltip above the button */
	left: 50%;
	margin-left: -60px; /* Center the tooltip */
	margin-bottom: -10px;
	opacity: 0; /* Start with no opacity */
	transition: opacity 0.3s; /* Fade-in effect */
}

#scrollToTopBtn {
	position: fixed;
	bottom: 80px;
	/* Adjust the left position to truly center the button */
	background-color: #313751;
	color: white;
	border: none;
	padding: 10px 15px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 1000; /* Ensure it appears above other content */
	margin: 5px;
}

#scrollToTopBtn:hover {
	color: #FFA500;
}

/* Show the tooltip when hovering over the button */
/* #scrollToTopBtn:hover + .tooltiptext {
  visibility: visible;
  opacity: 1;
} */

/* Show the tooltip when hovering over the button container */
.top-button-container:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

.textarea-container {
	position: relative; /* Needed to position the button inside it */
	margin-bottom: 10px;
}

/* Flex container for the button and the success message */
.button-and-message {
	display: block;
	margin-bottom: 10px;
}

.container-title {
	display: inline-block;
	font-size: 20px;
	font-weight: 500;
}

.copy-btn-container {
	position: relative; /* Necessary for positioning the tooltip relative to this container */
	display: flex;
	justify-content: right;
}

/* Styling for the Copy button */
#copyBtn {
	background-color: #313751;
	color: white;
	border: none;
	padding: 8px 12px;
	font-size: 14px;
	cursor: pointer;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	margin-left: 10px; /* Space between message and button */
	margin-top: 5px; /* Space between tooltip and button */
	font-size: 14px;
}

#copyBtn:hover {
	color: #FFA500;
}

#copyBtn:hover+.tooltiptext {
	visibility: visible;
	opacity: 1;
}

/* Success message style */
#successMessage {
	display: none; /* Initially hidden */
	font-size: 14px;
	color: green;
	position: absolute;
	bottom: 100%;
	margin-bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
}

/* Show the success message when the Copy button is clicked */
#copyBtn:hover+#successMessage {
	display: block; /* Show message when hover (for testing) */
}

.help-links-container {
	display: block;
}

.help-links-container a {
	text-decoration: none;
	margin-right: 10px;
	color: #007bff;
}

.links-container {
	display: block;
	justify-content: flex-end; /* Align the hyperlink to the right */
}

.utility-link {
	color: #007bff;
	margin-left: 10px;
	font-size: 18px;
	padding: 5px;
	background-color: transparent;
	outline: none; /* Remove the outline (focus border) */
}

.utility-link:hover {
	text-decoration: underline;
	color: #007bff;
}

/* Buttons fixed at the bottom of the page */
.fixed-buttons {
	position: fixed;
	bottom: 7px; /* Distance from the bottom of the viewport */
	left: 17%; /* Set left position as a percentage of the available space */
	transform: translateX(0); /* Remove the horizontal centering */
	display: flex;
	justify-content: left;
	align-items: center;
	padding: 15px;
	background-color: #FEF4E8;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	z-index: 1000; /* Make sure buttons are always on top */
	width: 82.5%;
}

button:focus, button:active, .utility-link:focus, .utility-link:active {
	border-color: transparent; /* Hide the border */
	outline: none;
}

.textarea-overlay {
	position: absolute;
	top: -10px; /* Offset to stretch 10px beyond the textarea */
	left: -10px; /* Offset to stretch 10px beyond the textarea */
	width: calc(100% + 20px); /* Increase width by 20px (10px on each side) */
	height: calc(100% + 20px); /* Increase height by 20px (10px on each side) */
	background: rgba(128, 128, 128, 0.4); /* Grey overlay */
	color: black;
	display: none; /* Hidden initially */
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	font-size: 16px;
	text-align: center;
	padding: 10px;
	border-radius: 5px;
}

.overlay-message {
	font-size: 22px; /* Adjust the font size if needed */
	font-weight: 300;
	position: relative;
	top: 15%;
	color: #000000;
	padding: 5px;
}

/* Hero section */
.hero {
	color: #000;
	text-align: center;
	padding-top: 30px;
}

.hero h1 {
	font-size: 2.5em;
	margin-bottom: 10px;
	max-width: 1600px;
}

.hero p {
	font-size: 24px;
	max-width: 1600px;
}

.boxed-link-section {
	margin: 60px 0px 60px 20px;
}

.section-title {
	font-size: 24px;
	font-weight: 500;
	position: relative;
	padding-bottom: 10px;
	text-decoration: underline;
}

/* .section-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background-color: #313751;
	max-width: 1600px;  
} */

.boxed-links {
	display: flex;
	justify-content: flex-start;
	margin-top: 20px;
	max-width: 1600px;
}

.boxed-link {
	width: 30%;
	padding: 20px;
	background-color: white;
	border: 2px solid #ccc;
	text-align: center;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-right: 50px;
}

.boxed-link-full-width {
	width: 100%;
	max-width: 1600px;
	padding: 20px;
	background-color: white;
	border: 2px solid #ccc;
	text-align: left;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	font-size: 18px;
}

.boxed-link-coming-soon {
	width: 30%;
	padding: 20px;
	background-color: white;
	border: 2px solid #ccc;
	text-align: center;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	font-size: 18px;
}

.boxed-link:hover {
	border-color: #FFA500; /* Change border color to orange on hover */
}

.boxed-link a {
	font-size: 20px;
	color: #000;
	border-bottom: 2px solid #313751;
	transition: color 0.3s ease;
}

.boxed-link a:hover {
	color: #0056b3;
	text-decoration: none;
	border-bottom: 2px solid #0056b3;
}

.boxed-link p {
	font-size: 18px;
	color: #333;
	margin-top: 10px;
}

.link-content-title {
	text-decoration: underline;
	color: #4F79A1 !important;
	font-weight: 500;
}

.link-content .author {
	font-size: 16px !important;
}

.blog-links, .useful-links {
	list-style-type: none;
	padding: 0;
	color: #4F79A1;
}

.useful-links li, .blog-links li {
	margin-bottom: 10px;
	line-height: 1.8;
}

.useful-links a, .blog-links a {
	text-decoration: none;
	color: #4F79A1;
	font-size: 18px;
}

.useful-links ul, .blog-links ul {
  list-style: none;
}

.blog-links li::before {
  content: "✓ ";
  color: #FFA500;
  font-size: 20px;
  margin-right: 10px;
}

.useful-links li::before {
  content: "✓ ";
  color: #FFA500;
  font-size: 20px;
  margin-right: 10px;
}

.coming-soon {
	position: relative;
	top: -20px;
	right: -150px;
	background-color: rgba(255, 0, 0, 0.8); /* Red background with opacity */
	color: white;
	padding: 5px 10px;
	font-size: 14px;
	font-weight: bold;
	border-radius: 5px;
	display: inline-block;
	width: auto;
}

.reset-button {
	padding: 10px 20px;
	background-color: #313751;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
}

.reset-button:hover {
	background-color: #2a2f45;
}

/* Add responsiveness*/
@media ( min-width : 750px) and (max-width: 1550px) {
	.sidebar {
		position: relative;
		width: 70%;
		height: auto;
	}
	.main-content {
		margin-left: 0;
	}
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 100% !important;
		margin-left: unset !important;
		margin-right: unset !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.logo {
		font-size: 18px;
	}
	.page-title {
		font-size: 22px;
	}
	.container-title, .overlay-message {
		font-size: 15px;
	}
	.tab-links a, .nav-item>.nav-category, textarea, body, .nav-item>.nav-link, .fixed-buttons, .utility-link {
		font-size: 14px !important;
	}
	#copyBtn, .help-links-container a {
		font-size: 12px !important;
	}
}

@media ( min-width : 1550px) and (max-width: 1920px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl {
		max-width: 100% !important;
		margin-left: unset !important;
		margin-right: unset !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
}

@media ( min-width : 1920px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .ml-sm-auto, .mx-sm-auto {
		max-width: 100% !important;
		margin-left: unset !important;
		margin-right: unset !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.col-md-2 {
		max-width: 15% !important;
	}
}