/*
 Composr
 Copyright (c) Christopher Graham, 2004-2024
*/

/*
This is Composr's base CSS file. It defines colours and responsive modes using Tempcode that may be referenced in other CSS files.
See global.css for actual CSS rules.
*/

/*
=========================
====Responsive modes=====
=========================
*/

/*
These define CSS_MODEs. They work both as responsive design breakpoints, and rule output control for mobile mode.

In desktop mode:
 mode directives are turned into corresponding @media rules (i.e. responsive design)

In mobile mode:
 anything marked with "mobileModeMedia" will be turned into @media rules
 anything marked with "mobileModeKeep" will be output directly
 anything marked with "mobileModeDiscard" skipped (to save on file-size)
*/

/* The basic ones */
/* NB: Remember to update $cms.isCssMode() too if you make changes here. */



/* Ones considering overlays are smaller */



/* Extra ones; useful if you are providing better specificity for particular tested ranges (make sure the base-line of each range works for the rules you set; assuming we are using retina/hi-dpi properly rather than to cram more onto the screen) */

/*This would only be used if you set a fixed (non-responsive) viewport of 320 (QVGA, portrait mode); not used by default*/
/*Based on up to what iPhone6 can do; higher-res phones like phablets may fall under the smartphone_landscape range even in portrait mode which is fine*/
/*Based on from iPhone6 landscape up to our tablet size; also good for small tablets in portrait mode*/
/*This corresponds to the fixed width tablet mode viewport defined in HTML_HEAD.tpl optimised for landscape mode; fixed width is not on by default, so tablet is the same as desktop in that case*/
/*1024 is considered the industry-standard, which is 982 with scrollbar; also good for small tablets in landscape mode and large tablets in portrait mode*/

/*Also good for large tablets in landscape mode*/

/*
=========================
========Settings=========
=========================
*/

/* Miscellaneous settings */
 /* 1366px minus 17px scrollbar */





 /* Varies by font: 500 for Roboto, 600 for Open Sans */

/* Box shadow settings */




/* Leave this alone */

/*
 Composr
 Copyright (c) Christopher Graham, 2004-2024
*/

/*
This is Composr's base CSS file. It defines colours and responsive modes using Tempcode that may be referenced in other CSS files.
See global.css for actual CSS rules.
*/

/*
=========================
========Colours==========
=========================
*/

/* Fundamental base colours */




/*Theme seed is: 2388ef*/

/* WCAG compliance colours */
 /* AA compliance */
 /* AA + AAA (for large text) compliance */
 /* AA + AAA compliance */
 /* AA + AAA compliance */

/* The fundamental website */






/* Colours to mirror UI conventions (i.e. non-thematic) */








 /* Google adwords style */



/* Colours to mirror human understandings (i.e. non-thematic) */























/* For standard elements */













/* Borders */





/* Backgrounds (quiet a variety, as we need to be able to stack them, to have both hover and active effects, to have zebra striping, and various other levels of perceived focus) */

















/* Backgrounds, employing color wheel theory */



/* Buttons */



/* Text */








/* Special colour for box titles */







/* Special colour for code/quote boxes */





/* Drop down menus should look 'above' the site */



/* Global-level messages should stand out compared to other styling */


/* Footer */



/* Range of bright varying colours based on Material Design, used for group colours */





































/*
 Composr
 Copyright (c) Christopher Graham, 2004-2024
*/

/* General form-related styles */

@media (max-width: 640px) { 
	.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: ":";
	}
}

@media (max-width: 982px) { 
	label {
		user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none; 
	}
}

@media (min-width: 983px) { 
	.required-field-warning-wrap {
		text-align: center;
	}
}

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

.required-field-warning {
	border: 1px solid #dddddd;
	overflow: hidden;
	padding: 0.5em;
	/*	Style rather extreme, but re-enable if you wish
	background-color: #f3e0e4;
	*/
	font-weight: bold;
	font-size: 0.85em;
	margin: 1.5em 0 1em 0;
	
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none; 
}
@media (min-width: 983px) { 
	.required-field-warning {
		display: inline-block;
	}
}

.required-star {
	opacity: 0.6;
	color: #cc0000;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none; 
}

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

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

.input-erroneous {
	background-color: #cc3333 !important;
}

.input-erroneous.container-for-wysiwyg {
	
}

.input-error-here {
	font-size: 0.9em;
	display: block;
	padding: 1em;
	border: 1px solid #dc3545;
	background-color: #fcebed;
	
	margin-top: 0.5em;
}

.input-error-here .icon {
	margin-right: 0.3em;
	color: #dc3545;
}

/* 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: #1b67b6 !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 #b7d8fa;
	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: #071b30;
	padding-top: 0.95em !important;
	padding-left: 1em !important;
}

@media (max-width: 640px) { 
	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: #deedfd !important;
	}

	.form-table-field-name .help-icon {
		float: right;
	}
}

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 #dddddd;
	color: #071b30;
	padding: 0.5em 0.75em;
	background: #f8fbfe;
}
.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: #175ba0;
}

.form-table-field-input select, .form-table-field-input input, .form-table-field-input img {
	vertical-align: middle;
}
@media (min-width: 641px) { 
	.form-table-field-input .form-control-wide {
		width: 26em;
	}
}
@media (max-width: 640px) { 
	.form-table-field-input .form-control-wide {
		width: 100%;
	}
}
.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 #b7d8fa;
	border-bottom: 0 !important;
}

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

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

.form-table-field-name.warning, .form-table-field-input.warning, .fields-set-item.warning {
	background-color: #fff9e7 !important;
	border-color: #ffc107 !important;
}

.form-table-field-name.success, .form-table-field-input.success, .fields-set-item.success {
	background-color: #eaf7ed !important;
	border-color: #28a745 !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 #b7d8fa;
	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 #d3e7fc;
	background-color: #deedfd;
}

.people-list {
	background-color: #e7f2fd;
	color: #071b30;
	width: auto;
	border: 1px solid #b7d8fa;
	z-index: 1000;
}

.password-strength {
	float: right;
	width: 100px;
	border: 1px solid #dddddd;
	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-group,
.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-group-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;
}

@media (max-width: 982px) { 
	.input-upload, .input-upload-required {
		max-width: 240px;
	}
}

.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: #FFFFFF;
	background: #dc3545;
	border-radius: 4px;
	font-size: 17px;
	font-weight: 500;
	padding: 3px;
}

span.validated-checkbox.checked {
	background: #28a745;
}

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: 4px;
	background: #FFFFFF;
	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 #b7d8fa;
	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 {
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -ms-flex;
	display: -moz-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 #dddddd;
	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 */

@media (min-width: 641px) { 
	.form-table .css-colour-chooser-name {
		width: 190px;
	}
}
@media (max-width: 640px) { 
	.form-table .css-colour-chooser-name {
		margin-right: 20px;
	}
}

.css-colour-strip {
	float: left;
	height: 15px;
}
@media (min-width: 641px) { 
	.css-colour-strip {
		width: 4px;
	}
}
@media (max-width: 640px) { 
	.css-colour-strip {
		width: 2px;
	}
}

.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: #545454;
	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;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
}
.css-colour-chooser-from span, .css-colour-chooser-to span {
	color: #FFFFFF; 
	mix-blend-mode: difference;
	padding: 5px;
}
@media (min-width: 983px) { 
	.css-colour-chooser-from, .css-colour-chooser-to {
		width: 50px;
	}
}
@media (max-width: 982px) { 
	.css-colour-chooser-from, .css-colour-chooser-to {
		width: 10px;
	}

	.css-colour-chooser-from span, .css-colour-chooser-to span {
		display: none;
	}
}

.css-colour-chooser-widget {
	float: left;
	margin-top: 3px; /* As the selection bars overflow a bit */
}
@media (min-width: 983px) { 
	.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 */
	}
}
@media (max-width: 982px) { 
	.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 */
	}
}

.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;
}

@media (max-width: 982px) { 
	.mobile.preview-box {
		padding: 84px 36px 104px 34px;
		width: 381px;
		height: 724px;
		background: url('install.php?type=themes/default/images/iphone.svg') no-repeat;
		background-size: 381px 724px;
		cursor: crosshair;
	}
	.mobile .preview-box-inner {
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
}

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

@media (min-width: 983px) { 
	.preview-checking-box label + label {
		margin-left: 1em;
	}
}

@media (max-width: 982px) { 
	.preview-checking-box label {
		display: block;
	}
}

/* Posting forms */

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

@media (max-width: 982px) { 
	.post-options-wrap {
		display: none;
	}
}

.btn-comcode {
	color: #ffffff !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: #e7f2fd;
}

.posting-form-wrap-buttons {
	background-color: #d7e6f5;
}

.posting-form-wrap-buttons, .posting-form-insert-buttons {
	float: right;
	border: 1px solid #dddddd;
	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 #dddddd;
	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%;
}
@media (max-width: 982px) { 
	.attachments-field-name-column, .box .attachments-field-name-column, .attachments-field-input-column {
		width: auto;
	}
}

/* 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;
}

@media (min-width: 983px) { 
	.form-set-indent {
		margin-left: 2em;
	}
}

.fields-set-item {
	background-color: #fbfdff;
	padding: 0.75em 0.5em;
	
	border: 1px solid #b7d8fa;
}

.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 #b7d8fa;
}

.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 #dddddd;*/
	/*padding: 0.2em;*/
/*}*/

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

@media (max-width: 640px) { 
	.form-table input[type="file"] {
		max-width: 6em;
	}
}

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

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

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

.cke_chrome .cke_inner {
	background: #e7f2fd;
}

.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;
}



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

.cke_button__composr_block_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/composr_block.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_comcode_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/composr_comcode.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_page_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/composr_page.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_quote_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/composr_quote.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_box_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/composr_box.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_code_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/composr_code.png') !important;
	background-size: 16px !important;
}
.cke_button__composr_image_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/composr_image.png') !important;
	background-size: 16px !important;
}
.moono .cke_button__composr_image_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/composr_image__moono.png') !important;
}
.cke_button__spellchecktoggle_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/plugins/spellchecktoggle/images/spellchecktoggle.png') !important;
	background-size: 16px !important;
}
.moono .cke_button__spellchecktoggle_icon {
	background-image: url('https://raywonderis.me/data/ckeditor/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('https://raywonderis.me/data/ckeditor/plugins/composr/images/hidpi/composr_block.png') !important;
	}
	.cke_button__composr_comcode_icon {
		background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/hidpi/composr_comcode.png') !important;
	}
	.cke_button__composr_page_icon {
		background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/hidpi/composr_page.png') !important;
	}
	.cke_button__composr_quote_icon {
		background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/hidpi/composr_quote.png') !important;
	}
	.cke_button__composr_box_icon {
		background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/hidpi/composr_box.png') !important;
	}
	.cke_button__composr_code_icon {
		background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/hidpi/composr_code.png') !important;
	}
	.cke_button__composr_image_icon {
		background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/hidpi/composr_image.png') !important;
	}
	.moono .cke_button__composr_image_icon {
		background-image: url('https://raywonderis.me/data/ckeditor/plugins/composr/images/hidpi/composr_image__moono.png') !important;
	}
	.cke_button__spellchecktoggle_icon {
		background-image: url('https://raywonderis.me/data/ckeditor/plugins/spellchecktoggle/images/hidpi/spellchecktoggle.png') !important;
	}
	.moono .cke_button__spellchecktoggle_icon {
		background-image: url('https://raywonderis.me/data/ckeditor/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 #000000;
}

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

/* software editing UI */

comcode-,comcode-, tempcode {
	background-color: #feffcb;
	color: #000000;
}

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

#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: #000000;
	background: url('install.php?type=themes/default/images/icons/editor/comcode.svg') #feffcb 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: #000000;
	background-color: #feffcb;
}
#wysiwyg-editor .cms-keep-ui-controlled::-moz-selection {
	color: #000000;
	background-color: #feffcb;
}

@media (max-width: 982px) { 
	.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;
	}
}

/* Other styles */

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