@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap');

/* Data8 Predictive Address*/
.data8-pa-countrylist ul li {
	display: flex;
	padding: 2px 5px !important;
}

.data8-pa-countrylist ul li span {
	padding-top: 0 !important;
	margin-left: 20px !important;
}

.data8-pa-countrycurrent {
	padding: 0 5px !important;
}

.data8-pa-countrydropdowncontainer {
	width: 100%;
}

.col-md-6.clearfix {
	display: flex;
}

/* Tab focus */
*:focus-visible {
	outline: 3px solid #1998CD !important;
	outline-offset: 3px !important;
}

*:focus {
	outline: none;
}

.picklist-option-div {
	display: flex;
	align-items: center;
	gap: 5px;
}

.picklist.vertical {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.btn:focus-visible {
	color: none
}

.btn-primary-fos,
.btn-primary,
#NextButton {
	background-color: #CE3467 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 25px;
}

.btn-primary-fos:hover,
.btn-primary:hover,
#NextButton:hover {
	background-color: #B12D59 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 25px;
}

.btn-secondary-fos,
.btn-secondary {
	background-color: #ffffff;
	color: #CE3467;
	border: 2px solid #CE3467;
	border-radius: 25px;
}

div[class="btn-group entity-action-button"]:has(.btn:disabled),
.buttonForFileUpload:has(.btn:disabled),
.btn:disabled {
	cursor: not-allowed !important;
}

.btn-back-fos,
#PreviousButton {
	color: #271c6f;
	border: none;
	background: transparent !important;
	padding: 0 !important;
}

.btn-back-fos:disabled,
#PreviousButton:disabled {
	cursor: not-allowed;
}

.btn-back-fos:hover,
#PreviousButton:hover {
	color: #1b144d;
	border: none;
	background: transparent !important;
	padding: 8px 0;
}

.back-btn:hover {
	text-decoration-thickness: 2.5px;
}

#PreviousButton:hover {
	-webkit-text-stroke: 0.5px;
}

.actions {
	padding: 0px 0 !important;
	border: none !important;
	margin-top: 30px !important;
}

textarea.comment-box {
	background-color: white;
	border: solid 2px;
	border-color: #271c6f;
	border-radius: 4px;
	padding: 5px;
	min-height: 150px;
	max-height: 300px;
	resize: none;
	field-sizing: content;
	width: 100%;
}

.td-comms {
	display: flex !important;
	flex-direction: column;
}

.tr-comms {
	border-top: 1px solid #767676;
	margin-top: 30px;
	padding-top: 40px;
}

/* Target tr elements that are not in date picker*/
tr:has(td.td-comms),
tr:has(td.cell) {
	display: flex;
}

body,
html,
*:not(.fa) {
	font-family: 'Assistant', sans-serif !important;
}

#NewAttachFileLabel {
	display: none !important;
}

.additional-files-container {
	display: block !important;
}

.file-info {
	display: inline-flex;
	flex-direction: column;
	gap: 15px;
}

.delete-file {
	color: #CE3467 !important;
	text-decoration: underline;
	cursor: pointer;
	background-color: transparent;
	border: none;
}

.delete-file:hover {
	color: #B12D59 !important;
	cursor: pointer;
}

.confirm-delete-buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.confirm-delete-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.deleteicondiv,
.cancelIconDiv {
	display: none !important;
}

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

.fileNameAndSizeSpan {
	padding: 30px 20px;
	background-color: white;
	border: solid 2px;
	border-color: #B4D5E1 !important;
	margin: 0px !important;
	font-size: 20px;
}

div.progress-container {
	height: 20px !important;
	background-color: #F7F7F7 !important;
}

div.progress-bar {
	color: #ffffff !important;
	background-color: #B4D5E1 !important;
	height: 20px;
}

span.file-dropdown {
	width: 100%;
	margin-top: 5px;
}

.validation-error {
	color: #D32F2F !important;
}

img[src="/complaint_blue.svg"] {
	margin-bottom: 20px;
	max-height: 64px;
	max-width: 64px;
}

/* Padding for checkbox labels */
td.checkbox-cell>div.table-info {
	padding-left: 20px !important;
}

td.form-control-cell {
	display: block;
}

.table-info {
	display: flex;
}

/* For SME Questions */
div.table-info:has(>span.fos-comms) {
	display: flex;
	flex-direction: column;
}

#caseallocationtimeline_label,
#investigationprocess_label,
#potentialoutcomes_label,
#pleasenote_label {
	font-size: 28px;
}

.navbar.navbar-dark.static-top {
	background-color: #271c6f;
	border-color: #271c6f;
}

.navbar.navbar-dark.static-top .navbar-nav>li>a,
.navbar.navbar-dark.static-top .navbar-brand {
	color: #ffffff;
}

h1.siteTitle,
.static-top.navbar-dark .navbar-brand a h1.siteTitle,
.static-top.navbar-dark .navbar-brand a h1.siteTitle>span {
	color: #ffffff !important;
}

.crmEntityFormView label {
	background-color: #FFFFFF;
	color: #271c6f !important;
}

select.file-dropdown {
	border: 2px solid #271c6f;
	color: #271c6f;
	border-radius: 4px;
}

input::placeholder {
	color: #271c6f !important;
}

.form-select {
	border: 1px solid #271c6f;
}

/* Datepicker */
div[class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour bottom pull-right"] {
	inset: 48.7969px auto auto !important;
}

/* So that labels stay to the right of checkbox */
td[class="clearfix cell checkbox-cell"] {
	display: flex !important;
	flex-direction: row-reverse !important;
	justify-content: flex-end;
}

td.cell {
	width: 100%;
}

div.tr {
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

/* Hide fields used to initialise Page_ Validators */
tr:has(#fos_submissionreference),
tr:has(#fos_dummyrequiredfield) {
	display: none !important;
}

.custom-prev-wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: flex-start;
	margin-bottom: 30px;
	max-width: 100%;
	width: fit-content;
}

.custom-prev-wrapper:has(.btn:disabled) {
	cursor: not-allowed;
}

.custom-prev-wrapper .previous-btn {
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	color: #333;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

video[poster="/FinancialComplaint_Thumbnail.png"] {
	width: 100%;
	height: auto;
	max-width: 476px;
	display: block;
	margin-bottom: 60px;
}

.custom-prev-wrapper .previous-btn:hover {
	background-color: #eaeaea;
}

/* Date styling */
.input-group.datetimepicker {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 250px;
}

.date-separate-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-grow: 1;
}

.date-separate-inputs input.date-part {
	width: 60px;
	height: 50px;
	padding: 6px 8px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

.date-separate-inputs input.year {
	width: 60px;
}

.date-separate-inputs .separator {
	user-select: none;
	font-weight: bold;
	font-size: 16px;
	line-height: 1;
	color: #666;
}

.input-group-addon.btn {
	cursor: pointer;
	padding: 6px 10px;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.input-group-addon.btn:hover {
	background-color: #ddd;
}

.icon-calendar {
	font-size: 18px;
	color: #555;
}

.control:has(> .dropdown) {
	justify-content: flex-start !important;
	text-align: left !important;
	align-items: center;
}

.control:has(>span.validation-error) {
	justify-content: flex-start !important;
	align-items: flex-start;
	text-align: left !important;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Moving fields to the left */
.control:not(:has(>.dropdown)) {
	justify-content: flex-start !important;
	align-items: flex-start;
	text-align: left !important;
	display: flex;
	gap: 15px;
}

.control:has(>.alert) {
	flex-direction: column;
}

.control:has(>.subgrid) {
	display: block !important;
}

.alert.sr-only {
	color: #D32F2F;
	width: auto;
	height: auto;
	max-width: 100%;
	white-space: normal;
	margin: 0;
	padding: 0;
}

.msos-container:not(.msos-disabled) {
	border-radius: 6px !important;
	border: 1px solid #271c6f !important;
}

/* Upload button */
.btn-secondary {
	background-color: #ffffff !important;
	color: #CE3467 !important;
	border: 2px solid #CE3467 !important;
	border-radius: 25px !important;
}

.btn-info-fos {
	background-color: transparent !important;
	border: none !important;
}

.validation-summary a:hover {
	color: #1b144d !important;
}

.boolean-radio-cell:has(div>div.ClickableHelpText) {
	display: flex !important;
	flex-direction: column;
}

#infoClickable {
	cursor: pointer;
	display: flex;
	flex-direction: row;
	max-width: fit-content;
}

#suggested-types {
	margin: 0 !important;
}

.fos-link:hover,
.fos-link:focus {
	color: #B12D59 !important;
}

.modal-body {
	padding-top: 40px !important;
}

/* File comments */
.description {
	display: flex;
	align-items: center;
	padding: 12px 20px;
	margin: 30px 0 15px;
	color: #271c6f;
	font-size: 35px;
}

/* Radio buttons */
span.picklist.vertical>input[type="radio"] {
	width: 30px;
	height: 30px;
	accent-color: #271c6f !important;
	transform: translateY(0.5em);
	margin: 5px 15px 5px 0px !important;
}

input[type="radio"] {
	width: 30px;
	height: 30px;
	accent-color: #271c6f !important;
}

input[type="checkbox"] {
	width: 30px;
	height: 30px;
	accent-color: #271c6f !important;
	margin: 0px !important;
}

span.boolean-radio {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.boolean-div {
	display: flex;
	gap: 15px;
}

.fos-heading {
	font-size: 20px;
}

/*Footer style*/
/* Force .footer-bottom background full width */
.footer-bottom,
.footer {
	background-color: #f7f7f7;
	position: relative;
	left: auto;
	right: auto;
	margin-left: auto;
	margin-right: auto;
	width: 100vw;
	padding: 20px 0;
	max-width: 100%;
	overflow-x: hidden;
}

/* Layout for the links inside site-footer */
.site-footer .footer-links-container {
	max-width: 100%;
	margin: 0 auto;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	display: flex;
	flex-direction: column;
}

.site-footer .footer-section {
	display: flex;
	flex-direction: row;
	gap: 64px;
	flex: 1;
	max-width: 100%;
}

.site-footer .footer-section a {
	display: block;
	width: 200px;
	min-width: 200px;
	color: #271c6f;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
}

.site-footer .footer-section a:hover {
	color: #B12D59;
}

/*End Footer Style*/
.secondary-bar {
	background-color: #271c6f !important;
	border-color: #271c6f;
	color: white;
	text-align: center;
	padding: 0.5rem 0;
}

.secondary-bar a {
	color: white;
	text-decoration: none;
	font-weight: 500;
}

.secondary-bar a:hover {
	text-decoration: underline;
}

.crmEntityFormView {
	border: none !important;
}

#infoArrow,
#infoText {
	margin: 0px;
}

#infoArrow {
	min-width: 20px;
}

#infoText {
	margin-left: 5px;
}

textarea.textarea {
	field-sizing: content;
	min-height: 100px;
	max-width: 100%;
	resize: none;
}

select option {
	white-space: normal;
	word-break: break-word;
}

/* Remove horizontal scrollbar */
body {
	overflow-x: hidden;
}

div.ClickableHelpText {
	margin-bottom: 30px;
}

div.ClickableHelpText-Active {
	margin: 0px !important;
}

/* Matching figma layouts */
.crmEntityFormView fieldset {
	margin-bottom: 0px !important;
}

.crmEntityFormView .tab {
	margin-bottom: 0px !important;
}

/* For checkbox labels in line with checkbox */
td.checkbox-cell:not(:has(> div.control > span.checkbox)),
/* For check your email screen */
td.form-control-cell:has(> span.fos-comms) {
	padding: 0px 0px 30px !important;
	display: flex !important;
	flex-direction: column;
}

.row.sectionBlockLayout {
	text-align: left !important;
	padding: 0px !important;
}

.td-heading {
	padding: 0px 0px;
}

/* summary style*/
.toggle-arrow {
	display: inline-block;
	transition: transform 0.3s ease;
	font-size: 1.2em;
	margin-right: 6px;
	vertical-align: middle;
	line-height: 1;
}

.collapsed .toggle-arrow {
	transform: rotate(0deg);
}

.expanded .toggle-arrow {
	transform: rotate(90deg);
}

.edit-link {
	float: right;
	margin-left: 10px;
	font-size: 0.9em;
	text-decoration: underline;
	color: #005ea5;
	display: none;
}

.ApplicationComplete {
	background-color: #567B23 !important;
	padding: 40px 100px !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}

colgroup:has(> div.ApplicationComplete) {
	display: block;
	padding: 0 0px;
}

.static-text-cell {
	display: flex !important;
	flex-direction: column;
	gap: 15px;
	padding: 0px 0px;
}

/* Checks if it has a child td.cell class to avoid applying to calendar tbody */
table.section>tbody:has(> tr > td.cell) {
	display: flex;
	flex-direction: column;
}

.section-title {
	padding-left: 0px;
	max-width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.dropdown {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 6px;
	z-index: 1000;
	padding: 8px;
	max-height: 150px;
	overflow-y: auto;
}

.dropdown-option {
	cursor: pointer;
	padding: 4px;
	color: #271c6f;
}

.dropdown-message {
	padding: 4px;
	color: #271c6f;
}

.dropdown-option:hover {
	background: #f0f0f0
}

[class="aspNetDisabled"] {
	display: flex;
	flex-direction: row;
	align-items: center;
}

td[class="clearfix cell subgrid-cell"] {
	width: 100%;
	display: block;
	padding: 0px !important;
}

/* Calendar selected colour */
table td.active,
tr td.active button {
	background-color: #CE3467 !important;
}

/* Apply css to Summary screen where tab name is not General*/
fieldset:not([aria-label="General"])>table>tbody>tr>td:not(.subgrid-cell) {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 0 0 10px !important;
}

fieldset:not([aria-label="General"])>table>tbody>tr>td>div.table-info {
	flex: 1;
	text-align: left;
}

fieldset:not([aria-label="General"])>table>tbody>tr>td>div.control {
	flex: 1;
	text-align: right;
}

fieldset:not([aria-label="General"])>table>tbody>tr {
	border-bottom: 1px solid #C6C6C6;
}

fieldset:not([aria-label="General"]) label {
	margin: 0 !important;
}

fieldset:not([aria-label="General"])>table>tbody {
	gap: 30px;
}

/*Summary screen fields*/
input.text.form-control.readonly,
span.aspNetDisabled>div.boolean-div>label,
span.aspNetDisabled>div.picklist-option-div>label,
span.aspNetDisabled>label,
a.text-primary[readonly="readonly"],
div.text-muted,
input.input-text-box.readonly,
select.picklist.readonly,
span.readonly.picklist.vertical,
span.readonly.picklist.vertical>label[for],
textarea.textarea.form-control.readonly {
	font-size: 20px;
	color: #545767 !important;
	width: 100%;
	font-weight: 400 !important;
	cursor: default !important;
	text-decoration: none !important;
	white-space: normal;
	overflow-wrap: anywhere;
	min-height: fit-content;
}

/* File subgrid Summary screen */
td[data-type="System.String"],
td[aria-readonly="true"] {
	overflow-wrap: anywhere;
	color: #545767 !important;
	background-color: transparent !important;
	--bs-table-accent-bg: transparent !important;
}

td.cell:not(.subgrid-cell) {
	padding: 0 0 20px !important;
}

.subgrid {
	margin-bottom: 15px;
}

th.sort-enabled>a {
	font-size: 20px;
	color: #271c6f;
}

div.cell {
	padding: 0 !important;
}

table.table.table-striped {
	margin: 0 !important;
}

#EntityFormView {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.text.form-control-cell {
	display: flex;
	flex-direction: column;
}

div.progress-bar-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: fit-content;
	max-width: 100%;
	margin-bottom: 30px;
}

.buttonForFileUpload {
	max-width: fit-content;
}

#ValidationSummaryEntityFormView {
	max-width: 100%;
}

.filesize {
	display: flex;
	align-items: center;
}

/* Remove file label*/
.table-info:has(#NewAttachFileLabel) {
	display: none !important;
}

/* Desktop */
@media (min-width: 1025px) {

	td[data-type="System.String"],
	td[aria-readonly="true"] {
		font-size: 20px;
	}

	.summary-arrow-big {
		cursor: pointer;
		font-size: 30px;
		margin-left: 10px;
	}

	.summary-arrow-small {
		cursor: pointer;
		font-size: 22px;
		margin-left: 10px;
	}

	input.text.form-control.readonly,
	span.aspNetDisabled>div.boolean-div>label,
	span.aspNetDisabled>div.picklist-option-div>label,
	span.aspNetDisabled>label,
	a.text-primary[readonly="readonly"],
	div.text-muted,
	input.input-text-box.readonly,
	select.picklist.readonly,
	span.readonly.picklist.vertical,
	span.readonly.picklist.vertical>label[for],
	textarea.textarea.form-control.readonly {
		font-size: 20px;
	}

	h2.tab-title {
		padding-left: 0px;
		max-width: 100%;
		display: flex;
		align-items: center;
		font-size: 48px !important;
		color: #271c6f !important;
		cursor: pointer;
	}

	h3 {
		display: flex;
		align-items: center;
		font-size: 30px !important;
		color: #271c6f !important;
		margin: 5px 0px !important;
	}

	.validation-summary a {
		display: inline-block !important;
		width: fit-content !important;
		font-size: 19px;
		color: #271c6f !important;
		text-decoration: underline !important;
		cursor: pointer;
		font-weight: 600;
	}

	.filename {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		color: #CE3467 !important;
		text-decoration: underline !important;
		font-size: 20px;
		min-width: 70%;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: left;
		margin-top: 1px;
		padding-left: 4px;
	}

	span.progress-step {
		font-size: 19px !important;
		color: #545767 !important;
		font-weight: 700;
	}

	span.progress-step-active {
		font-size: 19px !important;
		color: #271C6F !important;
		text-decoration: underline;
		text-decoration-thickness: 3px !important;
		text-underline-offset: 6px;
		font-weight: 700;
	}

	.green-banner-text {
		color: #292957 !important;
		font-size: 20px;
		width: 70%;
		display: flex;
		margin: 0 auto;
	}

	span {
		color: #271c6f !important;
		font-size: 20px;
	}

	.field-label {
		font-size: 20px;
		margin-bottom: 15px;
	}

	span.field-label {
		align-items: center !important;
		font-size: 19px;
		font-weight: 600 !important;
	}

	div.boolean-div>label {
		display: flex !important;
		align-items: center !important;
		font-size: 19px;
		font-weight: 600 !important;
	}

	label {
		align-items: center !important;
		font-size: 19px;
		font-weight: 600 !important;
	}

	/* Complaint checker label size */
	#fos_hasfrl_label,
	#fos_morethan8weekssincecomplaint_label,
	#fos_complaintonbehalfofsomeoneelse_label,
	#fos_complaintonbehalfof_label,
	#whathappensnow_label,
	#howlongwillittake_label,
	#fos_iscomplaintbusinessfinancial_label {
		font-size: 48px;
		margin-bottom: 30px;
	}

	.back-btn {
		text-decoration: underline;
		font-weight: 600;
		font-size: 19px;
		text-decoration-thickness: 2px;
	}

	.btn {
		font-size: 20px !important;
		font-weight: 700 !important;
		border-radius: 100px !important;
		max-width: fit-content;
	}

	/* Hyperlinks */
	.fos-link,
	.fos-link:focus {
		display: inline-block !important;
		width: fit-content !important;
		font-size: 19px;
		color: #CE3467 !important;
		text-decoration: underline !important;
		cursor: pointer;
		font-weight: 600;
	}

	.fos-comms {
		display: inline;
		font-size: 19px !important;
		color: #545767 !important;
		font-weight: 600;
	}

	/* Headers */
	.fos-header {
		font-size: 54px !important;
		color: #271c6f;
		margin: 10px 0px 30px !important;
		font-weight: 600 !important;
		max-width: 100%;
	}

	.Delete-Div {
		display: flex;
		flex-direction: row;
		margin: 10px 0px;
		gap: 10px;
	}

	.info-clickable-box {
		padding: 10px 20px;
		border-left: 4px solid #C6C6C6;
		margin-bottom: 30px;
		display: flex;
		width: 75%;
	}

	div.custom-button {
		height: auto;
		padding: 20px;
		margin: 0;
		background-color: #F7F7F7 !important;
		border-color: #C6C6C6 !important;
		max-width: 60%;
		width: 60%;
		gap: 10px;
		border: solid 1px;
	}

	.dropdown {
		width: 60%;
	}

	#fos_onbehalfcomplainantpostcode,
	#fos_postcode,
	#fos_jointpostcode {
		width: 40% !important;
	}

	input.form-control,
	textarea.textarea.form-control,
	select.form-control.form-select.picklist,
	span.flexbox {
		border: 2px solid #271c6f;
		width: 60%;
		white-space: normal;
		color: #271c6f;
	}

	.page-copy {
		margin: 35px auto 20px;
		width: 70%;
	}

	.green-banner {
		padding: 30px 0px;
		background: #BBDCA4 !important;
		position: relative;
		width: 100vw;
		margin-left: calc(-50vw + 50%);
	}

	div[class="background-container"] {
		padding: 20px;
		min-height: auto;
		position: relative;
		left: 50%;
		right: 50%;
		top: -35px;
		width: 100vw;
		margin-left: -50vw;
		margin-right: -50vw;
	}

	div[class="container custom-container"] {
		padding: 0 !important;
		margin: 0 auto;
	}

	div[class="btn-group entity-action-button"] {
		display: flex;
		gap: 15px;
		flex-direction: row;
		max-width: fit-content;
	}

	.site-footer {
		display: flex;
		flex-direction: row;
		gap: 75px;
	}
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {

	td[data-type="System.String"],
	td[aria-readonly="true"] {
		font-size: 20px;
	}

	.summary-arrow-big {
		cursor: pointer;
		font-size: 30px;
		margin-left: 10px;
	}

	.summary-arrow-small {
		cursor: pointer;
		font-size: 22px;
		margin-left: 10px;
	}

	input.text.form-control.readonly,
	span.aspNetDisabled>div.boolean-div>label,
	span.aspNetDisabled>div.picklist-option-div>label,
	span.aspNetDisabled>label,
	a.text-primary[readonly="readonly"],
	div.text-muted,
	input.input-text-box.readonly,
	select.picklist.readonly,
	span.readonly.picklist.vertical,
	span.readonly.picklist.vertical>label[for],
	textarea.textarea.form-control.readonly {
		font-size: 20px;
	}

	h2.tab-title {
		padding-left: 0px;
		max-width: 100%;
		display: flex;
		align-items: center;
		font-size: 48px !important;
		color: #271c6f !important;
		cursor: pointer;
	}

	h3 {
		display: flex;
		align-items: center;
		font-size: 30px !important;
		color: #271c6f !important;
		margin: 5px 0px !important;
	}

	.validation-summary a {
		display: inline-block !important;
		width: fit-content !important;
		font-size: 19px;
		color: #271c6f !important;
		text-decoration: underline !important;
		cursor: pointer;
		font-weight: 600;
	}

	.filename {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		color: #CE3467 !important;
		text-decoration: underline !important;
		font-size: 20px;
		min-width: 70%;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: left;
		margin-top: 1px;
		padding-left: 4px;
	}

	span.progress-step {
		font-size: 19px !important;
		color: #545767 !important;
		font-weight: 700;
	}

	span.progress-step-active {
		font-size: 19px !important;
		color: #271C6F !important;
		text-decoration: underline;
		text-decoration-thickness: 3px !important;
		text-underline-offset: 6px;
		font-weight: 700;
	}

	.green-banner-text {
		color: #292957 !important;
		font-size: 20px;
		width: 1000px;
		max-width: 100%;
		display: flex;
		margin: 0 auto;
	}

	span {
		color: #271c6f !important;
		font-size: 20px;
	}

	.field-label {
		font-size: 20px;
		margin-bottom: 15px;
	}

	span.field-label {
		align-items: center !important;
		font-size: 19px;
		font-weight: 600 !important;
	}

	div.boolean-div>label {
		display: flex !important;
		align-items: center !important;
		font-size: 19px;
		font-weight: 600 !important;
	}

	label {
		align-items: center !important;
		font-size: 19px;
		font-weight: 600 !important;
	}

	/* Complaint checker label size */
	#fos_hasfrl_label,
	#fos_morethan8weekssincecomplaint_label,
	#fos_complaintonbehalfofsomeoneelse_label,
	#fos_complaintonbehalfof_label,
	#whathappensnow_label,
	#howlongwillittake_label,
	#fos_iscomplaintbusinessfinancial_label {
		font-size: 48px;
		margin-bottom: 30px;
	}

	.back-btn {
		text-decoration: underline;
		font-weight: 600;
		font-size: 19px;
		text-decoration-thickness: 2px;
	}

	.btn {
		font-size: 20px !important;
		font-weight: 700 !important;
		border-radius: 100px !important;
		max-width: fit-content;
	}

	/* Hyperlinks */
	.fos-link,
	.fos-link:focus {
		display: inline-block !important;
		width: fit-content !important;
		font-size: 19px;
		color: #CE3467 !important;
		text-decoration: underline !important;
		cursor: pointer;
		font-weight: 600;
	}

	.fos-comms {
		display: inline;
		font-size: 19px !important;
		color: #545767 !important;
		font-weight: 600;
	}

	/* Headers */
	.fos-header {
		font-size: 54px !important;
		color: #271c6f;
		margin: 10px 0px 30px !important;
		font-weight: 600 !important;
		max-width: 100%;
	}

	.Delete-Div {
		display: flex;
		flex-direction: row;
		margin: 10px 0px;
		gap: 10px;
	}

	.info-clickable-box {
		padding: 10px 20px;
		border-left: 4px solid #C6C6C6;
		margin-bottom: 30px;
		display: flex;
		width: 75%;
	}

	div.custom-button {
		height: auto;
		padding: 20px;
		margin: 0;
		background-color: #F7F7F7 !important;
		border-color: #C6C6C6 !important;
		max-width: 80%;
		width: 80%;
		gap: 10px;
		border: solid 1px;
	}

	.dropdown {
		width: 80%
	}

	.control:not(:has(>.dropdown)) {
		flex-direction: column;
	}

	#fos_onbehalfcomplainantpostcode,
	#fos_postcode,
	#fos_jointpostcode {
		width: 50% !important;
	}

	input.form-control,
	textarea.textarea.form-control,
	select.form-control.form-select.picklist,
	span.flexbox {
		border: 2px solid #271c6f;
		width: 80%;
		white-space: normal;
		color: #271c6f;
	}

	.page-copy {
		margin: 35px auto 20px;
		min-width: 740px;
		max-width: 1000px;
	}

	.green-banner {
		padding: 20px 30px;
		background: #BBDCA4 !important;
		position: relative;
		width: 100vw;
		margin-left: calc(-50vw + 50%);
	}

	div[class="background-container"] {
		padding: 20px;
		min-height: auto;
		position: relative;
		left: 50%;
		right: 50%;
		top: -35px;
		width: 100vw;
		margin-left: -50vw;
		margin-right: -50vw;
	}

	div[class="container custom-container"] {
		padding: 0 !important;
		margin: 0 80px;
	}

	.footer-bottom .container {
		max-width: 740px;
	}

	div[class="btn-group entity-action-button"] {
		display: flex;
		gap: 15px;
		flex-direction: row;
		max-width: fit-content;
	}

	.site-footer {
		display: flex;
		flex-direction: column;
		gap: 75px;
	}
}

/* Mobile */
@media (max-width: 768px) {

	td[data-type="System.String"],
	td[aria-readonly="true"] {
		font-size: 16px;
	}

	.summary-arrow-big {
		cursor: pointer;
		font-size: 20px;
		margin-left: 10px;
	}

	.summary-arrow-small {
		cursor: pointer;
		font-size: 16px;
		margin-left: 10px;
	}

	input.text.form-control.readonly,
	span.aspNetDisabled>div.boolean-div>label,
	span.aspNetDisabled>div.picklist-option-div>label,
	span.aspNetDisabled>label,
	a.text-primary[readonly="readonly"],
	div.text-muted,
	input.input-text-box.readonly,
	select.picklist.readonly,
	span.readonly.picklist.vertical,
	span.readonly.picklist.vertical>label[for],
	textarea.textarea.form-control.readonly {
		font-size: 16px;
	}

	h2.tab-title {
		padding-left: 0px;
		max-width: 100%;
		display: flex;
		align-items: center;
		font-size: 28px !important;
		color: #271c6f !important;
		cursor: pointer;
	}

	h3 {
		display: flex;
		align-items: center;
		font-size: 22px !important;
		color: #271c6f !important;
		margin: 5px 0px !important;
	}

	.validation-summary a {
		display: inline-block !important;
		width: fit-content !important;
		font-size: 16px;
		color: #271c6f !important;
		text-decoration: underline !important;
		cursor: pointer;
		font-weight: 600;
	}

	.filename {
		display: inline-block;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		color: #CE3467 !important;
		text-decoration: underline !important;
		font-size: 16px;
		min-width: 70%;
		text-overflow: ellipsis;
		overflow: hidden;
		text-align: left;
		margin-top: 1px;
		padding-left: 4px;
	}

	span.progress-step {
		font-size: 16px !important;
		color: #545767 !important;
		font-weight: 700;
	}

	span.progress-step-active {
		font-size: 16px !important;
		color: #271C6F !important;
		text-decoration: underline;
		text-decoration-thickness: 3px !important;
		text-underline-offset: 6px;
		font-weight: 700;
	}

	.green-banner-text {
		color: #292957 !important;
		font-size: 16px;
		display: flex;
		margin: 0 30px;
	}

	span {
		color: #271c6f !important;
		font-size: 16px;
	}

	.field-label {
		font-size: 16px;
		margin-bottom: 15px;
	}

	span.field-label {
		align-items: center !important;
		font-size: 16px;
		font-weight: 600 !important;
	}

	div.boolean-div>label {
		display: flex !important;
		align-items: center !important;
		font-size: 16px;
		font-weight: 600 !important;
	}

	label {
		align-items: center !important;
		font-size: 16px;
		font-weight: 600 !important;
	}

	/* Headers */
	.fos-header {
		font-size: 28px !important;
		color: #271c6f;
		margin: 10px 0px 30px !important;
		font-weight: 600 !important;
		max-width: 100%;
	}

	/* Complaint checker label size */
	#fos_hasfrl_label,
	#fos_morethan8weekssincecomplaint_label,
	#fos_complaintonbehalfofsomeoneelse_label,
	#fos_complaintonbehalfof_label,
	#whathappensnow_label,
	#howlongwillittake_label,
	#fos_iscomplaintbusinessfinancial_label {
		font-size: 28px;
		margin-bottom: 30px;
	}

	.back-btn {
		text-decoration: underline;
		font-weight: 600;
		font-size: 16px;
		text-decoration-thickness: 2px;
	}

	.btn {
		font-size: 16px !important;
		font-weight: 700 !important;
		border-radius: 100px !important;
		max-width: fit-content;
	}

	/* Hyperlinks */
	.fos-link,
	.fos-link:focus {
		display: inline-block !important;
		width: fit-content !important;
		font-size: 16px;
		color: #CE3467 !important;
		text-decoration: underline !important;
		cursor: pointer;
		font-weight: 600;
	}

	.fos-comms {
		display: inline;
		font-size: 16px !important;
		color: #545767 !important;
		font-weight: 600;
	}

	.Delete-Div {
		display: flex;
		flex-direction: column;
		margin: 10px 0px;
		gap: 10px;
		align-items: start;
	}

	.info-clickable-box {
		padding: 10px 20px;
		border-left: 4px solid #C6C6C6;
		margin-bottom: 30px;
		display: flex;
		width: 100%;
	}

	.data8-pa-countrylist.data8-pa-visible,
	.data8-pa-autocomplete.data8-pa-visible {
		min-width: 100% !important;
	}

	div.custom-button {
		height: auto;
		padding: 20px;
		margin: 0;
		background-color: #F7F7F7 !important;
		border-color: #C6C6C6 !important;
		max-width: 100%;
		width: 100%;
		gap: 10px;
		border: solid 1px;
	}

	.control:not(:has(>.dropdown)) {
		flex-direction: column;
	}

	#fos_onbehalfcomplainantpostcode,
	#fos_postcode,
	#fos_jointpostcode {
		width: 60% !important;
	}

	.dropdown {
		width: 100%;
	}

	input.form-control,
	textarea.textarea.form-control,
	select.form-control.form-select.picklist,
	span.flexbox {
		border: 2px solid #271c6f;
		width: 100%;
		max-width: 100%;
		white-space: normal;
		color: #271c6f;
	}

	.page-copy {
		margin: 20px 30px 10px;
		max-width: 100%;
	}

	.green-banner {
		padding: 10px 0px;
		background: #BBDCA4 !important;
		position: relative;
		width: 100vw;
		margin-left: calc(-50vw + 50%);
	}

	div[class="background-container"] {
		padding: 20px;
		min-height: auto;
		padding: 0 !important;
		position: relative;
		left: 50%;
		right: 50%;
		top: -20px;
		width: 100vw;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
	}


	div[class="container custom-container"] {
		padding: 0 !important;
		margin: 0 30px;
	}

	.footer-bottom .container {
		padding-left: 15px;
		padding-right: 15px;
	}

	div[class="btn-group entity-action-button"] {
		display: flex;
		gap: 15px;
		flex-direction: column;
		max-width: fit-content;
	}

	#reciteme-button {
		top: auto;
		right: 12px;
		bottom: 24px;
		width: 52px;
		height: 52px;
	}

	div.progress-bar-steps {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		flex-direction: column;
	}

	/* Responsive: Stack sections on small screens */
	.site-footer .footer-links-container {
		flex-direction: column;
	}

	.site-footer .footer-section {
		gap: 15px;
	}

	.site-footer .footer-section a {
		min-width: 100px;
	}

	.site-footer {
		display: flex;
		flex-direction: column;
		gap: 75px;
	}
}

.footer-logos-container {
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
}

/* Hide red asterisks */
.field-label::after {
	display: none !important;
}

.validation-header {
	color: #271c6f !important;
}

/* Styling for Upload control modals */
.modal-header {
	padding: 15px;
}

button[data-dismiss="modal"]:has(span) {
	display: none;
}

.modal-title,
.modal-body,
.modal-content-new {
	color: #271C6F;
	margin: 0;
}

.modal-body {
	margin: 0;
	padding: 15px !important;
}

.modal.fade {
	align-items: center;
	max-width: 100%;
	justify-content: center;
}

.modal-dialog {
	align-items: center;
	max-height: fit-content;
}

.modal-footer {
	height: auto;
	padding: 15px;
}

/* Floating ReciteMe launcher - top right of viewport */
#reciteme-button {
	position: fixed;
	/* top | right | bottom | left (use what feels right for your header height) */
	top: 16px;
	/* move closer/further from the purple header */
	right: 16px;
	z-index: 5000;
	/* above page/header and chat widgets */

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 140px;
	/* final button size */
	height: 56px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: #CE3467;
	/* brand colour */
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	cursor: pointer;
}

/* keep image crisp and unsquished */
#reciteme-button img {
	width: 100%;
	height: auto;
	display: block;
}

/* focus/hover states for a11y */
#reciteme-button:hover {
	transform: translateY(-1px);
}

#reciteme-button:focus-visible {
	outline: 3px solid #FFBD2E;
	/* high contrast focus ring */
	outline-offset: 3px;
}

/* don’t print the button */
@media print {
	#reciteme-button {
		display: none;
	}
}

.navbar-toggler {
	display: none !important;
}