p.message {
	display: block;
	text-align: left;
	vertical-align: middle;
	background-color: #f2faff;
	color: #000;
	font-size: 1em;
	border-radius: 10px;
	border: 1px dotted #dbe6ec;
	padding: 1em 2em 1em 3em;
	margin: 0.5em auto;
	max-width: 800px;
	background-image: url('/themes/icons/blue/info-circle.svg');
	background-size: 1.2em;
	background-position: 0.75em 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[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.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 > 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.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 label.subtitle {
	font-size: 0.8rem;
	padding: 0.25em 1em;
}

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.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 var(--color-grey-border) solid;
	background-color: var(--color-light-grey);
	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.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;
}