/* Styles for Account Information page on External site */

.account-information-page {
	font-family: Poppins, Arial, Helvetica, sans-serif;
	margin: 24px;
	color: #1f2d3d;
}

.account-information-page .info-label-value {
	background-color: #f3f2f1;
	border: 7px solid #f3f2f1;
	border-radius: 18px;
	padding: 6px 20px;
	display: inline-block;
	font-weight: 600;
	font-size: 16px;
	min-width: 120px;
	color: #005289;
}

.account-information-page .collapsible-container {
	width: 100%;
	max-width: none;
	/* remove cap */
	margin: 20px 0;
	/* no horizontal centering */
	border: 1px solid #ccc;
	border-radius: 8px;
}

.account-information-page .columnBlockLayout {
	width: 100%;
}

/* ensure parent spans its container */


.account-information-page .collapsible-header {
	background-color: #0066b3;
	color: white;
	padding: 10px 15px;
	display: flex;
	align-items: center;
	font-weight: 600;
	cursor: pointer;
	border-radius: 8px;
}

.account-information-page .collapsible-sub-header {
	background-color: white;
	color: #0066b3;
	padding: 10px 15px;
	display: flex;
	align-items: center;
	font-weight: 600;
	cursor: pointer;
}


.account-information-page .arrow {
	margin-right: 10px;
	transition: transform 0.3s ease;
}

.account-information-page .arrow.rotate {
	transform: rotate(90deg);
}

.account-information-page .collapsible-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.account-information-page .collapsible-content.open {
	max-height: 7000px;
	padding: 25px;
}

.account-information-page .project-title {
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: #005289;
	margin-bottom: 25px;
}

.account-information-page .overview-grid {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 40px;
}

.account-information-page .info-block {
	text-align: center;
	flex: 1 1 180px;
}

.account-information-page .info-label {
	font-weight: 600;
	color: #005289;
	margin-bottom: 8px;
	font-size: 16;
}

.account-information-page .info-value {
	background-color: #f3f2f1;
	border-radius: 20px;
	padding: 10px 18px;
	font-weight: 600;
	font-size: 16px;
	display: inline-block;
	margin-top: 5px;
}

.account-information-page .status-active {
	background-color: #8CD211;
	color: white;
}

.account-information-page .lower-section {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
}

.account-information-page .contact-column {
	background-color: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	padding: 20px;
	flex: 2;
	min-width: 300px;
}

.account-information-page .grant-column {
	background-color: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	padding: 20px;
	flex: 1;
	min-width: 240px;

}

.account-information-page .quick-actions-column {
	background-color: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 8px;
	padding: 20px;
	flex: 1;
	min-width: 240px;
}

.account-information-page .contact-column h4,
.account-information-page .grant-column h4 {
	color: #005289;
	margin: 16px 0 6px;
}

.account-information-page .contact-column p,
.account-information-page .grant-column p {
	font-size: 10px;
	margin-bottom: 10px;
}

.account-information-page .contact-name {
	background-color: #eee;
	padding: 6px 12px;
	border-radius: 6px;
	display: inline-block;
	margin-bottom: 8px;
}

.account-information-page .email-button {
	border: 1px solid #000;
	background-color: white;
	padding: 5px 12px;
	cursor: pointer;
	font-weight: 500;
}

.account-information-page .quick-actions-column h3 {
	text-align: center;
	color: #005289;
	font-size: 18px;
	margin-bottom: 15px;
}

.account-information-page .quick-actions-column button {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 10px;
	background-color: #0066b3;
	color: white;
	font-weight: 600;
	border: none;
	border-radius: 5px;
	font-size: 14px;
	cursor: pointer;
}

.account-information-page .quick-actions-column button:hover {
	background-color: #004f8a;
}

.account-information-page .officer-grid {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.account-information-page .officer-box {
	flex: 1;
	min-width: 200px;
}

.account-information-page .officer-box h4 {
	color: #005289;
	margin-bottom: 8px;
}

.account-information-page .contact-name {
	background-color: #eee;
	padding: 6px 12px;
	border-radius: 6px;
	display: inline-block;
	margin-bottom: 10px;
	font-weight: 500;
}

.account-information-page .email-button {
	border: 1px solid #000;
	background-color: white;
	padding: 6px 14px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
}

.account-information-page {
	--blue: #005289;
	--blue-cta: #0066b3;
	--card: #f7f9fc;
	--border: #cfd9e3;
}

.account-information-page .page {
	max-width: 1100px;
	margin: 0 auto;
}

/* headings */
.account-information-page .section-title {
	color: var(--blue);
	font-weight: 600;
	margin: 18px 0 8px;
	letter-spacing: .5px;
}

/* account name pill */
.account-information-page .account-pill {
	border: 2px solid var(--border);
	border-radius: 10px;
	padding: 12px 16px;
	font-weight: 600;
	color: var(--blue);
	background: #fff;
}

/* grid */
.account-information-page .grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

@media (max-width: 860px) {
	.account-information-page .grid-2 {
		grid-template-columns: 1fr;
	}
}

/* card */
.account-information-page .card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 18px 20px;
}

/* definition rows */
.account-information-page .dl {
	display: grid;
	grid-template-columns: 180px 1fr;
	row-gap: 10px;
	column-gap: 8px;
}

.account-information-page .dl .dt {
	color: var(--blue);
	font-weight: 600;
}

.account-information-page .dl .dd {
	color: #2b3a4a;
}

/* right info card */
.account-information-page .info-box {



	font-family: Poppins;
	font-size: 14px;
	font-weight: 400;
	color: var(--portalThemeColor1);

}

.account-information-page .info-box p {
	margin: 0 0 16px;
	color: #2b3a4a;
}

.account-information-page .btn {
	display: inline-block;
	background: var(--blue-cta);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 6px;
}

.account-information-page .subtle {
	margin-top: 18px;
	color: var(--blue);
	font-weight: 600;
}


/* center the whole card’s content */
.account-information-page .card.info-center {
	text-align: center;
}

/* keep button only as wide as its text and centered */
.account-information-page .card.info-center .btn {
	display: inline-block;
	width: auto !important;
	/* defeat any global 100% width */
	white-space: nowrap;
	/* keep text on one line */
	padding: 10px 16px;
	margin: 10px auto 14px;
	/* center horizontally */
	border-radius: 6px;
	background: var(--blue-cta);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

/* layout */
.account-information-page .fx-form {
	max-width: 100%;
	font-family: Poppins, Arial, sans-serif;
}

.account-information-page .fx-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 12px 0;
	flex-wrap: wrap;
}

/* keep label width consistent so fields line up */
.account-information-page .info-label {
	color: #005289;
	font-weight: 700;
	min-width: 220px;
	max-width: 220px;
	flex: 0 0 auto;
	/*fixed label column */
}

.account-information-page .info-label-wide {
	color: #005289;
	font-weight: 700;
	min-width: 220px;
	max-width: 600px;
	flex: 0 0 auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	/* ensure margin applies reliably */
	margin-bottom: 12px;
	/* <-- adds the space */
}



/* unified field look for BOTH div.fx-input and input.fx-input */
.account-information-page .fx-input,
.account-information-page input.fx-input {
	flex: 1 1 auto;
	padding: 12px 14px;
	border: 2px solid #2b7bbf;
	border-radius: 10px;
	background: #f5f8fb;
	color: #3a4a5a;
	font-size: 16px;
	box-sizing: border-box;
}

/* same height for both flavors */
.account-information-page .fx-input {
	/* the DIV version */
	display: flex;
	align-items: center;
	height: 44px;
}

.account-information-page input.fx-input {
	/* the INPUT version */
	height: 44px;
	line-height: 1.2;
}

/* Responsive fix for definition list (dl grid) */
.account-information-page .dl {
	display: grid;
	grid-template-columns: 180px 1fr;
	row-gap: 10px;
	column-gap: 8px;
}

.account-information-page .dl .dt {
	color: var(--blue);
	font-weight: 600;
}

.account-information-page .dl .dd {
	color: #2b3a4a;
	word-break: break-word;
	/* prevent long URLs/emails from overflowing */
}

/* Mobile responsiveness */
@media (max-width: 600px) {
	.account-information-page .dl {
		grid-template-columns: 1fr;
		/* stack label and value */
	}

	.account-information-page .dl .dt {
		margin-bottom: 4px;
	}

	.account-information-page .dl .dd {
		margin-bottom: 12px;
	}
}

/* Container for multiple cards */
.account-information-page .grant-cards-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
}

/* Individual card */
.account-information-page .grant-card {
	flex: 1 1 31%;
	max-width: 31%;
	min-width: 280px;
	background-color: #f5fafd;
	border-radius: 12px;
	border: 1px solid #ccc;
	padding: 16px;
	font-family: Poppins, sans-serif;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

/* Header */
.account-information-page .grant-card-header {
	background-color: #004b80;
	text-align: center;
	border-radius: 8px 8px 0 0;
}

.account-information-page .grant-card-header h5 {
	margin: 0;
	color: white;
	padding: 8px 12px;
}

/* Row items */
.account-information-page .grant-card-row {
	display: flex;
	margin-bottom: 8px;
	flex-wrap: wrap;
	/* allows wrapping on small screens */
}

.account-information-page .grant-label {
	min-width: 100px;
	font-weight: 600;
	color: #0056a3;
}

.account-information-page .grant-value {
	padding-left: 2ch;
	font-size: small;
	color: #333;
}

/* Footer */
.account-information-page .grant-card-footer {
	text-align: center;
	margin-top: auto;
}

.account-information-page .grant-button {
	background-color: #0066b3;
	color: white;
	padding: 6px 12px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.account-information-page .grant-button:hover {
	background-color: #004f8a;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
	.account-information-page .grant-card {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.account-information-page .grant-card-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.account-information-page .grant-label {
		margin-bottom: 4px;
	}
}