/* UPDATED: 2026-01-23 */

:root {
	/* Site Colors */
	--primary-blue: #135086;
	/* changed to #135086 from #14558F for best contrast */
	--primary-green: #388557;
	/* Secondary Colors */
	--secondary-blue: #E8EEF4;
	--secondary-green: #9BC2AB;
	/* Tertiary Colors */
	--tertiary-blue: #A6CFF2;
	--tertiary-green: #CCE0D5;
	/* Neutral Colors */
	--neutral-white: #fff;
	--neutral-lightgray: #f9f9f9;
	--neutral-gray: #D3D3D3;
	--neutral-darkgray: #686868;
	--neutral-black: #000;
	--disabled: #888;
	/* Accent Colors */
	--accent-red: #D90521;
	--accent-lightred: #fff5f5;
	--accent-yellow: #FFD700;
}

/* Global Styles */
body,
html {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	width: 100%;
	/* Full width of viewport without including scrollbar */
	height: 100%;
	min-height: 100vh;
	/* Full viewport height */
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 1.6;
	font-size: 16px;
	/* Base size = 16px */
}

body {
	display: flex;
	flex-direction: column;
	min-width: 320px;
	/* Prevents shrinking below 320px */
	overflow-x: hidden;
	/* Ensures no horizontal scrolling */
}

/* Wrapper */
.wrapper {
	width: 100%;
	/* Occupies full viewport width */
	height: 100vh;
	/* Occupies full viewport height */
	display: flex;
	flex-direction: column;
	/* Stack child elements vertically */
}

/* Main Content */
main {
	flex: 1 0 auto; /* expands to fill space */
	width: 100%;
	flex-grow: 1;
	/* Fills the available space */
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Center content horizontally */
	background-color: var(--neutral-white);
	/* CHANGE COLOR? */
}

/* Skip to Main Content */
.skip-to-content {
	position: absolute;
	top: 0;
	left: 0;
	padding: 8px;
	z-index: 100;
	background: transparent;
	color: transparent;
	border: none;
	text-decoration: none;
	/* Visually hide but keep accessible */
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

	/* On focus: remain hidden but show outline */
	.skip-to-content:focus {
		outline: 2px solid #000; /* High contrast outline */
		outline-offset: 4px;
		/* Maintain hidden state */
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		width: 1px;
		height: 1px;
		overflow: hidden;
		background: transparent;
		color: transparent;
	}



/* Container */
.container {
	width: 100%;
	max-width: 1920px;
	/* CHANGE COLOR? */
	height: auto;
	/* Adjusts height based on content */
	margin: 0 auto;
	/* Centers content */
	background-color: rgba(255, 255, 255, 0.8);
	background-image: url('../images/judge-gavel-table.png');
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
	background-blend-mode: lighten;
	/* Blend overlay with image */
	padding: 0 80px;
	flex-grow: 1;
	/* Allows container to fill available space */
	display: flex;
	flex-direction: column;
	/* Stack children vertically */
	justify-content: flex-start;
	/* Align content to the top */
	align-items: stretch;
	/* Stretch children to container width */
	box-sizing: border-box;
	/* Include padding in dimensions */
}

/* Content */
.content {
	width: 100%;
	max-width: 1400px;
	height: 100%;
	/* Matches full container height */
	min-height: 500px;
	margin: 0 auto;
	/* Centers content */
	padding: 0 20px 20px;
	/* Padding: top, sides, bottom */
	background-color: rgba(255, 255, 255, 0.5);
	/* Semi-transparent white */
	background-blend-mode: lighten;
	/* Blend with background */
	display: flex;
	/* Flex container behavior */
	flex-direction: column;
	/* Stack children vertically */
	justify-content: flex-start;
	/* Align content to the top */
	align-items: stretch;
	/* Stretch children to container width */
	box-sizing: border-box;
	/* Include padding in dimensions */
}
/* Disabled Styles */

/* the disabled radio button */
input[type="radio"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	filter: grayscale(100%);
}

/* the label that wraps a disabled radio button */
label:has(input[type="radio"]:disabled) {
	color: var(--disabled); /* Gray out the text */
	opacity: 0.5;
	cursor: not-allowed; 
	pointer-events: none; 
}


/* Pages Without Buttons */
.copy-only {
	padding-bottom: 28px;
	/* to the amount of button margin, and containing div padding */
}

/* PDF Viewer */
.pdf-viewer {
	width: 100%;
	height: 100vh;
	/* 100% of the viewport height */
	overflow: hidden;
}

/* Screen Reader */
/* Live region for announcements - hidden visually but available to screen readers */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	/* Prevents text wrapping */
	border: 0;
}

/* CSS class to completely hide from screen readers */
.sr-hidden {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
}

	.sr-hidden * {
		display: none !important;
		visibility: hidden !important;
	}

:focus {
	outline: 2px solid #0d6efd;
	/* Bootstrap blue */
	outline-offset: 2px;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

	.visually-hidden.focusable:active,
	.visually-hidden.focusable:focus {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
		background: #f8f9fa;
		padding: 0.5rem 1rem;
		display: inline-block;
	}

/* Header */
header {
	width: 100%;
	/* Full width */
}

.banner {
	display: flex;
	/* Ensures a flexible layout for child elements */
	align-items: center;
	/* Centers items vertically */
	justify-content: flex-start;
	/* Aligns items to the left horizontally */
	background-repeat: no-repeat;
	/* Ensures background doesn't repeat */
	height: 110px;
	/* Sets a fixed height for the banner */
	padding: 20px;
	background-color: var(--primary-blue);
	/* Applies primary blue variable for background color */
	box-sizing: border-box;
	/* Ensures padding doesn't affect overall dimensions */
}

.seal {
	width: 100px;
	/* Defines seal width */
	height: 100px;
	/* Defines seal height */
	background-position: left center;
	/* Aligns background to the left and vertically centered */
	background-repeat: no-repeat;
	/* Prevents background from repeating */
}

.banner-text {
	padding-left: 10px;
	/* Adds space between text and seal */
	font-size: 3.2em;
	/* Sets large text size */
	font-weight: bold;
	/* Makes text bold */
	color: var(--neutral-white);
	/* Applies neutral white variable for text color */
	text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	/* Adds a smooth black shadow */
}

@media (max-width: 991px) {
	.banner {
		background-position: 20px center;
		/* Aligns background 20px from left, vertically centered */
		background-repeat: no-repeat;
		/* Prevents background repetition */
		height: 80px;
		/* Sets smaller height for responsiveness */
		padding: 10px;
		/* Standardizes padding for smaller screens */
	}

	.seal {
		width: 70px;
		/* Reduces seal size for smaller screens */
		height: 70px;
		/* Matches width reduction */
	}

	.banner-text {
		padding-left: 10px;
		/* Adds space between text and seal */
		font-size: 2em;
		/* Sets medium text size */
		line-height: 1;
		/* Reduces line height to 1.2 times the font size */
		padding-right: 60px;
	}
}

@media (max-width: 465px) {
	.banner-text {
		font-size: 1.2em;
		/* Sets small text size */
	}
}

/* Navigation */
nav ul li {
	/* Make the markers disappear */
	list-style-type: none;
}

.navbar {
	padding: 0 20px;
	background-color: var(--secondary-blue) !important;
	position: relative;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

	/* Navigation Links */
	.navbar a {
		text-decoration: none;
		font-weight: bold;
		font-size: 18px;
		color: var(--primary-blue) !important;
	}

		.navbar a:hover {
			color: var(--neutral-black) !important;
			text-decoration: underline;
		}

.nav-item {
	padding-right: 20px;
}

/* Hamburger Menu stuff */
/* Toggler base styles */
.navbar-toggler {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	/* Meets WCAG tap target recommendation */
	width: 44px;
	margin-left: auto;
	margin-top: -80px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	position: relative;
	/* Needed for top positioning */
	z-index: 2;
	margin-right: -15px;
}

	/* Visible focus style for accessibility */
	.navbar-toggler:focus {
		outline: 2px solid #0d6efd;
		outline-offset: 2px;
		box-shadow: none;
	}

/* Custom hamburger lines */
.navbar-toggler-icon {
	width: 30px;
	height: 3px;
	background-color: var(--neutral-white);
	position: relative;
	display: block;
	background-image: none;
	transition: all 0.3s ease-in-out;
}

.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
	content: '';
	width: 100%;
	height: 100%;
	background-color: var(--neutral-white);
	position: absolute;
	left: 0;
	transition: all 0.3s ease-in-out;
}

.navbar-toggler .navbar-toggler-icon::before {
	top: -10px;
}

.navbar-toggler .navbar-toggler-icon::after {
	top: 10px;
}

/* Transform icon when navbar is expanded */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
	background-color: transparent;
}

	.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
		transform: rotate(45deg);
		top: 0;
	}

	.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
		transform: rotate(-45deg);
		top: 0;
	}

/* Hide horizontal menu on mobile view */
@media (max-width: 200px) {
	.navbar-expand-lg {
		display: none;
	}
}

/* Links - Standard */
a {
	text-decoration: underline;
	color: var(--primary-blue);
	font-size: 18px;
}

	a:hover {
		color: #0000EE;
		/* Standard link hover color */
	}

	a:active {
		color: #FF0000;
		/* Standard link active color */
	}

	a:visited {
		color: #551A8B;
		/* Standard link visited color */
	}

/* Links - Disabled */
.disabled-link {
	pointer-events: none;
	color: var(--neutral-darkgray);
	text-decoration: none;
}

/* Lists */
ul {
	list-style-type: none;
}

	ul li {
		list-style-type: disc;
	}

/* Images */
img {
	max-width: 100%;
	/* Scales the image down to fit its container */
	height: auto;
	/* Maintains the image's aspect ratio */
	display: block;
	/* Removes extra spacing around the image (optional) */
}

.courthouses {
	width: auto;
	/* Maintains aspect ratio */
}

/* Blocks - Address */
address {
	font-weight: bold;
}

	address span {
		display: block;
	}

/* Typography */
/* Font Sizes */
/* Base size = 16px */
h1 {
	font-weight: bold;
	font-size: 2.375rem;
	/* 38px */
	margin-top: 24px;
	margin-bottom: 24px;
}

h2 {
	font-size: 2rem;
	/* 32px */
}

h3 {
	font-size: 1.75rem;
	/* 28px */
}

h4 {
	font-size: 1.5rem;
	/* 24px */
}

h5 {
	font-size: 1.25rem;
	/* 20px */
}

p {
	font-size: 1rem;
	/* 16px */
}

.small {
	font-size: 0.875rem
	/* 14px */
}

/* Paragraph Styles */
p {
	margin-bottom: 20px;
}

/* Text Alignment */
.text-center {
	display: flex;
	justify-content: center;
	/* Horizontally centers items */
	align-items: center;
	/* Vertically centers items */
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

/* Text Transform */
.text-uppercase,
.uc {
	text-transform: uppercase;
}

.text-lowercase,
.lc {
	text-transform: lowercase;
}

.text-capitalize,
.cap {
	text-transform: capitalize;
}

.text-nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Text Decoration */
.text-decoration-none {
	text-decoration: none;
}

/* Padding */
.p-10 {
	padding: 10px;
}

.p-20 {
	padding: 20px;
}

.p-30 {
	padding: 30px;
}

/* Margin */
.m-10 {
	margin: 10px;
}

.m-20 {
	margin: 20px;
}

.m-30 {
	margin: 30px;
}

/* Border Radius */
.no-border-radius {
	border-radius: 0;
	/* Removes any rounding of corners */
}

/* Box Shadow */
.shadow {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	/* Subtle shadow with slight opacity */
}

/* Display */
.d-block {
	display: block;
}

.d-inline {
	display: inline;
}

.d-inline-block {
	display: inline-block;
}

.d-flex {
	display: flex;
}

.d-none {
	display: none;
}

/* Ensure the row is a flex container */
.row.d-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* Distribute space between items */
	align-items: center;
	/* Align items vertically */
}

/* Columns to flex and stay on the same line */
.col.first-name,
.col.last-name {
	flex: 1;
	/* Allow the columns to grow and shrink */
	display: flex;
	justify-content: center;
	/* Center the content within each column */
}

/* Media query for smaller screens */
@media (max-width: 1000px) {
	.row.d-flex {
		flex-wrap: wrap;
		/* Allow wrapping on small screens */
	}

	.col.first-name,
	.col.last-name {
		flex: 100%;
		/* Take full width on small screens */
		justify-content: center;
	}
}

/* Footer Styling */
footer {
	background-color: var(--neutral-gray);
	width: 100%;
	min-width: 320px;
	min-height: 0;
	margin: 0 auto;
	/* Centers the footer horizontally */
	padding: 30px 80px 10px 80px;
	margin-top: auto;
	/* Pushes the footer to the bottom if content height is less */
	flex-shrink: 0;
	/* Prevents footer from collapsing upward */
	text-align: center;
}

	footer .col {
		padding: 1rem;
	}

.accessibility-row {
	padding: 1rem;
	text-align: left;
}

	.accessibility-row h2 {
		margin-top: 0;
	}

/* Footer Links Grid */
.footer-links {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
}

a.footer-links {
	grid-template-columns: unset;
}

footer a {
	color: var(--primary-blue);
	font-size: 18px;
	font-weight: bold;
}

.footer-links .col h3 {
	margin-bottom: 0.5rem;
	font-size: 1rem;
}

.footer-links address,
.footer-links ul {
	margin: 0;
	padding: 0;
}

.footer-address-row {
	text-align: left;
}

.footer-links ul {
	list-style: none;
}

.footer-links li {
	list-style: none;
	text-align: left;
}

.footer-links a {
	text-decoration: none;
	min-height: 44px;
	min-width: 44px;
}

	.footer-links a:hover {
		text-decoration: underline;
		color: var(--neutral-black) !important;
	}

/* Footer Icons */
footer .bi-person-wheelchair {
	font-size: 1.5rem;
	width: 100px;
	height: 100px;
	margin: 10px auto;
	margin-top: 20px;
}

/* Tablet: two columns (Address + first of the three), others flow to next row */
@media (max-width: 957px) {
	.footer-links {
		/* now 3 columns instead of 2fr 1fr */
		grid-template-columns: repeat(3, 1fr);
	}

	/* address spans the full row above the 3 cols */
	.footer-address-row {
		grid-column: 1 / -1;
	}
}

/* Mobile: stack all */
@media (max-width: 600px) {
	footer {
		padding: 20px 20px 10px 20px;
	}

	footer .col {
		padding: unset;
	}

	.footer-address-row {
		padding: 1rem 0 !important;
		text-align: unset;
	}

	.accessibility-row {
		text-align: unset;
		padding: unset;
		padding-top: 1rem;
	}

	.footer-links {
		grid-template-columns: 1fr;
	}

		.footer-links li {
			text-align: unset;
		}
}

/* Page Content Areas */
.content2 {
	margin-left: 30px;
	margin-right: 30px;
}

.content3 {
	margin-top: 20px;
	margin-left: 40px;
	margin-right: 40px;
}

.headline2-container {
	display: flex;
	justify-content: flex-end;
	/* Default justification to the right */
	flex-wrap: wrap;
	height: auto;
}

/*Help Page */
.accordion {
	background-color: rgba(255, 255, 255, 0.8); /* 80% opaque white */
	border-radius: unset;
}

.accordion-item {
	background-color: unset;
}

.accordion-button:not(.collapsed).accordion-button:not(.collapsed) {
	background-color: var(--secondary-blue) !important;
}

.accordion-item:first-of-type > .accordion-header .accordion-button {
	border-top-left-radius: unset;
	border-top-right-radius: unset;
}

/* Sections */
/* Status Section Area */
.status-section {
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-around;
}

.personal-middle-initial {
	margin-right: 0.3em;
	/* Adds space between the first name and middle initial */
}

.between {
	justify-content: space-between;
}

.holder-name {
	display: flex;
	justify-content: flex-start;
	margin-right: auto;
}

.holder-badge {
	display: flex;
	justify-content: center;
}

.holder-progressbar {
	display: flex;
	margin-left: auto;
	flex-wrap: wrap;
	flex-direction: column;
}

.status-first-name,
.status-last-name {
	text-transform: uppercase;
	font-weight: bold;
}

.service-change-options {
	padding: 10px;
	align-items: unset;
}

@media (max-width: 768px) {
	.service-change-options {
		flex-direction: column;
		width: 100%;
	}
}

.service-change-notice {
	text-align: right;
}

/* Progress Bar */
.step::before {
	content: attr(data-step);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--neutral-white);
	outline: 2px solid var(--neutral-black);
	color: var(--neutral-black);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	transition: background-color 0.3s ease, transform 0.3s ease;
	margin: 0 auto;
}

.step.active::before {
	content: "";
	background-color: var(--primary-green);
	width: 20px;
	height: 20px;
	transition: background-color 0.3s ease, transform 0.2s ease-out;
}

.progress-bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 10px;
	background-color: unset;
}

.steps-wrapper {
	display: flex;
	align-items: center;
}

.dash {
	width: 10px;
	height: 2px;
	background-color: var(--neutral-black);
	flex-shrink: 0;
}

/* Buttons */
.btn-primary:focus,
.btn-primary-ghost:focus {
	border-radius: 0;
	border: 1px solid;
	color: var(--primary-blue) !important;
}

.btn-primary:focus-visible,
.btn-primary-ghost:focus-visible {
	border-radius: 0;
	border: 1px solid;
}

.btn-secondary:focus,
.btn-secondary-ghost {
	border-radius: 0;
	border: 1px solid;
	color: var(--primary-green) !important;
}

	.btn-secondary:focus-visible,
	.btn-secondary-ghost:focus-visible {
		border-radius: 0;
		border: 1px solid;
	}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 30px;
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	border-radius: 0;
	margin-top: 20px;
	margin-bottom: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	width: 250px;
	min-width: unset;
	max-width: unset;
	outline: none;
	height: 46px;
	max-height: unset;
}

.btn-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	border-radius: 0;
	margin-top: 0;
	margin-bottom: 0;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	min-width: 165px;
	max-width: 250px;
	width: auto;
	max-height: 29px;
}

.btn-primary {
	background-color: var(--secondary-blue);
	color: var(--primary-blue) !important;
	border-color: var(--primary-blue);
}

	.btn-primary:hover {
		background-color: var(--primary-blue);
		color: var(--neutral-white) !important;
		border-color: var(--primary-blue);
	}

	.btn-primary:active {
		background-color: var(--secondary-blue);
		color: var(--neutral-white) !important;
		border-color: var(--primary-blue);
	}

.btn-primary-ghost {
	background-color: var(--neutral-white);
	border-color: var(--primary-blue) !important;
	color: var(--primary-blue);
}

	.btn-primary-ghost:hover {
		background-color: var(--primary-blue);
		color: var(--neutral-white) !important;
		border-color: var(--primary-blue);
	}

	.btn-primary-ghost:active {
		background-color: var(--secondary-blue);
		color: var(--primary-blue) !important;
		border-color: var(--primary-blue);
	}

.btn-secondary {
	background-color: var(--neutral-white);
	border-color: var(--primary-green);
	color: var(--primary-green) !important;
}

	.btn-secondary:hover {
		background-color: var(--secondary-green);
		color: var(--neutral-black) !important;
	}

	.btn-secondary:active {
		background-color: var(--secondary-green) !important;
		color: var(--primary-green) !important;
		border-color: var(--neutral-black) !important;
	}

.btn-secondary-ghost {
	background-color: var(--neutral-white);
	border-color: var(--primary-green);
	color: var(--primary-green) !important;
}

	.btn-secondary-ghost:hover {
		background-color: var(--secondary-green);
		color: var(--neutral-black) !important;
	}

	.btn-secondary-ghost:active {
		background-color: var(--secondary-green) !important;
		color: var(--neutral-black) !important;
	}

/* Style the disabled */
.btn:disabled {
	background-color: var(--neutral-darkgray);
	border-color: var(--neutral-darkgray);
	color: var(--neutral-white);
	cursor: not-allowed;
}

/* Flex fill to take up remaining space */
.flex-fill {
	flex: 1 1 auto;
}

/* Right-align the btn-right when it's the only button */
.button-group {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.btn-right {
	/*margin-left: auto;
	 Pushes to the right */
	text-align: right;
}

.btn-center,
.btn-cancel {
	text-align: center;
}

.btn-left {
	text-align: left;
}

@media (max-width: 1178px) {
	.btn-left, .btn-center, .btn-right, .btn-cancel {
		text-align: center;
	}
}

/* Forms */
form {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

fieldset p,
fieldset div {
	display: flex;
	align-items: flex-start;
}
.date-dropdowns {
	margin-top: 20px;
}

input[type="radio"],
input[type="checkbox"] {
	margin-right: 6px;
	margin-top: 6px;
	margin-bottom: auto;
}

legend {
	font-size: 1em;
	margin-bottom: 0.5rem;
}

label {
	display: inline-block;
	cursor: pointer;
	/* Adds a pointer to improve UX */
}

label,
select,
button {
	margin: 0;
}

div input[type="checkbox"],
div label {
	display: inline-block;
	/* Keeps checkbox and label on the same line */
}

.input-below {
	display: block;
	/* Forces the input box to appear on the next line */
	margin-top: 0.5em;
	/* Optional: Adds spacing above the input box */
}

fieldset {
	width: 100%;
}

/* DELETE AS NEEDED */
.form-login,
.form-address,
.form-email,
.form-demographic,
.form-hardship,
.form-map,
.form-disqualify {
	margin-bottom: 20px;
}

.form-group {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 10px 0 10px 10px;
	border-radius: 0;
}
/*
	.form-group:first-child {
		padding-left: 0;
	}
*/

.form-login .form-group {
	padding-left: 10px;
	flex-direction: unset;
}

.form-group label {
	display: block;
	margin-bottom: 5px;
}

.form-group input {
	padding: 10px;
	border-radius: 0px;
}

.form-group select {
	padding: 10px;
	border: 1px solid var(--neutral-gray) !important;
	border-radius: 0px;
}

.form-control {
	display: flex;
	/* Sets a flexible layout */
	flex-wrap: wrap;
	/* Allows wrapping of child elements */
	width: 100%;
	/* Ensures the element spans the full width of its container */
	padding: 10px;
	/* Adds internal spacing */
	font-size: 16px;
	/* Sets the font size */
	border: 2px solid var(--neutral-gray);
	/* Defines a light gray border */
	border-radius: 4px;
	/* Adds rounded corners */
	box-sizing: border-box;
	/* Includes padding and border in the element's total width and height */
	transition: border-color 0.3s ease, background-color 0.3s ease;
	/* Adds smooth transitions for interactivity */
}

	/* Bootstrap Overrides */
	.form-control.is-invalid,
	.was-validated .form-control:invalid {
		border-color: var(--accent-red);
		/* Custom border color for invalid input */
		padding-right: 0;
		/* Resets padding on the right */
		background-image: none;
		/* Removes invalid state background image */
		background-repeat: unset;
		/* Resets background repeat */
		background-position: unset;
		/* Resets background position */
		background-size: unset;
		/* Resets background size */
	}

/* Input fields with errors */
.is-invalid {
	border-color: var(--accent-red);
	/* Error border */
	background-color: var(--accent-lightred);
	/* Light red background */
}

/* Reserve space for error messages */
.invalid-feedback {
	min-height: 1rem;
	/* Reserve space for the error message */
	display: block;
	/* Keep the element in the flow */
	visibility: hidden;
	/* Hide the error message but keep its space */
	color: var(--accent-red);
	/* Error text color */
	margin-top: 4px;
}

.is-invalid + .invalid-feedback {
	visibility: visible;
	/* Show the error message */
}

.text-danger,
.text-required,
.invalid-feedback,
.error-message {
	color: var(--accent-red);
}

.text-required {
	margin-right: 5px;
}

	.small {
		margin-top: 10px;
	}

.text-callout {
	color: var(--primary-green);
}

fieldset textarea {
	margin-bottom: 24px;
}

.form-container,
.feedback-container {
	display: flex;
	flex-wrap: wrap;
	/*padding: 2rem; removed to lign up map view button*/
	margin: 1rem auto;
	/* Center-aligns container with top/bottom margin */
}

.form-item {
	flex: 1;
	min-width: 200px;
	/* Adjust this value based on your preference */
	margin: 10px;
}

.zip-link {
	margin-left: 10px;
	white-space: nowrap;
}

.courtselect {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Adjust spacing between items */
}

.interactive-map img {
	margin-top: 20px;
}

.map-buttons {
	display: flex;
	flex-wrap: wrap;
}

textarea {
	display: block;
	/* Ensures the text area occupies its own row */
	width: 100%;
	/* Makes the text area responsive */
	padding: 10px;
	/* Adjusted to a single padding declaration */
	border: 1px solid var(--neutral-gray);
	/* Sets a neutral border */
	border-radius: 0;
	/* Rounded corners are disabled */
	resize: vertical;
	/* Allows vertical resizing only */
	box-sizing: border-box;
	/* Ensures padding and border are included in width/height calculations */
}

.text-area-group,
.feedback-options {
	margin-bottom: 1.5rem;
}

.feedback-container textarea:focus {
	border: 1px solid var(--neutral-gray) !important;
	border-radius: 0px !important;
}

.feedback-container textarea:focus-visible {
	border: 1px solid var(--neutral-gray) !important;
	border-radius: 0px !important;
}

.feedback-options label {
	margin-right: 1rem;
	/* Keep consistent spacing between options */
}

/* Style the dropdown itself */
.form-section,
.full {
	width: 100%;
}

select {
	padding: 10px;
	border-radius: 5px;
	background-color: var(--neutral-white);
	font-size: 16px;
	color: var(--neutral-black);
}

	/* Style individual options */
	select option {
		padding: 10px;
		background-color: var(--neutral-lightgray);
		color: var(--neutral-black);
	}

/* Cards */
.card {
	display: flex;
	justify-content: center;
	/* Centers items horizontally */
	align-items: center;
	/* Centers items vertically, if needed */
	background-color: var(--neutral-white);
	padding: 20px;
	border-radius: 0px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	width: fit-content;
}

.card.thumb {
	margin: 18px;
}

	.card h3 {
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.card p {
		margin-bottom: 0;
	}

.thumb a {
	text-align: center;
}

.thumb img {
	width: auto;
	height: auto;
}

/* First Column */
.signin {
	height: auto;
	margin-bottom: 20px;
	max-width: 400px;
	min-width: 355px;
	flex: 1; /* Enables flexible sizing within a flex container */
	padding: 20px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Second Column (Cards) */
.signin-cards {
	flex: 2;
	min-width: 500px;
}

	.signin-cards > div:first-child {
		flex: 1;
		/* Takes up all available space */
		width: 100%;
		/* Ensures it spans the entire width */
		display: block;
		/* Resets any inline or flex settings that may affect width */
		flex-grow: 1;
		flex-basis: 100%;
	}

.row.mobile-center {
	display: flex;
	flex-wrap: wrap;
	/* Allows items to wrap to the next row */
	gap: 15px;
	/* Adds space between the cards */
	justify-content: space-evenly;
	/* Ensures cards are spaced evenly */
	align-items: flex-start;
	/* Aligns items to the top */
}

.card.thumb.item-thumb {
	flex: 1 1 calc(33.33% - 30px);
	/* Adjusts the card width dynamically (three per row) */
	max-width: 250px;
	/* Prevents cards from becoming too wide */
	box-sizing: border-box;
	/* Includes padding and border in width calculation */
	padding: 10px;
	text-align: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	width: 170px;
	/* Explicit width, though this may conflict with flex-grow */
	height: fit-content;
}

.signin div.form-group {
	padding-left: 0;
	padding-right: 0;
}

	.signin div.form-group:first-child {
		padding-left: 0;
	}

/* Calendar Widget */
/* Calendar Container */
.container-calendar {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding-top: 20px;
}

/* Calendar Content */
.calendar-container {
	width: 100%;
	width: 100%;
	max-width: 100%; /* Prevent overflow */
	box-sizing: border-box; /* Includes padding/border in width */
	margin: 20px auto;
	padding: 10px;
	border: 1px solid var(--neutral-darkgray);
	border-radius: 0;
	background-color: #f9f9f9;
}

/* Calendar Header */
.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-weight: bold;
}

/* Grid Layout */
.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.25rem;
	text-align: center;
	max-width: 100%;
	overflow-x: auto;
}

	.calendar-grid [role="row"] {
		display: contents; /* Accessibility without layout disruption */
	}

/* Days Header Row */
.calendar-days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	margin-bottom: 10px;
}

/* Date Cells */
.calendar-container .date,
.calendar-grid .date,
.calendar-grid .spacer {
	padding: 20px;
	text-align: center;
	min-width: 2rem;
	min-height: 2rem;
	cursor: pointer;
	border-radius: 0;
	white-space: nowrap;
}

/* Disabled Dates */
.calendar-container .disabled {
	color: var(--neutral-darkgray);
	text-decoration: line-through;
	background-color: var(--neutral-gray);
	cursor: not-allowed;
}

	.calendar-container .disabled:hover {
		outline: none;
	}

/* Selected Date */
.calendar-container .selected {
	background-color: var(--primary-blue);
	color: var(--neutral-white);
}
/* Responsive Calendar Widget */
@media (max-width: 600px) {

	.container-calendar {
		flex-direction: column;
		/* Stacks content vertically */
	}

		.container-calendar .card {
			padding: 10px;
		}

	.calendar-grid {
		gap: 2px;
	}

	.calendar-container .date {
		padding: 7px;
	}
}

@media (max-width: 796px) {
	.calendar-widget-notice {
		flex-direction: column;
	}

		.calendar-widget-notice > div:nth-child(1) {
			padding-bottom: 10px;
		}
}

/* Buttons */
.calendar-container button {
	background-color: var(--secondary-blue);
	color: var(--primary-blue);
	border: 1px solid var(--primary-blue);
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 0;
}

	.calendar-container button:focus {
		outline: 1px solid var(--primary-blue);
	}

.calendar-container .date:hover {
	outline: 1px solid var(--primary-blue);
}

/* Notices & Responsive Layout */
.calendar-widget-notice {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100% !important;
}

	.calendar-widget-notice div {
		flex: 1 1 calc(50% - 10px);
		box-sizing: border-box;
	}

/* Additional Containers */
.key-container,
.dates-container {
	margin-top: 20px;
}

.calendar-grid .date,
.calendar-grid .spacer {
	min-width: 2rem;
	max-width: 100%;
	word-wrap: break-word;
}

@media (max-width: 768px) {
	.calendar-container .date,
	.calendar-container button,
	.calendar-grid .date,
	.calendar-grid .spacer {
		padding: 0.75rem;
		font-size: 1rem;
		min-width: 2rem;
		min-height: 2rem;
	}

	.calendar-header button {
		padding: 0.5rem 0.75rem;
		font-size: 1rem;
	}
}

/* Grid */
.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	width: unset;
}

.col {
	flex: 1;
	padding: 0 10px;
}

/* Flexbox */
.justify-content-center {
	justify-content: center;
}

.justify-content-between {
	justify-content: space-between;
}

.justify-content-right {
	display: flex;
	justify-content: flex-end;
	/* Aligns items to the right */
}

.align-items-center {
	align-items: center;
}

.flex {
	display: flex;
	justify-content: space-between;
}

.flex-center {
	display: flex;
	justify-content: center;
	/* Horizontally center */
	align-items: center;
	/* Vertically center */
}

.flex-column {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-item {
	flex: 1;
}

.flexbox {
	flex: 1;
	/* Each flexbox will take up equal space */
	padding-top: 0;
}

.wide {
	flex: 2;
	/* Make the first flexbox twice as wide */
}

.container-court {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.courthouses {
	margin-bottom: 20px;
	margin-top: 20px;
	text-align: center;
	/* Centers inline elements like text or images inside this class */
}

.items_court {
	display: flex;
	justify-content: center;
	align-items: center;
}

.container-service-details {
	width: 100%;
	/* Ensures the container takes the full width of the page */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	/* Aligns items to the top */
	flex-wrap: wrap;
	/* Allows items to wrap on smaller screens */
	margin-top: 18px;
	margin-bottom: 18px;
}

	.container-service-details div {
		padding-left: unset;
	}

.info {
	display: block;
	margin-bottom: 10px;
	/* Optional: Adds space between each block */
}

.post {
	display: flex;
	justify-content: center;
}

	.post img {
		max-width: 100%;
		height: auto;
	}

/* Style the dropdown */
.dropdown {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--neutral-gray);
	border-radius: 5px;
	background-color: var(--neutral-white);
	font-size: 16px;
	color: var(--neutral-black);
}

#dropdown option {
	background-color: var(--neutral-lightgray);
	color: var(--neutral-black);
}

.item-thumb {
	text-align: center;
}

	.item-thumb img {
		display: block;
		margin: 0 auto;
	}

.item-center {
	justify-content: center;
	align-items: center;
}

/* Show Hide */
.desktop-hide {
	display: none;
	/* Hide on desktop by default */
}

/* Pop Up */
.popup {
	display: none;
	/* position: fixed; */
	/* remove to show below link */
	/* top: 0;
    left: 0; */
	min-width: 200px;
	max-width: 100%;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	background-color: var(--neutral-white);
}

.popup-content {
	padding: 20px;
	border-radius: 0;
	text-align: left;
	position: relative;
}

.close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	color: var(--primary-blue);
	border-style: solid;
	border-width: 1px;
	border-color: var(--primary-blue);
	background-color: var(--secondary-blue);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

	.close-btn:hover {
		background-color: var(--primary-blue);
		color: var(--neutral-white);
		border-color: var(--primary-blue);
	}

.map_driving,
.popup {
	margin-bottom: 10px;
}

.flex-row-container {
	width: 100%;
	/* Ensures the container takes the full width of the page */
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.flex-row-item {
	flex: 1;
	margin: 5px;
}

/* Responsive Design /  Media Queries */

/* Large desktops (1200px and up) */
@media (min-width: 1200px) {
	/* Styles for desktops */
	.content {
		padding: 0 40px 20px;
	}
}

/* Medium laptops (992px to 1199px) */
@media (max-width: 1199px) {
	/* Styles for medium laptops */

	}

/* Small laptops (768px to 991px) */
@media (max-width: 992px) {

	/* Styles for small laptops */
	/* Responsive font sizes */
	h1 {
		font-size: 2.25rem;
		/* 36px */
	}

	h2 {
		font-size: 2rem;
		/* 32px */
	}

	h3 {
		font-size: 1.75rem;
		/* 28px */
	}

	h4 {
		font-size: 1.5rem;
		/* 24px */
	}

	h5 {
		font-size: 1.25rem;
		/* 20px */
	}
}

	@media (max-width: 800px) {
		.between {
			width: 100%;
			justify-content: flex-start;
		}

		.holder-name,
		.holder-badge,
		.holder-progressbar,
		.status-last-name,
		.status-first-name, .progress-bar {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			/* Aligns items vertically */
			width: 100%;
			text-align: center;
			flex-wrap: wrap;
			flex-direction: column;
			margin-left: unset;
		}

		.button-group {
			justify-content: center;
		}

		.btn-right,
		.btn-center,
		.btn-cancel,
		.btn-left {
			padding-left: 10px;
			padding-right: 10px;
		}
	}

	/* Tablets (576px to 767px) */
	@media (max-width: 767px) {

		/* Styles for tablets */

		.content2 {
			margin-left: auto;
			margin-right: auto;
		}

		.content3 {
			margin-left: auto;
			margin-right: auto;
		}

		.headline2-container {
			align-items: center;
		}

		.container-login {
			align-items: center;
		}

		.first-name,
		.last-name,
		.service-change-notice,
		.service-disqualified-notice {
			justify-content: center;
			/* Center items horizontally */
		}

		.container-service-details {
			justify-content: center;
			/* Centers the content */
			text-align: center;
			/* Centers text inside the container */
		}

		.service-change-notice {
			order: 2;
			margin-bottom: 18px;
		}

		.service-change {
			order: 3;
		}

		.service-details {
			order: 1;
		}

		.form-group {
			padding-left: 0;
		}

		.signin.form-group {
			padding-left: 10px;
		}

		.signin-cards {
			flex-direction: column;
			flex: 2;
			min-width: unset;
		}

		.card.thumb.item-thumb {
			flex: 1 1 calc(50% - 20px);
			/* Two cards per row */
		}

		.signin {
			min-width: auto;
		}
	}

	/* Media View Special up to 600px */

	@media (max-width: 600px) {
		.container-thumbnails {
			justify-content: center;
		}

			.container-thumbnails .thumbnail {
				flex-grow: 0;
				flex-basis: auto;
				width: 100%;
				/* Ensures thumbnails are centered and occupy full width on mobile */
				max-width: 300px;
				/* Optional: set a max width for thumbnails on mobile */
			}

		/* Show Hide */
		.desktop-hide {
			display: block;
			/* Show on mobile */
		}
	}

	/* Small devices (phones, up to 500px) */
	@media (max-width: 500px) {

		/* Styles for phones */
		/* Responsive font sizes */
		h1 {
			font-size: 2rem;
			/* 32px */
		}

		h2 {
			font-size: 1.75rem;
			/* 28px */
		}

		h3 {
			font-size: 1.5rem;
			/* 24px */
		}

		h4 {
			font-size: 1.25rem;
			/* 20px */
		}

		h5 {
			font-size: 1rem;
			/* 16px */
		}

		.btn-small {
			font-size: 16px;
		}

		/* Responsive Flex */
		.container {
			flex-wrap: wrap;
			/* Enable wrapping on mobile */
			justify-content: center;
			/* Center content on mobile */
			padding: 0 0;
		}

		.content {
			padding: 0 10px 20px;
			box-sizing: border-box;
			/* Ensures padding is included in width/height calculations */
			min-height: unset;
		}

		.flexbox {
			flex: 1 1 100%;
			/* Each flexbox will take up full width */
			text-align: center;
			/* Center text on mobile */
			padding: unset;
		}

		ul,
		ol {
			padding-left: 20px;
		}

		.links ul {
			margin-bottom: 0;
		}

		div.popup {
			margin-bottom: 20px;
		}

		.links li {
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
		}

		.content3 {
			margin-top: unset;
		}

		.interactive-map img {
			display: none;
		}

		.container-court {
			display: flex;
			/* Necessary for justify-content to work */
			justify-content: center;
			/* Centers child elements horizontally */
			align-items: center;
			/* Optionally centers child elements vertically */
		}

		.mobile-center,
		.text-center {
			width: 100%;
			display: flex;
			justify-content: center;
		}

		.card.thumb.item-thumb {
			flex: 1 1 100%;
			/* One card per row */
		}
	}

	/* J9 Testing */

	.j91 {
		color: hotpink;
		background-color: pink;
	}

	.j92 {
		color: orange;
		background-color: orangered;
	}

	.j93 {
		color: red;
		background-color: rebeccapurple;
	}

	.j94 {
		color: green;
		background-color: lawngreen;
	}