.a-nhs-app-mode {
.nhsuk-header__navigation {
.nhsuk-header__navigation-container {
			margin-top: 0;
}
}
}

.nhsuk-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1rem;
	padding: 4rem 0;
}
.nhsuk-loader {
	border: 12px solid #dee0e2;
	border-radius: 50%;
	border-top-color: var(--nhsuk-brand-colour);
	width: 80px;
	height: 80px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% {
		-webkit-transform: rotate(0deg);
}
100% {
		-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
		transform: rotate(0deg);
}
100% {
		transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.nhsuk-loader {
		-webkit-animation: none;
		animation: none;
}
}

.a-nhs-table.nhsuk-table-responsive {
&:first-of-type {
		margin-top: 24px;
}
& .nhsuk-table-responsive__heading {
		white-space: nowrap;
}
& td > .nhsuk-button {
		margin: 0;
}
& th.nhsuk-u-text-break-word a,
	& td.nhsuk-u-text-break-word a {
		word-break: break-word;
		text-wrap: pretty;
		overflow-wrap: break-word;
}
@media (min-width: 770px) {
		display: grid;
		grid-column: 1 / -1;
& .nhsuk-table__row.nhsuk-table__row--clickable {
			position: relative;
}
& caption,
		& .nhsuk-table__cell[colspan] {
			grid-column: 1 / -1;
}
& thead,
		& tbody,
		& tr.nhsuk-table__row {
			display: contents;
}
}
}

@media (min-width: 770px) {
.a-dashboard-tasks__tables-grid {
		display: grid;
		grid-template-columns: 1fr max-content minmax(100px, max-content);
}
}

.nhsuk-dashboard-widgets__group {
	max-width: fit-content;
	margin-bottom: 0;
	margin-top: 1.5rem;
.nhsuk-card {
		text-align: center;
		margin-bottom: 0;
}
}
@media (min-width: 770px) {
.nhsuk-dashboard-header {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
}
.nhsuk-dashboard-widgets {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
.nhsuk-dashboard-widgets__group {
			margin-top: 0;
}
}
}

.pp-info-card-blue {
	background-color: var(--nhsuk-blue-colour);
	padding: 1rem;
	margin: 1rem 0 0;
	color: var(--nhsuk-white-colour);
}

.nhsuk-single-element {
.nhsuk-label {
		font-size: var(--nhsuk-font-size-l);
		line-height: var(--nhsuk-font-line-height-l);
		margin-bottom: 16px;
}
}

.nhsuk-pagination--numbered .nhsuk-pagination__item {
	/** Always show pagination items */
	display: block;
}
.nhsuk-pagination__item {
.nhsuk-pagination__link[aria-disabled='true'] {
		pointer-events: none;
		text-decoration: none;
}
}

.nhsuk-card--message {
.a-message-card__body--truncated {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
}
.nhsuk-card--tags {
		margin-bottom: 0;
}
.nhsuk-card-metadata {
		margin-top: 1rem;
}
}

.nhsuk-inset-text--error {
	border-color: var(--nhsuk-error-colour);
}

.a-message-reply-confirmation {
.nhsuk-body {
		white-space: pre-wrap;
		word-wrap: break-word;
}
}

.nhsuk-table__hint {
	grid-column: 1 / -1;
}
.nhsuk-inset-text--error {
	border-color: var(--nhsuk-error-colour);
}

.a-message-screen {
.a-message-screen__tables-grid {
		margin-bottom: 48px;
}
.nhsuk-section-break {
		margin-top: 24px;
}

	/** Remove large space under tables when reply form is next */
.a-message-screen__message-body + .nhsuk-section-break {
		margin-top: 48px;
.a-message-screen__tables-grid {
			margin-bottom: 0;
}
}
@media (min-width: 770px) {
.a-message-screen__tables-grid {
			display: grid;
			grid-template-columns: 1fr max-content max-content;
.a-nhs-table:last-child {
				margin-bottom: 0;
}
}
}
}

.nhsuk-checkboxes {
	margin-top: 0.5rem;
}

.nhsuk-date-input__separator {
	margin-top: 16px;
}

.nhsuk-file-upload__preview {
.nhsuk-file-upload__status {
		display: flex;
		align-items: center;
		justify-content: space-between;
.nhsuk-file-upload__file {
			display: block;
			max-width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
}
.nhsuk-file-upload__actions {
			flex-shrink: 0;
.nhsuk-button {
				margin-bottom: 0;
}
}
}
}

.a-nhs-phone {
.vf-addon-options {
		display: none;
}
}

.nhsuk-radios {
	margin-top: 0.5rem;
}

.nhsuk-slider-input__item {
	display: inline-block;
	margin-bottom: 0;
	margin-right: 24px;
	vertical-align: bottom;
}
:root {
	/* Custom NHS tokens not exposed as CSS vars by nhsuk-frontend.css */
	--nhsuk-font-family: 'Frutiger W01', arial, sans-serif;
	--nhsuk-font-weight-bold: 600;

	--nhsuk-font-size: 1.1875rem;
	--nhsuk-font-line-height: 1.4736842105;

	--nhsuk-font-size-l: 2.25rem;
	--nhsuk-font-line-height-l: 1.1666666667;

	--nhsuk-spacing-1: 4px;
	--nhsuk-spacing-2: 8px;
	--nhsuk-spacing-3: 16px;

	--nhsuk-error-background-colour: #f8d5d1;
}
:root,
:before,
:after,
* {
	--vf-primary: var(--nhsuk-brand-colour);
	--vf-primary-lighter: var(--nhsuk-secondary-button-hover-colour);
	--vf-primary-darker: var(--nhsuk-dark-blue-colour);
	--vf-danger: var(--nhsuk-error-colour);
	--vf-danger-lighter: var(--nhsuk-error-background-colour);
	--vf-success: var(--nhsuk-success-colour);
	--vf-success-lighter: var(--nhsuk-button-hover-colour);
	--vf-success-darker: var(--nhsuk-button-active-colour);

	--vf-gray-50: var(--nhsuk-white-colour);
	--vf-gray-100: var(--nhsuk-grey-5-colour);
	--vf-gray-200: var(--nhsuk-grey-4-colour);
	--vf-gray-300: var(--nhsuk-grey-3-colour);
	--vf-gray-400: var(--nhsuk-grey-3-colour);
	--vf-gray-500: var(--nhsuk-grey-2-colour);
	--vf-gray-600: var(--nhsuk-grey-2-colour);
	--vf-gray-700: var(--nhsuk-grey-1-colour);
	--vf-gray-800: var(--nhsuk-black-colour);
	--vf-gray-900: var(--nhsuk-black-colour);

	--vf-dark-50: #f9fafb;
	--vf-dark-100: #f3f4f6;
	--vf-dark-200: #e5e7eb;
	--vf-dark-300: #d1d5db;
	--vf-dark-400: #9ca3af;
	--vf-dark-500: #6b7280;
	--vf-dark-600: #4b5563;
	--vf-dark-700: #374151;
	--vf-dark-800: #1f2937;
	--vf-dark-900: #111827;

	--vf-ring-color: var(--nhsuk-focus-colour);
	--vf-ring-width: 4px;

	--vf-link-color: var(--vf-primary);
	--vf-link-decoration: inherit;

	--vf-font-size: 1.1875rem;
	--vf-font-size-sm: 0.875rem;
	--vf-font-size-lg: var(--nhsuk-font-size-l);

	--vf-font-size-small: 1rem;
	--vf-font-size-small-sm: 0.8125rem;
	--vf-font-size-small-lg: 0.875rem;

	--vf-font-size-h1: var(--nhsuk-font-size-l);
	--vf-font-size-h1-sm: var(--nhsuk-font-size-l);
	--vf-font-size-h1-lg: var(--nhsuk-font-size-l);

	--vf-font-size-h2: 1.875rem;
	--vf-font-size-h2-sm: 1.875rem;
	--vf-font-size-h2-lg: 1.875rem;

	--vf-font-size-h3: 1.5rem;
	--vf-font-size-h3-sm: 1.5rem;
	--vf-font-size-h3-lg: 1.5rem;

	--vf-font-size-h4: 1.25rem;
	--vf-font-size-h4-sm: 1.25rem;
	--vf-font-size-h4-lg: 1.25rem;

	--vf-font-size-h1-mobile: 1.5rem;
	--vf-font-size-h1-mobile-sm: 1.5rem;
	--vf-font-size-h1-mobile-lg: 1.5rem;

	--vf-font-size-h2-mobile: 1.25rem;
	--vf-font-size-h2-mobile-sm: 1.25rem;
	--vf-font-size-h2-mobile-lg: 1.25rem;

	--vf-font-size-h3-mobile: 1.125rem;
	--vf-font-size-h3-mobile-sm: 1.125rem;
	--vf-font-size-h3-mobile-lg: 1.125rem;

	--vf-font-size-h4-mobile: 1rem;
	--vf-font-size-h4-mobile-sm: 1rem;
	--vf-font-size-h4-mobile-lg: 1rem;

	--vf-font-size-blockquote: 1rem;
	--vf-font-size-blockquote-sm: 0.875rem;
	--vf-font-size-blockquote-lg: 1rem;

	--vf-line-height: var(--nhsuk-font-line-height);
	--vf-line-height-sm: 1.25rem;
	--vf-line-height-lg: var(--nhsuk-font-line-height-l);

	--vf-line-height-small: var(--vf-line-height-sm);
	--vf-line-height-small-sm: var(--vf-line-height-sm);
	--vf-line-height-small-lg: var(--vf-line-height-sm);

	--vf-line-height-headings: var(--nhsuk-font-line-height-l);
	--vf-line-height-headings-sm: var(--nhsuk-font-line-height-l);
	--vf-line-height-headings-lg: var(--nhsuk-font-line-height-l);

	--vf-line-height-blockquote: 1.5rem;
	--vf-line-height-blockquote-sm: 1.25rem;
	--vf-line-height-blockquote-lg: 1.5rem;

	--vf-letter-spacing: 0;
	--vf-letter-spacing-sm: 0;
	--vf-letter-spacing-lg: 0;

	--vf-letter-spacing-small: 0;
	--vf-letter-spacing-small-sm: 0;
	--vf-letter-spacing-small-lg: 0;

	--vf-letter-spacing-headings: 0;
	--vf-letter-spacing-headings-sm: 0;
	--vf-letter-spacing-headings-lg: 0;

	--vf-letter-spacing-blockquote: 0;
	--vf-letter-spacing-blockquote-sm: 0;
	--vf-letter-spacing-blockquote-lg: 0;

	--vf-gutter: var(--nhsuk-spacing-3);
	--vf-gutter-sm: var(--nhsuk-spacing-2);
	--vf-gutter-lg: var(--nhsuk-spacing-3);

	--vf-min-height-input: 2.5rem;
	--vf-min-height-input-sm: 2.125rem;
	--vf-min-height-input-lg: 2.875rem;

	--vf-py-input: 0.375rem;
	--vf-py-input-sm: 0.375rem;
	--vf-py-input-lg: 0.625rem;

	--vf-px-input: 0.75rem;
	--vf-px-input-sm: 0.5rem;
	--vf-px-input-lg: 0.875rem;

	--vf-py-btn: 0.875rem;
	--vf-py-btn-sm: 0.875rem;
	--vf-py-btn-lg: 0.875rem;

	--vf-px-btn: 1rem;
	--vf-px-btn-sm: 1rem;
	--vf-px-btn-lg: 1rem;

	--vf-py-btn-small: 0.25rem;
	--vf-py-btn-small-sm: 0.25rem;
	--vf-py-btn-small-lg: 0.375rem;

	--vf-px-btn-small: 0.625rem;
	--vf-px-btn-small-sm: 0.625rem;
	--vf-px-btn-small-lg: 0.75rem;

	--vf-py-group-tabs: var(--vf-py-input);
	--vf-py-group-tabs-sm: var(--vf-py-input-sm);
	--vf-py-group-tabs-lg: var(--vf-py-input-lg);

	--vf-px-group-tabs: var(--vf-px-input);
	--vf-px-group-tabs-sm: var(--vf-px-input-sm);
	--vf-px-group-tabs-lg: var(--vf-px-input-lg);

	--vf-py-group-blocks: 0.75rem;
	--vf-py-group-blocks-sm: 0.625rem;
	--vf-py-group-blocks-lg: 0.875rem;

	--vf-px-group-blocks: 1rem;
	--vf-px-group-blocks-sm: 1rem;
	--vf-px-group-blocks-lg: 1rem;

	--vf-py-tag: 0.5rem;
	--vf-py-tag-sm: var(--vf-py-tag);
	--vf-py-tag-lg: var(--vf-py-tag);

	--vf-px-tag: 0.25rem;
	--vf-px-tag-sm: var(--vf-px-tag);
	--vf-px-tag-lg: var(--vf-px-tag);

	--vf-py-slider-tooltip: 0.125rem;
	--vf-py-slider-tooltip-sm: 0.0625rem;
	--vf-py-slider-tooltip-lg: 0.1875rem;

	--vf-px-slider-tooltip: 0.375rem;
	--vf-px-slider-tooltip-sm: 0.3125rem;
	--vf-px-slider-tooltip-lg: 0.5rem;

	--vf-py-blockquote: 0.25rem;
	--vf-py-blockquote-sm: 0.25rem;
	--vf-py-blockquote-lg: 0.25rem;

	--vf-px-blockquote: 0.75rem;
	--vf-px-blockquote-sm: 0.75rem;
	--vf-px-blockquote-lg: 0.75rem;

	--vf-py-hr: 0.25rem;

	/* Space between addon and text input */
	--vf-space-addon: 0;
	--vf-space-addon-sm: var(--vf-space-addon);
	--vf-space-addon-lg: var(--vf-space-addon);

	/* Space between checkboxes & radios and their labels */
	--vf-space-checkbox: 0.375rem;
	--vf-space-checkbox-sm: var(--vf-space-checkbox);
	--vf-space-checkbox-lg: var(--vf-space-checkbox);

	/* Space between tags in `TagsElement` */
	--vf-space-tags: 0.1875rem;
	--vf-space-tags-sm: var(--vf-space-tags);
	--vf-space-tags-lg: var(--vf-space-tags);

	/* Space above `StaticElement` tags */
	--vf-space-static-tag-1: 1rem;
	--vf-space-static-tag-2: 2rem;
	--vf-space-static-tag-3: 3rem;

	/* Space between the field's top and floating label */
	--vf-floating-top: 0rem;
	--vf-floating-top-sm: 0rem;
	--vf-floating-top-lg: 0.6875rem;

	--vf-bg-input: var(--nhsuk-input-background-colour);
	--vf-bg-input-hover: var(--vf-bg-input);
	--vf-bg-input-focus: var(--vf-bg-input);
	--vf-bg-input-danger: var(--vf-bg-input);
	--vf-bg-input-success: var(--vf-bg-input);
	--vf-bg-checkbox: var(--vf-bg-input);
	--vf-bg-checkbox-hover: var(--vf-bg-checkbox);
	--vf-bg-checkbox-focus: var(--vf-bg-checkbox);
	--vf-bg-checkbox-danger: var(--vf-bg-checkbox);
	--vf-bg-checkbox-success: var(--vf-bg-checkbox);
	--vf-bg-disabled: var(--vf-gray-200);
	--vf-bg-selected: rgba(17, 24, 39, 0.05); /* Used eg. when select option is hovered or a checkbox is selected in `blocks` view */
	--vf-bg-passive: var(--vf-gray-300); /* Used as a background color for eg. slider, toggle */
	--vf-bg-icon: var(--vf-gray-500);
	--vf-bg-danger: var(--vf-danger-lighter);
	--vf-bg-success: var(--vf-success-lighter);
	--vf-bg-tag: var(--nhsuk-dark-blue-colour);
	--vf-bg-slider-handle: var(--vf-primary);
	--vf-bg-toggle-handle: var(--nhsuk-white-colour);
	--vf-bg-date-head: var(--vf-gray-100);
	--vf-bg-addon: transparent;
	--vf-bg-btn: var(--nhsuk-button-colour);
	--vf-bg-btn-danger: var(--vf-danger);
	--vf-bg-btn-secondary: var(--nhsuk-secondary-button-border-colour);

	--vf-color-input: var(--vf-gray-900);
	--vf-color-input-hover: var(--vf-color-input);
	--vf-color-input-focus: var(--vf-color-input);
	--vf-color-input-danger: var(--vf-danger);
	--vf-color-input-success: var(--vf-success);
	--vf-color-disabled: var(--vf-gray-400);
	--vf-color-placeholder: var(--vf-gray-300);
	--vf-color-passive: var(--vf-gray-700); /* Used when text is displayed on passive background eg. `off` toggle */
	--vf-color-muted: var(--vf-gray-900); /* Used for helper texts eg. element description, floating label */
	--vf-color-floating: var(--vf-color-muted);
	--vf-color-floating-focus: var(--vf-color-floating); /* Used when the input is focused */
	--vf-color-floating-success: var(--vf-color-floating); /* Used when the input is filled with success */
	--vf-color-floating-danger: var(--vf-color-floating); /* Used when the input has error */
	--vf-color-on-primary: var(--nhsuk-button-text-colour); /* Used when text is displayed on primary color */
	--vf-color-danger: var(--vf-danger);
	--vf-color-success: var(--vf-success);
	--vf-color-tag: var(--vf-color-on-primary);
	--vf-color-addon: var(--vf-color-input);
	--vf-color-date-head: var(--vf-gray-700);
	--vf-color-btn: var(--vf-color-on-primary);
	--vf-color-btn-danger: var(--nhsuk-button-text-colour);
	--vf-color-btn-secondary: var(--vf-gray-700);

	--vf-border-color-input: var(--vf-gray-700);
	--vf-border-color-input-hover: var(--vf-border-color-input);
	--vf-border-color-input-focus: var(--vf-gray-900);
	--vf-border-color-input-danger: var(--vf-danger);
	--vf-border-color-input-success: var(--vf-success);
	--vf-border-color-checkbox: var(--vf-border-color-input);
	--vf-border-color-checkbox-focus: var(--vf-border-color-input);
	--vf-border-color-checkbox-hover: var(--vf-border-color-checkbox);
	--vf-border-color-checkbox-danger: var(--vf-border-color-checkbox);
	--vf-border-color-checkbox-success: var(--vf-border-color-checkbox);
	--vf-border-color-checked: var(--vf-primary);
	--vf-border-color-passive: var(--vf-gray-300); /* Used as a border for passive states eg. `off` toggle */
	--vf-border-color-slider-tooltip: var(--vf-primary);
	--vf-border-color-tag: var(--nhsuk-dark-blue-colour);
	--vf-border-color-btn: transparent;
	--vf-border-color-btn-danger: var(--vf-border-color-btn);
	--vf-border-color-btn-secondary: var(--vf-border-color-btn);
	--vf-border-color-blockquote: var(--vf-gray-300);
	--vf-border-color-hr: var(--vf-gray-300);

	--vf-border-width-input-t: 2px;
	--vf-border-width-input-r: 2px;
	--vf-border-width-input-b: 2px;
	--vf-border-width-input-l: 2px;

	--vf-border-width-radio-t: var(--vf-border-width-input-t);
	--vf-border-width-radio-r: var(--vf-border-width-input-r);
	--vf-border-width-radio-b: var(--vf-border-width-input-b);
	--vf-border-width-radio-l: var(--vf-border-width-input-l);

	--vf-border-width-checkbox-t: var(--vf-border-width-input-t);
	--vf-border-width-checkbox-r: var(--vf-border-width-input-r);
	--vf-border-width-checkbox-b: var(--vf-border-width-input-b);
	--vf-border-width-checkbox-l: var(--vf-border-width-input-l);

	--vf-border-width-dropdown: 1px;
	--vf-border-width-btn: 2px;
	--vf-border-width-toggle: 0.125rem;
	--vf-border-width-tag: 1px;
	--vf-border-width-blockquote: 3px;

	--vf-shadow-input: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	--vf-shadow-input-hover: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	--vf-shadow-input-focus: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	--vf-shadow-handles: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	--vf-shadow-handles-hover: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	--vf-shadow-handles-focus: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	--vf-shadow-btn: 0 var(--nhsuk-spacing-1) 0 var(--nhsuk-button-shadow-colour);
	--vf-shadow-dropdown: 0px 0px 0px 0px rgba(0, 0, 0, 0);

	--vf-radius-input: 0;
	--vf-radius-input-sm: var(--vf-radius-input);
	--vf-radius-input-lg: var(--vf-radius-input);

	--vf-radius-btn: 0.25rem;
	--vf-radius-btn-sm: var(--vf-radius-btn);
	--vf-radius-btn-lg: var(--vf-radius-btn);

	/* Used for eg. list button, slider tooltip, info tooltip */
	--vf-radius-small: var(--vf-radius-input);
	--vf-radius-small-sm: var(--vf-radius-input-sm);
	--vf-radius-small-lg: var(--vf-radius-input);

	/* Used for larger inputs eg. textarea, editor, drag and drop, checkbox/radio blocks */
	--vf-radius-large: var(--vf-radius-input);
	--vf-radius-large-sm: var(--vf-radius-input-sm);
	--vf-radius-large-lg: var(--vf-radius-input);

	--vf-radius-tag: var(--vf-radius-input);
	--vf-radius-tag-sm: var(--vf-radius-input-sm);
	--vf-radius-tag-lg: var(--vf-radius-input);

	--vf-radius-checkbox: var(--vf-radius-input);
	--vf-radius-checkbox-sm: var(--vf-radius-input-sm);
	--vf-radius-checkbox-lg: var(--vf-radius-input);

	--vf-radius-slider: var(--vf-radius-input);
	--vf-radius-slider-sm: var(--vf-radius-input-sm);
	--vf-radius-slider-lg: var(--vf-radius-input);

	--vf-radius-image: var(--vf-radius-input);
	--vf-radius-image-sm: var(--vf-radius-input-sm);
	--vf-radius-image-lg: var(--vf-radius-input);

	--vf-radius-gallery: var(--vf-radius-input);
	--vf-radius-gallery-sm: var(--vf-radius-input-sm);
	--vf-radius-gallery-lg: var(--vf-radius-input);

	--vf-checkbox-size: 2.75rem;
	--vf-checkbox-size-sm: 2.75rem;
	--vf-checkbox-size-lg: 2.75rem;

	--vf-gallery-size: 6rem;
	--vf-gallery-size-sm: 5rem;
	--vf-gallery-size-lg: 7rem;

	--vf-toggle-width: 3rem;
	--vf-toggle-width-sm: 2.75rem;
	--vf-toggle-width-lg: 3rem;

	--vf-toggle-height: 1.25rem;
	--vf-toggle-height-sm: 1rem;
	--vf-toggle-height-lg: 1.25rem;

	--vf-slider-height: 0.375rem;
	--vf-slider-height-sm: 0.3125rem;
	--vf-slider-height-lg: 0.5rem;

	--vf-slider-height-vertical: 20rem;
	--vf-slider-height-vertical-sm: var(--vf-slider-height-vertical);
	--vf-slider-height-vertical-lg: var(--vf-slider-height-vertical);

	--vf-slider-handle-size: 1rem;
	--vf-slider-handle-size-sm: 0.875rem;
	--vf-slider-handle-size-lg: 1.25rem;

	--vf-slider-tooltip-distance: 0.5rem;
	--vf-slider-tooltip-distance-sm: 0.375rem;
	--vf-slider-tooltip-distance-lg: 0.5rem;

	--vf-slider-tooltip-arrow-size: 0.3125rem;
	--vf-slider-tooltip-arrow-size-sm: var(--vf-slider-tooltip-arrow-size);
	--vf-slider-tooltip-arrow-size-lg: var(--vf-slider-tooltip-arrow-size);
}

/* Overrides for NHS form elements */
.a-nhs-form {
	.nhsuk-form-group:has(.vf-static-tag) {
		margin-bottom: 0;
	}

	.nhsuk-label {
		font-weight: var(--nhsuk-font-weight-bold);
	}

	/* We use NHS classes to handle errors inside templates. This prevents double error messages */
	.vf-errors {
		display: none;
	}

	.vf-description {
		color: var(--vf-gray-700);
		font-size: var(--nhsuk-font-size);
		line-height: var(--nhsuk-font-line-height);
		margin: 0 0 6px 0;
	}

	/* VueForm multiselect adds success class when an option is selected
	   we need to override this to prevent the green border and background */
	.vf-multiselect.vf-multiselect-success {
		background-color: var(--vf-bg-input);
		color: var(--vf-color-input);
		border-color: var(--vf-border-color-input);
	}

	.vf-steps-container {
		display: none;
	}

	.vf-steps-controls {
		margin: 0;

		.vf-btn-primary {
			--vf-primary: var(--vf-success);

			&:hover {
				color: var(--vf-gray-50);
				background-color: var(--vf-success-lighter);
			}

			&:active,
			&:active:hover,
			&:active:focus {
				background-color: var(--vf-success-darker);
			}
		}
	}

	.vf-addon.vf-addon-before,
	.vf-addon.vf-addon-after {
		display: block;
		padding: 0.5rem 0;

		.vf-addon-wrapper {
			display: block;
		}
	}
}

form [multiple]:focus,
form [type='checkbox']:focus,
form [type='date']:focus,
form [type='datetime-local']:focus,
form [type='email']:focus,
form [type='month']:focus,
form [type='number']:focus,
form [type='password']:focus,
form [type='radio']:focus,
/* form [type='search']:focus, */
form [type='tel']:focus,
form [type='text']:focus,
form [type='time']:focus,
form [type='url']:focus,
form [type='week']:focus,
form select:focus,
form textarea:focus {
	outline: 4px solid var(--vf-ring-color);
}

.vf-assistive-text {
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}