/*	admin.css
	========================================================= */

	* {
		box-sizing: border-box;
	}

	html {
		--select-color: rgb(74, 145, 251);
		--select-background: rgba(74, 145, 251, .2);
		--select-background-dark: rgba(74, 145, 251, .8);
		--placeholder: #399;
	}

/*	Layout
	========================================================= */

	header, main, footer {
		width: 1320px;
	}

	article {
		display: grid;
		grid-template-columns: 360px 1fr;
		grid-template-rows: 1fr;
	}

	form#list {
		grid-area: 1/1/3/2;
	}
	fieldset#detail {
		grid-area: 1/2/2/3;
	}
	fieldset#items {
		grid-area: 2/2/3/3;
	}

	fieldset#items table {

	}
	fieldset#items tbody>tr td {
		box-sizing: border-box;
	}

/*	List
	========================================================= */

	form#list {
		display: flex;
		height: 80vh;
		flex-direction: column;
	}

	div#list-rows {
		border: thin solid #ccc;
		overflow-y: scroll;
		overflow-x: hidden;
		flex: 1;
	}

	div#list-rows button {
		display: grid;
		width: 100%;
		border: thin #ccc;
		border-style: none none solid none;
		background-color: transparent;
		text-align: left;
		padding: .25em;
	}
	div#list-rows button[value="0"] {
		display: block;
		text-align: center;
	}
	div#list-rows button:hover {
		background-color: var(--select-background);
	}
	div#list-rows button[selected] {
		background-color: var(--select-background-dark);
		color: white;
	}

	div#list-rows>button>span {
		overflow: hidden;
		white-space: pre;
		text-align: left;
	}

/*	Form Elements
	========================================================= */

form#detail {
	--form-background: #f8f8f8;
	--field-background: white;
	--field-border: thin solid #ccc;
	background: var(--form-background);
}


	:is(fieldset#details,fieldset#items) select,
	:is(fieldset#details,fieldset#items) input[type="text"],
	:is(fieldset#details,fieldset#items) input[type$="date"],
	:is(fieldset#details,fieldset#items) qspan {
		border: thin solid transparent;
		qborder-color: #999;
		-moz-appearance: none;
		font-family: var(--monoFont);
		padding: .375em .5em;
		width: 100%;
		box-sizing: border-box;
		qheight: 2rem;
		padding: .375em .625em;
		background: var(--field-background);
		border: var(--field-border);
	}

	:is(fieldset#details,fieldset#items) select {
		text-indent: -2px;
	}
	:is(fieldset#details,fieldset#items) select option {
		-moz-appearance: none;
		background-color: #fefefe;
		qpadding: .25em;
		padding 0 !important;
	}

	:is(fieldset#details,fieldset#items) label {
		position: relative;
	}
	:is(fieldset#details,fieldset#items) label>span.select::after {
		content: "⌃";
		position: absolute;
		right: .5em;
		font-size: 1.6em;
		font-family: "times new roman", arial, helvetica, serif;
		top: 40%;
		transform: rotate(180deg);
		--select-icon: rgba(74, 145, 251, .9);
		color: var(--select-icon);
	}

	:is(fieldset#details,fieldset#items) input[type="text"]::placeholder {
		color: var(--placeholder);
		opacity: 1;
	}
	:is(fieldset#details,fieldset#items) input[type="text"]:focus::placeholder {
		color: orange;
	}
	:is(fieldset#details,fieldset#items) select {
		qborder-width: thin thick thin thin;
	}
	:is(fieldset#details,fieldset#items) select:focus,
	:is(fieldset#details,fieldset#items) input[type="text"]:focus {
		border-color: var(--select-color);
		outline: none;
	}