@import url('open.iconic/font/css/open-iconic-bootstrap.min.css');

/* Color Definitions */
:root {
	--psi-palliser-green: #2B4C24;
	--psi-palliser-green-hover: #25421f;
	--psi-mid-green: #2BA84A;
	--psi-grey: #E8EAE6;
	--psi-light-grey: #E4E4E4;
	--psi-dark-grey: #696969;
	--psi-cream: #FFF8E8;
	--psi-palliser-gold: #E4A400;
	--psi-white: #FFFFFF;
	--psi-light-blue: #BBDEF0;
	--psi-text-black: #000000;
	--psi-text-green: #2B4C24;
	--psi-text-white: #FFFFFF;
}

html, body {
	font-family: Elza, 'Proxima Nova', 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif !important;
	font-size: 16px;
	color: var(--psi-text-black);
	background-color: var(--psi-palliser-green) !important;
	overflow: auto !important;
}

.page {
	margin: 0;
}

.content {
	background-color: var(--psi-white) !important;
}

.content-body {
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	gap: 1rem;
	margin-bottom: 150px;
}

/* Shared security-card layout (SignIn / ForgotPassword / ResetPassword / PasswordReset / ResetPasswordSent).
	 These were previously scoped to SignIn.razor.css, which left every other security page's card
	 full-width and un-centered inside the flex .content-body.
	 Uses .card.cw-480 (not bare .cw-480) so it outranks the later `.card { width: 320px }`
	 rule in this file; a bare selector ties on specificity and loses on source order. */
.card.cw-480 {
	max-width: 480px;
	width: 100%;
	margin-top: 150px;
	margin-bottom: 150px;
}

.card.cw-720 {
	max-width: 720px;
	width: 100%;
	margin-top: 60px;
	margin-bottom: 60px;
}

.captcha-line {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.captcha-image {
	display: inline-flex;
	border: 1px solid var(--psi-grey);
	border-radius: 6px;
	line-height: 0;
}

.captcha-refresh {
	min-width: 40px;
	padding: 4px 10px;
}

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

.card-head {
	border-bottom: 1px solid rgba(0, 0, 0, 0.17);
	padding: 16px;
	text-align: center;
	background-color: var(--psi-white);
}

.signIn-form {
	padding: 16px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Paralucent, Elza, 'Proxima Nova', 'Segoe UI', Helvetica, 'Droid Sans', Tahoma, Geneva, sans-serif;
	color: var(--psi-palliser-green);
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 0;
}

h4 {
	margin-bottom: 10px; 
}

.valid.modified:not([type=checkbox]) {
		outline: 1px solid #26b050;
}

.invalid {
		outline: 1px solid red;
}

.validation-message {
		color: red;
}

.button-link {
		text-decoration: unset;
}

#blazor-error-ui {
		background: lightyellow;
		bottom: 0;
		box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
		display: none;
		left: 0;
		padding: 0.6rem 1.25rem 0.7rem 1.25rem;
		position: fixed;
		width: 100%;
		z-index: 1000;
}

		#blazor-error-ui .dismiss {
				cursor: pointer;
				position: absolute;
				right: 0.75rem;
				top: 0.5rem;
		}

.text-wrap {
		text-wrap: wrap;
}

.h-700 {
		height: 700px;
}

.form-control {
	line-height: 1;
	height: 40px;
	min-height: 40px;
	border-radius: 0.5rem;
	border-color: var(--psi-palliser-green);
}

.form-spaced {
	margin-top: 20px;
	margin-bottom: 20px;
}

.form-spaced-bottom {
	margin-bottom: 20px;
}

.form-label {
	margin-top: .5rem;
	margin-bottom: .3rem;
	padding-left: 3px;
}

.form-button {
		margin-right: 10px;
}

.form-help {
	font-size: 0.75em;
	color: grey;
}

div.upgradeMessage {
		font-size: 12px;
		font-weight: bold;
		text-align: left;
		margin-top: 20px;
		margin-bottom: 20px;
}

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

div.mw-1000 {
		max-width: 1000px;
}

.dropArea {
		border: 2px dashed gray;
		border-radius: 15px;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: lightgray;
		font-size: 1.5rem;
		cursor: pointer;
		position: relative;
		min-height: 150px;
		max-width: 800px;
}

		.dropArea:hover {
				background-color: antiquewhite;
				color: #333;
		}

		.dropArea input[type=file] {
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
				cursor: pointer;
		}

.dropAreaDrug {
		background-color: darkgray;
}

.upload-row {
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 10px;
}
.status-cards-horizontal {
		display: flex;
		gap: 20px;
		flex-wrap: wrap;
}

.status-card {
		cursor: pointer;
		border: 2px solid #ddd;
		border-radius: 12px;
		background: #fff;
		padding: 20px;
		min-width: 280px;
		flex: 1 1 30%;
		box-shadow: 0 2px 8px rgba(0,0,0,.12);
		transition: transform .12s, box-shadow .12s, opacity .12s, filter .12s;
}

		.status-card:hover {
				transform: translateY(-2px);
				box-shadow: 0 4px 12px rgba(0,0,0,.18);
		}

		.status-card.is-active {
				outline: 3px solid #222;
				box-shadow: 0 0 0 3px rgba(0,0,0,.05) inset, 0 8px 18px rgba(0,0,0,.18);
		}

.has-selection .status-card.is-muted {
		opacity: .5;
		filter: saturate(.6);
}

.region-us {
		border-left: 8px solid #1976d2;
		background: #e3f2fd;
}

.region-ca {
		border-left: 8px solid #d32f2f;
		background: #ffebee;
}

.region-au {
		border-left: 8px solid #fbc02d;
		background: #fffde7;
}

.region-default {
		border-left: 8px solid #607d8b;
		background: #eceff1;
}

.status-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 600;
		margin-bottom: 10px;
}

		.status-card-header .region {
				display: flex;
				align-items: center;
				gap: 10px;
				font-size: 1.15rem;
		}

.flag-icon {
		width: 32px;
		height: 20px;
		object-fit: cover;
		border: 1px solid #aaa;
		border-radius: 3px;
}

.status-indicator {
		display: inline-flex;
		align-items: center;
		gap: 6px;
}

.status-text {
		font-weight: 600;
}

.badge-region {
		display: inline-block;
		padding: 2px 8px;
		border-radius: 999px;
		font-weight: 600;
		line-height: 1.4;
}

.badge-region-us {
		background: #e3f2fd;
		color: #0d47a1;
		border: 1px solid #1976d2;
}

.badge-region-ca {
		background: #ffebee;
		color: #b71c1c;
		border: 1px solid #d32f2f;
}

.badge-region-au {
		background: #fffde7;
		color: #8d6e00;
		border: 1px solid #fbc02d;
}

.badge-region-default {
		background: #eceff1;
		color: #37474f;
		border: 1px solid #90a4ae;
}



.title {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-bottom: 0.625rem;
}

	.title.title-secondary {
		padding-top: 0.313rem;
		padding-bottom: 0;
		color: var(--bs-secondary-color, var(--DS-color-content-neutral-default-rest));
	}

.title-header-text {
	font-size: 2.5rem;
	line-height: 3rem;
	font-weight: 600;
	letter-spacing: 0rem;
	padding: 0.3125rem 0;
}

.title-content-text {
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 2.5rem;
	letter-spacing: 0rem;
}

.main-content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
}

.block-content {
	width: 31.25rem;
	height: auto;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	max-width: 100%;
}

.icon {
	width: var(--icon-width);
	height: var(--icon-height);
	background-color: currentcolor;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-image: var(--icon-mask-image);
	mask-image: var(--icon-mask-image);
}

.icon-gear {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	mask-image: url('../images/gear.svg');
	-webkit-mask-image: url('../images/gear.svg');
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: contain;
}

.icon-add {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	mask-image: url('../images/add.svg');
	-webkit-mask-image: url('../images/add.svg');
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: contain;
}

.icon-print {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	mask-image: url('../images/print.svg');
	-webkit-mask-image: url('../images/print.svg');
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: contain;
}

.icon-filter {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	mask-image: url('../images/filter.svg');
	-webkit-mask-image: url('../images/filter.svg');
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: contain;
}


/* Card Grid */

.card-grid.dxbl-grid {
	border: none !important;
	background-color: var(--psi-light-grey) !important;
}

.card-grid {
	--card-radius: 10px;
	--card-gap: 6px;
	--card-border: 1px solid #e0e0e0;
	--card-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	--dxbl-grid-cell-border-left-style: none;
	--dxbl-grid-cell-border-right-style: none;
	--dxbl-grid-header-cell-border-left-style: none;
	--dxbl-grid-header-cell-border-right-style: none;
}

.card-grid .dxbl-grid-table-container {
	border: none !important;
}

.card-grid table {
	border-collapse: separate !important;
	border-spacing: 0 var(--card-gap) !important;
}

/* Header row */
	.card-grid thead th {
		background-color: var(--psi-light-grey) !important;
		color: var(--psi-text-black) !important;
		border-top: none !important;
		border-bottom: none !important;
		border-left: none !important;
		border-right: none !important;
		padding: 12px 16px !important;
	}

.card-grid thead th:first-child {
		border-radius: var(--card-radius) 0 0 var(--card-radius) !important;
}

		.card-grid thead th:nth-last-child(2) {
			border-radius: 0 var(--card-radius) var(--card-radius) 0 !important;
		}

	.card-grid thead th:hover {
		background-color: var(--psi-grey) !important;
		opacity: 0.60;
		cursor: pointer;
	}

/* Data rows */
.card-grid tbody tr td {
		background-color: var(--psi-white) !important;
		border-top: var(--card-border) !important;
		border-bottom: var(--card-border) !important;
		border-left: none !important;
		border-right: none !important;
		border-image: none !important;
		outline: none !important;
		padding: 12px 16px !important;
}

.card-grid tbody tr td + td {
		border-left: none !important;
}

.card-grid tbody tr:hover td {
		background-color: var(--psi-palliser-gold) !important;
		opacity: 0.60;
		cursor: pointer;
}

.card-grid tbody tr td:first-child {
		border-left: var(--card-border) !important;
		border-radius: var(--card-radius) 0 0 var(--card-radius) !important;
}

	.card-grid tbody tr td:nth-last-child(2),
	.card-grid tbody tr td:has(+ .dxbl-grid-service-cell) {
		border-right: var(--card-border) !important;
		border-radius: 0 var(--card-radius) var(--card-radius) 0 !important;
	}

.card-grid .dxbl-grid-service-cell {
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		padding: 0 !important;
}

.card-grid thead th:has(+ .dxbl-grid-service-cell) {
		border-radius: 0 var(--card-radius) var(--card-radius) 0 !important;
}


.card-grid-compact {
	--card-radius: 10px;
	--card-gap: 6px;
	--card-border: 1px solid #e0e0e0;
	--card-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	--dxbl-grid-cell-border-left-style: none;
	--dxbl-grid-cell-border-right-style: none;
	--dxbl-grid-header-cell-border-left-style: none;
	--dxbl-grid-header-cell-border-right-style: none;
}

	.card-grid-compact .dxbl-grid-table-container {
		border: none !important;
	}

.card-grid-compact table {
	border-collapse: separate !important;
}

/* Header row */
	.card-grid-compact thead th {
		background-color: var(--psi-light-grey) !important;
		color: var(--psi-text-black) !important;
		border-top: none !important;
		border-bottom: none !important;
		border-left: none !important;
		border-right: none !important;
		padding: 12px 16px !important;
	}

		.card-grid-compact thead th:first-child {
		}

		.card-grid-compact thead th:nth-last-child(2) {
		}

		.card-grid-compact thead th:hover {
			background-color: var(--psi-grey) !important;
			opacity: 0.60;
			cursor: pointer;
		}

/* Data rows */
	.card-grid-compact tbody tr td {
		background-color: var(--psi-white) !important;
		border-top: var(--card-border) !important;
		border-bottom: var(--card-border) !important;
		border-left: none !important;
		border-right: none !important;
		border-image: none !important;
		outline: none !important;
		padding: 12px 16px !important;
	}

		.card-grid-compact tbody tr td + td {
			border-left: none !important;
		}

	.card-grid-compact tbody tr:hover td {
		background-color: var(--psi-palliser-gold) !important;
		opacity: 0.60;
		cursor: pointer;
	}

	.card-grid-compact tbody tr td:first-child {
		border-left: var(--card-border) !important;
	}

	.card-grid-compact tbody tr td:nth-last-child(2),
	.card-grid-compact tbody tr td:has(+ .dxbl-grid-service-cell) {
		border-right: var(--card-border) !important;
	}

	.card-grid-compact .dxbl-grid-service-cell {
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		padding: 0 !important;
	}

	.card-grid-compact thead th:has(+ .dxbl-grid-service-cell) {
	}

card-grid-edit-claimdetail{
	width: 200px;
}

/* Footer */
.footer-wrapper {
	background-color: var(--psi-palliser-green);
	width: 100%;
	text-align: center;
	height: 277px;
}

.footer {
	font-size: 10.0px;
	color: #FFF;
	clear: both;
}

.footer-line {
	margin-top: 50px;
	max-width: 1200px;
	margin: 100px auto 0px auto;
	text-align: left;
}

.footer-left {
	float: left;
}

.footer-right {
	float: right;
}

.footer-left,
.footer-right {
	padding: 15px 24px;
}

.footer-link {
	cursor: pointer;
}

	.footer-link:hover {
		color: #AAC955;
	}

.footer-title {
	width: 400px;
	font-size: 3.9em;
	font-weight: bold;
	padding-top: 30px;
}

.footer-info {
	width: 300px;
	font-size: 1.55em;
}

@media (max-width: 599px) {
	.footer-left,
	.footer-right {
		padding: 16px 4px;
	}

	.footer-title {
		width: 350px;
		font-size: 3em;
	}
}


/* Header */


.header-logo {
	height: 82px;
	width: 198px;
	padding-top: 20px;
	background: none !important;
}


@media (max-width: 599px) {
	.header-logo {
		height: 41px;
		width: 99px;
		padding-top: 0px;
		padding-top: 0px;
	}
}

	.header-menu {
		height: 70px !important;
		background-color: var(--psi-white) !important;
		color: var(--psi-palliser-green);
		border-style: none !important;
		height: 3.13rem;
	}

	.header-menu-items .dxbl-btn {
		color: var(--psi-palliser-green);
	}

	/* Account */
	.account-background {
		width: 100px;
		height: 32px;
		padding-right: 10px;
	}


	.account-empty-image {
		width: 16px;
		height: 16px;
		margin: 8px;
		display: inline-block;
		background: url('../images/user.svg');
	}

	.avatar {
		float: left;
		height: 43px;
		border-radius: 50%;
	}

	.user-info {
		height: 3.13rem;
	}

	.user-info-name {
		color: #444444;
		font-size: 1.14em;
	}

	.user-info-email {
		display: block;
		color: #666666;
		font-size: 0.86em;
	}

	/* Edits */

	.edit-basic {
		height: 40px !important;
		border-radius: var(--dxbl-text-edit-border-radius);
		border-color: var(--psi-palliser-green);
		border-radius: var(--dxbl-text-edit-border-radius);
	}

	.edit-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	.dxbl-text-edit {
		--dxbl-text-edit-border-radius: 0.5rem;
	}


	/* Buttons */

	.button {
		border-radius: 8px !important;
		height: 40px;
		padding: 0px 30px;
		margin: 0px 2px;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		border: none;
		text-transform: none !important;
		box-shadow: none;
	}

.button-basic {
	border-radius: 8px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0px 30px;
	margin: 0px 2px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: none;
	text-transform: none !important;
	box-shadow: none;
}

.button-clear-darkgrey {
	color: #404040 !important;
	background-color: #F4F4F4;
	border: 2px solid #404040;
}

.button-clear-medium {
	color: #2BA84A !important;
	background-color: #F4F4F4;
	border: 2px solid #2BA84A;
}

.button-clear-light {
	color: #AAC955 !important;
	background-color: #F4F4F4;
	border: 2px solid #AAC955;
}

.button-primary {
	color: var(--psi-text-white);
	background-color: var(--psi-mid-green);
}

		.button-primary:hover {
			background-color: var(--psi-palliser-green) !important;
		}

		.button-primary:active {
			background-color: var(--psi-mid-green);
		}

		.button-primary:focus {
			background-color: var(--psi-mid-green);
		}

.button-secondary {
	background-color: var(--psi-white);
	color: var(--psi-palliser-green);
	border: 2px solid var(--psi-palliser-green);
}

	.button-secondary:hover {
		background-color: var(--psi-palliser-green);
		color: var(--psi-white);
	}

.button-primary:active {
	background-color: var(--psi-white);
}

.button-primary:focus {
	background-color: var(--psi-white);
}

.button-crop-action {
	padding: 0px 15px;
}

	.button-center {
		margin-left: auto;
		margin-right: auto;
	}

	.button-sld-med {
		color: #FFFFFF;
		background-color: #2BA84A;
	}

	.button-line-center {
		width: 100%;
		text-align: center;
	}

.buttonGrid {
	/*padding-top: 5px;
	padding-bottom: 5px;*/
	width: 150px;
	height: 24px;
	border-radius: 12px;
	box-shadow: none;
}

.buttonGrid-small {
	width: 100px;
}

.buttonGold {
	background-color: var(--psi-palliser-gold);
	color: #FFF;
	border-radius: 6px;
}

.buttonGreen {
	background-color: #2BA84A;
	color: #FFF;
}

	/* Link */
	a {
		color: #2B4C24;
	}

		a:visited {
			color: #2BA84A; /* 25% black overlay */
		}

		a:hover {
			color: #AAC955; /* 35% white overlay */
		}

	/* Icons */

	.editor-icon {
		width: 16px;
		height: 16px;
		background-size: contain;
		background-repeat: no-repeat;
		display: block;
	}

	.editor-icon-search {
		background-image: url('/images/search.svg');
	}

.dxbl-dropdown-body {
	min-width: 180px;
}

	.dxbl-dropdown-body .dxbl-btn-text {
		font-size: 1rem;
		padding: 6px 12px;
	}
	.dxbl-dropdown-body.dxbl-dropdown-items-container .dxbl-btn-text {
		font-size: 1rem;
		padding: 6px 12px;
	}





.progress-line {
	clear: both;
	width: 100%;
}

.progress-section {
	width: 24%;
	height: 20px;
	float: left;
}

.progress-section-half {
	width: 12%;
	height: 20px;
	float: left;
}

.progress-space {
	width: 1%;
	height: 20px;
	float: left;
}

.progress-incomplete {
	background-color: #C4C4C4;
}

.progress-complete {
	background-color: #2B4C24;
}

/* progress label row — no fixed height so text isn't clipped */
.progress-line + .progress-line .progress-section {
	height: auto;
	font-size: 13px;
	text-align: center;
	padding-top: 4px;
	color: var(--psi-text-green);
}

/* quote/claim page two-column layout */
.policy-content {
	clear: both;
	width: 100%;
	padding-top: 40px;
}

.policy-content::after {
	content: "";
	display: table;
	clear: both;
}

.policy-left {
	float: left;
	width: 60%;
	max-width: 650px;
	min-width: 300px;
}

.policy-right {
	float: right;
	width: 40%;
	max-width: 450px;
	min-width: 300px;
}

.policy-info {
	width: 80%;
	background-color: var(--psi-cream);
	color: var(--psi-text-green);
	border-radius: 10px;
	padding: 20px;
}

.policy-info-header {
	font-weight: 500;
	font-size: 20px;
	border-bottom: 1px solid var(--psi-palliser-green);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.policy-fast-button {
	font-weight: 500;
	font-size: 16px;
	border-bottom: 1px solid var(--psi-palliser-green);
	width: 100%;
	padding-top: 25px;
	padding-bottom: 25px;
	background-image: url("../Images/arrow-right.svg");
	background-size: 24px;
	background-position: right center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.policy-fast-button-noborder {
	border-bottom: none;
}

.totals-combo .dxbl-input-editor-content,
.totals-combo .dxbl-edit-input-container,
.totals-combo input {
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 4px !important;
	font-size: inherit !important;
	color: inherit !important;
	height: auto !important;
	min-height: unset !important;
}

.deductible-group {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.deductible-group .deductible-button {
	width: 120px;
	height: 100px;
	border: 1px solid #404040;
	background-color: #fff !important;
	border-radius: 5px;
	cursor: pointer;
	color: #404040;
	font-size: 16px;
	font-weight: 500;
	padding: 8px;
	box-shadow: none;
	line-height: 1.3;
}

.deductible-group .deductible-button:hover {
	background-color: #f0f4f0 !important;
	border-color: var(--psi-palliser-green);
}

.deductible-group .deductible-button-checked {
	background-color: #2B4C24 !important;
	color: #e0e0e0;
	border-color: #2B4C24;
}


@media(max-width:599px) {

	.progress-section {
		font-size: 14px;
	}

	.policy-left {
		float: none;
		width: 100%;
	}

	.policy-right {
		float: none;
		width: 100%;
		margin: 30px 0px;
	}

	.policy-info {
		width: 300px;
	}

	.policy-fast-button {
		font-weight: unset;
		border-bottom: none;
		width: 300px;
		padding-top: 15px;
		padding-bottom: 5px;
		background-size: 20px;
	}
}

.form-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
}

.form-actions-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.form-actions-center {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.space-bottom {
	margin-bottom: 1rem;
}

.toolbar-content {
	display: flex;
	justify-content: start;
	margin-top: 1rem;
}

.toolbar-content-right {
	display: flex;
	justify-content: end;
	margin-top: 1rem;
}

/* List / Card view toggle */
.view-toggle {
	display: inline-flex;
	gap: 4px;
	margin-bottom: 10px;
}

.card-view {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 1rem;
}

.icon-list {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	mask-image: url('../images/list.svg');
	-webkit-mask-image: url('../images/list.svg');
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: contain;
}

.icon-tile {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	mask-image: url('../images/tile.svg');
	-webkit-mask-image: url('../images/tile.svg');
	mask-repeat: no-repeat;
	mask-position: center center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-webkit-mask-size: contain;
}

.card {
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background-color: var(--psi-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	padding: 16px;
	width: 320px;
	max-width: 100%;
	box-sizing: border-box;
}

.card-field {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 3px 0;
}

	.card-field label {
		font-weight: 600;
		color: var(--psi-palliser-green);
	}

.card-actions {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

/* Common Questions */
.question-container {
	margin-top: 10px;
	width: 100%;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
}

.question-item {
	padding: 10px;
	width: 50%;
	box-sizing: border-box;
}

.question-label {
	cursor: pointer;
	font-size: 1.25em;
	color: var(--psi-mid-green);
	text-decoration: underline;
}

	.question-label:hover {
		color: #AAC955;
	}

.question-actions {
	margin-top: 1rem;
}

.question-content {
	margin-top: 1rem;
}

@media (max-width: 599px) {
	.question-item {
		width: 100%;
	}
}

/* News */
.news-header {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}

.news-caption {
	flex: 1 1 auto;
	min-width: 300px;
}

.news-questions {
	width: 300px;
	border: 2px solid #e2e2e2;
	border-radius: 4px;
	padding: 20px;
	height: fit-content;
}

.news-questions-title {
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: 10px;
	color: var(--psi-palliser-green);
}

.notifications {
	margin-top: 1.5rem;
	max-width: 1200px;
}

.news-actions {
	margin-top: 1.5rem;
}

.notification-container {
	max-width: 1200px;
}

.notification-item {
	clear: both;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 6px;
}

	.notification-item:hover {
		background-color: var(--psi-cream);
	}

.notification-item-text {
	font-weight: bold;
	padding-top: 10px;
}

.notification-divider {
	max-width: 1200px;
	border: none;
	border-top: 1px solid #e2e2e2;
	margin: 5px 0;
}

.notification-item-title {
	font-weight: bold;
	font-size: 20px;
	color: var(--psi-palliser-green);
}

.notification-item-date {
	padding-top: 10px;
	padding-bottom: 20px;
	color: #838383;
}

.notification-item-value {
	color: var(--psi-text-black);
}

@media (max-width: 1024px) {
	.notification-container {
		max-width: 575px;
	}
}

/* Rate Finder */
.text-closed {
	color: #FF0000 !important;
	text-align: center;
	font-weight: bold;
	width: 100%;
	font-size: 2em;
	padding: 30px 0;
}

.rate-over {
	font-weight: bold;
	padding-top: 20px;
	font-size: 1.25em;
	color: crimson;
}

.rate-township-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 1.5rem 0 0.75rem 0;
}

.rate-township {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 6px;
	font-weight: 600;
	color: var(--psi-text-white);
	background-color: var(--psi-dark-grey);
}

.rate-liability {
	font-weight: 600;
	color: var(--psi-text-green);
}

.township-Green {
	background-color: forestgreen;
}

.township-Maroon {
	background-color: maroon;
}

.township-Amber {
	background-color: goldenrod;
}

/* Quick Links */
.quicklink-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 20px;

	/* Online QuickLinkItem sizing (shared component defaults to the Agent look). */
	--quicklink-text-height: 70px;
	--quicklink-text-padding: 10px 20px;
}

/* Agent Resources sections */
.resource-container {
	margin-top: 10px;
	width: 100%;
	clear: both;
	display: flex;
}

.resource-column {
	float: left;
	width: 50%;
}

.resource-cat-item {
	margin: 10px;
	border: 1px solid #444;
	border-radius: 8px;
	box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.23);
	line-height: 30px;
	clear: both;
	display: flex;
}

.resource-cat-image-container {
	width: 100px;
	background-color: var(--psi-cream);
	border-radius: 8px 0px 0px 8px;
}

.resource-cat-image {
	width: 80px;
	margin: 10px auto 0px auto;
}

.resource-cat-content-container {
	padding: 20px;
	text-align: left;
}

.resource-cat-label {
	font-size: 1.25em;
	font-weight: 500;
	color: var(--psi-palliser-green);
}

.resource-cat-label-item-container {
	clear: both;
}

.resource-cat-label-item {
	float: left;
	font-size: 1em;
	color: var(--psi-mid-green);
	padding-left: 10px;
	padding-right: 20px;
	cursor: pointer;
	background-image: url("../images/arrow-right-resource.svg");
	background-size: 16px;
	background-position: right center;
	background-repeat: no-repeat;
}

@media (max-width: 599px) {
	.resource-container {
		flex-direction: column;
	}

	.resource-column {
		float: none;
		width: 100%;
	}
}

.questions-main {
	display: flex;
	justify-content: space-between;;
	align-items: center;
	height: 100%;
	width: 100%;
}

.contact-container {
	width: 320px;
	border: 2px solid #e2e2e2;
	border-radius: 4px;
	padding: 20px;
}

.contact-title {
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: 10px;
}

.contact-info {
}