/* styles for ParishOS layout */

@media (min-width: 0px) {
	html {
		font-size: 80%;
		overflow-x: hidden; /* stops Select2 from causing lateral scrolling */
	}
	body {
		background-color: #ecf0f1;
		font-family: 'Figtree', sans-serif;
		font-size: 1.4rem;
	}
	pre {
		float: left;
		width: 100%;
	}
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"] {
		font-size: 1.5rem;
	}
	a,
	button,
	div,
	img,
	p,
	span {
		transition: all 0.25s;
		-moz-transition: all 0.25s;
		/* Firefox 4 */
		-webkit-transition: all 0.25s;
		/* Safari and Chrome */
		-o-transition: all 0.25s;
		/* Opera */
	}
	select {
		width: auto;
		}

	figure.preview {
		display: block;
		float: left;
		padding: 16px 0;
		width: 140px;
	}
		figure.preview img {
			float: left;
			margin: 0;
			padding: 0;
			width: 100%;
			max-width: 100%;
		}
	.bg-info {
		background: #a9e4f1 !important;
		color: #555;
	}
	.debug,
	.well {
		display: block;
		float: left;
		width: 100%;
	}

	.debug {
		min-height: 80vh;
	}

	.btn-primary {
		background: #c0392b;
		border: 1px solid #c0392b;
	}

	.btn-primary:hover,
	.btn-primary:focus {
		background: #b23427;
		border-color: #b23427;
	}
	.btn-secondary {
		background: #7f8c8d;
		border: 1px solid #7f8c8d;
		color: #fff;
	}

	.btn-ui {
		background: #eee;
		color: #555;
		font-size: 1.25rem;
		font-weight: 700;
		margin-bottom: 8px;
		padding: 8px 16px;
		text-align: left;
	}

	.btn-ui:hover,
	.btn-ui:focus,
	.btn-ui[aria-expanded="true"] {
		background: #fff;
	}

	details {
		background: #fff;
		border: 1px solid #ccc;
		display: flex;
		flex-direction: column;
		float: left;
		margin: 0 0 8px 0;
		padding: 0;
		width: 100%;
	}
	details:hover {
		box-shadow: 0 2px 8px #777;
	}
		details summary {
			font-size: 1.5rem;
			padding: 12px 16px;
		}
		details summary:hover {
			cursor: pointer;
		}
		details summary .summary-icon {
			float: right;
			padding-top: 4px;
		}
		details summary .summary-icon-active,
		details[open] summary .summary-icon-inactive {
			display: none;
		}
		details summary .summary-icon-inactive,
		details[open] summary .summary-icon-active {
			display: inline-block;
		}
		.details-contents {
			display: flex;
			flex-direction: column;
			padding: 8px 16px;
		}
			.details-contents button {
				margin: 6px 0;
				width: auto;
			}

	.slot .btn-ui {
		border: 1px solid #ccc;
	}
	.slot-assigned summary {
		background: #dff0d8;
	}

	/* email preview for mailers */
	.email-block-heading {
		color: #777;
		display: block;
		float: left;
		font-size: 1.25rem;
		font-weight: 700;
		margin: 0;
		padding: 12px 0 4px 0;
		text-transform: uppercase;
		width: 100%;
	}
	.email-block-text {
		border: 1px solid #ccc;
		float: left;
		font-family: monospace;
		line-height: 1.15;
		padding: 8px 12px;
		width: 100%;
	}
	textarea.email-block-text {
		min-height: 80px;
	}

	.form-control {
		height: 36px;
	}

	.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;
		margin-top: 6px;
		padding-right: 6px;
		width: 20px;
	}

	/* notifications */
	#notifications {
		padding-top: 24px;
	}
	.note {
		background: #fff;
		border: 1px solid #ccc;
		display: block;
		float: left;
		margin: 3px 0;
		padding: 24px 24px;
		width: 100%;
	}
		.note-title {
			margin: 0;
		}
		.note-date {
			display: block;
			float: left;
			font-size: 1.2rem;
			line-height: 1.0;
			opacity: 0.6;
			padding: 8px 0 4px 0;
			width: 100%;
		}
		.note-text {
			font-size: 1.75rem;
			line-height: 1.5;
		}

	.icon-collapse[aria-expanded="false"] .icon-collapse-opened,
	.icon-collapse[aria-expanded="true"] .icon-collapse-closed {
		display: inline;
	}

	.icon-collapse[aria-expanded="true"] .icon-collapse-opened,
	.icon-collapse[aria-expanded="false"] .icon-collapse-closed {
		display: none;
	}

	.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 {
		float: left;
		margin: -8px 0 8px 0;
		width: 100%;
	}

	.wrap,
	.wrapper,
	.zone {
		display: block;
		float: left;
		width: 100%;
	}
	.zone {
		margin: 0 0 8px 0;
	}

	.ui-datepicker {
		background: #fff;
		box-shadow: 2px 2px 4px #000;
		padding: 0;
		width: auto;
	}
	.ui-datepicker-header {
		background: #c0392b;
		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-datepicker table {
		background: #fff;
	}
	.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: #c0392b;
		color: #fff;
	}
	.ui-datepicker-calendar thead th span {
		display: block;
		float: left;
		padding: 6px 8px;
		width: 100%;
	}
	.ui-timepicker-standard {
		z-index: 2 !important;
	}
	.ui-menu {
		display: flex;
		flex-direction: column;
		float: left;
		padding: 12px 0;
		width: 100%;
	}
		.ui-menu a {
			color: #777;
			border-bottom: 1px solid #ccc;
			font-size: 1.75rem;
			line-height: 1.2;
			padding: 8px 8px;
		}
		.ui-menu a:last-child {
			border-bottom: 0px;
		}
		.ui-menu a:hover {
			background: #eee;
			color: #000;
			text-decoration: none;
		}

	.ui-timepicker-standard {
		z-index: 2 !important;
	}

	#all {
		width: 100%;
		float: left;
		min-height: 500px;
		overflow-x: hidden;
		overflow-y: auto;
	}

	form.form-inline {
		float: left;
		display: inline-block;
		min-height: auto;
		width: auto;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: 'Figtree', sans-serif;
		font-weight: 700;
		font-style: normal
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p {
		display: block;
		float: left;
		width: 100%;
	}

	h1 {
		font-weight: 700;
	}

	table {
		width: 100%;
	}

	td {
		vertical-align: top;
	}


	header,
	footer {
		min-height: 60px;
		width: 100%;
		float: left;
	}

	footer {
		margin-top: 16px;
		padding: 8px 16px;
	}

	header {
		min-height: 16px;
		padding: 0;
		float: left;
	}

	label.error {
		background: #d2322d;
		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 {
		display: block;
		float: left;
		min-height: 12px;
		width: 100%;
	}

	.block-small {
		font-size: 0.9em;
		line-height: 1em;
	}

	.list-group,
	.list-group-item {
		float: left;
		width: 100%;
	}
	.list-group-item.active,
	.list-group-item.active:hover {
		background: none;
		color: #000;
		font-weight: 700;
	}
	.list-group-item > .badge.block {
		float: left;
	}
	.list-group.flex-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
		.list-group.flex-list .list-group-item {
			flex-grow: 1;
			flex-shrink: 1;
			width: 200px;
		}


	/* badge color schemes */

	.badge {
		background: #7f8c8d;
		font-weight: 400;
		padding: 4px 8px;
	}
	.badge-green {
		background: #27ae60;
		color: #fff;
	}
	.badge-red {
		background: #c0392b;
		color: #fff;
	}
	.badge-blue {
		background: #27ae60;
		color: #fff;
	}

	.badge-grey {
		background: #7f8c8d;
		color: #fff;
	}
	.badge.desc {
		background: none;
		color: #999;
		font-size: 1.2rem;
		line-height: 1.4;
		padding: 0;
		text-align: left;
	}
	.badge.desc.green {
		color: #27ae60;
	}
	.badge-text {
		padding: 2px 6px 2px 0;
	}
	.text-success {
		color: #28a745;
	}

	.nav-top {
		background: #c0392b;
		border: 0;
		display: flex;
		flex-direction: row;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		margin: 0;
		width: 100%;
	}
		.nav-top .navbar-left {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
		}
		.nav-top .navbar-center {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.nav-top .navbar-right {
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
		}

	.nav-top nav {
		color: #fff;
		padding: 8px 16px;
		width: auto;
	}

	.nav-top a,
	.navbar-default .navbar-nav>li>a,
	.nav-top form button .fa,
	.nav-top form button .fa:hover,
	.nav-top a:hover,
	.navbar-default .navbar-nav>li>a:hover {
		color: #fff;
	}

	.nav-top form .form-control::-webkit-input-placeholder,
	.nav-top form .form-control::-moz-placeholder,
	.nav-top form .form-control:-ms-input-placeholder,
	.nav-top form .form-control:-moz-placeholder {
		color: #fff;
	}

	.nav-top form input {
		background: none;
		border: 1px solid #fff;
		color: #fff;
	}

	.nav-top form input:focus {
		background: #fff;
		border: 1px solid #fff;
		color: #c0392b;
	}
	.nav-top a.navbar-brand {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.nav-top 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;
	}

	.nav-top .nav.nav-tabs {
		border: 0;
		display: block;
		float: right;
		margin: 4px 0 0 0;
		padding: 0;
	}

	.nav-top .nav.nav-tabs .dropdown .dropdown-toggle:hover,
	.nav-top .nav.nav-tabs .dropdown .dropdown-toggle:focus {
		color: #333;
	}
	
	.nav-top .dropdown-menu li a {
		color: #333;
		font-size: 1.25rem;
		padding: 4px 8px;
	}

	.nav-top .nav.nav-tabs.nav-account .dropdown .dropdown-menu {
		left: auto;
		right: 0;
	}

	.btn-group.content-filter .btn.btn-link {
		color: #fff;
		font-size: 1.5rem;
		margin: 7px 0 0 0;
	}

	.mobile-menu {
		color: #fff;
		display: none; /* 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-pane .row .col-xs-12 .input-group:nth-child(1) {
		margin-top: 16px;
	}

	.codigo {
		color: #777;
		float: left;
		font-size: 0.89em;
		padding: 24px 12px;
	}

	.bg {
		display: block;
		float: left;
		min-height: 24px;
		padding: 12px 16px;
		width: 100%;
	}

	.bg.bg-warning {
		background: #9a0c0f;
		color: #fff;
		font-size: 1.5em;
		margin: 12px 0;
	}
	.bg-heading {
		margin-top: 8px;
	}

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

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


	/* select2 */
/* Remove transition for select2 container to stop scroll-to-top behaviour on click */
span.select2-container,
.select2-container--default.select2-container--open {
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
}

/* Styling for select2 single and multiple selections */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 0;
    height: 36px; /* Adjusted height */
    padding: 4px 0;
}

/* Height auto for multiple selections to expand as tags are added */
.select2-container--default .select2-selection--multiple {
    height: auto;
}

/* Adjustments for the select2 selection arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #555 transparent transparent transparent;
    border-width: 7px 5px 0 5px;
    left: 0;
    top: 60%;
}

/* Textarea and rendered text inside select2 */
.select2-container--default .select2-search--inline .select2-search__field,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: 1.5rem;
    font-weight: 400;
    width: 100% !important; /* Full width for search field and rendered selection */
}

/* set width of dropdown so it doesn't render with tiny width */
.select2-dropdown.select2-dropdown--below {
	width: 320px !important;
}

/* JS Select styling */
.js-select {
    border: 1px solid #ccc;
    float: left;
    font-size: 1em;
    height: 36px;
    width: 100%;
}

/* Custom element for controlling select2 results container */
.select2-helper-results-container,
.select2-helper-results-container .select2-container.select2-container--default.select2-container--open {
    position: relative;
    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;
	}

	.financial {
		font-size: 2rem;
		font-weight: 700;
		line-height: 1.15;
	}
	.financial-income {
		color: #27ae60;
	}
	.financial-expense {
		color: #c0392b;
	}


	/* ----- CONTENT AREA STYLES ------ */

	main {
		float: left;
		margin: 0;
		min-height: 500px;
		padding: 24px 16px;
		position: relative;
		width: 100%;
	}

	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 .tab-content .tab-pane {
		float: left;
		min-height: 400px;
		padding: 0;
		width: 100%;
	}

	main form .tab-content .tab-pane {
		min-height: 200px;
		padding: 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;
	}

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

	body.roles {
		background-color: #fff;
		width: 98%;
	}

	body.roles table tbody tr:nth-child(even) {
		background-color: #eee;
	}

	body.roles table tbody tr:hover {
		background-color: #e0e0e0;
		color: #000;
	}

	body.roles table tbody tr td {
		padding: 4px 6px;
	}

	body.roles .btn {
		margin: 0 4px 8px 0;
	}

	body.roles #role .btn {
		margin-right: 4px;
	}

	body.roles #role .input-group {
		width: 100%;
	}

	iframe.gallery-cover {
		border: 1px solid #ccc;
		float: left;
		height: 57px;
		width: 240px;
	}


	/* Bootstrap Form Helpers */

	main form .input-group .bfh {
		padding: 2px 0;
		width: 100%;
	}

	main form .input-group .bfh .input-group {
		width: 100%;
	}


	/* End BFH */

	.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 {
		color: #333;
		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%;
		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;
	}

	label.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: #34495e;
		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 */

	.form-space {
		margin-bottom: 8px;
	}

	.spacer-block {
		float: left;
		margin: 8px 0;
		padding: 8px 0;
		width: 100%;
	}


	/* ui modals */

	.modal.ui {
		background: #fff;
		min-height: 40vh;
		max-height: 90vh;
		margin: 3% 0 0 3%;
		padding: 0;
		width: 94%;
	}

	.modal.ui .modal-dialog,
	.modal.ui .modal-dialog .modal-content {
		float: left;
		margin: 0;
		min-height: 40vh;
		padding: 0;
		width: 100%;
	}

	.modal.ui .modal-dialog .modal-content,
	.modal.ui .modal-dialog .modal-content .modal-footer {
		box-shadow: none;
		border: 0;
	}

	.modal.ui .modal-dialog .modal-content .modal-header {
		background: #e0e0e0;
		margin: 0;
		padding: 0;
	}

	.modal.ui .modal-dialog .modal-content .modal-header button {
		background: #555;
		border: 0;
		color: #fff;
		font-size: 4rem;
		padding: 16px 32px;
	}

	.modal.ui .modal-dialog .modal-content .modal-body {
		float: left;
		height: 72vh;
		width: 100%;
		overflow: auto;
	}

	.modal.ui .modal-dialog .modal-content .modal-header h4.modal-title {
		font-size: 2.8rem;
		font-weight: 700;
		padding: 24px;
		margin: 0;
		width: auto;
	}

	.modal.ui .modal-dialog .modal-content .modal-footer {
		min-height: 24px;
		padding: 24px;
		margin: 0;
		width: 100%;
	}

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

	.custom-field .slug {
		display: display;
		font-size: 1.1em;
		padding: 6px 8px 0 8px;
		color: #777;
		float: left;
	}

	.custom-field.slug-field {
		display: none;
	}


	/* I don't need slugs in this project, so just hide them. */

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

	main .workspace,
	main .workspace,
	main .no-tabs {
		background: #fff;
		border-left: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		width: 100%;
		min-height: 600px;
		padding: 16px 16px 24px 16px;
		margin: 0;
		float: left;
	}

	main .workspace {
		min-height: 600px;
	}

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

	main .no-tabs h2 {
		margin-bottom: 16px;
		width: 100%;
		float: left;
		line-height: 1.5em;
	}

	.red {
		color: red;
	}

	tr.deleted td a,
	tr.deleted td {
		color: #999;
	}

	main .workspace a.btn {
		margin: 24px 0 0 0;
	}
	main .workspace .list-group-item a.btn {
		margin-top: 0;
	}

	main .home h1 {
		font-size: 2.5em;
		font-weight: 700;
		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 tbody tr th,
	main .workspace table tbody tr td {
		padding: 8px 16px;
	}
	main .workspace table tbody tr td .badge.desc {
		display: inline-block;
		word-break: break-all !important;
	}
	.body-users main .workspace table tbody tr th,
	.body-users main .workspace table tbody tr th td {
		word-break: break-all !important;
	}
	.body-users main .workspace table tbody tr td:first-child a {
		display: block;
	}
	.body-users main .workspace table tbody tr td .account {
		display: block;
		word-break: break-all !important;
		max-width: 280px;
	}
	.body-users main .workspace table tbody tr td .account span {
		display: inline;
	}

	main .workspace table tbody tr td a.btn {
		margin: 0 0 4px 0;
	}

	main .workspace table tbody tr th {
		background-color: #fff;
		color: #555;
		border-bottom: 1px solid #ccc;
	}

	main .workspace table tbody tr:hover > td {
		background-color: #e0e0e0;
	}

	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 {
		text-decoration: none;
	}

	main .workspace table tbody tr td .edit-option .fa {
		text-align: center;
		width: 24px;
		font-size: 24px;
		display: block;
		margin-right: 16px;
		float: left;
	}

	.list-group-item .form-inline {
		float: right;
	}

	.list-group-item .form-inline button.edit-option {
		background-color: none;
		border: 0;
		color: #3498db;
	}


	/* form builder for returns */

	#questions {
		float: left;
		padding: 0 0 24px 0;
		width: 100%;
	}

	.q {
		background: #eee;
		border: 1px solid #ccc;
		display: block;
		float: left;
		margin: 12px 0;
		padding: 8px 12px;
		width: 100%;
	}

	.q:hover {
		background: #ddd;
		box-shadow: 0px 0px 12px #000;
		color: #000;
	}

	.q label {
		float: left;
		font-weight: 400;
		margin-bottom: 8px;
		text-align: left;
		width: 100%;
	}

	.q label select,
	.q label textarea,
	.q .q-wrap textarea {
		display: block;
		float: left;
		width: 100%;
	}
	.q-wrap {
		float: left;
		margin: 6px 0;
		width: 100%;
	}
		.q-wrap .input-group.form-space,
		.tab-pane .row .col-xs-12 .q-wrap .input-group:nth-child(1) {
			margin: 0;
			padding: 0;
		}

	.q label input,
	.q label textarea,
	.q .q-wrap input,
	.q .q-wrap textarea {
		line-height: normal;
		padding: 4px 8px;
		width: 100%;
	}

	.q label input[type="checkbox"] {
		float: left;
		margin-right: 4px;
		width: 24px;
	}

	.q label .bg-info {
		background: #fff;
		border: 2px solid #c0392b;
		color: #333;
		margin-top: 4px;
	}
	.q-label .q-checkbox {
		float: left;
		margin-right: 4px;
	}
	.q-label-text {
		display: block;
		float: left;
	}
	.q .close {
		color: #333;
		font-size: 1.5rem;
		font-weight: 400;
		opacity: 0.75;
		padding: 8px 0;
		top: auto;
		right: auto;
	}

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

	main form#form-builder input:focus,
	main form#form-builder textarea:focus {
		border: 1px solid #000;
		background: #ffeaa7;
		font-weight: 700;
	}


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

	main .workspace table tbody tr th.control-width {
		width: 480px;
	}


	/* invoice-group for registration invoices */

	.invoice h3,
	.invoice h4 {
		display: block;
		float: left;
		min-height: 10px;
		width: 100%;
	}

	.invoice h3 {
		text-transform: uppercase;
	}

	.invoice-group {
		float: left;
		margin: 0 0 16px 0;
		min-height: 24px;
		padding: 12px 0;
		width: 100%;
	}

	.invoice-group-item {
		display: block;
		float: left;
		min-height: 24px;
		padding: 4px 0;
		width: 100%;
	}

	.invoice-group-item-label,
	.invoice-group-item-content {
		min-height: 24px;
		padding: 6px 8px;
	}

	.invoice-group-item-label {
		background: #eee;
		font-weight: 700;
		text-align: center;
		width: 120px;
	}

	.invoice-group-item-content {
		width: auto;
	}

	#form {
		position: relative;
	}

	#button-delete,
	#button-submit,
	#button-restore,
	#button-remove,
	.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: none;
		padding: 0;
		position: fixed;
		bottom: 0;
		left: 0;
		min-height: 24px;
		width: auto;
		z-index: 999;
	}

	#button-submit {
		float: left;
		margin: 0;
		width: 248px;
	}

	#sidebar h2 {
		font-size: 1.3em;
		color: #333;
		font-weight: normal;
	}

	#submit-message {
		width: 50%;
		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: #e74c3c;
		color: #fff;
	}
	/* fields */
	.field {
		display: flex;
		flex-direction: column;
		float: left;
		font-size: 1.75rem;
		padding: 6px 0;
		width: 100%;
	}
		.field .field-label {
			margin: 0;
			padding: 0;
		}
		.field .field-singleline,
		.field .field-textarea {
			font-size: 1.75rem;
			padding: 4px 8px;
			max-width: 600px;
		}
	
	.field-group {
		display: block;
		float: left;
		margin: 4px 0;
		padding: 0;
		width: 100%;
	}
		/* .field-group .field-label: don't use overflow:hidden because this will preclude select fields from showing their lists */
		.field-group .field-label {
			/*border: 1px solid #ccc;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;*/
			margin: 0;
			padding: 0;
			width: 100%;
		}
			.field-group .field-label-text,
			.field-group .field-label-input, /* wrapper for .field-group .field-input and select2 */
			.field-group .field-input {
				float: none;
			}
		h5.field-heading,
		.field-group .field-input,
		.field-group .field-label-text {
			font-size: 1.75rem;
			font-weight: 400;
			line-height: 1.15;
		}
		/*
		.field-group .field-label-text {
			background: #eee;
			border-right: 1px solid #ccc;
			flex-grow: 0;
			font-size: 1.25rem;
			font-weight: 400;
			line-height: 1;
			margin: 0;
			padding: 12px 12px 8px 12px;
			text-align: center;
			min-width: 110px;
			max-width: 200px;
		}
		*/
		.field-group .field-label-input {
			border-left: 0;
			flex-grow: 1;
			flex-shrink: 1;
		}
		.field-group .field-label-input {
			flex-grow: 1;
			flex-shrink: 1;
		}
		.field-group-check .field-group .field-label-text {
			background: none;
		}
		.field-group .field-input {
			border: 1px solid #ccc;
		}
		.field-group .field-input input,
		.field-group .field-input textarea {
			background: #fff;
			border: none;
			display: block;
			float: left;
			font-weight: 400;
			padding: 6px 8px;
			width: 100%;
		}
		.input-group textarea.form-control {
			font-size: 1.5rem;
		}
		.field-group .field-select {
			font-weight: 400;
		}
		.field-group-check .field-group .field-label .field-group .field-input {
			border: none;
		}
		.field-group-check .field-group .field-label .field-group .field-input input {
			background: none;
			border: none;
			height: 20px;
			padding: 0;
			width: 20px;
		}
		.field-group-check .field-group .field-label .field-group .field-label-text {
			font-weight: 400;
			padding: 4px;
		}
	.nav-main {
		background: #dedede;
		display: flex;
		flex-direction: row;
		float: left;
		justify-content: center;
		margin: 0;
		min-height: 24px;
		padding: 0;
		width: 100%;
	}
		.nav-main-item {
			color: #555;
			display: block;
			float: left;
			padding: 16px 8px;
			min-width: 60px;
		}
		.nav-main-item:hover {
			color: #555;
			padding: 12px 8px 20px 8px;
		}
		.nav-main-item.active,
		.nav-main-item.active:hover {
			color: #c0392b;
			padding: 16px 8px;
		}
		.nav-main-item-icon {
			display: block;
			float: left;
			font-size: 2.5rem;
			line-height: 2.5rem;
			padding: 0 0 8px 0;
			width: 100%;
			text-align: center;
		}
		.nav-main-item-title {
			display: block;
			float: left;
			font-size: 1.2rem;
			padding: 0;
			width: 100%;
			text-align: center;
		}
}


/* Extra small devices (phones, 767px and less) */

@media (max-width: 320px) {
	.filter-control {
		display: block;
		float: left;
		width: 100%;
	}
	main .workspace table tbody 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: 95%;
		margin: 0 5%;
	}
	
	#nav-select {
		position: absolute;
		top: -48px;
	}
	main form .tab-content .tab-pane a.backlink {
		display: block;
	}
	#button-submit,
	#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-submit,
	#button-delete,
	#button-restore {
		border-radius: 0;
		margin: 0;
		padding: 8px 16px;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.visible-xs {
		display: inline !important;
	}
	.container-fluid {
		margin: 0;
		padding: 0;
	}
	#all {
		padding: 0;
		margin: 0;
		overflow: none;
	}
	.nav-top {
		font-size: 100%;
	}
	main ul.nav-tabs li a {
		font-size: 1.75rem;
	}
	/* 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: 3px 3px 8px #c0392b;
		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: #c0392b;
		float: left;
		min-height: 36px;
		padding: 0;
		width: 90%;
		border: 1px solid #fff;
	}
	.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;
		padding: 12px 0;
		width: 100%;
	}
	.nav-mobile-item {
		color: #333;
		display: block;
		float: left;
		font-size: 1.75rem;
		line-height: 1.75rem;
		padding: 12px 20px;
		width: 100%;
	}
	.nav-mobile-item:hover,
	.nav-mobile-item:focus,
	.nav-mobile-item.active {
		background: #c0392b;
		color: #fff;
		text-decoration: none;
	}
	/* End of offcanvas nav */
	/* 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) {
	.mobile-menu {
		display: none;
	}
	.navbar-form,
	.navbar-account {
		display: block;
	}
	#nav-select {
		display: none;
	}
	#navitems {
		display: block;
	}
	#submit-message {
		width: 95%;
		margin: 0 5%;
	}
	.codigo-iframe {
		height: 600px;
		width: 480px;
	}
}

@media (min-width: 992px) {
	#nav-select {
		display: none;
	}
	#navitems {
		display: block;
	}
	#submit-message {
		width: 50%;
		margin: 0 25%;
	}
	/* affix menu */
	.affix-wrapper.affix-top {
		display: block;
		float: left;
		width: 220px;
	}
	.affix-wrapper.affix {
		width: 220px;
		bottom: 54px;
	}
	#codigo-controls .btn.affix-nav-item {
		display: block;
		float: left;
		font-size: 1.2rem;
		line-height: 1.2rem;
		margin: 0;
		padding: 6px 12px;
		width: 28px;
	}
}

@media (min-width: 1200px) {
	#nav-select {
		display: none;
	}
	#navitems {
		display: block;
	}
	.affix-wrapper.affix-top,
	.affix-wrapper.affix {
		width: 260px;
	}
	#codigo-controls .btn.affix-nav-item {
		font-size: 1.5rem;
		line-height: 1.5rem;
		padding: 12px 16px;
		width: 44px;
	}
	#notifications {
		padding-right: 25%;
	}
}

@media (min-width: 1600px) {
	.affix-wrapper.affix-top,
	.affix-wrapper.affix {
		width: 360px;
	}
}