form {
	margin : 1em 0;
	clear  : both;
}

form h2, h3, p {
	margin-bottom : 1em;
}

div.form-row-narrow {
	display : none;
}

div.form-indent {
	margin-left : 10%;
}

div.form-indent p {
	margin-top    : 3%;
	margin-bottom : 2%;
}

.required {
	color       : var(--input-required);
	font-weight : bold;
}

form p.note {
	font-size   : 90%;
	margin-left : 160px;
	max-width   : 69%;
}

@media only screen and (max-width : 750px) {
	form p.note {
		margin-left : 2em;
		max-width   : 90%;
	}
}

/*  UGLY HACK

	The next two rules are a hack to stop the browser turning the input background a semi-transparent yellow and making it ugly.
 */
input {
	-webkit-background-clip: text !important;
	color: var(--input-text) !important;
	background   : var(--input-background) !important;
}

/*
	Since we can't force the browser not to change the inupt colour, we make it take forever to apply.
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	transition: all 10000000s;
}
/* END UGLY HACK */


/*
 * ===========================================================
 * BUTTONS AND BUTTON LINKS
 * ===========================================================
 */
input[type=submit],
button {
	font-weight   : normal;
	font-size     : 110%;
	padding       : 0.5em;
	border        : none;
	margin        : 0.5em 0.5em 1em 0;
	transition    : background-color 0.5s ease;
	border-radius : 5px;
}

a.button {
	display:inline-block;
	font-weight     : normal;
	font-size       : 110%;
	padding         : 0.3em;
	border          : none;
	margin          : 0.5em 0.5em 1em 0;
	transition      : background-color 0.5s ease;
	border-radius   : 5px;
	text-decoration : none;
}

input[type=submit],
button,
a.button {
	color      : var(--button-text);
	background : var(--button-background);
}

input[type=submit]:hover,
button:hover,
a.button:hover {
	color      : var(--button-hover-text);
	background : var(--button-hover-background);
}

input[type=submit]:focus,
button:focus,
a.button:focus {
	color      : var(--button-hover-text);
	background : var(--button-hover-background);
}

@media only screen and (max-width : 750px) {
	input[type=submit] {
		margin-left : 1em;
	}
}

fieldset {
	border        : 1px solid var(--main-border);
	border-radius : 5px;
	padding       : 1em;
	margin-bottom : 1em;
}

legend {
	padding          : 0.5em 1em;
	border           : 1px solid var(--main-border);
	border-radius    : 5px;
	background-color : var(--header-background);
}

form label {
	display        : inline-block;
	width          : 150px;
	padding        : 3px 6px 3px 0;
	text-align     : right;
	vertical-align : top;
}

form label.close {
	display    : inline;
	text-align : left;
	width      : 300px;
}

form label.right {
	display     : inline;
	text-align  : left;
	width       : 300px;
	margin-left : 1em;
}

form label.drop {
	display    : inline-block;
	padding    : 3px 6px 3px 0;
	text-align : left;
	width      : 125px;
}

form span.field-label {
	display        : inline-block;
	width          : 150px;
	padding        : 3px 6px 3px 0;
	text-align     : right;
	vertical-align : top;
}

form div.input-group {
	display     : inline-block;
	padding-top : 3px;
}

form input[type="text"],
form input[type="password"],
form input[type="file"] {
	background   : var(--input-background);
	width        : 69%;
	padding      : 5px;
	border       : 1px solid var(--main-border);
	margin-right : 10px;
}

form input[type="file"] {
	padding : 2px;
	width   : 70%;
}

form input[type="text"].with-checkbox {
	width : 500px;
}

form input[type="file"].with-link {
	width : 550px;
}

form input[type="checkbox"] {
	margin-top  : 3px;
	margin-left : 160px;
}

form input[type="radio"],
form input[type="checkbox"] {
	margin-left : 159px;
	width       : auto;
}


@media only screen and (max-width : 750px) {
	form input[type="radio"],
	form input[type="checkbox"] {
		margin-left   : 1.5em;
		margin-bottom : 1.5em;
	}

	form input[type="text"],
	form input[type="password"],
	form input[type="file"] {
		width         : 90%;
		margin-bottom : 10px;
	}
}

form input[type="radio"] {
	margin-top : 3px;
}

form p.related {
	display : inline-block;
}

form input:focus,
form textarea:focus {
	box-shadow : 0 0 5px 0 var(--input-highlight);
	border     : 1px solid var(--main-text);
}

select {
	font-size        : 90%;
	font-weight      : normal;
	padding          : 3px;
	font-family      : Verdana, Helvetica, sans serif;
	border           : 1px solid;
	width            : 51.8%;
	margin-top       : 3px;
	margin-bottom    : 2%;
	border-color     : var(--main-border);
	color            : var(--input-text);
	background-color : var(--input-background);
}

select option {
	color            : black; /*var(--input-text);*/
	background-color : white; /*var(--input-background);*/
}

textarea {
	font-size     : 75%;
	font-weight   : normal;
	padding       : 5px;
	font-family   : Verdana, Helvetica, sans serif;
	margin-bottom : 2%;
	width         : 69%;
	overflow      : auto;
	resize        : none;
	border        : 1px solid var(--main-border);
	background    : var(--input-background);
	color         : var(--input-text);
}

textarea:focus {
	background    : var(--input-background);
	color         : var(--input-text);
}

textarea.tall {
	height : 6em;
}

label {
	display        : inline-block;
	width          : 10%;
	text-align     : right;
	vertical-align : top;
	padding-right  : 2%;
}

input {
	color         : var(--input-text);
	background    : var(--input-background);
	width         : 70%;
	padding       : 0.5%;
	margin-bottom : 2%;
	border        : 1px solid;
	background    : white;
}

input:focus {
	color         : var(--input-text-focus);
	background    : var(--input-background-focus);
}

@media only screen and (max-width : 750px) {
	form label {
		width      : 50%;
		text-align : left;
	}
}

@media only screen and (max-width : 520px) {
	form label {
		width       : 88%;
		text-align  : left;
		margin-left : 1em;
	}

	input {
		width       : 88%;
		margin-left : 1em;
	}

	textarea {
		width       : 88%;
		margin-left : 0.9em;
	}

	select {
		width       : 90%;
		margin-left : 1em;
	}
}

@media (-webkit-min-device-pixel-ratio : 1.25), (min-resolution : 120dpi) {
	select {
		-webkit-appearance : menulist-text;
		/* margin-left        : 1em; */
	}
}

/* Do not group these rules for placeholders, it will break them. */

form input::-moz-placeholder {
	opacity : 1;
}

form input:-ms-input-placeholder {
	opacity : 1;
}

/*
	DEFAULT PLACEHOLDER STYLE
 */
input::placeholder {
	color : var(--input-placeholder);
}

input::placeholder:focus {
	/*color : var(--input-placeholder);*/
	color : black;
}

/*############################################################################*/

p.checkbox-note {
	font-size   : 80%;
	margin-left : 23%;
	width       : 50%;
}

input.enquiry-checkbox {
	width       : 2%;
	margin-left : 23%;
}

label.enquiry-checkbox {
	display       : inline;
	font-size     : 80%;
	padding-right : 2%;
	text-align    : left !important;
}

label.enquiry-checkbox.highlight {
	font-size    : 100%;
	padding-left : 0.5em;
}

@media only screen and (max-width : 750px) {
	p.checkbox-note {
		width : 60%;
	}

	input.enquiry-checkbox,
	p.checkbox-note {
		margin-left : 27%;
	}
}

@media only screen and (max-width : 520px) {
	p.checkbox-note {
		width : 92%;
	}

	input.enquiry-checkbox,
	p.checkbox-note {
		margin-left : 1em;
	}

	label.enquiry-checkbox {
		margin-left : 0.5em;
	}
}

@media (-webkit-min-device-pixel-ratio : 1.25), (min-resolution : 120dpi) {

	input[type=checkbox] {
		/* All browsers except webkit*/
		transform         : scale(2);
		/* Webkit browsers*/
		-webkit-transform : scale(2);
	}

	p.checkbox-note, label.enquiry-checkbox {
		font-size : 100%;
	}
}

input.tc-confirm {
	width         : 2%;
	margin-left   : 5%;
	margin-bottom : 5%;
}

label.tc-confirm {
	display       : inline;
	font-size     : 100%;
	padding-right : 2%;
	margin-bottom : 5%;
	text-align    : left !important;
}

p.label {
	margin-left   : 22%;
	margin-bottom : 0.5em;
	width         : 50%;
}

@media (-webkit-min-device-pixel-ratio : 1.25), (min-resolution : 120dpi) {
	p.label {
		margin-left : 1em;
		width       : 80%;
	}
}

@media only screen and (max-width : 750px) {
	p.label {
		margin-left : 27%;
	}
}

@media only screen and (max-width : 520px) {
	p.label {
		margin-left : 1em;
	}
}

span.admin-checkbox {
	display : block;
	clear   : left;
}

span.admin-checkbox input {
	margin-left : 23%;
	width       : 2%;
}

span.admin-checkbox label {
	text-align : left;
	width      : 50%;
}

div#tipDiv {
	border      : 1px solid;
	font-size   : 11px;
	line-height : 1.6;
	padding     : 8px;
	width       : 250px;
}

div.form-row img.tooltip {
	margin         : -3px 0 0 1em;
	vertical-align : middle;
}

/*
 * Spinner hacks:
 * Remove the ugly spinners when using type="number" in desktop browsers.
 */
input[type=number] {
	-moz-appearance : textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance : none;
	margin             : 0;
}

/*
 * End spinner hacks.
 */

form div.editor-wrapper {
	display : inline-block;
	width   : 99%;
}

input.full {
	width : 98%;
}

/*
 * SPECIAL CASE STYLES
 */
form.admin input.date-note,
form.admin input.date {
	width : 242px;
}

form.admin div.ck-container {
	margin-left : 160px;
	margin-top  : -20px;
}

form.admin span.required {
	color       : var(--input-required);
	font-weight : bold;
}

form.admin div.counter {
	display : inline-block;
	color   : var(--main-background);
}

form.admin div.counter span.almost-too-long {
	font-weight : bold;
	color       : var(--warning);
}

form.admin div.counter span.too-long {
	font-weight : bold;
	color       : var(--warning);
}

form#manager-search a.button,
form#manager-search button {
	margin-top : 0;
	padding    : 1px 10px 2px 10px;
}

form div.input-group {
	display       : inline-block;
	padding-top   : 3px;
	width         : 50%;
	margin-bottom : 0.5em;
}

form div.input-group label {
	margin-left : 0.25em;
}

input[type="checkbox"] {
	margin-top  : 3px;
	margin-left : 160px;
}

input[type="radio"].related,
input[type="checkbox"].related {
	margin-left : 0;
}

/*
===========================================================
	CHOOSER
===========================================================
*/
div.chooser {
	display  : block;
	width    : 75%;
	height   : 10em;
	overflow : auto;
	border   : 1px solid #AAAAAA;
	padding  : 0;
}

div.chooser-small {
	display  : block;
	height   : 20em;
	overflow : auto;
	border   : 1px solid #AAAAAA;
	padding  : 0;
}

div.chooser-container {
	width         : 400px;
	margin-left   : 12%;
	margin-bottom : 2em;
}

div.chooser-small h3,
div.chooser h3 {
	padding       : 0.5em;
	border-top    : 1px solid #00A5E7;
	border-bottom : 1px solid #00A5E7;
	margin-left   : 0;
}

div.chooser-small p,
div.chooser p {
	border-bottom : 1px solid #EEEEEE;
	padding       : 0.5em 0.5em 0.5em 2em;
}

div.chooser-small label,
div.chooser label {
	padding : 0;
	margin  : 0;
}

div.chooser-small p.chooser-checkbox,
div.chooser p.chooser-checkbox {
	float   : left;
	border  : none;
	padding : 0.5em;
	margin  : 0;
	clear   : left;
}

div.chooser-small p:hover,
div.chooser p:hover {
	background : #DDDDDD;
}

div.chooser-note {
	clear       : left;
	margin-left : 12%;
}


div.option-list {
	display    : inline-block;
	width      : 680px;
	height     : 15em;
	overflow   : auto;
	border     : 1px solid #AAAAAA;
	padding    : 0;
	background : white;
	clear      : none;
}

div.option-list-container {
	width         : 400px;
	margin-left   : 12%;
	margin-bottom : 2em;
}

div.option-list h3 {
	padding       : 0.5em;
	border-top    : 1px solid #00A5E7;
	border-bottom : 1px solid #00A5E7;
	margin-left   : 0;
}

div.option-list p {
	border-bottom : 1px solid #EEEEEE;
	padding       : 0.5em 0.5em 0.5em 2em;
	margin        : 0 !important;
}

div.option-list label {
	padding    : 0;
	margin     : 0;
	text-align : left;
	width      : 90%;
}

div.option-list p.option-list-checkbox {
	float   : left;
	border  : none;
	padding : 0.5em;
	margin  : 0;
	clear   : left;
}

div.option-list p:hover {
	background : #DDDDDD;
}

div.option-list-note {
	clear       : left;
	margin-left : 12%;
}

div.option-list input[type="checkbox"] {
	margin-left  : 10px;
	margin-right : 10px;
}

/*
===========================================================
	INLINE SEARCH BOX
===========================================================
*/
form.simple-search {
	display : block;
	margin  : 15px 0 20px;
	padding : 0;
}

form.simple-search div.searchwrapper {
	background  : var(--input-background);
	display     : inline-block;
	border      : 1px solid #CCCCCC;
	padding     : 0;
	line-height : 0.5;
}

form.simple-search div.searchwrapper button {
	display     : inline-block;
	border      : none;
	width       : 27px;
	height      : 27px;
	background  : var(--search-icon) center center no-repeat;
	text-indent : -9999px;
	margin      : 0;
}

form.simple-search div.searchwrapper button:hover {
	background : var(--search-icon-hover) center center no-repeat !important;
	cursor     : pointer;
}

form.simple-search label {
	position: absolute;
	left: -9999px;
	color: var(--simple-search-label);
	background: var(--simple-search-label-background);
}

/*
	SEARCH BUTTON IMAGE SWAPS FOR DARK MODE
 */
@media (prefers-color-scheme : dark) {

	form.simple-search button {
		background : url(/images/search_icon_dark.png) center center no-repeat;
	}

	form.simple-search button:hover {
		background : url(/images/search_icon_dark_hover.png) center center no-repeat !important;
	}
}


form.simple-search input {
	display   : block;
	float     : left;
	width     : 400px;
	padding   : 5px 6px 2px;
	font-size : 90%;
	border    : none;
	margin    : 0;
}

form.simple-search input:focus {
	box-shadow : none;
	border     : none;
}

form.simple-search a.clearbutton {
	display     : block;
	float       : left;
	border      : none;
	width       : 27px;
	height      : 27px;
	background  : url(/images/cross.png) center center no-repeat;
	text-indent : -9999px;
}

@media screen and (max-width:500px) {
	form.simple-search input {
		width     : 300px;
	}
}

@media screen and (max-width:350px) {
	form.simple-search input {
		width     : 250px;
	}
}

form.collection-modal label {
	text-indent : -9999px;
}