p.message {
	display: block;
	text-align: center;
	vertical-align: middle;
	background-color: #e3f2fd;
	color: #000;
	font-size: 1em;
	border-radius: 10px;
	border: 1px dotted #dbe6ec;
	padding: 20px 10px 20px 40px;
	margin: 5px auto 20px auto;
	max-width: 800px;
	background-image: url('/themes/icons/blue/message-blue.svg');
	background-size: 16px;
	background-position: 10px center;
	background-repeat: no-repeat;
}

p.message.success {
	background-color: #e6f9d0;
	color: var(--color-green);
	background-image: url('/themes/icons/green/check.svg');
}

span.help {
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	background-image: url('/themes/icons/blue/help-blue.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px;
	cursor: help;
}

span.help.access {
	background-image: url('/themes/icons/blue/padlock.svg');
}

span.help div.help-item {
	position: absolute;
	z-index: 500;
	width: 250px;
	background-color: #f8f9fb;
	border: 1px solid black;
	border-radius: 5px;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	word-wrap: break-word;
	overflow: hidden;
	white-space: pre-wrap;
}

span.help div.help-item p {
	display: block;
	position: relative;
	min-height: 1.5em;
	width: calc(100% - 1em);
	padding: 0.5em;
}

input.error {
	border-color: #B91515 !important;
	box-shadow: 0px 0px 5px #B91515 !important;
}
input[type='checkbox'].error{
	outline: 1px solid #B91515 !important;
}

input[disabled], select[disabled], textarea[disabled] {
	cursor: not-allowed;
}

div.formItem > input[type="file"]::file-selector-button {
	visibility: hidden;
	width: 0;
}

label.error {
	position: absolute;
	z-index: 100;
	top: 35px;
	font-size: 8px;
	color: #B91515;
	left: 7px;
	pointer-events: none;
}

label span.notice_required {
	font-size: 14px;
	color: #B91515;
	position: relative;
	top: -3px;
}

input[type='button']:hover, input[type='submit']:hover {
	filter: saturate(7);
	cursor: pointer;
}

div.formGroup div.formItem, div.formSubGroup div.formItem, div#osrButtons div.formItem {
	margin-bottom: 0.3em;
	position: relative;
	padding: 0 0.3em;
}

div.formGroup div.formItem div.formItemDetails {
	display: block;
	font-size: 0.9em;
	font-weight: 500;
	margin-left: 1em;
	color: var(--color-grey);
	white-space: wrap;
}

div.formSubGroup.flex {	display: flex; }

div.formSubGroup.flex.allWrap {
	flex-wrap: wrap;
}

@media (max-width: 59.9rem) {
	div.formSubGroup.flex.mobileWrap {
		flex-wrap: wrap;
	}
}

div.formSubGroup.container {
	display: inline-block;
	width: 100%;
	vertical-align: top;
}

div.formSubGroup.container ~ .container, div.formTabGroup ~ .container {
	margin-left: 1em;
}

div.formSubGroup div.formItem {
	width: calc(100% - 0.6em);
}
div.formSubGroup.flex > div ~ div {
	/*margin-left: 0.3em; */
}

div.formSubGroup.flex > section ~ div {
	margin-left: 1em;
}

div.formSubGroup.flex > div ~ section {
	margin-left: 1em;
}

div.formSubGroup.flex.center {
	justify-content: center;
}

div.formSubGroup.flex.right {
	justify-content: flex-end;
}

div.formGroup span.gTitle {
	display: inline-block;
	font-weight: 700;
	color: #000;
	padding: 0.5em 0.3em;
	margin-top: 1em;
}

div.formLoopGroup {
	width: 100%;
}

div.formLoopGroup > menu {
	width: 100%;
	position: relative;
	height: 2.8em;
}

div.formLoopGroup > menu input.addRow {
	width: 5.5em !important;
	background-color: #a5db54 !important;
	background-image: url('/themes/icons/white/plus-symbol.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1em;
	color: #fff;
	position: absolute;
	right: 0;
	border: 0;
}

div.formLoopGroup menu input[type='button'] {
	margin-top: 0 !important;
}

div.formLoopGroup .template {
	display: none !important;
}

div.formLoopGroup > span.fieldGroup:nth-of-type(n+3) > div.formItem label {
	display: none;
}

div.formLoopGroup > span.fieldGroup:nth-of-type(n+3) menu {
	top: 0 !important;
}

div.formLoopGroup span.fieldGroup { 
	display: flex;
	position: relative;
	padding: 0.25em;
}

div.formLoopGroup.cardize span.fieldGroup {
	border-left: 0.2em solid #f5f5f5;
	margin: 0.5em 0;
	transition: border 0.2s, background-color 0.2s;
}

div.formLoopGroup.cardize span.fieldGroup:hover {
	border-left: 0.2em solid #4281a4;
	background-color: #e8f3f7;
	transition: border 0.2s, background-color 0.2s;
}

div.formLoopGroup span.fieldGroup:nth-of-type(2) {
	padidng-top: 0.5em;
}

div.formLoopGroup span.fieldGroup > div.formItem {
	flex: 1 1;
}

div.formLoopGroup span.fieldGroup menu { 
	display: flex;
	padding-bottom: 0.3em;
	align-items: flex-start;
}

div.formLoopGroup:not(.notitle) span.fieldGroup:nth-of-type(2) menu {
	padding-top: 1.5em;
}

div.formLoopGroup span.fieldGroup menu input {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
	border: 0!important;
	margin: 0 0.1em;
	width: 1.8em !important;
	color: #FFFFFF;
}

div.formLoopGroup span.fieldGroup menu input.move {
	background-image: url('/themes/icons/black/move-option.svg');
}

div.formLoopGroup span.fieldGroup menu input.advanced {
	background-image: url('/themes/icons/black/three-small-square-shapes.svg');
}

div.formLoopGroup span.fieldGroup.active {
	padding: 0.5em 0.25em;
}


div.formLoopGroup span.fieldGroup.active menu input.advanced {
	background-color: #c3c598 !important;
}

div.formLoopGroup span.fieldGroup menu input.remove {
	background-color: #db5461 !important;
	background-image: url('/themes/icons/white/remove-symbol.svg');
}

div.formLoopGroup span.fieldGroup menu div input.fullButton {
	width: auto !important;
	max-width: unset;
	background-position: 1em center;
	background-size: 1em !important;
	padding: 0.5em 1em 0.5em 2.5em !important;
}

@media (max-width: 59.9rem) {
	
	div.formLoopGroup span.fieldGroup menu div.button {
		margin: 0;
		padding: 0;
	}
	
	div.formLoopGroup span.fieldGroup menu div input.fullButton {
		width: 1.8em !important;
		color: transparent;
		background-size: 50% !important;
		background-position: center !important;
		padding: 0.5em !important;
		
	}
}

div.formLoopGroup span.fieldGroup textarea {
	min-height: 2.5em;
	height: 2.5em;
	resize: vertical;
	max-height: 6.5em;
}

div.formLoopGroup span.fieldGroup div.groupAdvanced {
	display: none;
	flex: 1 0 80%;
}

div.formLoopGroup footer.total h3 {
	text-align: right;
	border-top: 1px solid black;
	padding-top: 0.3em;
	padding-right: 1.5em;
}

/* Form Tab Group */

div.formTabGroup {

}

div.formTabGroup > menu {
	display: flex;
	width: 100%;
	padding: 0 0 1em 0;
	justify-content: space-between;
	overflow-y: auto;
}

@media (max-width: 59.9rem) {
	div.formTabGroup menu {
		overflow-y: auto;
	}
}


div.formTabGroup menu > div {
	cursor: pointer;
	flex: 1 1 15em;
	transition: background-color 0.2s, border-color 0.2s;
	border-bottom: 0.2em solid var(--color-light-grey);
}

div.formTabGroup menu > div.selected {
	border-bottom: 0.2em solid var(--color-blue);
	background-color: var(--color-light-grey);
	font-weight: 700;
}

div.formTabGroup menu > div:hover {
	background-color: var(--color-light-grey);
	border-bottom: 0.2em solid var(--color-grey);
	transition: background-color 0.2s border-color 0.2s;
	font-weight: 700;
}

div.formTabGroup menu a {
	display: block;
	padding: 1em 2em;
	white-space: nowrap;
	text-align: center;
}

div.formTabGroup div.tabBodyWrapper {
	display: block;
	width: 100%;
}

/* Pill Group */
div.formPillGroup {
	border-left: 0.2em solid var(--color-blue);
	padding: 0.3em 0.5em;
	margin-bottom: 0.5em;
	background-color: var(--color-light-grey);
}

div.formPillGroup > label {
	font-weight: 900;
	margin-bottom: 0.5em;
}

div.formPillGroup > menu {
	display: flex;
	gap: 1em;
	width: 100%;
	padding: 0 0 0.5em 0;
	margin-left: 0;
	overflow-x: auto;
}

@media (max-width: 59.9rem) {
	div.formPillGroup menu {
		overflow-x: auto;
	}
}


div.formPillGroup menu > div {
	cursor: pointer;
	position: relative;
}

div.formPillGroup menu > div a {
	display: block;
	width: calc(100% - 2em);
	border: 0.2em solid var(--color-blue);
	/* background-color: var(--color-light-grey); */
	border-radius: 5px;

	padding: 0.3em 0.5em 0.3em 2em;
	white-space: nowrap;
	text-align: center;
	transition: border-color 0.2s, background-color 0.2s;
}

div.formPillGroup[data-enabled='false'] menu > div:not(.selected) a {
	opacity: 0.5;
	cursor: not-allowed;
}

div.formPillGroup:not(.minify) menu > div.selected a::before {
	content: "\f00c"; /* Font Awesome check */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 1em;
	top: 0.5em;
	color: #FFF;
	pointer-events: none;
}

div.formPillGroup menu > div.selected a {
	background-color: var(--color-blue);
	color: #FFF !important;
	font-weight: 700;
}

div.formPillGroup menu > div:hover a {
	background-color: var(--color-dark-blue);
	border-color: var(--color-dark-blue);
	color: #FFF !important;
	transition: border-color 0.2s, background-color 0.2s;
}

/* Minify */
div.formPillGroup.minify menu {
	gap: 0.5em;
	overflow-x: hidden;
}

div.formPillGroup.minify menu > div {
	min-width: 1em;
}

div.formPillGroup.minify menu > div a {
	padding: 0.3em;
	width: calc(100% - 0.6em);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* End Minify */

div.formPillGroup div.pillBodyWrapper {
	display: block;
	width: calc(100% - 1em);
	margin-left: 1em;
}


/* Form Items */

div.formItem ul.inlineRadio {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

div.formItem ul.inlineRadio li {
	border: 0.1em solid white;
	min-height: 1.5em;
	background-color: var(--color-light-grey);
	transition: background-color 0.2s;
}

div.formItem ul.inlineRadio li:hover {
	background-color: var(--color-light-blue);
	color: #555;
	transition: background-color 0.2s;
}

div.formItem ul.inlineRadio li[data-selected='true'] {
	background-color: var(--color-blue);
	color: #FFF;
	transition: background-color 0.2s;
}

div.formItem ul.inlineRadio li input[type='radio'] { display: none; }

div.formItem ul.inlineRadio li label {
	padding: 0.5em 0.75em;
	cursor: pointer;
	width: calc(100% - 1.5em);
	height: calc(100% - 1em);
}

div.formGroup fieldSet.checkbox {
	margin-top: 1em;
}

div.inlineCheckbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

div.inlineCheckbox div.icbItem {
	border: 0.1em solid white;
	padding: 0.5em;
	min-height: 1.5em;
	background-color: var(--color-light-grey);
	transition: background-color 0.2s;
	cursor: pointer;
}

div.inlineCheckbox[data-fullBlocks] div.icbItem {
	flex: 1 0 calc(100% - 1.2em);
	display: flex;
}

div.inlineCheckbox div.icbItem * {
	cursor: pointer;
}

div.inlineCheckbox div.icbItem[data-icb-selected='true'] {
	background-color: var(--color-blue);
	color: #FFF;
	transition: background-color 0.2s;
}

div.inlineCheckbox div.icbItem i {
	padding: 0.5em;
}

div.inlineCheckbox div.icbItem i ~ label {
	padding-top: 0.5em;
}

div.inlineCheckbox div.icbItem:hover {
	background-color: var(--color-light-blue);
	color: #555;
	transition: background-color 0.2s;
}
div.checkboxGroup {
	flex-wrap: wrap;
	justify-content: center;
	margin: 0.5em 0;
}

div.checkboxGroup fieldSet.checkbox {
	padding: 0;
	margin: auto;
}

div.formGroup input[type='checkbox'], div.formGroup input[type='radio'] {
	margin: 0.3em;
}

fieldSet.checkbox label, ul.multicheck li label.checkboxLabel {
	width: calc(100% - 1em) !important;
	background-color: var(--color-light-grey);
	transition: all 0.2s;
	border-radius: 3px;
	padding: 0.5em;
	cursor: pointer;
	font-weight: 700;
}

fieldSet.checkbox label:hover, ul.multicheck li label.checkboxLabel:hover {
	background-color: var(--color-medium-grey);
}

fieldSet.checkbox label[data-selected='true'] {
	background-color: #cbe9f6;
	color: #000 !important;
	transition: all 0.2s;
}

fieldSet.checkbox label[data-selected='true'] div.formItemDetails {
	color: #00;
}

div.formGroup h2, div.formGroup h3, div.formGroup h4 {
	margin-bottom: 0.7em;
}

div.formGroup label, div.formSubGroup label, div.formGroup input:not([type='checkbox']):not([type='radio']):not([data-token-input-box='true']), div.formSubGroup input:not([type='checkbox']):not([type='radio']):not([data-token-input-box='true']), div.formGroup select, div.formSubGroup select, div.formGroup output {
	display: block;
	width: 100%;
	min-height: 1.5em;
	white-space: nowrap;
}

div.formGroup textarea {
	display: block;
	width: 100%;
	min-height: 1.5em;
}

div.formGroup output {
	width: calc(100% - 0.5em);
	margin-left: 0.5em;
	margin-top: 0.5em;
	font-weight: 800;
	color: #000;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.formGroup output.cost::before {
	content: '$ ';
	opacity: .3;
}

div#osrButtons div.formItem label {
	display: block;
	width: 100%;
}

div.formGroup input:not([type='checkbox']):not([type='radio']):not([data-token-input-box='true']), div.formSubGroup input:not([type='checkbox']):not([type='radio']):not([data-token-input-box='true']), div.formGroup select, div.formSubGroup select, div.formGroup textarea, div.formGroup ul.token-input-list, div#osrButtons div.formItem input, button[type='button'] {
	border-radius: 4px;
	border: 1px #dbe6ec solid;
	background-color: #FFF;
	padding: 0.3em;
	box-sizing: border-box;
	height: 2.2em;
}

div.formGroup input:not([type='checkbox']):not([type='radio']):not([data-token-input-box='true']):focus, div.formSubGroup input:not([type='checkbox']):not([type='radio']):not([data-token-input-box='true']):focus, div.formGroup select:focus, div.formSubGroup select:focus, div.formGroup textarea:focus, div.formGroup ul.token-input-list.token-input-focused, div.formGroup div.token-input:focus, div#osrButtons div.formItem input:focus, button[type='button']:focus {
	box-shadow: 0px 0px 5px #02627f;
}

div.toggleGroup div.tgHeader {
	display: flex;
	width: calc(100% - 1em);
	padding: 0.25em 0.5em;
	cursor: pointer;
	color: var(--color-blue);
	transition: background-color 0.2s;
}

div.toggleGroup div.tgHeader:hover {
	background-color: var(--color-light-blue);
	transition: background-color 0.2s;
	border-left: 0.2em solid var(--color-blue);
}

div.toggleGroup div.tgHeader[data-toggleActive] {
	border-left: 0.2em solid var(--color-blue);
}

div.toggleGroup div.tgHeader span:first-of-type {
	flex: 1 0 50%;
	font-weight: 700;
	padding: 1em;
}

div.toggleGroup div.tgHeader span.tgIcon {
	flex: 0 1 2em;
	align-self: flex-end;
	text-align: center;
}

div.toggleGroup div.tgHeader i {
	transition: all 0.4s;
	padding: 1em;
}

div.toggleGroup div[data-toggleGroup] {
	display: none;
	padding-left: 1em;
	border-left: 0.2em solid var(--color-blue);
}

div.formItem.datePicker::after {
	content: "\f073"; /* Font Awesome calendar-alt */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right: 1em;
	top: calc(0.3em + 50%);
	color: #888;
	pointer-events: none;
}

input.ui-autocomplete-input {
	background-repeat: no-repeat;
	background-position: right 0.3em center;
	background-size: 1em;
	background-image: url('/themes/icons/grey/menu-grey.svg');
	padding-right: 2em !important; 
}

.ui-autocomplete .ui-menu-item div {
	max-width: 70vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui-state-active {
    background-color: #000 !important;
    outline:none;
}

.ui-autocomplete {
	z-index: 200 !important;
  	max-height: 20em;
  	overflow-y: auto;
  	overflow-x: hidden;
}

div.formGroup textarea {
	resize: none;
	height: 10.5em;
}

div.formGroup div.formItem.small textarea {
	height: 5em;
}

div.formGroup div.button {
	max-width: 10.5em;
}

div.formGroup div.button input, div.formGroup input.inlineButton {
	color: #FFFFFF;
	background-color: #18333c !important;
	border: 0 !important;
}

div.formGroup div.button input.labelMargin {
	margin-top: 1.5em;
}

/* Advanced inputs */
div.formItem div.formAdvanced {
	display: flex;
}

div.formItem div.formAdvanced div.fadButton {
	flex: 0 0 2em;
	align-self: flex-end;
	text-align: center;
}

div.formItem div.formAdvanced div.fadButton a {
	display: inline-block;
	height: 100%;
	padding: 0.5em 1em;
}

/* New ButtonCheck Boxes */
div.buttonCheck {
	display: block;
}

div.buttonCheck input[type='checkbox'] {
	display: none;
}

div.buttonCheck button {
	color: #FFF;
	background-color: var(--color-medium-grey);
	border: 0;
	transition: background-color 0.2s, color 0.2s, opacity 0.2s;
	font-size: 0.8em;
	margin: 0.2em 0.5em;
	padding: 0 0.5em;
	opacity: 0.5;
}

div.buttonCheck button:hover, table.list tr.buttonCheckRow:hover div.buttonCheck button{
	background-color: var(--color-light-blue);
	color: #555;
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

tr.buttonCheckRow {
	transition: background-color 0.2s;
}

tr.buttonCheckRow[data-selected] {
	background-color: var(--color-light-blue) !important;
	transition: background-color 0.2s;
}

tr.buttonCheckRow[data-selected] div.buttonCheck button {
	background-color: var(--color-dark-blue) !important;
	color: #FFF !important;
	opacity: 1;
	transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}

/* Scrollable boxes */
div.boxWrapper.scrollable div.box {
	overflow-x: auto;
}

@media (max-width: 59.9rem) {
	div.boxWrapper.scrollable div.box div.formGroup, div.boxWrapper.scrollable div.box > table.list {
		width: 100%;
		overflow-x: auto;
	}

	div.boxWrapper.scrollable div.box span.fieldGroup {
		flex-wrap: nowrap;
	}
}

/*
div.boxWrapper.scrollable div.formLoopGroup > menu, div.boxWrapper.scrollable div.formLoopGroup > footer {
	position: static;
}
*/

div.iconList {
	display: flex;
	width: calc(100% - 2em);
	flex-wrap: wrap;
	padding: 1em;
	justify-content: center;
	gap: 1em;
}

div.iconList > div {
	flex: 0 1 calc(25% - 2em);
	padding: 1em;
	transition: background-color 0.2s;
}

div.iconList > div:hover {
	background-color: var(--color-medium-grey);
	cursor: pointer;
	transition: background-color 0.2s;
}

div.iconList div.ilIcon {
	display: block;
	margin: auto;
	border-radius: 50%;
	color: var(--color-blue);
	font-size: 3em;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
}

div.iconList div.ilIcon i {
	color: #FFF;
}

div.iconList div.ilTitle {
	padding-top: 1em;
	display: block;
	text-align: center;
	font-weight: 700;
	color: var(--color-blue);
}

footer.total {
	display: block;
	width: 100%;
}

footer.total span {
	text-align: right;
	font-weight: 700;
	padding-top: 0.3em;
	padding-right: 4.2em;
	display: block;
	width: calc(100% - 4.2em);
}

footer.total span:first-of-type {
	border-top: 1px solid black;
}



span.colourBlock {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin: 0.2em;
}

div.jqACWrapper {
	display: block;
}

div.jqACDescription {
	display: flex;
	justify-content: space-between;
	font-size: 0.7em;
}

div.jqACDescription span {
	font-style: italic;
	color: var(--color-grey);
	padding: 0 0.5em;
}

.ui-autocomplete-category {
	font-weight: bold;
	padding: 0.2em 0.4em;
	margin: 0.2em;
	line-height: 1.5;
}

.ui-datepicker {
	z-index: 100 !important;
}


/* New Tokenizer */
div.token-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-radius: 4px;
	border: 1px #dbe6ec solid;
	background-color: #FFF;
	padding: 0 0.3em;
	box-sizing: border-box;
	min-height: 2.2em;
	cursor: text;
}

/* When wrapper is focused */
div.token-wrapper.token-focused {
	box-shadow: 0px 0px 5px #02627f;
}

/* Token list layout */
ul.token-element-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0.25em;
}

/* Individual token */
.token-element {
	background-color: var(--color-medium-grey);
	padding: 0.3em 0.75em;
	border-radius: 5px;
	font-size: 0.9em;
	display: flex;
	align-items: center;
}

.token-element .token-remove {
	margin-left: 0.5em;
	cursor: pointer;
	color: var(--color-red);
}

.token-element .token-remove:hover {
	font-weight: 700;
}

/* Input field inside token wrapper */
.token-wrapper input {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	flex: 1 1 10em;
	min-width: 4em;
	padding: 0.2em;
	font-size: 1em;
}