/* form designer */
.sketchy {
}
.sketchy .field {
	padding: 10px 20px;
	position: relative;
}
.sketchy .field .draghandle {
	position: absolute;
	left: 3px;
	top: 5px;
	bottom: 5px;
	width: 12px;
	/* image data from https://github.com/lastdates/vSort */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAB3RJTUUH3wIDBycZ/Cj09AAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAAAWSURBVHjaY2DABhoaGupBGMRmYiAEAKo2BAFbROu9AAAAAElFTkSuQmCC);
	display: none;
	cursor: move;
}
.sketchy .field .deleter {
	position: absolute;
	top: 5px;
	right: 5px;
	display: none;
	cursor: pointer;
}
.sketchy .field .adder {
	position: absolute;
	left: 0;
	right: 0;
	width: 1em;
	margin: 0 auto;
	color: var(--brand);
	cursor: pointer;
	display: none;
}
.sketchy .field .adder.above {
	top: -12px;
}
.sketchy .field .adder.below {
	bottom: -12px;
}

.sketchy .field:hover {
	border: 1px solid #ccc;
	background: var(--grey6);
}
.sketchy .field:hover .draghandle {
	display: block;
}
.sketchy .field:hover .deleter {
	display: block;
}
.sketchy .field:hover .adder {
	display: inline-block;
}

.sketchy .field.selected {
	border: 1px solid var(--brand);
	background: var(--grey6);
}

.sketchy .untabbed {
	min-height: 50px;
}
.sketchy .field-adder {
	text-align: center;
	margin: 10px;
}
.sketchy .field-adder i {
	cursor: pointer;
	color: var(--grey3);
}
.sketchy .field-adder i:hover {
	cursor: pointer;
	color: var(--grey1);
}

/* related tabs */
.sketchy .reltab {
	padding: 10px 20px;
}
.sketchy .reltab .reltab-label {
	padding: 3px 12px;
	border: 1px solid #bbb;
	background: var(--grey6);
	display: inline-block;
}
.sketchy .reltab .reltab-subtab {
	height: 50px; background: var(--grey8); border: 1px solid #bbb;
	margin-top: -1px;
}
.sketchy .reltab:hover {
	border: 1px solid #ccc;
	background: var(--grey6);
}
.sketchy .reltab.selected {
	border: 1px solid var(--brand);
}

/* tabs */
.sketchy .tab {
	padding: 8px 15px;
	border: 1px solid #bbb;
	background: var(--grey6);
	color: var(--grey1);
	cursor: pointer;
	margin-bottom: 0;
}
.sketchy .tab:hover {
	border: 1px solid #ccc;
	background: var(--grey8);
}
.sketchy .tab.selected {
	border: 1px solid var(--brand);
	background: white;
}
.sketchy .tab-body {
	min-height: 3em;
}

/* field types */

.sketchy .input {
	background:var(--grey8);
	min-height: 1.5em;
	padding:5px 10px;
	border: 1px solid #bbb;
}
.sketchy .text-area {
	background:var(--grey8);
	min-height: 5em;
	padding:5px 10px;
	border: 1px solid #bbb;
}
.sketchy .rich-editor {
	background:var(--grey8);
	border: 1px solid #bbb;
}
.sketchy .rich-editor .rich-header {
	background: var(--grey8);
	color: var(--grey1);
	border-bottom: 1px solid #ccc;
	font-size: 0.85em;
	padding: 5px;
	white-space: nowrap;
	overflow: hidden;
}
.sketchy .rich-editor .rich-header .rich-icon {
	padding: 5px 7px;
}
.sketchy .rich-editor .rich-header .rich-icon i {

}
.sketchy .rich-editor .rich-content {
	padding:5px 10px;
	min-height: 8em;
}
.sketchy .select {
	background:var(--grey8);
	padding:5px 10px;
	border: 1px solid #bbb;
	position: relative;
	min-height: 1.5em;
}
.sketchy .select:after {
	content: "▼";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
}
.sketchy .calc {
	background:var(--grey8);
	min-height: 1.5em;
	padding:5px 10px;
	border: 1px solid #bbb;
	position: relative;
}
.sketchy .calc:after {
	content: "\f0e7";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: var(--grey4);
}
.sketchy .date {
	background:var(--grey8);
	padding:5px 10px;
	border: 1px solid #bbb;
	min-height: 1.5em;
	display: inline-block;
	width: 11em;
	position: relative;
}
.sketchy .date:after {
	content: "\f133";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
}
.sketchy .time {
	background:var(--grey8);
	padding:5px 10px;
	border: 1px solid #bbb;
	min-height: 1.5em;
	display: inline-block;
	width: 7em;
	position: relative;
}
.sketchy .time:after {
	content: "\f017";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
}
.sketchy .spacer {
	width: 10px;
	display: inline-block;
}
.sketchy .check-box {
	background:var(--grey8);
	border: 1px solid #bbb;
	display: inline-block;
	height: 1em;
	width: 1em;
	margin-bottom: -3px;
	margin-right: 6px;
}
.sketchy .radio {
	background:var(--grey8);
	border: 1px solid #bbb;
	border-radius: 50%;
	display: inline-block;
	height: 1em;
	width: 1em;
	margin-bottom: -3px;
	margin-right: 6px;
}
.sketchy .check-label {
	display: inline-block;
	margin-right: 10px;
}
.sketchy .button {
	background:#eee;
	padding:5px 15px;
	border: 1px solid #bbb;
	display: inline-block;
}
.sketchy .file {
	background:white;
	padding:5px 10px;
	border: 1px solid #bbb;
	min-height: 1.5em;
	/*display: inline-block;*/
	/*width: 25em;*/
	position: relative;
}
.sketchy .file:before {
	content: "\f15b";
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
}
.sketchy .image {
	border: 1px solid #bbb;
	background: white;
	padding: 20px;
}
.sketchy .image img {
	max-width: 100%;
	border: 1px solid #ccc;
}

/* side panel config form */
.config-form {
	font-size: 0.9em;
}

/* rich input */
.richinput-overlay span.richinput-token-mention { background: #def; box-sizing: border-box; border-bottom: 1px solid #cde; } /* make sure borders etc don't fuck with the caret */
.richinput-overlay span.richinput-token-error { background: #fdd; box-sizing: border-box; border-bottom: 1px solid #f00; color: #800; } /* make sure borders etc don't fuck with the caret */
.richinput-overlay span.code-keyword { color: #00c; }
.richinput-overlay span.code-comment { color: #888; }
.richinput-overlay span.code-atomic { color: #a00; }
.richinput-overlay span.code-number { color: #800; }
.richinput-overlay span.code-string { color: #080; }
.richinput-wrapper .lint-error, .richinput-wrapper .code-help { padding: 2px 5px; }
.richinput-wrapper .lint-error { color: #fff; background: var(--danger-dark); font-family: monospace; font-size: 0.8rem; }
.richinput-wrapper .code-help { color: #888; font-size: 0.9rem; }
.richinput-overlay.haserror { outline: 1px solid var(--danger-dark) !important; }

/* form errors */
.formrow.error {
}
.formrow.error:before {
	content: "";
	display: block;
	position: absolute;
	top: -2px;
	right: -5px;
	bottom: -5px;
	left: -5px;
	border: 1px solid var(--danger);
}
.formrow.error .formlabel:after {
	content: "\f071";
	display: block;
	color: var(--danger);
	font-family: 'Font Awesome 5 Free';
	font-weight: 600;
	position: absolute;
	top: 0;
	right: 1px;
	z-index: 99;
}
.formrow.error .formvalue {
}

.formrow .lookup-link { color: var(--text-dark); text-decoration: none; }

/* grid table */
.grid-table { width: initial; display: none; }
.grid-table th { padding: 2px 10px; border: 1px solid var(--grey4); background: var(--grey6); }
.grid-table td { padding: 2px 10px; border: 1px solid var(--grey5); background: white; }
.grid-table tbody tr { cursor: pointer; }
.grid-table tbody tr:hover td { background: var(--grey7); }
.grid-table th, .grid-table td { min-width: 50px; }
.grid-table td.key { text-align: right; max-width: 100px; }
.grid-table td.number { text-align: right; max-width: 100px; min-width: 100px; }
.grid-table td.string { min-width: 100px; }
.grid-table td.textarea { min-width: 100px; max-width: 250px;}
.grid-table td div.fieldmini { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* sub-table */
.subtable { width: initial; }
.subtable th { padding: 2px 10px; border: 1px solid var(--grey4); background: var(--grey6); }
.subtable td { padding: 2px 10px; border: 1px solid var(--grey5); background: white; }
.subtable tbody tr { cursor: pointer; }
.subtable tbody tr:hover td { background: var(--grey7); }
.subtable th, .subtable td { min-width: 50px; }
.subtable td.key { text-align: right; max-width: 100px; }
.subtable td.number { text-align: right; max-width: 100px; min-width: 100px; }
.subtable td.string { min-width: 100px; }
.subtable td.textarea { min-width: 100px; max-width: 250px;}
.subtable td div.fieldmini { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.footer-spacer { height:100px; }