/* styles for codigo dash admin layout */
/* #34ace0 */
:root {
	--bg: #fff;
	--theme-primary: #34ace0;
	--theme-topbar: #231a17;
	--saved: #b2f5ce;
}
@media (min-width: 0px) {
	html {
		font-size: 65.2%;
	}
	body {
		background-color: var(--bg);
		float: left;
		font-family: 'Figtree', sans-serif;
		font-optical-sizing: auto;
		font-size: 1.4rem;
		width: 100%;
	}
	#darkMode {
		background: none;
		border: 0;
		color: #fff;
	}
	a,
	button,
	div,
	img,
	p,
	span,
	tr,
	td {
		transition: all 0.25s;
		-moz-transition: all 0.25s;
		/* Firefox 4 */
		-webkit-transition: all 0.25s;
		-o-transition: all 0.25s;
		/* Opera */
	}
	/* remove transition for select2 span to stop scroll-to-top behaviour on click */
	span.select2-container {
		transition: none;
		-moz-transition: none;
		-webkit-transition: none;
		-o-transition: none;
	}
	code.go {
		border: 1px solid #ccc;
		color: #333;
		float: left;
		margin: 4px 0;
		padding: 6px 8px;
		width: 100%;
	}
	textarea.go {
		height: 80vh;
		width: 100%;
	}
	pre {
		display: block;
		float: left;
		width: 100%;
	}
	.monospace {
		font-family: monospace;
	}
	.row,
	.site-wrap-row,
	.site-wrap-col {
		float: left;
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.progress-bar {
		border: 1px solid #333;
	}
	.progress-bar.low {
		background: #27ae60;
	}
	.progress-bar.med {
		background: #f1c40f;
	}
	.progress-bar.high {
		background: #d35400;
	}
	.progress-bar.critical {
		background: #c0392b;
	}
	.btn {
		font-size: 1.35rem;
		line-height: 1;
		padding: 6px 8px;
	}
	.btn-lg {
		font-size: 1.75rem;
		padding: 12px 32px;
	}
	.btn-sm {
		font-size: 1rem;
		padding: 4px 8px;
	}
	select {
		width: auto;
	}
	.list-group {
		border: 0;
	}
	.input-group ul,
	.input-group ol {
		display: block;
		float: left;
		width: 100%;
	}
	label.readonly {
		opacity: 0.5;
	}
	.num {
		font-family: monospace;
	}
	div.details,
	article.details,
	details {
		background: #fff;
		border: 1px solid #ccc;
		display: flex;
		flex-direction: column;
		float: left;
		margin: 0 0 8px 0;
		padding: 0;
		width: 100%;
	}
	div.details:hover,
	article.details:hover,
	details:hover {
		box-shadow: 0 2px 8px #777;
	}
	details.short {
		max-width: 600px;
	}
		.details .summary,
		details summary {
			font-size: 1.5rem;
			padding: 12px 16px;
		}
		details summary:hover {
			cursor: pointer;
		}
		.details .summary {
			padding-bottom: 0;
		}
		.details-contents {
			display: flex;
			flex-direction: column;
			padding: 8px 16px;
		}
			.details-contents button {
				margin: 6px 0;
				width: auto;
			}
			.details-contents button.btn-block {
				width: 100%;
			}
	/* special styling for details > summary */
	details.emphasis {
		display: flex;
		flex-direction: row;
	}
		details.emphasis summary {
			background-color: var(--info);
			color: #fff;
		}
	.hidden {
		display: none;
	}
	.ajax {
		background: #fff;
		border: 1px solid #ccc;
		display: none;
		float: left;
		margin: 16px 0;
		min-height: 0px;
		max-height: 400px;
		overflow: auto;
		padding: 12px 16px;
		position: relative;
		width: 100%;
	}
	.ajax-response {
		display: block;
	}
		.ajax-response p {
			font-size: 1.85rem;
			line-height: 2.6rem;
		}
	/* trigger buttons for in-page show/hide functionality */
	.trigger .trigger-icon {
		display: none;
	}
	.trigger.active .trigger-icon-active,
	.trigger.idle .trigger-icon-idle {
		display: inline;
	}
	.trigger.active .trigger-icon-idle,
	.trigger.idle .trigger-icon-active {
		display: none;
	}
	/* attached images */
	.attached-images {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		float: left;
		width: 100%;
	}
		.attached-item {
			display: flex;
			flex-direction: column;
			padding: 4px;
			width: 120px;
		}
			a.attached-item-img {
				background-repeat: no-repeat;
				background-size: cover;
				height: 100px;
				width: 100%;
			}
		.attached-item .copy-response {
			position: relative;
		}
			.attached-item .copy-response .copy-msg {
				font-size: 1.5rem;
				position: absolute;
				top: 0;
				left: 0;
				width: 140px;
			}
	.img-thumb {
		width: 140px;
	}
	.img-wrap {
		display: block;
		float: left;
		padding: 6px;
		text-align: center;
	}
	.rotate-90 {
		transform: rotate(90deg);
	}
	.rotate-180 {
		transform: rotate(180deg);
	}
	.rotate-270 {
		transform: rotate(270deg);
	}
	main #codigo-content form .pan,
	main .workspace .pan {
		padding: 0 20px 0 0;
	}
	main .workspace .img-wrap a.btn {
		margin: 8px 0 16px 0;
	}
	.img-wrap .img-thumb {
		width: 100%;
		max-width: 100%;
	}
	.well,
	.wrap {
		display: block;
		float: left;
		width: 100%;
	}
	.well {
		background: #eee;
		border: 1px solid #ccc;
		color: #333;
		margin-bottom: 8px;
		padding: 12px;
	}
	.wrap {
		margin: 0;
		min-height: 24px;
		padding: 0;
	}
	.ws {
		padding: 16px 24px;
	}
		.ws-actions a {
			margin-right: 6px;
		}
	.pagination {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		float: left;
		margin-top: -12px;
		width: 100%;
	}
		.pagination .btn {
			align-self: center;
			min-width: 72px;
		}
		.pagination .styled-select {
			flex-grow: 0;
			flex-shrink: 0;
			margin: 0 4px;
			width: 72px;
		}
		.pagination .messenger-contacts-filter {
			width: 180px;
		}
		.pagination .field-label-input {
			min-width: 120px;
		}
		.pagination .field-label-text {
			min-width: unset;
			max-width: unset;
			width: auto;
		}
		.pagination-submit {
			display: flex;
			flex-grow: 0;
			flex-shrink: 0;
			flex-direction: row;
			margin-bottom: 8px;
			width: 100%;
		}
			.pagination-submit-btn {
				margin-right: 8px;
			}
			.pagination-count {
				display: flex;
				flex-direction: row;
				width: auto;
			}
				.pagination-count .count {
					align-self: center;
				}
		.pagination .pg-nav {
			display: flex;
			flex-direction: row;
		}
			.pagination .pg-nav .pg-field {
				align-self: center;
			}
		.pagination .pg-fields {
			display: flex;
			flex-direction: row;
			flex-grow: 1;
			flex-shrink: 0;
			width: auto;
		}
			.pagination .pg-fields .pg-field {
				flex-grow: 1;
				flex-shrink: 0;
				min-width: 120px;
			}
			.pagination .pg-fields .pg-field.pg-field-select2 {
				display: flex;
				flex-direction: row;
				width: 200px;
			}
				.pagination .pg-field.pg-field-select2 .select2-selection {
					border: 1px solid #ccc;
					flex-grow: 1;
					flex-shrink: 1;
					height: 40px;
					width: 200px;
				}
			.pagination .pg-fields .pg-field.pg-field-search input {
				width: 100%;
			}
			.pagination .pg-fields .pg-field.pg-field-dates {
				flex-grow: 0;
				flex-shrink: 1;
				max-width: 240px;
				min-width: 180px;
			}
			.pagination .pg-fields .pg-field.pg-field-dates-inline {
				display: flex;
				flex-direction: row;
				min-width: 320px;
				max-width: 480px;
			}
		.pagination details {
			margin: 4px 0 0 8px;
		}
			.pagination details summary {
				font-size: 1.2rem;
				padding: 8px 12px;
			}
	.pan.index-content {
		padding: 0 16px;
	}
	.index-search {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin-left: 8px;
		padding-top: 4px;
	}
		input[type="text"].index-search-input {
			border: 1px solid #ccc;
			flex-grow: 0;
			flex-shrink: 0;
			font-size: 1.25rem;
			margin: 0 8px 0 0;
			padding: 4px 8px;
			width: 120px;
		}
		.pagination .btn-submit {
			margin-left: 8px;
		}
		.pagination .btn.index-search-btn.btn-danger {
			margin-left: 4px;
			width: auto;
		}
	.flex-row {
		display: flex;
		flex-direction: row;
		float: left;
		width: 100%;
	}
	.flex-column {
		display: flex;
		flex-direction: column;
		float: left;
		width: 100%;
	}
	.flex-wrap {
		display: flex;
		flex-direction: column;
		float: left;
		width: 100%;
	}
	.position-relative {
		position: relative;
	}
	.index-line-actions {
		display: flex;
		justify-content: flex-start;
		margin: 4px 0;
		padding: 0;
		width: 100%;
	}
		.index-line-actions .btn {
			font-size: 1.15rem;
			margin: 0 4px;
		}
	.bg {
		float: left;
		font-size: 1.15rem;
		line-height: 1.25;
		margin: 0 0 4px 0;
		padding: 8px 12px;
		width: 100%;
	}
	.bg-info {
		background-color: #d0e6f5 !important;
		border: 2px solid #87c1e8;
		color: #000;
		opacity: 0.75;
	}
	.bg-danger {
		color: #fff;
	}
	ul.bg-info {
		padding-left: 28px;
	}
		ul.bg-info li {
			padding: 4px 0;
		}
	/* independent bg-info not attached to a field as its instruction */
	.bg-alone {
		margin: 12px 0;
	}
	.btn-block {
		display: block;
		float: left;
		width: 100%;
	}
	.btn-primary {
		background: #34ace0;
		border: 1px solid #34ace0;
	}
	.btn-primary:hover,
	.btn-primary:focus {
		background: #34ace0;
		border-color: #34ace0;
	}
	.btn-primary[data-toggle="collapse"] {
		margin: 4px 0 8px 0;
	}
	.btn-secondary {
		background: #fff;
		color: #333;
	}
	.btn-secondary:hover {
		background: #eee;
		color: #333;
	}
	.btn-ui {
		background: #eee;
		border: 1px solid #ccc;
		color: #555;
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.0;
		margin-bottom: 8px;
		padding: 8px 16px;
		position: relative;
		text-align: left;
		width: auto;
	}
		.btn-ui .btn-label {
			padding-right: 16px; /* make room for the icon */
		}
	.btn-ui:hover,
	.btn-ui:focus {
		background: #fff;
	}
	.btn-ui[aria-expanded="true"] {
		background: #333;
		color: #fff;
	}
	.btn-ui.btn-lg {
		font-size: 1.5rem;
		font-weight: 400;
		padding: 12px 20px;
	}
	.bg-light-green {
		background-color: #c7f8b1;
	}
	.bg-light-red {
		background-color: #f8d0d0;
	}
	.form-control {
		height: 36px;
		font-size: 1.5rem;
		line-height: 1.15;
	}
	.opacity-50 {
		opacity: 0.5;
	}
	.filter-wrapper {
		margin: 8px 0;
	}
	.filter-control {
		display: block;
		float: left;
		font-weight: normal;
		padding-right: 8px;
	}
	.filter-control input[type="checkbox"].filter {
		display: block;
		float: left;
		padding-right: 6px;
		width: 20px;
	}
	.search-filters .fields {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		float: left;
		width: 100%;
	}
		.search-filters .fields .field-group {
			border: none;
			flex-grow: 1;
			flex-shrink: 1;
			padding: 2px 8px 2px 0;
		}
		.search-filters .field-group .field-label {
			display: flex;
			flex-direction: column;
			width: 100%;
		}
			.search-filters .field-group .field-label .field-label-text {
				background: 0;
				border: none;
				padding: 4px 0;
				text-align: left;
			}
			.search-filters .field-group .field-label .field-input input {
				border: 1px solid #ccc;
				padding: 4px 8px;
			}
	.collapse-button {
		margin: 4px 0;
	}
	.collapse-button[aria-expanded="false"] .collapse-button-icon-opened,
	.collapse-button[aria-expanded="true"] .collapse-button-icon-closed {
		display: inline;
	}
	.collapse-button[aria-expanded="true"] .collapse-button-icon-opened,
	.collapse-button[aria-expanded="false"] .collapse-button-icon-closed {
		display: none;
	}
	.collapse-button-icon {
		position: absolute;
		top: 27.5%;
		right: 12px;
	}
	.collapse {
		float: left;
		margin: 0 0 8px 0;
		width: 100%;
	}
	.wrapper {
		display: block;
		float: left;
		width: 100%;
	}
	/* fields */
	.field {
		display: flex;
		flex-direction: column;
		float: left;
		font-size: 1.75rem;
		padding: 6px 0;
		width: 100%;
	}
		.field .field-label {
			display: flex;
			flex-direction: column;
			font-weight: 700;
			margin: 0;
			padding: 0;
		}
		.field .field-singleline,
		.field .field-textarea,
		.field .field-select {
			font-size: 1.75rem;
			padding: 4px 8px;
			max-width: 600px;
		}
		.field.field-checkbox .field-label,
		.field.field-radio .field-label {
			display: block;
		}
		.field-quill {
			border: 1px solid #999;
			margin-bottom: 16px;
		}
		.field-quill .ql-editor p,
		.field-quill .ql-editor li,
		.field-quill .ql-editor td {
			font-size: 1.75rem;
		}
	
		h5.field-heading {
			font-size: 1.75rem;
			font-weight: 400;
			line-height: 1.15;
		}
	.field-checkbox label,
	.field-radio label {
		display: flex;
		flex-direction: row;
		float: left;
		width: 100%;
	}
		.field-checkbox label input,
		.field-radio label input {
			flex-grow: 0;
			flex-shrink: 0;
			margin-right: 4px;
			width: 20px;
		}
		.field-checkbox label .label-text,
		.field-radio label .label-text {
			flex-grow: 1;
			flex-shrink: 1;
		}
	body.settings details .field {
		padding: 18px 0;
	}
	body.settings details .field .styled-select {
		max-width: 400px;
	}
	/* custom radio buttons from UI class */
	.radio-custom-label.flex-row {
		display: flex;
		flex-direction: row;
	}
	.radio-custom-label.flex-row .input {
		flex-grow: 0;
		flex-shrink: 0;
		width: 24px;
	}
	.radio-custom-label.flex-row .label-text {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		flex-shrink: 1;
	}
	.radio-custom-label.flex-row .label-text .desc {
		font-weight: 400;
	}
	.radio-custom-label .desc {
		font-size: 80%;
		opacity: 0.8;
	}
	/* Article Editor */
	.arx-container {
		border: 1px solid #ccc !important;
		float: left !important;
		width: 100% !important;
	}
	.arx-popup-container .arx-popup form,
	.arx-popup-container .arx-popup-body {
		float: left;
		width: 100%;
	}
	/* reduce the space above the clickable area in Imperavi Article */
	.arx-content {
		padding-top: 8px !important;
	}
	.redactor-toolbar {
		width: 100% !important;
	}
	.redactor-styles ol,
	.redactor-styles ul {
		display: block;
		float: left;
		width: 100%;
	}
	.ui-img-preview {
		margin: 16px 0;
	}
	.ui-datepicker {
		background: #fff;
		box-shadow: 2px 2px 4px #000;
		padding: 0;
		z-index: 99999999 !important;
	}
	.ui-datepicker-header {
		background: #34ace0;
		color: #fff;
		margin-bottom: 4px;
		padding: 4px 8px;
	}
	.ui-datepicker-prev {
		float: left;
	}
	.ui-datepicker-next {
		float: right;
	}
	.ui-datepicker-next a:hover,
	.ui-datepicker-prev a:hover {
		text-decoration: none;
	}
	.ui-icon {
		color: #fff;
		font-size: 1rem;
		font-weight: 700;
		text-transform: uppercase;
	}
	.ui-datepicker-title {
		text-align: center;
	}
	.ui-datepicker-calendar tbody tr td a {
		display: block;
		float: left;
		padding: 6px 8px;
		text-align: center;
		width: 100%;
	}
	.ui-datepicker-calendar tbody tr td a:hover {
		background: #34ace0;
		color: #fff;
	}
	.ui-datepicker-calendar thead th span {
		display: block;
		float: left;
		padding: 6px 8px;
		width: 100%;
	}
	.ui-timepicker-standard {
		z-index: 999 !important;
	}
	.field-group {
		display: block;
		float: left;
		margin: 4px 0;
		padding: 4px;
		width: 100%;
	}
		.field-label {
			display: block;
			float: left;
			font-size: 1.75rem;
			line-height: 1.2;
			padding: 0;
			width: 100%;
		}
		.field-input,
		.field-label-text {
			display: block;
			float: left;
			font-size: 1.5rem;
			line-height: 1.2;
		}
		.field-label-text {
			padding: 4px 0;
		}
		.field-group-check .field-label-text {
			background: none;
		}
		.field-input {
			border: 1px solid #aaa;
		}
		.field-input input,
		.field-input textarea {
			background: #fff;
			border: none;
			display: block;
			float: left;
			font-weight: 400;
			padding: 8px 12px;
			width: 100%;
		}
		.field-select {
			font-weight: 400;
		}
		.field-group-check .field-label .field-input {
			border: none;
		}
		.field-group-check .field-label .field-input input {
			background: none;
			border: none;
			height: 20px;
			padding: 0;
			width: 20px;
		}
		.field-group-check .field-label .field-label-text {
			font-weight: 400;
			padding: 4px;
		}
	textarea.lg {
		border: 1px solid #777;
		border-radius: 8px;
		font-family: monospace;
		font-size: 2rem;
		line-height: 1.4;
		min-height: 60vh;
		padding: 12px 16px;
		width: 100%;
	}
	/* used on <a> for displaying dynamic thumbnails */
	.preview {
		display: block;
		float: left;
		height: 140px;
		margin: 0;
		padding: 0;
		position: relative;
		width: 240px;
	}
	.preview-img {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: block;
		float: left;
		height: 140px;
		overflow: hidden;
		position: relative;
		width: 100%;
		z-index: 1;
	}
		.preview-img img {
			margin-left: -10%;
			max-width: 120%;
		}
	.preview .preview-controls {
		display: none;
	}
	.preview:hover .preview-controls-bg,
	.preview:hover .preview-controls {
		display: block;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.preview:hover .preview-controls-bg {
		background: #fff;
		opacity: 0.8;
		z-index: 3;
	}
	.preview:hover .preview-controls {
		background: none;
		padding: 12px;
		opacity: 1.0;
		z-index: 4;
	}
	.preview-controls iframe {
		border: 0;
		height: 140px;
		overflow-y: scroll;
		width: 140px;
	}
	.preview-controls label {
		display: block;
		float: left;
		width: 100%;
	}
	.preview-controls label.half {
		padding-right: 12px;
		width: auto;
	}
	.preview-controls .rotation label {
		align-content: center;
		display: flex;
		flex-direction: row;
		font-size: 1rem;
	}
		.preview-controls .rotation label i {
			font-size: 1.5rem;
			margin: 0 3px;
		}
		.preview-controls .rotation label .label-text {
			padding-right: 8px;
		}
	.preview-state {
		color: #fff;
		font-size: 2rem;
		line-height: 2rem;
		position: absolute;
		bottom: 4px;
		left: 4px;
		opacity: 0.8;
		text-shadow: 0 0 4px #fff;
		z-index: 2;
	}
	/* independent from .preview */
	.preview-item {
		display: block;
		float: left;
		margin-top: 4px;
		width: 100%;
	}
	.preview-item .btn {
		float: left;
	}
	.preview-item .collapse {
		border: 1px solid #ccc;
		height: 140px;
		margin-top: 0;
		overflow: hidden;
	}
	.preview-item iframe {
		border: 0;
		float: left;
		height: 140px;
		overflow-y: hidden;
		width: auto;
	}
	.preview .js-btn {
		position: absolute;
		bottom: 4px;
		left: 4px;
		z-index: 2;
	}
	.iconPreview {
		background: #fff;
		border: 1px solid #ccc;
		float: left;
		min-height: 80px;
		min-width: 80px;
		padding: 12px;
	}
		.iconPreview-icon {
			font-size: 60px;
		}
	details .details-contents {
		display: block;
		float: left;
		padding: 12px 16px;
		width: 100%;
	}
	details .details-contents .assets {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
		details .details-contents .assets .asset {
			flex-grow: 0;
			flex-shrink: 0;
			height: 140px;
			width: 140px;
		}
			details .details-contents .assets .asset a {
				display: block;
				float: left;
				width: 100%;
			}
				details .details-contents .assets .asset a img {
					max-width: 100%;
				}
			details .details-contents .assets .asset .asset-controls {
				display: none;
			}
	#all {
		width: 100%;
		float: left;
		height: 100vh; /* main div within another element with 100vh prevents scrolling from getting stuck */
		overflow-x: hidden;
		overflow-y: auto;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: 'Muli', sans-serif;
		font-weight: 700;
		font-style: normal;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	.js-generate {
		display: block;
		float: left;
		width: 100%;
	}
	h1 {
		font-weight: 900;
	}
	h2 {
		padding-top: 24px;
	}
	h3,
	h4 {
		padding-top: 16px;
	}
	.col h4:first-child {
		padding-top: 6px;
	}
	.well h3,
	.well h4 {
		padding-top: 0;
	}
	.editor-heading { /* h4 from get_textarea() */
		background: #eee;
		border: 1px solid #ddd;
		border-bottom: 0;
		color: #333;
		font-size: 1.25rem;
		font-weight: 400;
		margin: 4px 0 0 0;
		padding: 8px 8px 8px 12px;
	}
	table {
		width: 100%;
	}
	td {
		vertical-align: top;
	}
	td.title {
		min-width: 160px;
		position: relative;
	}
	tr.child td.title a {
		margin-left: 16px;
	}
	/* index list inputs */
	td.title.has-checkbox {
		display: flex;
		flex-direction: row;
	}
	/* horizontal scrolling tables */
	.scrollable {
		overflow-x: auto;
		overflow-y: hidden;
	}
		.scrollable table {
			min-width: 100%;
		}
		.scrollable table th,
			.scrollable table td {
				min-width: 180px;
			}
	table.listView thead th {
		background: #e5e5e5;
	}
	table.listView th,
	table.listView td {
		padding: 4px 8px;
	}
	table.listView tbody tr:nth-child(even) td {
		background: #f6f6f6;
	}
	
	.ui-index-label {
		margin-right: 4px;
		padding: 4px;
	}
		.ui-index-checkbox {
			height: 16px;
			width: 16px;
		}
	
	/* V2 LAYOUT */
	.site-wrap-col {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
		.site-wrap-col .header-main,
		.nav-main,
		.site-wrap-col .footer-main {
			flex-grow: 0;
			flex-shrink: 0;
		}
		.site-wrap-col .header-main,
		.site-wrap-col .footer-main {
			width: 100%;
		}
		.nav-main {
			background-color: #f3f5f7;
			display: flex;
			flex-direction: column;
			height: 100vh;
			justify-content: flex-start;
			padding: 0;
			position: relative;
			width: 160px;
			z-index: 1;
		}
			.nav-main-menu {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding: 4px 0;
				width: 100%;
			}
			.nav-main .menu-trigger {
				border: none;
			}
			.nav-main .menu-trigger[aria-expanded="true"] {
				position: absolute;
				right: 0;
			}
			.nav-main .nav-main-item {
				color: #777;
				display: block;
				font-size: 1.5rem;
				padding: 8px;
			}
			.nav-main .nav-main-item.has-children {
				padding: 0;
			}
				.nav-main .nav-main-item-icon {
					display: block;
					float: left;
					font-size: 1.65rem;
					margin: 0;
					padding: 0 6px 0 0;
					width: unset;
				}
				.nav-main .nav-main-item-title {
					display: block;
					float: left;
					font-size: 1.35rem;
					margin: 0;
					padding: 0;
					width: unset;
				}
				.nav-main .nav-main-item-btn {
					border: none;
					background: none;
					cursor: pointer;
					margin: 0;
					padding: 8px;
					width: 100%;
				}
				.nav-main .nav-main-item.active,
				.nav-main .nav-main-item-btn[aria-expanded="true"] {
					background: #dbdfe4;
					font-weight: 800;
				}
					.nav-main .nav-main-item-btn .ind-icon {
						display: block;
						float: right;
						font-size: 10px;
						padding: 8px 0;
					}
					.nav-main .nav-main-item-btn[aria-expanded="false"] .ind-icon .closed,
					.nav-main .nav-main-item-btn[aria-expanded="true"] .ind-icon .open {
						display: block;
					}
					.nav-main .nav-main-item-btn[aria-expanded="false"] .ind-icon .open,
					.nav-main .nav-main-item-btn[aria-expanded="true"] .ind-icon .closed {
						display: none;
					}
				.nav-main .nav-main-item-list {
					background: #ccc;
					border-bottom: 4px solid #dedede;
					display: flex;
					flex-direction: column;
					list-style-type: none;
					margin: 0;
					padding: 4px;
					width: 100%;
				}
					.nav-main .nav-main-item-list .nav-main-item-list-child {
						background: none;
						font-size: 88%;
					}
						.nav-main .nav-main-item-list .nav-main-item-list-child a {
							color: #000;
							cursor: pointer;
							display: block;
							float: left;
							padding: 8px;
							width: 100%;
						}
							.nav-main .nav-main-item-list .nav-main-item-list-child a i {
								color: inherit;
								opacity: 0.6;
								padding-right: 2px;
							}
						.nav-main .nav-main-item-list .nav-main-item-list-child a:hover {
							background: #fff;
							color: #222;
							text-decoration: none;
						}
			.nav-main-closed .nav-main .nav-main-item-title,
			.nav-main-closed .nav-main .nav-main-item-btn .nav-main-item-title,
			.nav-main-closed .nav-main .nav-main-item-btn .ind-icon,
			.nav-main-closed .nav-main .nav-main-item-list {
				display: none;
			}
			.nav-main-closed .nav-main .nav-main-item-btn {
				width: 36px;
			}
			.nav-main-closed .nav-main {
				width: 36px;
			}
			/* nav-main details */
			details.nav-main-details {
				background: none;
				border: none;
			}
			details.nav-main-details:hover {
				background: none;
				border: none;
				box-shadow: none;
			}
				details.nav-main-details summary {
					background: none;
					color: inherit;
					font-size: 1rem;
					text-transform: uppercase;
				}
		/* item header actions */
		.actions {
			display: flex;
			flex-direction: row;
		}
			.actions .field {
				flex-grow: 1;
				flex-shrink: 1;
				flex-direction: row;
				margin-right: 16px;
				width: auto;
			}
				.actions .field-label {
					flex-grow: 0;
					flex-shrink: 0;
					padding-right: 6px;
					width: auto;
				}
			.actions .field-input,
			.actions .btn {
				border-radius: 24px;
			}
			.actions .btn {
				margin: 8px 16px 0 0;
				padding: 8px 16px;
			}
		
		main {
			flex-grow: 1;
			flex-shrink: 1;
			padding-top: 12px;
			width: calc(100% - 160px);
		}
		.nav-main-closed main {
			width: calc(100% - 36px);
		}
	/* LOGIN */
	body.login {
		background: #34ace0;
	}
	#login {
		width: 400px;
		min-height: 200px;
		margin: 100px auto 0 auto;
	}
	#login .identity {
		width: 100%;
		min-height: 24px;
		float: left;
		margin: 5vh 0 16px 0;
		position: relative;
	}
	#login .identity .logo {
		width: 100%;
		float: left;
	}
	#login .identity .logo .logo-img {
		margin: 0 auto;
		padding: 0 16px;
		width: 100%;
		max-width: 100%;
	}
	#login .wrapper {
		border-radius: 8px;
		float: left;
		min-height: 24px;
		padding: 16px;
		width: 100%;
	}
	#login .wrapper form {
		width: 100%;
		margin: 0;
	}
	#login label {
		display: block;
		color: #fff;
		float: left;
		padding: 8px 0;
		width: 100%;
	}
	#login label input {
		background: #fff;
		color: #333;
		display: block;
		float: left;
		font-size: 2rem;
		line-height: 2.2rem;
		margin: 4px 0 0 0;
		min-height: 12px;
		padding: 12px 16px;
		width: 100%;
	}
	#login label input:focus {
		background: #ecf0f1;
	}
	#login button {
		background: #34ace0;
		border: 1px solid #fff;
		display: block;
		float: left;
		font-size: 2rem;
		line-height: 2rem;
		margin-top: 16px;
		padding: 16px 24px;
		text-align: center;
		width: 100%;
	}
	#login button .icon-default {
		display: inline;
	}
	#login button .icon-focus,
	#login button:focus .icon-default {
		display: none;
	}
	#login button:focus .icon-focus {
		display: inline;
	}
	#login button:focus {
		border-color: #fff;
		box-shadow: 0 0 4px #fff;
	}
	#login .contact {
		padding: 16px 0 0 0;
		float: left;
		width: 100%;
	}
	#login .contact .content {
		font-size: 1rem;
		text-align: center;
		color: #e0e0e0;
		width: 100%;
		display: block;
	}
	#login .contact .content a {
		color: #fff;
	}
	#login .error {
		background: #fff;
		color: #34ace0;
		display: block;
		float: left;
		padding: 12px 16px;
		width: 100%;
	}
	#accounts.wrapper {
		float: left;
		text-align: center;
		width: 100%;
	}
	#accounts.wrapper #filter {
		margin: 4px 0 8px 0;
		text-align: center !important;
	}
	.list-group.accounts {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		float: left;
		justify-content: center;
		width: 100%;
	}
		.accounts .list-group-item.account {
			background: none;
			border: none;
			margin: 0;
			padding: 0;
			width: 100%;
		}
			.chooseaccount-btn {
				background: #fff;
				border: 1px solid #ccc;
				color: #000;
				font-size: 1.75rem;
				margin: 3px 0;
				padding: 12px 12px;
				width: 100%;
			}
			.chooseaccount-btn:hover {
				background: #34ace0;
				color: #fff;
			}
				.chooseaccount-name,
				.chooseaccount-domain {
					display: block;
					float: left;
					text-align: center;
					width: 100%;
				}
				.chooseaccount-domain {
					font-size: 60%;
					opacity: 0.6;
					padding: 4px 0 0 0;
				}
	header,
	footer {
		min-height: 60px;
		width: 100%;
		float: left;
	}
	footer {
		margin-top: 16px;
		padding: 8px 16px;
	}
	header {
		min-height: 16px;
		padding: 0;
		float: left;
	}
	.error {
		background: #970ed6;
		border: 2px solid #7e3a33;
		color: #fff;
		display: block;
		float: left;
		font-weight: normal;
		margin: 0;
		padding: 4px 8px;
		width: 100%;
	}
	.list li label label.error {
		background: #d2322d;
		font-style: normal;
		position: relative;
		z-index: 999;
	}
	.block,
	.block-small {
		float: left;
		min-height: 24px;
		width: 100%;
	}
	.block-small {
		font-size: 0.9em;
		line-height: 1em;
	}
	.list-group {
		float: left;
		width: 100%;
	}
	.list-group-scrolling {
		border: 1px solid #ccc;
		box-shadow: 2px 2px 4px #999;
		max-height: 400px;
		overflow: auto;
	}
	/* js-powered quick search on lists */
	.listSearch input {
		border-width: 3px;
		border-style: dashed;
		width: 360px;
	}
	/* badge color schemes */
	.badge-wrap {
		display: inline-block;
		width: auto;
	}
		.badge-wrap .badge-inner {
			display: block;
			float: left;
			margin-bottom: -2px;
			min-height: 20px;
			padding-top: 4px;
		}
			.badge-wrap .badge-inner .badge {
				display: block;
				float: left;
				width: 100%;
			}
	.badge {
		font-weight: 400;
		padding: 4px 8px;
	}
	.badge-primary {
		background: #34ace0;
		color: #fff;
	}
	.badge-green {
		background: #27ae60;
		color: #fff;
	}
	.badge-red {
		background: #e74c3c;
		color: #fff;
	}
	.badge-blue {
		background: #27ae60;
		color: #fff;
	}
	.badge-grey {
		background: #7f8c8d;
		color: #fff;
	}
	a.badge-grey:hover,
	a:hover .badge-grey {
		color: #fff;
	}
	.badge.desc {
		background: none;
		color: #999;
		font-size: 1.2rem;
		line-height: 1.4rem;
		padding: 0;
	}
	small.badge {
		border-radius: 8px;
		display: inline-block;
		font-size: 0.84rem;
		padding: 4px 6px;
	}
	.badge-block {
		display: block;
		margin: 0 0 6px 0;
		text-align: left;
	}
	.badge-list .badge-wrap {
		display: inline-block;
		margin-right: 12px;
	}
	/* standard dropdown menus */
	.dropdown-menu {
		width: auto;
		min-width: 120px;
		max-width: 280px;
	}
	.dropdown-menu li {
		font-size: 1.5rem;
		line-height: 1.15;
		padding: 6px 12px;
	}
	.longlist {
		display: block;
		float: left;
		width: 100%;
	}
		.longlist .longlist-item {
			padding: 12px 20px;
		}
			.longlist-item h3 {
				font-size: 1.25rem;
				font-weight: 400;
			}
		.longlist .longlist-item {
			background: #fff;
			border-bottom: 6px solid #eee;
			border-top: 6px solid #eee;
		}

	/* one-tap order checklist  */
	.order-checklist .panel {
		padding: 12px;
	}
	.order-checklist .panel:nth-child(odd) {
		background: #fff;
	}
	.order-checklist .panel:nth-child(even) {
		background: #eee;
	}
		.order-checklist-item {
			display: flex;
			flex-direction: row;
		}
			.order-checklist-item-inner {
				align-self: center;
				display: flex;
				flex-direction: row;
				margin: 0 12px 8px 0;
				padding: 0;
				width: 100%;
			}
				.order-checklist-item-inner .btn {
					flex-grow: 1;
					flex-shrink: 1;
					padding: 24px 12px;
				}

	/* nav */
	.topbar {
		background: var(--theme-topbar);
		border: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		margin: 0;
		width: 100%;
	}
		.topbar .topbar-inner {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			float: left;
			width: 100%;
		}
			.topbar-region {
				display: flex;
				flex-direction: row;
				flex-grow: 1;
				flex-shrink: 1;
				width: auto;
			}
			.topbar-region-left {
				flex-grow: 0;
				flex-shrink: 0;
				justify-content: flex-start;
				width: auto;
			}
				.topbar-region-left .topbar-item {
					color: #fff;
					flex-grow: 0;
					flex-shrink: 0;
				}
					.topbar-region-left .topbar-item-account {
						width: 200px;
					}
					.topbar-region-left .topbar-item-account .account {
						font-size: 1.15rem;
					}
			.topbar-region-center {
				justify-content: center;
			}
			.topbar-region-right {
				justify-content: flex-end;
			}
				/* default item behaviour */
				.topbar-item {
					display: flex;
					flex-direction: column;
					flex-grow: 1;
					flex-shrink: 1;
					justify-content: center;
					width: auto;
				}
				.topbar-region-right .topbar-item {
					flex-grow: 0;
					flex-shrink: 0;
					width: auto;
				}
					.topbar-region-right .topbar-item i {
						font-size: 20px;
						margin: 0;
						padding: 0;
					}
				.topbar-region-right .topbar-item-theme {
					padding-top: 1px;
					width: 22px;
				}
				.topbar-region-right .topbar-item-nav {
					width: 46px;
				}
				.topbar-region-right .topbar-item-user {
					padding: 0;
					margin: 0;
					width: 24px;
				}
					.topbar-item-user .dropdown-toggle::after {
						display: none;
					}
	.topbar nav {
		color: #fff;
		padding: 8px 16px;
	}
	.topbar .nav.nav-tabs {
		width: auto;
	}
	.topbar a,
	.navbar-default .navbar-nav>li>a,
	.topbar form button .fa,
	.topbar form button .fa:hover,
	.topbar a:hover,
	.navbar-default .navbar-nav>li>a:hover {
		color: #fff;
	}
	.topbar form .form-control::-webkit-input-placeholder,
	.topbar form .form-control::-moz-placeholder,
	.topbar form .form-control:-ms-input-placeholder,
	.topbar form .form-control:-moz-placeholder {
		color: #fff;
	}
	.topbar nav.nav-right a {
		padding: 0 6px;
	}
	.topbar nav a i.fa.fa-sign-out {
		font-size: 120%;
	}
	.topbar form input {
		background: none;
		border: 1px solid #fff;
		color: #fff;
	}
	.topbar form input:focus {
		background: #fff;
		border: 1px solid #fff;
		color: #34ace0;
	}
	.topbar a.navbar-brand {
		display: block;
        float: left;
        width: auto;
	}
	.topbar a.navbar-brand img {
		display: block;
		float: left;
		height: 20px;
		padding-right: 4px;
	}
	.navbar-account {
		color: #fff;
		display: block;
		float: left;
		font-size: 1.25rem;
		padding: 16px 0;
	}
	.navbar-account,
	.navbar-form {
		display: none;
	}
	.topbar .nav.nav-tabs {
		border: 0;
		display: block;
		float: right;
		margin: 4px 0 0 0;
		padding: 0;
	}
	.topbar .nav.nav-tabs .dropdown .dropdown-toggle:hover,
	.topbar .nav.nav-tabs .dropdown .dropdown-toggle:focus {
		color: #fff;
		text-decoration: none;
	}
	.topbar .nav.nav-tabs.nav-account .dropdown .dropdown-menu {
		background-color: var(--theme-topbar);
		border: 0;
		top: 150%;
		left: auto;
		right: 0;
	}
	.topbar .nav.nav-tabs.nav-account .dropdown .dropdown-menu li {
		padding: 3px 8px;
	}
	.topbar .nav.nav-tabs.nav-account .dropdown .dropdown-menu li.dropdown-divider {
		padding: 0;
	}
	.topbar .nav.nav-tabs.nav-account .dropdown .dropdown-menu li a {
		color: #fff;
		display: block;
		font-size: 1.25rem;
		line-height: 1.15;
		padding: 4px 8px;
		transition: all 0s;
		-moz-transition: all 0s;
		-webkit-transition: all 0s;
		-o-transition: all 0s;
	}
	.topbar .nav.nav-tabs.nav-account .dropdown .dropdown-menu li a:hover {
		color: #333;
		text-decoration: none;
	}
	.mobile-menu {
		color: #fff;
		display: block;
		float: right;
		margin: 2px 0 0 0;
		padding: 12px 16px;
		text-decoration: none;
		width: auto;
	}
	.mobile-menu .fa {
		color: #fff;
		font-size: 2rem;
		line-height: 2rem;
	}
	.tab-content .tab-pane {
		display: none;
	}
	.tab-content .tab-pane.active {
		display: block;
	}
	.tab-pane .row .col-12 .input-group:nth-child(1) {
		margin-top: 16px;
	}
	.tab-pane .panel {
		padding-bottom: 24px;
	}
	.tab-pane .panel .pan {
		padding-right: 20px;
	}
	/* hide the column label that shows incremental numbers in paginated lists */
	.tab-pane .workspace table tr.headings th .heading-increment {
		display: none;
	}
	/* control the width of the column showing the incremental number in paginated lists */
	.tab-pane .workspace table tr td.increment {
		width: 24px;
	}
	.codigo {
		color: #777;
		float: left;
		font-size: 0.89em;
		padding: 24px 12px;
	}
	p.bg {
		min-height: 24px;
		padding: 12px 16px;
	}
	p.bg a.btn {
		margin: 16px 0 0 0;
	}
	#codigo-controls p {
		display: block;
		float: left;
		padding: 8px 0;
		width: 100%;
	}
	#codigo-controls h4 {
		display: block;
		float: left;
		font-size: 1.75rem;
		line-height: 2.25rem;
		width: 100%;
	}
	#codigo-controls .btn {
		margin: 0 6px 6px 0;
	}
	#codigo-controls.pan {
		padding: 0 12px;
	}
	.tabui-list {
		float: left;
		margin-top: 12px;
		width: 100%;
	}
	.list-filters {
		float: left;
		padding: 4px 0 0 0;
		width: 100%;
	}
	.list-filters h6 {
		font-size: 1.2rem;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
	}
	.list-filters label {
		margin-right: 8px;
	}
	.list-filters.filters-navs label {
		display: block;
		float: left;
		width: 100%;
	}
	form.filters {
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		position: relative;
		width: 100%;
	}
	#filter {
		display: block;
		float: left;
		padding: 8px 12px;
		position: relative;
		width: 100%;
	}
	.btn-filter {
		display: none;
		padding: 9px 12px;
		position: absolute;
		right: 0;
		top: 0;
		width: 80px;
	}
	#codigo-filters {
		padding: 12px 0;
	}
	#codigo-content .nav-tabs li {
		border: 0;
	}
		#codigo-content .nav-tabs li a {
			color: #555;
			display: block;
			padding: 6px 12px;
			float: left;
		}
		#codigo-content .nav-tabs li a.active {
			background: #fff;
			border: 1px solid #ccc;
			border-bottom: 0;
			-webkit-border-top-left-radius: 8px;
			-webkit-border-top-right-radius: 8px;
			-moz-border-radius-topleft: 8px;
			-moz-border-radius-topright: 8px;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			color: #333;
			font-weight: 700;
		}
		#codigo-content .nav-tabs li a:hover {
			color: #333;
			text-decoration: none;
		}

	/* select2 */
	.js-select {
		border: 1px solid #ccc;
		float: left;
		font-size: 1em;
		height: 36px;
		width: 100%;
	}
	/*
	Causes selected item to bleed overtop of other ui elements
	.field-label .select2-container--default[style] {
		width: 100% !important;
	}
	*/
	/* override inline style="width: 100px;" */
	.select2-container--default .select2-selection--multiple,
	.select2-container--default .select2-selection--single {
		border: 0;
		height: 36px;
		padding: 4px 0;
	}
	/* allow the select2 box to expand when several tags are in use */
	.select2-container--default .select2-selection--multiple {
		height: auto;
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow b {
		left: 0;
		top: 60%;
	}
	.select2-container--default .select2-search--inline .select2-search__field,
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		font-size: 1.5rem;
		font-weight: 400;
	}
	body.body-item-view .select2-container--default .select2-search--inline .select2-search__field,
	body.body-item-view .select2-container--default .select2-selection--single .select2-selection__rendered,
	.select2-container--default,
	.select2-container--open {
		width: 100% !important;
	}
	.select2-container--default .select2-selection--multiple .select2-selection__choice {
		font-size: 1.5rem;
		font-weight: 400;
	}
	/* stop select2 field from going outside of label area */
	.select2-wrap .field-label {
		display: flex;
		flex-direction: row;
		max-width: 100%;
		width: 100%;
	}
		.select2-wrap .field-label .field-label-text {
			flex-grow: 0;
			flex-shrink: 0;
		}
		.select2-wrap .field-label .field-label-input {
			flex-grow: 1;
			flex-shrink: 1;
			width: calc(100% - 200px);
		}
	/* catch and control the options for select2 to fix the jumpy bug */
	/* stop select2 from shifting the screen out of view on first click (webkit issue) */
	/* custom element in Select-named classes */
	.select2-helper-results-container {
		position: relative;
		width: 100% !important;
	}
		.select2-helper-results-container .select2-container.select2-container--default.select2-container--open {
			width: 100% !important;
		}
	.modal .select2-dropdown.select2-dropdown--below {
		width: 100% !important;
	}
	
	/* Custom Styled Select */
	.styled-select-menu {
		width: 240px;
		height: 28px;
		overflow: hidden;
		background: #fff;
		border: 1px solid #ccc;
		font-size: 1em;
		padding-left: 8px;
		margin-left: 4px;
		float: left;
		position: relative;
	}
	.styled-select-menu select {
		background: transparent;
		width: 100%;
		padding: 0;
		line-height: 1;
		border: 0;
		border-radius: 0;
		height: 28px;
		-webkit-appearance: none;
		color: #333;
		position: absolute;
		top: 0;
		left: 8px;
		z-index: 2;
	}
	.styled-select-menu i {
		width: 16px;
		height: 16px;
		font-size: 16px;
		float: right;
		position: absolute;
		top: 4px;
		right: 4px;
		z-index: 1;
	}
	.styled-select svg.fa-caret-down {
		display: none;
	}
	/* ----- CONTENT AREA STYLES ------ */
	#ajax-messages {
		background-color: #2ed573;
		display: flex;
		flex-direction: column;
		overflow: visible;
		position: fixed;
			top: -1000px;
			right: 0;
		min-height: 24px;
		box-shadow: 2px 2px 4px #000;
		width: 100%;
		max-width: 280px;
		z-index: 9999;
	}
	#ajax-messages.active {
		top: 0;
	}
	.ajax-message {
		border: 1px solid #fff;
		color: #fff;
		margin: 0;
		padding: 12px 16px;
	}
		.ajax-message button {
			color: #fff;
			float: right;
			margin: 0 16px 0 4px;
			opacity: 0.5;
		}
		.ajax-message button:hover {
			color: #fff;
			opacity: 1.0;
		}
	/* upload drag-and-drop fields with large perimeter */
	.uploadZone {
		background: repeating-linear-gradient(
			45deg,
			#f8f6f4,
			#f8f6f4 10px,
			#fff 10px,
			#fff 20px
		);
		border: 2px dashed #f39c12;
		color: #999;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		float: left;
		justify-content: center;
		width: 100%;
	}
		.uploadZone-input {
			background: none;
			cursor: pointer;
			float: left;
			min-height: 24px;
			padding: 40px 16px;
			width: 100%;
		}
		.uploadZone-input:disabled {
			cursor: not-allowed;
			opacity: 0.5;
		}

	main ul.nav-tabs li a {
		font-size: 1.15em;
	}
	main ul.nav-tabs li.active a {
		font-weight: bold;
	}
	main form {
		width: 100%;
		float: left;
	}
	main form {
		width: 100%;
		float: left;
	}
	main ul.nav {
		margin: 0;
		padding-bottom: 0;
		width: 100%;
	}
	main form .tab-content {
		background-color: #fff;
		margin: 0;
		border: 1px solid #e0e0e0;
		border-top: 0;
		width: 100%;
		min-height: 200px;
		padding: 0 0 24px 0;
		float: left;
	}
	main form .tab-content .tab-pane {
		min-height: 200px;
		padding: 0 16px 0 16px;
	}
	main form select {
		padding: 4px 6px;
	}
	.custom-field.iframe {
		height: 197px;
		overflow: hidden;
		padding: 4px 0 0 8px;
		width: 290px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
	main form .form-control[readonly] {
		background: #fff;
	}
	.select-wrapper {
		background: #eee;
		display: block;
		float: left;
		min-height: 24px;
		height: 320px;
		padding: 12px 16px;
		position: relative;
		width: 100%;
		z-index: 1;
	}
	#form-builder .select-wrapper {
		border: 1px solid #ccc;
	}
	.select-controls {
		background: #eee;
		min-height: 24px;
		padding: 12px 16px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 3;
	}
	.select-controls .fuzzy-search {
		padding: 4px 8px;
		width: 100%;
	}
	.select-wrapper .list {
		display: block;
		float: left;
		list-style-type: none;
		margin: 0;
		max-height: 310px;
		overflow-x: auto;
		padding: 52px 16px 12px 16px;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.select-wrapper .list li {
		padding: 4px 0;
	}
	.select-wrapper .list li label:focus {
		background: #fff;
		border: 1px solid #ccc;
	}
	.select-wrapper .list li label input[type="radio"] {
		position: absolute;
		visibility: hidden;
	}
	.select-wrapper .list li label {
		display: inline-block;
		background: #eee;
		font-weight: 400;
		font-style: italic;
		padding: 6px 16px;
		cursor: pointer;
		width: 100%;
	}
	.select-wrapper .list li label input[type="radio"]:checked ~ *,
	.select-wrapper .list li label.active {
		color: #000;
		font-weight: 700;
	}
	.select-wrapper .list li label .name {
		font-style: normal;
	}
	.codigo-iframe {
		border: 0;
		display: block;
		float: left;
		height: 320px;
		overflow: hidden;
		width: 100%;
	}
	iframe.file_upload {
		height: 160px;
		width: 100%;
	}
	.file_upload_options a {
		position: relative;
	}
	.file_upload_options a img {
		position: absolute;
	}
	iframe.file_upload.photo {
		height: 280px;
	}
	iframe.file_upload.directory {
		height: 180px;
		margin: 0;
		width: 290px;
		border: 0;
	}
	iframe.file_upload.short {
		height: 120px;
	}
	/* for special use when extending admin UI with iframe */
	iframe.modal-iframe {
		border: 0;
		height: 80vh;
		margin: 0;
		padding: 0;
		width: 100%;
		max-width: 100%;
	}
	/* fixed user actions for iframed content */
	.userActions {
		background: #fff;
		padding: 8px 12px;
	}
	body.file_display {
		background: none;
		width: 320px;
	}
	body.file_display.photo {
		width: 100%;
	}
	body.file_display .container {
		margin: 0;
		padding: 0;
	}
	body.file_display .container .dir-block {
		position: relative;
		min-height: 150px;
		width: 320px;
	}
	body.file_display .dir-block img {
		position: absolute;
		top: 4px;
		left: 16px;
		width: 120px;
	}
	.file_upload_options {
		position: absolute;
		top: 4px;
		left: 4px;
	}
	.file_upload_options p a {
		word-wrap: break-word;
	}
	body.file_display.photo .file_upload_options {
		position: absolute;
		top: 240px;
		left: 16px;
	}
	body.file_display .dir-block .file_upload_options.directory {
		position: absolute;
		top: 100px;
		left: 148px;
		width: 120px;
	}
	iframe.gallery-cover {
		border: 1px solid #ccc;
		float: left;
		height: 57px;
		width: 240px;
	}
	.wg {
		float: left;
		margin: 0;
		padding: 6px 0;
		width: 100%;
	}
	.wg-group {
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		width: 100%;
	}
		.wg-heading {
			display: block;
			float: left;
			font-size: 1.5rem;
			font-weight: 700;
			width: 100%;
		}
		.wg .wg-input-text,
		.wg .wg-label,
		.wg .wg-textarea {
			font-size: 1.25rem;
			line-height: 1.2;
		}
		.wg-label {
			display: inline-block;
			font-weight: 400;
			padding: 2px 6px;
		}
		/* remove left padding from first label in wg-group */
		.wg-group .wg-label:first-child {
			padding-left: 0;
		}
		.wg-label-block {
			display: block;
			width: 100%;
		}
		.wg-label-select {
			padding: 0;
		}
			.wg-input-number {
				text-align: center;
				width: 60px;
			}
			.wg-input-checkbox,
			.wg-input-radio {
				height: 18px;
				margin-top: 5px;
				width: 18px;
			}
			.wg-input-checkbox,
			.wg-input-email,
			.wg-input-number,
			.wg-input-radio,
			.wg-input-text,
			.wg-label-text {
				display: block;
				float: left;
			}
			.wg-label-text {
				padding: 4px 0 0 4px;
				width: auto;
			}
		.wg-group-inner {
			float: left;
			margin: 0;
			padding: 0;
			width: 100%;
		}
		.wg-group.wg-group-currency .wg-radio-group {
			float: left;
			padding-right: 8px;
			width: auto;
		}
	/* inline records within a parent record */
	.jot {
		display: flex;
		flex-direction: row;
		float: left;
		padding: 2px 0;
		width: 100%;
	}
	.jot.deleted {
		border: 2px solid #ccc;
		opacity: 0.7;
		padding: 12px;
	}
		.jot-label-tick {
			display: flex;
			flex-direction: column;
			flex-grow: 0;
			flex-shrink: 0;
			justify-content: center;
			width: 24px;
		}
			.jot-tick {
				height: 20px;
				width: 20px;
			}
		.jot-label-input {
			padding-right: 8px;
		}
			.jot-input-text {
				padding: 4px 8px;
			}
		.jot .styled-select {
			line-height: 1.15;
		}
			
	body.messenger .wg-group {
		display: flex;
		flex-direction: column;
	}
	body.messenger .wg-group .wg-label:first-child {
		padding-left: 6px;
	}
	.file input[type=file] {
		float: left;
		margin: 6px 0 0 12px;
	}
	main form .tab-content .tab-pane textarea.css {
		background-color: #f3f3f3;
		border: 1px solid #ccc;
		font-size: 1.2em;
		font-family: sans-serif;
		line-height: 1.5em;
		min-height: 250px;
		padding: 16px;
		width: 100%;
	}
	main h1 {
		font-size: 2.8rem;
		margin: 0;
		padding: 0 0 12px;
	}
	main form .tab-content .tab-pane h2 {
		font-size: 1.6em;
		color: #333;
		font-weight: normal;
		padding: 0 0 16px 0;
	}
	main form .tab-content .tab-pane h3 {
		color: #333;
		font-size: 1.4em;
		float: left;
		line-height: 1em;
		padding: 16px 0 8px 0;
		width: 100%;
	}
	main form .tab-content .tab-pane a.backlink {
		padding: 0 0 24px 0;
		margin: -16px 0 0 0;
		font-size: 1em;
		text-decoration: none;
		width: 200px;
		display: none;
	}
	.capitalize {
		text-transform: capitalize;
	}
	main form .tab-content .tab-pane select {
		font-size: 1.2em;
		line-height: 1.5em;
		padding: 4px 0;
	}
	.styled-select {
		width: 100%;
		max-width: 600px;
		height: 36px;
		overflow: hidden;
		background: #fff;
		border: 1px solid #ccc;
		font-size: 1.25rem;
		padding-left: 8px;
		position: relative;
	}
	.styled-select select {
		background: transparent;
		width: 100%;
		padding: 5px;
		line-height: 1;
		border: 0;
		border-radius: 0;
		height: 34px;
		-webkit-appearance: none;
		color: #333;
		position: absolute;
		top: 0;
		left: 8px;
		z-index: 2;
	}
	.styled-select i {
		width: 16px;
		height: 16px;
		font-size: 16px;
		float: right;
		position: absolute;
		top: 8px;
		right: 4px;
		z-index: 1;
	}
	.control-label {
		font-size: 1.25rem;
		padding: 4px 0 0 0;
		text-align: center;
		min-width: 100px;
		max-width: 120px;
	}
	/* add new */
	input.addnew {
		display: block;
		float: left;
		margin: 2px 0;
		padding: 4px 8px;
		width: 100%;
	}
	/* input[file] styling - based on http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
	.file-wrapper {
		background: #34ace0;
		float: left;
		margin: 16px 16px 16px 0;
		min-height: 24px;
		padding: 24px 16px;
		text-align: center;
		width: 100%;
	}
	.no-js .inputfile + label {
		display: none;
	}
	.inputfile {
		width: 0.1px;
		height: 0.1px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;
	}
	.inputfile + label .fa {
		width: 1em;
		height: 1em;
		vertical-align: middle;
		fill: currentColor;
		margin-top: -0.25em;
		/* 4px */
		margin-right: 0.25em;
		/* 4px */
	}
	/* end of input[file] styling */

	.flex {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
	}
		.flex-item {
			align-self: auto;
			flex-grow: 1;
			margin: 0;
		}
	.payment header p {
		font-size: 1.5rem;
		line-height: 1.8rem;
		opacity: 0.7;
	}
	.invoice {
		background: #fff;
		border: 1px solid #ccc;
		margin: 8px 0;
		padding: 16px 24px;
		width: 100%;
	}
		.invoice-desc-heading {
			font-weight: 400;
			margin: 0;
			text-transform: normal;
		}
		.invoice-desc-text {
			display: block;
			float: left;
			font-size: 70%;
			padding: 8px 0;
			width: 100%;
		}
		.invoice-price {
			font-size: 2rem;
			text-align: right;
		}
		.invoice .badge.desc {
			display: block;
			float: left;
			text-align: left;
			width: 100%;
		}
	.payment-total {
		font-weight: 900;
	}
	.form-space {
		margin-bottom: 8px;
	}
	.spacer-block {
		float: left;
		margin: 8px 0;
		padding: 8px 0;
		width: 100%;
	}
	/* admin filters */
	.adminFilters.months .months-inner {
		/*display: flex; flex-direction: row; flex-wrap: wrap;*/
		columns: 4;
	}
		.adminFilters.months .months-inner label {
			width: 100%;
		}
	/* modals */
	.modal-trigger {
		display: block;
		float: left;
		width: auto;
	}
	
	.modal-xl {
		max-width: 100%;
	}
		.modal-xl .modal-dialog {
			margin: 0 3%;
			max-width: 94%;
			position: relative;
		}
			.tab-pane .modal-xl .panel .pan {
				margin: 0;
				padding: 0;
			}
				.modal-xl .pan img {
					padding: 8px;
				}
	main form {
		padding-right: 16px;
	}
	main form .checkbox-radio-group,
	main form .custom-field {
		width: 100%;
		min-height: 14px;
		margin: 0 0 3px 0;
		float: left;
	}
	main form .custom-field {
		border: 1px solid #ccc;
		margin-bottom: 8px;
	}
	main form .checkbox-radio-group label {
		width: 100%;
		min-height: 36px;
		float: left;
		display: block;
		border: 1px solid #ccc;
	}
	main form .checkbox-radio-group label .checkbox-radio-input-container,
	main form .custom-field label {
		background-color: #eee;
		display: block;
		float: left;
		font-size: 0.89em;
		margin: 0;
		height: 36px;
		padding: 12px 8px 9px 8px;
		width: 125px;
	}
	main form .checkbox-radio-group label .checkbox-radio-input-container {
		width: 32px;
	}
	main form .custom-field label {
		border-right: 1px solid #ccc;
		text-align: center;
		padding: 6px 8px;
	}
	main form .custom-field label.right {
		background: none;
		border: 0;
		width: 80px;
		height: 20px;
		float: left;
		padding: 0;
	}
	main form .custom-field label.right .input-wrapper {
		display: block;
		width: 16px;
		height: 16px;
		margin-left: 12px;
		position: relative;
		float: left;
	}
	main form .custom-field label.right .input-wrapper input {
		position: aboslute;
		top: 0;
		left: 0;
	}
	.slug-field {
		border-color: #eee;
		display: none;
	}
	.slug-field .input-group-addon {
		border-color: #eee;
		margin: 0;
		padding: 0;
		min-width: 120px;
		max-width: 120px;
	}
	.slug-field .input-group-addon .control-label.col-lg-1 {
		font-size: 1.25rem;
		height: auto;
		padding: 10px 0;
		width: 100%;
	}
	.slug-field .slug {
		background: #fff;
		border: 1px solid #eee;
		color: #777;
		display: block;
		float: left;
		height: 36px;
		padding: 6px 8px 0 8px;
		width: 100%;
	}
	.checkbox-radio-group label {
		border: 1px solid #ccc;
		display: block;
		float: left;
		margin: -2px 0 10px 0;
		min-height: 36px;
		position: relative;
		width: 100%;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		overflow: hidden;
	}
	.checkbox-radio-group label .checkbox-radio-input-container {
		background: #eee;
		padding: 10px 16px;
		width: 36px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.checkbox-radio-group label .checkbox-radio-input-container input {
		display: block;
		float: left;
		margin: 0 0 0 -4px;
		height: 16px;
		width: 16px;
	}
	.checkbox-radio-group label .checkbox-radio-text {
		display: block;
		position: absolute;
		top: 0;
		left: 36px;
		padding: 6px 0 6px 8px;
		font-size: 1.1em;
		font-weight: normal;
		border-left: 1px solid #ccc;
		width: auto;
	}
	main form .custom-field.tel .tel-wrapper {
		border: 1px solid blue;
		float: right;
	}
	main form .custom-field.tel table tbody tr td input[type=tel].form-control {
		text-align: center;
		width: 33%;
	}
	input[type="checkbox"].form-control {
		width: 24px;
	}
	tbody.totals td {
		font-weight: 900;
		padding: 12px 8px;
	}
	.list-controls {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		float: left;
		width: 100%;
	}
		.list-controls-item-actions {
			flex-grow: 0;
			flex-shrink: 0;
			width: 180px;
		}
		.list-controls-item-other {
			flex-grow: 1;
			flex-shrink: 1;
			width: 300px;
		}
		.list-controls-item-submit {
			flex-grow: 0;
			flex-shrink: 0;
			max-width: none;
			width: 100%;
		}
		.list-controls label {
			display: block;
			float: left;
			margin-right: 12px;
			padding: 0;
		}
		.list-controls label.label-checkbox {
			padding-top: 6px;
		}
	main .workspace,
	main .no-tabs {
		background: #fff;
		border-left: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		width: 100%;
		min-height: 600px;
		padding: 0;
		margin: 0;
		float: left;
	}
	main .no-tabs h2 {
		margin-bottom: 16px;
		width: 100%;
		float: left;
		line-height: 1.5em;
	}
	main .no-tabs {
		border: 1px solid #ddd;
	}
	main .no-tabs.no-bg {
		background: none;
		border: 0;
		padding: 0;
	}
	main .no-tabs.no-bg .bg-info {
		background: #fff;
		border: 1px solid #ccc;
		color: #333;
	}
	.control-group {
		float: left;
		padding: 12px 0;
		width: 100%;
	}
	main .workspace .control-group a.btn {
		margin-top: 8px;
	}
	/* entry fields */
	.f-list {
		background: #eee;
		display: flex;
		float: left;
		flex-direction: column;
		padding: 16px 24px;
		width: 100%;
	}
		.f-list .f {
			background: #fff;
			border: 1px solid #ccc;
			margin: 8px 0;
			padding: 16px 20px;
		}
		.f-list .f details .details-content {
			padding: 12px 20px;
		}
		
	/* messenger page fields */
	.messengerpagefield {
		background: #eee;
		border: 1px solid #ccc;
		margin: 3px 0;
		padding: 12px 16px;
		position: relative;
		z-index: 1;
	}
		.messengerpagefield .close {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 2;
		}
		.messengerpagefield input,
		.messengerpagefield select,
		.messengerpagefield textarea {
			background: #fff;
			border: 1px solid #999;
			padding: 3px 6px;
			width: 100%;
		}
		.messengerpagefield input[type="checkbox"] {
			height: 16px;
			width: 16px;
		}
	
	/* variables for messenger and other apps */
	table.variables td {
		position: relative;
	}
	table.variables td .alert {
		display: block;
		position: absolute;
			top: 0;
			right: 0;
		font-size: 1.15rem;
		width: 100%;
		z-index: 9999;
	}
	/* payment */
	.cart-list {
		background: #fff;
		border: 1px solid #ccc;
		display: flex;
		flex-direction: column;
		float: left;
		margin: 0 0 12px 0;
		padding: 8px;
		width: 100%;
	}	
		.cart-item {
			display: flex;
			flex-direction: row;
			padding: 12px;
		}
		.cart-item:nth-child(even) {
			background: #f9f9f9;
		}
		.cart-item-details,
		.cart-item-price {
			background: none;
			flex-grow: 0;
			flex-shrink: 0;
		}
		.cart-item-details {
			font-size: 1.75rem;
			width: 70%;
		}
		.cart-item-price {
			font-size: 2rem;
			text-align: right;
			width: 30%;
		}
		.cart-item.cart-total {
			background: #d0d7db;
			color: #000;
			font-size: 2.4rem;
			font-weight: 900;
			padding: 12px 16px;
			text-align: right;
			width: 100%;
		}
		.cart-item-details .btn {
			background: #eee;
			border-color: #ccc;
			font-size: 1rem;
			color: #555;
		}
		.cart-btn {
			margin: 0 8px 8px 0;
		}
	/* ui message colors */
	.green {
		color: #27ae60;
	}
	.red,
	.red a,
	.red td,
	.red td a,
	.red td.title,
	.red td.title a {
		color: #e74c3c;
	}
	.deleted,
	.deleted a,
	.deleted td,
	.deleted td a,
	.deleted td.title,
	.deleted td.title a {
		color: #999;
	}	
	/* why did I add so much margin?
	main .workspace a.btn {
		margin: 24px 0 0 0;
	}
	*/

	#fields,
	#prices {
		display: flex;
		float: left;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100% !important;
	}
		#fields .pan {
			padding: 4px 8px;
		}
		#prices .pan {
			padding: 4px 0;
		}

	/* Uploadifive */
	main .workspace .btn.ui-btn-uploadifive {
		float: right;
		margin: 0 0 0 8px;
	}
	.input-group-uploadifive {
		border: 1px solid #ccc;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
		.input-group-uploadifive .input-group-addon {
			border: none;
			border-right: 1px solid #ccc;
		}
	.uploadifive-button {
		float: left;
		font-size: 1.5rem;
	}
	.uploadifive-button:hover {
		background: #34495e;
		color: #fff;
	}
	.uploadifive-button input[multiple="multiple"] {
		cursor: pointer;
	}
	.uploadifive-queue-item {
		background-color: #F5F5F5;
		border-bottom: 1px dotted #D5D5D5;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		font: 12px Arial, Helvetica, Sans-serif;
		margin-top: 3px;
		padding: 15px;
	}
	.uploadifive-queue-item .close {
		background: url('https://api.flockspot.io/codigo/v1/core/uploadifive/uploadifive-cancel.png') 0 0 no-repeat;
		display: block;
		float: right;
		height: 16px;
		text-indent: -9999px;
		width: 16px;
	}
	.uploadifive-queue-item .progress {
		border: 1px solid #D0D0D0;
		height: 3px;
		margin-top: 5px;
		width: 100%;
	}
	.uploadifive-queue-item .progress-bar {
		background-color: #0072BC;
		height: 3px;
		width: 0;
	}
	main .home h1 {
		font-size: 2.5em;
		font-weight: 900;
		letter-spacing: -1px;
	}
	main .home p {
		font-size: 1.25em;
		line-height: 1.6em;
		padding: 6px 0;
	}
	main .workspace table {
		width: 100%;
		margin: 16px 0 0 -8px;
	}
	main .workspace table tbody tr:nth-child(odd) {
		background-color: #f3f3f3;
	}
	main .workspace table tbody tr:nth-child(even) {
		background-color: #fff;
	}
	main .workspace table thead tr th,
	main .workspace table tbody tr td {
		padding: 8px 16px;
	}
	main .workspace table tbody tr td a.btn {
		margin: 0 0 4px 0;
	}
	main .workspace table thead tr th {
		background-color: #fff;
		border-bottom: 1px solid #ccc;
		color: #555;
	}
	main .workspace table tbody tr:hover > td {
		background-color: #e0e0e0;
	}
	main .workspace table tbody tr.selected:hover > td,
	main .workspace table tbody tr.selected {
		background-color: #3498db;
	}
		main .workspace table tbody tr.selected td,
		main .workspace table tbody tr.selected td a {
			color: #fff;
		}
	main .workspace table tbody tr td .block.variants {
		margin-top: 8px;
		opacity: 0.8;
	}
	main .workspace table tbody tr td .block.variants .variant {
		margin-right: 4px;
	}
	main .workspace table tbody tr td .block.variants .variant.deleted {
		color: #999;
		text-decoration: line-through;
	}
	main .workspace table tbody tr td:first-child a {
		font-size: 1.15em;
	}
	main .workspace table tbody tr td .edit-option {
		background: none;
		border: none;
		color: #2980b9;
		display: inline-block;
		/*float: left;*/
	}
	main .workspace table tbody tr td .edit-option:hover {
		cursor: pointer;
		text-decoration: none;
	}
	main .workspace table tbody tr.red td .edit-option {
		color: #e74c3c;
	}
	main .workspace table tbody tr.deleted td .edit-option {
		color: #999;
	}
	main .workspace table tbody tr td .edit-option .fa {
		text-align: center;
		width: 24px;
		font-size: 24px;
		display: block;
		margin-right: 16px;
		float: left;
	}
	main .workspace table tbody tr td .index-title,
	main .workspace table tbody tr td .index-text {
		color: #222;
		display: block;
		float: left;
		font-size: 1.5rem;
		font-weight: 400;
		line-height: 1.75rem;
		text-align: left;
		width: 100%;
	}
	main .workspace table tbody tr td .index-text {
		border: 1px solid #ccc;
		min-height: 48px;
		padding: 8px 12px;
	}

	/* content tables within records */
	table.content-table tr:nth-child(odd) {
		background: #fff;
	}
	table.content-table tbody tr th {
		background: #d0d7db;
		color: #333;
		font-size: 1.25rem;
		padding: 4px 8px;
		text-transform: uppercase;
	}
	table.content-table tbody tr td {
		font-size: 1.25rem;
		padding: 4px 8px;
	}
	main .workspace table tbody tr.saved:hover,
	main .workspace table tbody tr.saved td {
		background: var(--saved);
	}

	/* table inside <details> */
	main .workspace details table {
		display: block;
		float: left;
		table-layout: fixed;
		width: 100%;
		max-width: 100%;
	}
		main .workspace details table th,
		main .workspace details table td {
			width: auto;
			
		}
			main .workspace details table td .accio,
			main .workspace details table td input,
			main .workspace details table td textarea,
			main .workspace details table td select {
				width: 100%;
			}
			main .workspace details table td.action {
				width: 24px;
			}
	
	/* form flex layout */
	form.summary {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		float: left;
		width: 100%;
	}
		form.summary .summary-item {
			padding-right: 16px;
		}
	
	/* form builder */
	#questions {
		float: left;
		padding: 0;
		width: 100%;
	}
	.q {
		background: #eee;
		border: 1px solid #ccc;
		display: block;
		float: left;
		margin: 6px 0;
		padding: 8px 12px;
		width: 100%;
	}
	.q:hover {
		background: #ddd;
		box-shadow: 0px 0px 12px #000;
		color: #000;
	}
	h4.q-heading {
		background: #333;
		color: #fff;
		display: block;
		float: left;
		font-size: 1.75rem;
		line-height: 1;
		padding: 8px 0;
		text-align: center;
		width: 100%;
	}
	.q-wrap {
		float: left;
		padding-bottom: 8px;
		width: 100%;
	}
	.tab-pane .q .panel {
		padding-bottom: 0;
	}
	.q-label {
		float: left;
		font-weight: 400;
		padding-bottom: 4px;
		text-align: left;
		width: 100%;
	}
	.q-wrap-half {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
		.q-wrap-half .q-label {
			flex-grow: 0;
			flex-shrink: 0;
			width: 50%;
		}
		.q-wrap-half .q-label:first-child {
			padding-right: 8px;
		}
		.q-wrap-half .bg {
			flex-grow: 0;
			flex-shrink: 0;
			width: 100%;
		}
	.q-label-radio {
		padding-right: 16px;
		width: auto;
	}
	.q-text,
	.q-textarea {
		border: 1px solid #ccc;
		display: block;
		float: left;
		line-height: normal;
		padding: 4px 8px;
		width: 100%;
	}
	.q-textarea {
		height: 80px;
	}
	.q-label .q-checkbox {
		float: left;
		margin-right: 4px;
	}
	.q-label .bg-info {
		background: #fff;
		border: 2px solid #34ace0;
		color: #333;
		margin-top: 4px;
	}
	.q-label-text {
		display: block;
		float: left;
	}
	label.q-radio {
		display: block;
		float: left;
		font-weight: 400;
		margin-left: 8px;
	}
	.q .close {
		color: #333;
		display: block;
		float: right;
		font-size: 1.5rem;
		font-weight: 400;
		opacity: 0.75;
		padding: 8px 0;
		position: relative;
	}
	/* generated form questions */
	#form-builder {
		display: block;
		float: left;
		min-height: 24px;
		width: 100%;
	}
	main form#form-builder input {
		min-width: auto;
	}
	/* reset */
	.form-q {
		background: #fff;
		border: 1px solid #ccc;
		float: left;
		margin: 12px 0;
		padding: 0;
		width: 100%;
	}
	.form-q input,
	.form-q textarea,
	.form-q label {
		font-weight: 400;
	}
	.form-q-header {
		background: #ecf0f1;
		border-bottom: 1px solid #ccc;
		display: block;
		float: left;
		padding: 0;
		width: 100%;
	}
	.form-q-number {
		background: #7f8c8d;
		color: #fff;
		display: block;
		float: left;
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 1.75rem;
		min-height: 12px;
		padding: 12px 16px;
		width: 100%;
	}
	.form-q-header h4 {
		float: left;
		line-height: 2.4rem;
		padding: 12px 16px;
		width: 100%;
	}
	.form-q-content {
		display: block;
		float: left;
		font-size: 1.75rem;
		line-height: 2.2rem;
		padding: 12px 16px;
		width: 100%;
	}
	.form-q label {
		display: block;
		float: left;
		width: 100%;
	}
	.form-q-input,
	.form-q-textarea {
		border: 1px solid #ccc;
		display: block;
		float: left;
		padding: 4px 8px;
		width: 100%;
	}
	.form-q-textarea {
		min-height: 180px;
	}
	.form-q-radio {
		display: block;
		float: left;
		padding: 8px 12px;
		width: 100%;
	}
	.form-q-radio input {
		margin: 0 4px 0 0;
	}

	/* definitions table for dynamic variables */
	table.definitions {
		float: left;
		margin: 16px 0;
		width: 100%;
	}
	table.definitions td.def-var {
		color: #34495e;
		font-family: monospace;
		font-size: 1.5rem;
		font-weight: 700;
		width: 240px;
	}
	table.definitions td.def-desc {
		font-size: 1.4rem;
	}
	textarea.messenger-template-message {
		border: 1px solid #ccc;
		border-radius: 8px;
		color: #333;
		display: block;
		float: left;
		font-family: monospace;
		font-size: 2rem;
		line-height: 1.4;
		min-height: 300px;
		padding: 12px 20px;
		width: 100%;
	}

	/* edit-options for special ul.list-group controls within action pages */
	.list-group .list-group-item.deleted {
		background: #eee;
	}
	.list-group .list-group-item.deleted a {
		color: #999;
	}
	.list-group .list-group-item .edit-options {
		float: right;
	}
	.list-group .list-group-item .edit-options .edit-option {
		padding: 0 4px;
	}
	.list-group .list-group-item span.log-date {
		text-decoration-style: dotted;
	}
	.list-group-item.order-line {
		padding: 8px 16px;
	}
	.list-group-item.sortable-item {
		background: #fff;
		border: 1px solid #ccc;
		color: #333;
		margin: 4px 0;
		padding: 12px 20px;
	}
		.list-group-item.sortable-item .btn {
			color: #333;
		}
		
	.list-group-item.video-item {
		border: 1px solid #ccc;
		margin: 4px 0;
		padding: 16px 12px;
	}
	.list-group-item.video-item:hover {
		box-shadow: 2px 2px 4px #555;
	}
	.list-group-item.video-item .field {
		float: left;
		
	}

	/* photos app */
	.list-group.photos {
		display: flex;
		flex-direction: column;
	}
		.list-group.photos .list-group-item {
			border: none;
		}
		.list-group.photos .list-group-item:hover {
			background-color: #f5f5f5;
		}
		.list-group.photos .list-group-item figure {
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			height: 180px;
		}
		.list-group.photos .list-group-item .ctrl-img-action {
			display: block;
			float: left;
			padding: 4px 0;
			width: 100%;
		}
			.list-group.photos .list-group-item .ctrl-img-action label {
				margin-right: 8px;
			}
	.panel.ctrl {
		position: relative;
	}
		.panel.ctrl .ctrl-img-wrap {
			z-index: 1;
		}
		.panel.ctrl .ctrl-controls {
			background: #fff;
			z-index: 2;
		}
	.flex-row {
		display: flex;
		flex-direction: row;
		float: left;
		justify-content: flex-start;
		width: 100%;
	}
	.flex-row-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		float: left;
		list-style-type: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}
		.flex-row-list-item {
			border: 1px solid #ccc;
			margin: 4px;
			padding: 4px 8px;
		}
	/* end of photos app*/

	main .workspace table thead tr th.control-width {
		width: 480px;
	}
	
	/* standard submit button on main forms */
	.submit-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		position: fixed;
			bottom: 8px;
			right: 8px;
		width: 100%;
		max-width: 180px;
	}
	.submit-wrapper .form-submit {
		font-size: 2rem;
		padding: 12px 32px;
	}
	#form {
		position: relative;
	}
	.form-button {
		/*	float: right; */
		padding: 6px 24px;
		float: left;
		font-size: 1.25em;
		text-align: center;
		min-width: 100px;
		margin: 16px 0 0 16px;
	}
	.button-form-submission-wrapper {
		background: #fff;
		border-top: 1px solid #ccc;
		margin: 0;
		min-height: 32px;
		padding: 0;
		position: fixed;
			bottom: 0;
			left: 0;
		z-index: 999;
	}
	.button-form-submission {
		border: 0;
		border-radius: 0;
		float: left;
		font-size: 1.75rem;
		letter-spacing: 0px;
		line-height: 1;
		min-height: 44px;
		margin: 0;
		padding: 8px 40px;
		text-align: center;
		text-transform: uppercase;
		width: 100%;
	}
	.button-form-submission:active,
	.button-form-submission:hover,
	.button-form-submission:focus {
		letter-spacing: 6px;
		transition: all 0.5s;
		-moz-transition: all 0.5s; /* Firefox 4 */
		-webkit-transition: all 0.5s; /* Safari and Chrome */
		-o-transition: all 0.5s; /* Opera */
	}
	.button-form-submission .fa {
		display: none;
	}
	button.form-submit .submit-working {
		display: none;
	}
	#sidebar h2 {
		font-size: 1.3em;
		color: #333;
		font-weight: normal;
	}
	#submit-message {
		width: auto;
		min-height: 16px;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		z-index: 9999;
		box-shadow: 3px 3px 8px #777;
	}
	/* status badges */
	.badge.available {
		background: #2ecc71;
		color: #fff;
	}
	.badge.expired {
		background: #34ace0;
		color: #fff;
	}
	form.inline-form {
		display: inline-block;
		margin: 0;
		padding: 0;
		width: auto;
	}

	/* print page styles */
	.body-print {
		background: #fff;
	}
	.body-print .print-page {
		min-height: 7.8025in;
		page-break-after: always;
		page-break-before: always;
		break-after: always;
		break-before: always;
	}
	.body-print .print-header {
		display: flex;
		flex-direction: column;
	}
		.body-print .print-header-logo {
			display: flex;
			flex-direction: row;
			flex-grow: 0;
			flex-shrink: 0;
			justify-content: center;
			margin: 0 0 12px 0;
			padding: 0;
			width: 28%;
		}
			.body-print .print-header-logo img {
				max-width: 140px;
			}
		.body-print .print-header-content {
			flex-grow: 1;
			flex-shrink: 1;
		}
			.body-print .print-header-content .print-header-heading {
				font-size: 3rem;
			}
	.body-print .print-main {
		display: flex;
		flex-direction: column;
		float: left;
		width: 100%;
	}
		.body-print .print-tables {
			display: flex;
			flex-direction: row;
		}
			.body-print .print-main .print-table {
				flex-grow: 0;
				flex-shrink: 0;
				padding-right: 32px;
				width: 28%;
			}
			.body-print .print-main .print-tables.order-lg .print-table:nth-child(2) {
				flex-grow: 0;
				flex-shrink: 0;
				margin-left: 40px;
				width: 50%;
			}
				.body-print .print-main .print-table-heading {
					font-size: 1.5rem;
					margin-top: 12px;
				}
				.body-print .print-main .print-table table tr.print-table-row {
					border-top: 2px solid #ccc;
				}
					.body-print .print-main .print-table table tr th {
						font-size: 1rem;
						text-transform: uppercase;
					}
					.body-print .print-main .print-table table tr td {
						font-size: 1.2rem;
						padding: 0 4px;
					}
					.body-print .print-main .print-table table tr .quantity {
						text-align: right;
						padding-right: 6px;
						width: 60px;
					}
		.body-print .print-footer .print-footer-heading {
			font-size: 3rem;
			font-weight: 700;
		}
		/* ajax lookup "accio" widget */
		.accio {
			display: flex;
			flex-direction: column;
			float: left;
			position: relative;
			width: 100%;
		}
			/* reset .alert */
			.accio-results {
				border: 0;
				height: 0;
				margin: 0;
				padding: 0;
				position: relative;
				z-index: 999;
			}
				.accio-results-inner {
					background: #eee;
					border: 1px solid #ccc;
					box-shadow: 2px 2px 4px #000;
					display: flex;
					flex-direction: column-reverse;
					min-height: 24px;
					max-height: 220px;
					width: 100%;
					position: absolute;
						top: 0;
						left: 0;
				}
					/* generated list of results */
					.accio-results-header {
						background: #fff;
						border: 1px dashed #ccc;
						display: flex;
						flex-direction: row;
						padding: 4px 4px 2px 12px;
					}
						.accio-results-header h4 {
							flex-grow: 1;
							flex-shrink: 1;
							font-size: 1.25rem;
							margin: 0;
							padding: 8px 0;
							text-transform: uppercase;
						}
						.accio-results-header button {
							background: none;
							border: 0;
							flex-grow: 0;
							flex-shrink: 0;
							font-size: 15px;
							margin: 0;
							padding: 4px 6px;
							width: 32px;
						}
					.accio-results-list {
						list-style-type: none;
						margin: 0;
						max-height: 200px;
						overflow: auto;
						padding: 0;
					}
						.accio-results-list li {
							background: #ecf0f1;
							border-bottom: 1px solid #ecf0f1;
							border-top: 1px solid #ecf0f1;
							color: #222;
							display: flex;
							flex-direction: row;
							margin: 0;
							padding: 0;
							transition: none;
							-moz-transition: none;
							-webkit-transition: none;
							-o-transition: none;
						}
						.accio-results-list li:hover {
							background: #3498db;
							border-color: #2980b9;
							color: #fff;
							transition: none;
							-moz-transition: none;
							-webkit-transition: none;
							-o-transition: none;
						}
							.accio-results-list li .accio-result-btn {
								background: none;
								border: none;
								color: inherit;
								padding: 2px 12px;
								text-align: left;
								width: 100%;
								transition: none;
								-moz-transition: none;
								-webkit-transition: none;
								-o-transition: none;
							}
		/* user comments */
		.pan-comment .btn {
			margin-top: 8px;
		}
		.comments-list {
			border: 1px solid #ccc;
			margin-top: 12px;
			max-height: 320px;
			overflow: auto;
		}
		.comments-list.empty {
			border: 0;
		}
			.comments-list .comment .btn-comment-delete {
				float: right;
			}
		.comment-editor {
			font-size: 1.25rem;
			line-height: 1.2;
		}
		/* sortable */
		.sortable-chosen {
			background: #fff;
			box-shadow: 2px 2px 4px #777;
		}
	}
	/* Extra small devices (phones, 767px and less) */
	@media (max-width: 320px) {
		.filter-control {
			display: block;
			float: left;
			width: 100%;
		}
		main .workspace table thead tr th {
			display: none;
		}
		main .workspace table tbody tr td {
			width: 300px;
			float: left;
		}
		main .workspace table tbody tr td {
			display: none;
		}
		main .workspace table tbody tr td:first-child,
		main .workspace table tbody tr td:last-child {
			display: block;
		}
		.input-group {
			margin-bottom: 16px;
			float: left;
		}
		#submit-message {
			width: auto;
			margin: 0 auto;
		}
		#login {
			width: 100%;
			margin: 0 auto;
		}
		#nav-select {
			position: absolute;
			top: -48px;
		}
		main form .tab-content .tab-pane a.backlink {
			display: block;
		}
		.button-form-submission,
		#button-delete,
		#button-restore {
			width: 100%;
			margin: 4px 0;
			padding: 25px;
		}
	}
	@media (max-width: 440px) {
		#identity a .name {
			display: none;
		}
		#nav-select {
			position: absolute;
			top: -48px;
		}
		main form .tab-content .tab-pane a.backlink {
			display: block;
		}
		.button-form-submission-wrapper {
			padding: 0;
		}
		.button-form-submission,
		#button-delete,
		#button-restore {
			border-radius: 0;
			margin: 0;
			padding: 8px 16px;
			width: 100%;
		}
	}
	@media (max-width: 767px) {
		.container-fluid {
			margin: 0;
			padding: 0;
		}
		#all {
			padding: 0;
			margin: 0;
			overflow: none;
		}
		.topbar {
			font-size: 100%;
		}
		main ul.nav-tabs li a {
			font-size: 1.75rem;
		}
		.nav-screens-lg,
		.nav-screens-lg {
			display: none;
		}
		.nav-screens-xs {
			width: 100%;
		}
		.nav-screens-xs .menu-trigger {
			display: none;
		}
		#login button:hover,
		#login button:focus {
			background: #fff;
			color: #34ace0;
		}
		
		/* label over top inputs for smallest screens */
		.input-group-addon,
		.slug-field .input-group-addon {
			display: block;
			float: left;
			min-width: 100%;
			max-width: 100%;
			width: 100%;
		}
		.slug-field .input-group-addon {
			border-bottom: 1px solid #ccc;
			padding-left: 8px;
		}
		.control-label,
		.control-label.col-lg-1 {
			min-width: 100%;
			max-width: 100%;
			text-align: left;
			width: 100%;
		}
	}
	@media (min-width: 768px) {
		#submit-message {
			width: auto;
			margin: 0 auto;
		}
		#login {
			width: 80%;
			margin: 0 auto;
		}
		.accounts .list-group-item.account {
			width: 32%;
		}
		.pagination {
			flex-wrap: nowrap;
		}
	.body-item-view .panel .pan {
		padding-right: 16px;
	}
	.body-item-view .panel .pan:last-child {
		padding-right: 0;
	}
	.wg-group-inner {
		width: 50%;
	}
	/* put wg radio groups in a row instead of stacked in a column
	.q-wrap .wg-group-radios {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
	}
		.q-wrap .wg-group-radios .wg-radio-group {
			flex-grow: 1;
			flex-shrink: 1;
			width: 180px;
		}
		.q-wrap .wg-group-radios .wg-radio-group .wg-label {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			line-height: 1.2;
		}
			.q-wrap .wg-group-radios .wg-radio-group .wg-label small {
				color: #555;
				margin-top: 6px;
			}
			.q-wrap .wg-group-radios .wg-radio-group .wg-label .wg-input-radio,
			.q-wrap .wg-group-radios .wg-radio-group .wg-label .wg-input-checkbox {
				flex-grow: 0;
				flex-shrink: 0;
				width: 20px;
			}
	*/
	.codigo-iframe {
		height: 600px;
		width: 480px;
	}
	#login {
		width: 480px;
	}
}
@media (max-width: 991px) {
	/* OFF-CANVAS NAV */
	.row-offcanvas {
		position: relative;
		-webkit-transition: all 0.25s ease-out;
		-moz-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}
	.row-offcanvas-right .sidebar-offcanvas {
		right: -100%;
		/* 12 columns */
		background: #ecf0f1;
		box-shadow: none; /*3px 3px 8px #34ace0;*/
		color: #fff;
		font-size: 1.1em;
	}
	.row-offcanvas-right.active {
		display: block;
		right: 100%;
		/* 12 columns */
	}
	.sidebar-offcanvas {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		width: 100%;
		/* 12 columns */
	}
	.offcanvas-header {
		background: var(--theme-topbar);
		float: left;
		min-height: 36px;
		padding: 0;
		width: 100%;
	}
	.offcanvas-header .navbar-form.navbar-right {
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		position: relative;
		width: 240px;
	}
	.offcanvas-header .navbar-form.navbar-right .form-group {
		margin: 0;
		padding: 8px 0 0 8px;
	}
	.offcanvas-header .navbar-form.navbar-right .form-group,
	.offcanvas-header .navbar-form.navbar-right .form-group .form-control {
		float: left;
		width: 160px;
	}
	.offcanvas-header .navbar-form.navbar-right .form-group .form-control {
		background: none;
		border: 1px solid #fff;
		color: #fff;
	}
	.offcanvas-header .navbar-form.navbar-right .form-group .form-control:focus {
		background: #fff;
		border: 1px solid #fff;
		color: #333;
	}
	.offcanvas-header .navbar-form.navbar-right .btn {
		display: block;
		float: left;
		width: auto;
	}
	.offcanvas-header .navbar-form.navbar-right .btn .fa {
		color: #fff;
		font-size: 1.75rem;
		line-height: 1.75rem;
		padding: 10px;
	}
	.offcanvas-close {
		background: none;
		border: 0;
		color: #fff;
		float: right;
		font-size: 3rem;
		min-height: 32px;
		line-height: 3rem;
		margin: 0 12px 0 0;
		padding: 8px;
		position: relative;
	}
	.offcanvas-close i.fa-times {
		float: left;
		margin: 0;
	}
	.nav-mobile {
		display: block;
		float: left;
		min-height: 100vh;
		overflow: scroll;
		padding: 12px 0;
		width: 100%;
	}
	.nav-mobile-item {
		color: #333;
		display: block;
		float: left;
		font-size: 1.75rem;
		line-height: 1.0;
		padding: 12px 20px;
		width: 100%;
	}
	.nav-mobile-item:hover,
	.nav-mobile-item:focus,
	.nav-mobile-item.active {
		background: none;
		color: #34ace0;
		text-decoration: none;
	}
	/* End of offcanvas nav */
}
@media (min-width: 480px) AND (max-width: 991px) {
	.nav-mobile-item:hover {
		background: none;
		color: #34ace0;
	}
}
@media (min-width: 480px) AND (max-width: 767px) {
	.nav-mobile-item {
		width: 50%;
		padding-left: 28px;
	}
}
@media (min-width: 768px) AND (max-width: 991px) {
	.row-offcanvas-right.active {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 9999;
	}
	.offcanvas-header {
		width: 95%;
	}
	.nav-mobile {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		min-height: auto;
	}
	.nav-mobile-item {
		padding: 18px 20px;
		width: auto;
	}
	.nav-mobile-item:hover,
	.nav-mobile-item:focus,
	.nav-mobile-item.active {
		background: none;
		color: #34ace0;
		text-decoration: none;
	}
	.nav-mobile-item-icon {
		display: block;
		float: left;
		font-size: 3rem;
		line-height: 1.0;
		padding: 0 0 8px 0;
		width: 100%;
		text-align: center;
	}
	.nav-mobile-item-title {
		display: block;
		float: left;
		font-size: 1.5rem;
		padding: 0;
		width: 100%;
		text-align: center;
	}
}
@media (min-width: 992px) {
	.accounts .list-group-item.account {
		width: 24.5%;
	}
	.bg-alone {
		margin-right: 30%;
		max-width: 70%;
	}
	.sidebar-offcanvas,
	.mobile-menu {
		display: none;
	}
	.topbar-item-nav {
		display: none;
	}
	.topbar-region-right .topbar-item-theme,
	.topbar-region-right .topbar-item-user {
		padding-left: 8px;
		width: 40px;
	}
	.navbar-form,
	.navbar-account {
		display: block;
	}
	#nav-select {
		display: none;
	}
	#navitems {
		display: block;
	}
	#submit-message {
		width: auto;
		margin: 0 auto;
	}
	.q.q-proposal {
		width: 50%;
	}
	.q.q-proposal .pan-md-6 .q-wrap {
		padding-right: 12px;
	}
}
@media (min-width: 1200px) {
	.accounts .list-group-item.account {
		width: 19.5%;
	}
	.bg-alone {
		margin-right: 40%;
		max-width: 60%;
	}
	.nav-main-item-icon {
		font-size: 2.5rem;
	}
	.nav-main-item-title {
		font-size: 1.2rem;
	}
	#nav-select {
		display: none;
	}
	#navitems {
		display: block;
	}

	.list-group.photos {
		flex-direction: row;
		flex-wrap: wrap;
	}
		.list-group.photos .list-group-item {
			width: 50%;
		}
}
@media (min-width: 1600px) {
	.accounts .list-group-item.account {
		width: 14%;
	}
	.bg-alone {
		margin-right: 50%;
		max-width: 50%;
	}
	.field-group.picker {
		width: 49.5%;
	}
	.field-group.picker:nth-child(even) {
		margin-right: 1%;
	}
	.full .field-group.picker {
		width: 100%;
	}
	.wg-group-inner {
		width: 33.3%;
	}
}

/* dark mode */
:root body.dark {
	--bg: #382c2a;
	--theme-primary: #226a9b;
	--theme-offset: #32375c;
	--theme-topbar: #231a17;
	--theme-text: #eee;
	--theme-link: #99d9ec;
	--theme-link-alt: #6ebbee;
}
body.dark {
	background: var(--bg);
	color: var(--theme-text);
}
body.dark .btn-primary {
	background: var(--theme-primary);
	border-color: var(--theme-primary);
	color: #fff;
}
body.dark .btn-secondary {
	background: none;
	border-color: #ccc;
	color: #ccc;
}
body.dark .btn-danger {
	background-color: #97190b;
	border-color: #771207;
	color: var(--theme-text);
}
body.dark .button-form-submission-wrapper,
body.dark .button-form-submission {
	border: 0;
}
body.dark .bg-info {
	background-color: var(--theme-primary) !important;
	border-color: transparent !important;
	color: #fff !important;
	opacity: 0.65;
}
	body.dark .bg-info a {
		color: rgb(183, 235, 255);
		text-decoration: underline;
	}
body.dark .topbar {
	background: var(--theme-topbar);
	color: var(--theme-text);
}
body.dark .topbar-region-left .topbar-item-account .account {
	opacity: 0.7;
}
/* MAIN NAV */
body.dark .nav-main {
	background: #111;
}
	body.dark .nav-main .nav-main-item,
	body.dark .nav-main .nav-main-item button,
	body.dark .nav-main .nav-main-item li a
	{
		background-color: var(--theme-topbar);
		color: #cecece;
	}
	body.dark .nav-main .nav-main-item.active,
	body.dark .nav-main .nav-main-item-btn[aria-expanded="true"] {
		background: #dbdfe4;
		font-weight: 800;
	}
	body.dark .nav-main .nav-main-item-list {
		border-color: #333;
	}
	body.dark .nav-main .nav-main-item-list .nav-main-item-list-child a:hover {
		background: #dfdfdf;
		color: #333 !important;
	}
	body.dark .nav-main .nav-main-item.active, 
	body.dark .nav-main .nav-main-item-list .nav-main-item-list-child.active a {
		background: #444;
		color: #c6c6c6;
	}
	body.dark #app .menu-trigger,
	body.dark .nav-main .menu-trigger {
		background: #333;
		color: #999;
	}
body.dark main {
	background: var(--bg);
}
body.dark main .workspace, 
body.dark main .no-tabs,
body.dark main .workspace table thead tr th,
body.dark input,
body.dark textarea,
body.dark .list-group-item {
	background: none;
	color: var(--theme-text);
}
body.dark main .workspace table tbody tr td a {
	color: var(--theme-link);
}
/* hover over table row */
body.dark main .workspace table tbody tr:hover > td {
	background: #454545;
}
	body.dark main .workspace table tbody tr:hover > td a {
		color: var(--theme-text);
	}
body.dark main .workspace, main .no-tabs {
	border: none;
}
body.dark #codigo-content .nav-tabs li a {
	background: var(--bg);
	border-color: #777;
	color: #ccc; 
	font-weight: 400;
}
body.dark #codigo-content .nav-tabs li a.active {
	background: var(--bg);
	color: #fff;
	font-weight: 700;
}
body.dark main .workspace table tbody tr {
	background: var(--theme-offset);
	color: var(--theme-text);
} 
body.dark main .workspace table tbody tr:nth-child(odd) {
	background: none;
}
body.dark table.listView thead th {
	background: var(--theme-topbar);
}
body.dark table.listView tbody tr:nth-child(even) td {
	background: #473833;
}
body.dark a {
	color: var(--theme-link);
}
body.dark .btn-link {
	color: var(--theme-link);
}
body.dark .well,
body.dark pre {
	background: var(--theme-offset);
	border-color: #555;
	color: var(--theme-text);
}
/* fields and jots */
body.dark .styled-select,
body.dark .styled-select select,
body.dark .q,
body.dark .field-group-check .field-label,
body.dark .field-group-check .field-label .field-label-text,
body.dark .field-label-text {
	background: var(--theme-offset);
	color: #ccc;
}
body.dark .styled-select,
body.dark .field-group,
body.dark .field-label-text {
	border-color: #999;
}
/* details, collapsers, modals */
body.dark .modal-content,
body.dark .btn-ui,
body.dark details,
body.dark .select2-container,
body.dark .select2-container--default .select2-selection--single,
body.dark .select2-dropdown {
	background: var(--theme-offset);
	border-color: #999;
	color: var(--theme-text);
}
body.dark details.nav-main-details,
body.dark details.nav-main-details summary {
	background: var(--theme-topbar);
}
/* select2 selection container */
.select2-container--default .select2-selection--multiple {
	background: var(--theme-offset);
}
/* items selected in select2 field */
body.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
	color: #000;
}
body.dark .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark .modal-header i {
	color: var(--theme-text);
}

/* Imperavi Article controls */
body.dark .arx-pathbar-container {
	background: #555;
}
	body.dark .arx-path-item.active:first-child span, 
	body.dark .arx-path-item.active:hover:first-child span,
	body.dark .arx-path-item span {
		color: #ccc;
	}
	body.dark .arx-path-item.active span, 
	body.dark .arx-path-item.active:hover span {
		color: #fff;
	}
body.dark .arx-toolbar-container {
	background: #444;
}
	body.dark a.arx-button, 
	body.dark a.arx-button .arx-button-icon {
		color: #bbb;
	}
	/* change color of svg icons */
	body.dark a.arx-button svg {
		filter: invert(100%) brightness(86%);
	}
	body.dark a.arx-button:hover,
	body.dark a.arx-button.active,
	body.dark .arx-popup-item:hover {
		background: #777;
		color: #fff;
	}
	body.dark a.arx-button.active {
		border-color: #999;
	}
	body.dark .arx-popup-body {
		background: #212121;
		border: 1px solid #ccc;
		box-shadow: 2px 2px 4px #000;
	}
	body.dark .arx-statusbar {
		background: var(--theme-offset);
	}
		body.dark .arx-statusbar-item {
			color: var(--theme-text);
			opacity: 0.65;
		}
	body.dark .uploadZone {
		background: repeating-linear-gradient(
			45deg,
			#857668,
			#857668 10px,
			#726e6e 10px,
			#726e6e 20px
		);
		border: 2px dashed #f39c12;
		color: #eee;
	}
	
	/** TO DO **/
	/**
	- Email editor controls
	- Select2 fields
	- Expanding buttons (collapsers)
	- blank space in some Article editors (see Pages)
	**/
/*** PRINT ***/
@media print {
	body.body-print {
		margin: 0;
		padding: 0;
	}
	body.body-print .print-page {
		page-break-after: always;
		page-break-before: always;
		border: 1px solid #fff; /* keep an invisible border so I can use it for testing when needed */
		height: 19.97625cm;
		margin-bottom: 0;
		min-height: none;
	}
	body.body-print .container {
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		width: 100%;
	}
}
@page {
	margin: .92cm 1cm;
}
/*
html {
	filter: invert(1);
}
*/