html
{
	font-family: 'Segoe UI', Tahoma, Verdana;
	font-size: 1.1em;
}

#panel-top
{
}


#panel-mid
{
}

#panel-bottom
{

}

#designs
{
	display: inline-block;
	vertical-align: top;
	width: 15em;
}

#designs ul
{
	padding-left: 0;
	margin: 0;
}

#designs ul li
{
	list-style-type: none;
}

#designs button,
#designs input
{
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 0.3em;
}

#designs-new,
#datasources-new,
#datasources-upload,
.grid-column-add,
.grid-row-add,
.kode #buttonText,
.kode #buttonBarcode,
.kode #buttonImage,
.kode #buttonLine,
#print-pdf,
#print-png
{
	background-color: #c3e8c3;
}

#designs-delete,
#datasources-delete,
#settings-reset,
#settings-sample,
.grid-row-delete,
.kode #buttonRemove,
.kode #buttonNew
{
	background-color: #e6bfbf;
}

.kode #buttonOpen,
.kode #buttonSave,
#settings-save,
#settings-load
{
	background-color: #b2dee6;
}

#designer
{
	display: inline-block;
	vertical-align: top;
}

#datasources
{
	display: inline-block;
	vertical-align: top;
	width: 15em;
}

#datasources ul
{
	padding-left: 0;
	margin: 0;
}

#datasources ul li
{
	list-style-type: none;
}

#datasources button
{
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 0.3em;
}

#manipulators
{
	display: inline-block;
}

#manipulators #properties
{
	vertical-align: top;
}

#grid
{
	display: inline-block;
	vertical-align: top;
}

#preview
{
	display: inline-block;
	vertical-align: top;
}

#preview fieldset
{
	transform-origin: top left;
	padding: 0;
}

#control
{
	display: inline-block;
	vertical-align: top;
	width: 20em;
}

#datasources button.active,
#designs button.active
{
	font-weight: bold;
	background-color: #fafafa;
}

#control button
{
	width: 100%;
	box-sizing: border-box;
}

#grid
{
}

#grid input.num
{
	text-align: right;
}

#grid fieldset
{
	padding: 0;
	position: relative;
}

#grid table
{
	white-space: nowrap;
}

#grid table thead
{
}

#grid table th.sel
{
	min-width: 1em;
	max-width: 1em;
	padding-right: 0.3em;
}

#grid thead tr th,
#grid tbody tr td
{
	min-width: 6em;
	max-width: 10em;
}

#grid th input
{
	width: 100%;
	font-weight: bold;
	border: 1px solid transparent;
	text-align: center;
	box-sizing: border-box;
}

#grid th:hover input,
#grid th input:focus
{
	font-weight: bold;
	border: 1px solid #000000;
}

#grid td input
{
	width: 100%;
	box-sizing: border-box;
}

#grid button
{
	margin-top: 0.1em;
	padding: 0.2em 0.5em;
	width: 8em;
}

#designs > fieldset,
#datasources > fieldset,
#grid > fieldset,
#preview > fieldset,
#control > fieldset
{
	box-shadow: rgba(0, 0, 0, 0.2) 0.5em 0.5em 1em;
	background-color: #ffffff;
	border: 1px solid #000000;
	min-width: 5em;
}

#control > fieldset
{
	margin-bottom: 1em;
}

#oobe
{
	position: fixed;
	top: 0;
	bottom: 0;
	border: none;
	width: 100vw;
	height: 100vh;
	background: #ffffffe0;
}

#oobe div
{
	border: 1px solid #000000;
	background: #ffffff;
	width: max-content;
	height: max-content;
	margin: 10vh auto;
	padding: 2em 3em;
}

footer
{
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 0;
	font-variant: small-caps;
	font-size: 1.1em;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	padding: 0 0.4em 0.2em 0.4em;
	opacity: 0.1;
	transition: opacity 0.2s linear;
}

a
{
	text-decoration: none;
	color: inherit;
}

footer:hover
{
	opacity: 1;
}

footer em
{
	color: #888;
	font-size: 0.8em;
}

h2
{
	margin-top: 0.2em;
	margin-bottom: 0.5em;
}

h2 input
{
	border: 1px solid transparent;
	font-weight: normal;
	font-size: 0.8em;
}

h2:hover input,
h2 input:focus
{
	border: 1px solid #000000;
}

input
{
	border: 1px solid #c0c0c0;
	font-size: 0.8em;
	font-weight: normal;
	padding: 0.1em 0.3em;
}

input:hover,
input:focus
{
	background-color: #f0f0f0;
	border: 1px solid #000000;
}

button
{
	background-color: #f0f0f0;
	border: 1px solid #000000;
	padding: 0.4em 0.5em;
	margin-top: 0.7em;
	margin-right: 0.3em;
	transition: box-shadow linear 0.1s;
}

button:hover
{
	box-shadow: 0px 0px 1em #00000040;
}