/*
 {$BRAND_NAME`}
 Copyright (c) Christopher Graham, 2004-2024
*/

/* General form-related styles */

/*{+START,CSS_MODE,mobile__overlay}*/
	.form-table, .form-table > tbody, .form-table > thead, .form-table > tbody > tr, .form-table > thead > tr, .form-table > tr, .form-table > tbody > tr > th, .form-table > thead > tr > th, .form-table > tr > th, .form-table > tbody > tr > td, .form-table > thead > tr > td, .form-table > tr > td {
		display: block;
		width: auto;
	}

	/* Because we no-longer naturally contain floats inside of table cells, we have to simulate it. */
	.form-table > tbody > tr > th::after, .form-table > thead > tr > th::after, .form-table > tr > th::after, .form-table > tbody > tr > td::after, .form-table > thead > tr > td::after, .form-table > tr > td::after {
		clear: both;
		content: "";
		display: table;
	}

	.form-table > tbody > tr > th, .form-table > thead > tr > th, .form-table > tr > th, .form-table > tbody > tr > td, .form-table > thead > tr > td, .form-table > tr > td {
		border-top: 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0 !important;
	}

	.form-table > tbody > tr > th label::after, .form-table > thead > tr > th label::after, .form-table > tr > th label::after,
	.form-table > tbody > tr > th .faux-label::after, .form-table > thead > tr > th .faux-label::after, .form-table > tr > th .faux-label::after {
		content: ":";
	}
/*{+END}*/

/*{+START,CSS_MODE,mobile}*/
	label {
		{$BETA_CSS_PROPERTY,user-select: none;} {$,To stop accidental touching when touching inputs}
	}
/*{+END}*/

/*{+START,CSS_MODE,desktop}*/
	.required-field-warning-wrap {
		text-align: center;
	}
/*{+END}*/

.form-standard-end {
	margin-top: 14px;
}

.required-field-warning {
	border: 1px solid {$GET,standard_border};
	overflow: hidden;
	padding: 0.5em;
	/*	Style rather extreme, but re-enable if you wish
	background-color: {$GET,required_background};
	*/
	font-weight: bold;
	font-size: 0.85em;
	margin: 1.5em 0 1em 0;
	/*{+START,IF,{$THEME_OPTION,curved_borders}}*/
		border-radius: {$GET,border_radius};
	/*{+END}*/
	{$BETA_CSS_PROPERTY,user-select: none;} {$,To stop accidental touching on mobile form filling in}
}
/*{+START,CSS_MODE,desktop}*/
	.required-field-warning {
		display: inline-block;
	}
/*{+END}*/

.required-star {
	opacity: 0.6;
	color: {$GET,red_highlight_text};
	{$BETA_CSS_PROPERTY,user-select: none;} {$,To stop accidental touching when touching inputs}
}

.comcode-supported {
	font-size: 0.85em;
}

div.comcode-supported {
	margin-top: 0.25em;
	float: right;
}

.input-erroneous {
	background-color: {$GET,red_highlight_background} !important;
}

.input-erroneous.container-for-wysiwyg {
	/*{+START,IF,{$THEME_OPTION,curved_borders}}*/
		border-radius: 6px; /* WYSISWYG is curved so this stops it creating an ugly clash */
	/*{+END}*/
}

.input-error-here {
	font-size: 0.9em;
	display: block;
	padding: 1em;
	border: 1px solid {$GET,light_error_border};
	background-color: {$GET,light_error_background_1};
	/*{+START,IF,{$THEME_OPTION,curved_borders}}*/
		border-radius: {$GET,border_radius};
	/*{+END}*/
	margin-top: 0.5em;
}

.input-error-here .icon {
	margin-right: 0.3em;
	color: {$GET,danger_color};
}

/* This is used to fix a problem on screen-readers (we don't want a paragraph used) */
span.form-field-name {
	/*display: inline-block;	Actually, this breaks vertical centring, so let it be inline*/
}

/* Overrides .toggleable-tray-button */
.form-table .toggleable-tray-button {
	color: {$GET,heading_text} !important;
	font-weight: normal !important;
}
.form-table .toggleable-tray-button .help-icon {
	float: none;
	vertical-align: middle;
}

/* Layout of the form table */

table.form-table { /* Some people think tables for forms are bad semantics. You can change it if you like, but we consider tables the optimal semantics (field name column, field input column, each field being a row). It's a conscious decision. Also all modern browsers allow complete styling control to change how tables are displayed, so there is no visual constraint here. */
	border-collapse: collapse;
	border: 1px solid {$GET,pale_border};
	margin: 1em 0;
}

.toggleable-tray > .form-table {
	margin-top: 0;
}

/*
Curved borders would be cool, but it does not work well with the carefully defined internal cell borders which we have
.form-table > tbody > tr:first-child > :first-child {
	border-top-left-radius: 15px;
}
.form-table > tbody > tr:first-child > :last-child {
	border-top-right-radius: 15px;
}
.form-table > tbody > tr:last-child > :first-child {
	border-bottom-left-radius: 15px;
}
.form-table > tbody > tr:last-child > :last-child {
	border-bottom-right-radius: 15px;
}
*/

.form-table-field-name {
	overflow-wrap: break-word;
	text-align: left;
	color: {$GET,slightly_seeded_text};
	padding-top: 0.95em !important;
	padding-left: 1em !important;
}

/*{+START,CSS_MODE,mobile__overlay}*/
	th.form-table-field-name {
		border-bottom: 0 !important;
	}
	td.form-table-field-input {
		border-top: 0 !important;

		/* No separate gradient, continue on from the end of the form-table-field-name gradient */
		background-image: none !important;
		background-color: {$GET,area_2_background} !important;
	}

	.form-table-field-name .help-icon {
		float: right;
	}
/*{+END}*/

td.form-table-field-input .form-screen-input-multi-list {
	display: inline-block; /* Prevent help icon moving to a new line */
	min-width: 10em;
}

.form-table-field-name h3 {
	border: 0;
	margin: 0;
}

.form-table-description-above-cell {
	text-align: left !important;
}
.form-table-description-above-cell .field-name {
	float: left;
	margin-top: 4px;
}

.form-table-field-name,
.form-table-field-input,
.form-table-huge-field,
th.form-table-field-name, /* Extra specificity to take precedence over th.de-th */
.form-table-field-spacer > th,
.form-table-field-spacer > td,
.form-table-description-above-cell,
.form-table-description-under-cell {
	border: 1px solid {$GET,standard_border};
	color: {$GET,slightly_seeded_text};
	padding: 0.5em 0.75em;
	background: {$GET,area_5_background};
}
.form-table-field-input > div:first-child > p:first-child {
	margin-top: 0;
}
.form-table-field-input input {
	margin-top: 0;
}

.form-table-field-name a,
.form-table-field-input a,
.form-table-huge-field a,
th.form-table-field-name a, /* Extra specificity to take precedence over th.de-th */
.form-table-field-spacer > th a,
.form-table-field-spacer > td a,
.form-table-description-above-cell a,
.form-table-description-under-cell a {
	color: {$GET,a.link};
}

.form-table-field-input select, .form-table-field-input input, .form-table-field-input img {
	vertical-align: middle;
}
/*{+START,CSS_MODE,desktop__overlay}*/
	.form-table-field-input .form-control-wide {
		width: 26em;
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile__overlay}*/
	.form-table-field-input .form-control-wide {
		width: 100%;
	}
/*{+END}*/
.form-table-field-input .form-control-wide {
	max-width: 100%;
}

.form-table-field-input .form-screen-input-text,
.form-table-field-input .form-screen-input-author {
	display: inline-block;
}

/* Tone it all down for forms inside tabs */
.tab-surround tbody th, .tab-surround tbody td, .tab-surround .form-table .required {
	background: none !important;
	color: inherit !important;
}

.form-table-field-spacer > th, .form-table-field-spacer > td, .form-table-description-above-cell {
	border-bottom: 0;
}

.form-table-huge-field {
	border-top: 0;
}

.form-table-huge-field-description-is-under {
	border-top: 1px solid {$GET,pale_border};
	border-bottom: 0 !important;
}

.form-table .required {
	/*	Style rather extreme, but re-enable if you wish
	background-image: linear-gradient(to bottom, {$GET,required_2_background}, {$GET,required_background}) !important;
	*/
}

.form-table .filledin .required {
	/*	Style rather extreme, but re-enable if you wish
	background-image: linear-gradient(to bottom, {$GET,area_background}, {$GET,area_2_background}) !important;
	*/
}

/* Field sets */

.innocuous-fieldset .preview {
	float: right;
	text-align: right;
	width: 120px;
	height: 50px;
	margin-top: 10px;
	margin-right: 10px;
}
.innocuous-fieldset .preview img {
	border: 1px solid {$GET,pale_border};
	max-width: 100%;
	max-height: 100%;
}

/* Particular input types */

.form-table .form-table-field-input select {
	width: auto;
}

.upload-field-msg {
	margin-top: 0;
	margin-bottom: 0.5em;
	padding: 0.5em;
	display: inline-block;
	width: 100%;
	border: solid 1px {$GET,area_4_background};
	background-color: {$GET,area_2_background};
}

.people-list {
	background-color: {$GET,area_background};
	color: {$GET,slightly_seeded_text};
	width: auto;
	border: 1px solid {$GET,pale_border};
	z-index: 1000;
}

.password-strength {
	float: right;
	width: 100px;
	border: 1px solid {$GET,standard_border};
	display: none;
}

.password-strength-inner {
	height: 1em;
	width: 0;
}

.input-password, .input-colour, .input-list, .input-line, .input-integer,
.input-author, .input-username, .input-email, .input-codename,
.input-tick, .input-float, .input-text, .input-upload,
.input-password-required, .input-colour-required, .input-list-required, .input-line-required, .input-integer-required,
.input-author-required, .input-username-required, .input-email-required, .input-codename-required,
.input-tick-required, .input-float-required, .input-text-required, .input-upload-required {
	max-width: 100%;
}

.input-huge-list, .input-huge-list-required {
	width: 100%;
}

.input-dimensions {
	display: inline-block;
}
.input-dimensions input {
	width: 6em !important;
}
.input-dimensions, .input-dimensions * {
	vertical-align: middle;
}

.upload-field {
	max-width: 31em; /* Upload field HTML is complex, we need to force size down so that the help icon can align correctly */
}

.upload-field .btn {
	margin-left: 0.5em;
}

/*{+START,CSS_MODE,mobile}*/
	.input-upload, .input-upload-required {
		max-width: 240px;
	}
/*{+END}*/

.upload-field-image-preview {
	float: right;
	max-width: 4em;
	max-height: 4em;
}

.radio-description {
	margin-top: -1.3em !important;
	margin-bottom: 1em !important;
}

.syndication-options {
	overflow: hidden;
	white-space: nowrap;
}

/* Special validated checkbox; use of span.validated-checkbox is due to http://stackoverflow.com/questions/6949148/css-after-not-adding-content-to-certain-elements */
span.validated-checkbox, span.validated-checkbox+input[name="validated"].input-tick {
	width: 91px;
	height: 32px;
	display: inline-block;
	cursor: pointer;
}

span.validated-checkbox {
	position: absolute;
	color: {$GET,WB};
	background: {$GET,danger_color};
	border-radius: {$GET,border_radius};
	font-size: 17px;
	font-weight: {$GET,font_weight_medium};
	padding: 3px;
}

span.validated-checkbox.checked {
	background: {$GET,success_color};
}

span.validated-checkbox .on,
span.validated-checkbox .off {
	padding: 1px 5px;
}

span.validated-checkbox .on,
span.validated-checkbox.checked .off {
	display: none;
}

span.validated-checkbox .off,
span.validated-checkbox.checked .on {
	display: inline-block;
}

span.validated-checkbox::after {
	content: '';
	display: block;
	height: 100%;
	width: 50%;
	border-radius: {$GET,border_radius};
	background: {$GET,WB};
	float: left;
	margin-right: 4px;
}

span.validated-checkbox.checked::after {
	float: right;
	margin-right: 0;
}

span.validated-checkbox + input[name="validated"].input-tick {
	padding-right: 0.5em;
	z-index: 100;
	position: relative;
	opacity: 0;
}

.date-datepicker-button {
	font-size: 1.15em;
	vertical-align: middle;
}

.various-ticks, .input-other-tick {
	white-space: nowrap;
}

.various-ticks .input-individual-tick, .input-other-tick {
	margin: 1em 1em 1em 0; /* Designed to make it fill whole box, i.e. equalise against the th's (to the left) height */
	float: left;
	font-size: 0.9em;
	vertical-align: middle;
}

.various-ticks .input-individual-tick + .input-individual-tick {
	margin-left: 0.5em;
}

.various-ticks label input, .various-ticks label span {
	vertical-align: middle;
}

.input-other-tick {
	margin-top: -0.5em;
	clear: both;
}

.various-ticks .input-individual-tick input {
	margin-bottom: 0;
}

.syndication-options span {
	white-space: nowrap;
	border-right: 1px solid {$GET,pale_border};
	font-size: 0.9em;
	padding-right: 0.5em;
	margin-right: 0.3em;
}
.syndication-options span:last-child {
	border-right: 0;
}

.help-icon + div + .radio-list {
	clear: right;
	margin-top: 30px;
}

.radio-list-pictures {
	{$BETA_CSS_PROPERTY,display: flex;}
	flex-wrap: wrap;
	margin: -0.5em 0 0 -0.5em;
}
.radio-list-pictures.linear {
	display: block;
	margin: 0;
}

.radio-list-picture {
	margin: calc(0.5em + 2px) 0 0 calc(0.5em + 2px);
	font-size: 0.8em;
	text-align: center;
	cursor: pointer;

	/* Number based around topic emoticons emoticons */
	min-width: 40px;
}
.radio-list-picture.linear {
	margin: 1em;
	border: 1px solid {$GET,standard_border};
	opacity: 1.0;
}

.radio-list-picture label {
	cursor: pointer;
	display: block;
}

.radio-list-picture.selected img {
	outline: 1px dotted;
}
.radio-list-picture img {
	max-width: 100px;
	height: auto;
}
.theme-image--header-classic-image .radio-list-picture img {
	max-width: 300px;
}

.radio-list-picture label.js-widget {
	visibility: hidden;
	width: 0;
	height: 0;
	font-size: 0;
}
.page-running-admin-themes .radio-list-picture label.js-widget, .page-running-admin-zones .radio-list-picture label.js-widget {
	visibility: visible;
	width: auto;
	height: auto;
	font-size: inherit;
}

.radio-list-picture {
	opacity: 0.5;
}
.radio-list-picture:hover, .radio-list-picture.selected {
	opacity: 1.0;
}

.selectable-theme-image {
	padding: 0.3em;
	margin: 1px;
}

/* Form colour chooser */

/*{+START,CSS_MODE,desktop__overlay}*/
	.form-table .css-colour-chooser-name {
		width: 190px;
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile__overlay}*/
	.form-table .css-colour-chooser-name {
		margin-right: 20px;
	}
/*{+END}*/

.css-colour-strip {
	float: left;
	height: 15px;
}
/*{+START,CSS_MODE,desktop__overlay}*/
	.css-colour-strip {
		width: 4px;
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile__overlay}*/
	.css-colour-strip {
		width: 2px;
	}
/*{+END}*/

.css-colour-chooser {
	height: 50px;
	margin: 0 auto;
}

.field-input .css-colour-chooser {
	width: auto;
	height: auto;
	margin: 0;
}

.css-colour-chooser-name {
	font-weight: bold;
	float: left;
}

.css-colour-chooser-name input {
	font-family: 'Courier New', 'Courier', monospace;
	color: {$GET,unfilled_input_text};
	text-transform: uppercase;
	margin-top: 0.5em;
	display: block;
}

.css-colour-chooser-from {
	float: left;
	margin: 0 0 0 10px;
}
.field-input .css-colour-chooser-from {
	display: none;
}

.css-colour-chooser-to {
	float: right;
	margin-left: 0;
}

.css-colour-chooser-from, .css-colour-chooser-to {
	padding-top: calc(22.5px - 0.9em);
	height: 45px;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	cursor: default;
	{$BETA_CSS_PROPERTY,user-select: none;}
}
.css-colour-chooser-from span, .css-colour-chooser-to span {
	color: #FFFFFF; /*{$,hardcoded_ok}*/
	mix-blend-mode: difference;
	padding: 5px;
}
/*{+START,CSS_MODE,desktop}*/
	.css-colour-chooser-from, .css-colour-chooser-to {
		width: 50px;
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile}*/
	.css-colour-chooser-from, .css-colour-chooser-to {
		width: 10px;
	}

	.css-colour-chooser-from span, .css-colour-chooser-to span {
		display: none;
	}
/*{+END}*/

.css-colour-chooser-widget {
	float: left;
	margin-top: 3px; /* As the selection bars overflow a bit */
}
/*{+START,CSS_MODE,desktop}*/
	.css-colour-chooser-widget {
		width: calc(64px * 4 + 50px + 50px); /* We actually only show 64 colours in each of RGB for performance reasons */
	}
	.field-input .css-colour-chooser-widget {
		width: calc(64px * 4 + 50px); /* Because the css-colour-chooser-from is hidden */
	}
/*{+END}*/
/*{+START,CSS_MODE,mobile}*/
	.css-colour-chooser-widget {
		width: calc(64px * 2 + 50px + 10px); /* We actually only show 64 colours in each of RGB for performance reasons */
		margin-right: 5px;
	}
	.field-input .css-colour-chooser-widget {
		width: calc(64px * 2 + 10px); /* Because the css-colour-chooser-from is hidden */
	}
/*{+END}*/

.css-colour-chooser-context {
	padding-top: 50px;
	font-style: italic;
}

/* Previews */

.form-screen-iframe {
	width: 100%;
	height: 0; /* Will be dynamically adjusted */
}

.preview-box {
	margin: 1em 0;
}

/*{+START,CSS_MODE,mobile}*/
	.mobile.preview-box {
		padding: 84px 36px 104px 34px;
		width: 381px;
		height: 724px;
		background: url('{$IMG;,iphone}') no-repeat;
		background-size: 381px 724px;
		cursor: crosshair;
	}
	.mobile .preview-box-inner {
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
/*{+END}*/

.preview-checking-box {
	max-width: 34em;
	margin: 1em auto 3em auto;
}

/*{+START,CSS_MODE,desktop}*/
	.preview-checking-box label + label {
		margin-left: 1em;
	}
/*{+END}*/

/*{+START,CSS_MODE,mobile}*/
	.preview-checking-box label {
		display: block;
	}
/*{+END}*/

/* Posting forms */

.word-count {
	float: right;
	font-size: 0.8em;
	padding: 4px;
}

/*{+START,CSS_MODE,mobile}*/
	.post-options-wrap {
		display: none;
	}
/*{+END}*/

.btn-comcode {
	color: {$GET,button_primary_text} !important;
	position: relative;
	overflow: hidden;
	padding: 2px 4px;
	text-align: left;
}

.btn-comcode:not(.btn-sm) {
	min-height: 40px;
}

.btn-comcode-text {
	text-transform: lowercase;
	font-size: 0.8em;
	float: left;
	white-space: normal;
}

.btn-comcode .icon {
	display: block;
}

.btn-comcode-thumb,
.btn-comcode-block,
.btn-comcode-url,
.btn-comcode-box,
.btn-comcode-email,
.btn-comcode-comcode,
.btn-comcode-apply_changes {
	padding-right: 35px;
}

.btn-comcode-thumb .icon,
.btn-comcode-block .icon,
.btn-comcode-comcode .icon,
.btn-comcode-url .icon,
.btn-comcode-box .icon,
.btn-comcode-apply_changes .icon {
	position: absolute;
	width: 28px;
	height: 28px;
	right: 5px;
	top: 50%;
	margin-top: -14px;
}

.btn-comcode-list,
.btn-comcode-page,
.btn-comcode-quote,
.btn-comcode-code,
.btn-comcode-html {
	text-align: center;
}

.btn-comcode-list .icon,
.btn-comcode-page .icon,
.btn-comcode-quote .icon,
.btn-comcode-code .icon,
.btn-comcode-html .icon,
.btn-comcode-hide .icon {
	position: absolute;
	bottom: 3px;
	left: 50%;
	margin-left: -9px;
	width: 18px;
	height: 18px;
}

.btn-comcode-url .btn-comcode-text {
	max-width: 2.5em;
}

.btn-comcode-code .icon {
	width: 32px;
	height: 32px;
	margin-left: 0;
	left: 3px;
	bottom: -5px;
}

.btn-comcode-html .icon {
	width: 32px;
	height: 32px;
	margin-left: 0;
	left: 3px;
	bottom: -5px;
}

.posting-form-main-comcode-button {
	float: right;
	margin-top: 1em;
}

.posting-form-insert-buttons {
	background-color: {$GET,area_background};
}

.posting-form-wrap-buttons {
	background-color: {$GET,point_of_interest_background};
}

.posting-form-wrap-buttons, .posting-form-insert-buttons {
	float: right;
	border: 1px solid {$GET,standard_border};
	padding: 0.5em;
	margin-top: 0.5em;
	margin-left: 0.5em;
}

.posting-form-insert-buttons span, .posting-form-insert-buttons img, .posting-form-wrap-buttons img, .posting-form-insert-buttons input, .posting-form-wrap-buttons input, .posting-form-wrap-buttons select {
	vertical-align: middle;
}

.posting-form-insert-buttons .divider {
	margin-left: 0.2em;
	border-left: 1px solid {$GET,standard_border};
	width: 0.2em;
	display: inline-block;
	height: 2em;
}

.emoticon-chooser {
	padding: 0.5em;
	margin-top: 0.5em !important;
}

.emoticon-chooser a {
	text-decoration: none; /* Tone minor link down a bit */
}
.emoticon-chooser a:hover {
	text-decoration: underline;
}

.attachments-field-name-column {
	width: 18em;
}
.box .attachments-field-name-column {
	width: 14em;
}
.attachments-field-input-column {
	width: 100%;
}
/*{+START,CSS_MODE,mobile}*/
	.attachments-field-name-column, .box .attachments-field-name-column, .attachments-field-input-column {
		width: auto;
	}
/*{+END}*/

/* Permissions */

.permissions-matrix-wrap {
	width: 100%;
	overflow-x: auto;
	outline: 0;
	padding-bottom: 1px;

	/* Fix for overhanging borders */
	padding-right: 2px;
}

.permissions-matrix-wrap select {
	max-width: 11em;
	white-space: nowrap;
	font-size: 0.8em !important;
}

.permissions-matrix-wrap .group-header, .permissions-matrix-wrap .view-header, .permissions-matrix-wrap .privilege-header {
	vertical-align: bottom;
}

.permission-field-name-column {
	width: 24em;
}

.permission-column {
	width: 2.5em;
}

.permission-copy-column {
	width: 3.8em;
}

.permissions-matrix-wrap .form-table-field-input, .privileges td {
	text-align: center;
	vertical-align: middle;
}

/* Special supra-context stuff for forms */

.form-group {
	margin-bottom: 1.5em;
}

.skip-step-button-wrap {
}

.skip-step-button-wrap::after {
	display: block;
	clear: both;
	content: "";
}

.skip-step-button-wrap div {
	float: right;
}

.skip-step-button-wrap-with-req-note {
	margin: -52px 0 0 0;
}

/*{+START,CSS_MODE,desktop}*/
	.form-set-indent {
		margin-left: 2em;
	}
/*{+END}*/

.fields-set-item {
	background-color: {$GET,main_background};
	padding: 0.75em 0.5em;
	/*{+START,IF,{$THEME_OPTION,curved_borders}}*/
		border-radius: 5px;
	/*{+END}*/
	border: 1px solid {$GET,pale_border};
}

.fields-set-item .form-control {
	display: inline-block;
}

.fields-set-item + .fields-set-item {
	margin-top: 1em;
}

.fields-set-radio {
	margin-bottom: 0.5em;
}

.radio-list {
	position: relative;
}

.radio-list h3 {
	border-bottom: 1px solid {$GET,pale_border};
}

.fields-set-contents::after {
	display: block;
	clear: both;
	content: "";
}

.fields-set-contents .associated-details {
	margin-top: 0.2em;
}

/* Spruce up defaults for form fields */

/*.form-table input[type="text"], .form-table input[type="email"], .form-table input[type="password"], .form-table textarea,*/
/*.form-table-field-input select, .form-table-field-input textarea {*/
	/*font-size: 1.12em;*/
/*}*/

/*.form-table input[type="text"], .form-table input[type="email"], .form-table input[type="password"], .form-table textarea {*/
	/*border-radius: 4px;*/
	/*border: 1px solid {$GET,standard_border};*/
	/*padding: 0.2em;*/
/*}*/

.form-table input[type="number"] {
	width: 6em;
}

/*{+START,CSS_MODE,mobile__overlay}*/
	.form-table input[type="file"] {
		max-width: 6em;
	}
/*{+END}*/

.box---revisions-wrap {
	margin-top: 3em;
}

.form-screen-input-multi-list .select2-container {
	width: 100%;
}

/*
================================
== WYSIWYG (CKEditor) styling ==
================================
*/

.cke_chrome .cke_inner {
	background: {$GET,area_background};
}

.cke_chrome .cke_toolgroup {
	background: white;
}

.cke_combopanel.cke_combopanel__format {
	width: 200px;
}

/* Reset some software styles that impact CKEditor */
.cke_reset_all div[role="tabpanel"] {
	padding-left: 0;
	padding-right: 0;
}
.cke_reset_all div[role="tabpanel"] > :first-child {
	margin-top: 0;
}
.cke_reset_all div[role="tabpanel"] > :last-child {
	margin-bottom: 0;
}

/* Stop large images creating scrolling */
.cke_image_resizer {
	right: 0 !important;
	bottom: 0 !important;
}

.cke_widget_inline {
	line-height: 1em !important;
}

/*{+START,IF,{!takes_lots_of_space}}*/
	div span .cke_combo_text {
		width: 70px !important;
	}

	div span .cke_combo__fontsize .cke_combo_text {
		width: 50px !important;
	}
/*{+END}*/

/* Icons for our custom plugins (we specify ours this way for greatest flexibility) */

.cke_button__composr_block_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/composr_block.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_comcode_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/composr_comcode.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_page_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/composr_page.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_quote_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/composr_quote.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_box_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/composr_box.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_code_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/composr_code.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_image_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/composr_image.png') !important;
	background-size: 16px !important;
}
.moono .cke_button__composr_image_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/composr_image__moono.png') !important;
}
.cke_button__spellchecktoggle_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/spellchecktoggle/images/spellchecktoggle.png') !important;
	background-size: 16px !important;
}
.moono .cke_button__spellchecktoggle_icon {
	background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/spellchecktoggle/images/spellchecktoggle__moono.png') !important;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	.cke_button__composr_block_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/hidpi/composr_block.png') !important;
	}
	.cke_button__composr_comcode_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/hidpi/composr_comcode.png') !important;
	}
	.cke_button__composr_page_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/hidpi/composr_page.png') !important;
	}
	.cke_button__composr_quote_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/hidpi/composr_quote.png') !important;
	}
	.cke_button__composr_box_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/hidpi/composr_box.png') !important;
	}
	.cke_button__composr_code_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/hidpi/composr_code.png') !important;
	}
	.cke_button__composr_image_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/hidpi/composr_image.png') !important;
	}
	.moono .cke_button__composr_image_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/composr/images/hidpi/composr_image__moono.png') !important;
	}
	.cke_button__spellchecktoggle_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/spellchecktoggle/images/hidpi/spellchecktoggle.png') !important;
	}
	.moono .cke_button__spellchecktoggle_icon {
		background-image: url('{$BASE_URL;}/{$CKEDITOR_PATH;}/plugins/spellchecktoggle/images/hidpi/spellchecktoggle__moono.png') !important;
	}
}

/* Change some software styles to look more appropriate within a WYSIWYG editor */

#wysiwyg-editor #screen-title {
	display: block !important;
}

#wysiwyg-editor th, #wysiwyg-editor td {
	border: 1px dotted {$GET,native_ui_foreground};
}

#wysiwyg-editor .comcode-fake-table > div,
#wysiwyg-editor .fp-col-block {
	outline: 1px dotted;
	margin: 1px 0;
}

/* software editing UI */

comcode-{$REPLACE,\,,\,comcode-,{$COMCODE_TAGS;,{$WYSIWYG_COMCODE__XML_BLOCK}}\,{$COMCODE_TAGS;,{$WYSIWYG_COMCODE__XML_INLINE}}}, tempcode {
	background-color: {$GET,native_ui_active_background};
	color: {$GET,native_ui_foreground};
}

#wysiwyg-editor kbd.cms-keep, #wysiwyg-editor kbd.cms-keep-block {
	background-color: {$GET,native_ui_active_background};
}

#wysiwyg-editor kbd.cms-keep-block {
	display: block;
	border: 1px dotted gray;
	padding: 2px;
}

#wysiwyg-editor .cms-keep-ui-controlled,
#wysiwyg-editor .cms-keep-ui-controlled:focus {
	border: 1px dashed gray;
	text-align: center;
	color: {$GET,native_ui_foreground};
	background: url('{$IMG;,icons/editor/comcode}') {$GET,native_ui_active_background} right 2px no-repeat;
	background-size: 16px 16px;
	padding: 1px 25px 1px 2px;
}
/* Separately specified, as the weird selector breaks whole compound selector on some browsers */
#wysiwyg-editor .cms-keep-ui-controlled::selection {
	color: {$GET,native_ui_foreground};
	background-color: {$GET,native_ui_active_background};
}
#wysiwyg-editor .cms-keep-ui-controlled::-moz-selection {
	color: {$GET,native_ui_foreground};
	background-color: {$GET,native_ui_active_background};
}

/*{+START,CSS_MODE,mobile}*/
	.cke_toolbar, .cke_toolgroup {
		float: none !important;
		background: none !important;
	}

	a.cke_button, .cke_button_icon {
		float: none !important;
		min-height: 28px;
	}

	.cke_toolbar_break, .cke_toolbar_separator {
		display: none !important;
	}
/*{+END}*/

/* Other styles */

body#wysiwyg-editor {
	min-height: 140px;
}
