* {box-sizing:border-box;}
html {height:100%;}
body {font-family:sans-serif; margin:0; height:100%;}


div#container {padding:.25rem;}


div#container div#user {flex:0 1 auto; border:1px solid #000;}
div#container div#user {display:flex; flex-direction:row; justify-content:center; user-select:none;}

div#container div#user div#userquery {flex:0 1 50%; margin:1rem 0;}
div#container div#user div#userquery {text-align:center; font-weight:600;}
div#container div#user div#userquery h2 {margin-bottom:.5rem;}
div#container div#user div#userquery div.line {padding:.25rem;}
div#container div#user div#userquery div.line.jt {display:flex; flex-direction:row; justify-content:center;}
div#container div#user div#userquery div.line.jt label {flex:0 1 auto; text-align:center;}
div#container div#user div#userquery div.line.jt label img {width:8rem; display:block;}
div#container div#user div#userquery div.line.jt label input {width:8rem; display:block;}
div#container div#user div#userquery div.line select {padding:.25rem; margin:0 .25rem; font-size:1rem;}
div#container div#user div#userquery div.line button {border-radius:.25rem; border:1px solid #dadada; background-color:#fff; padding:.25rem 1rem; font-size:1rem; margin-bottom:.5rem;}
div#container div#user div#userquery div.line.p:before {content:'('; font-size:1.5rem; font-weight:100;}
div#container div#user div#userquery div.line.p::after {content:')'; font-size:1.5rem; font-weight:100;}

div#container div#user div#tablefilter {flex:0 1 65%; margin:1rem 0;}
div#container div#user div#tablefilter {text-align:center; display:flex; flex-direction:row; justify-content:center; flex-wrap:wrap; align-content:center;}
div#container div#user div#tablefilter h2 {width:100%;}
div#container div#user div#tablefilter div.toggle {flex:0 0 20%; padding:.35em .25em;}
div#container div#user div#tablefilter div.toggle label {display:block; padding:.5em .75em .35em; border-radius:.5em; background-color:#0001; box-shadow:0 2px 2px #0008; cursor:pointer;}
div#container div#user div#tablefilter div.toggle input {display:none;}
div#container div#user div#tablefilter div.toggle input:checked + label {background-color:#1e90ffEE; color:#FFF; box-shadow:0 1px 1px #0008;}


div#container div#intermediate {flex:0 0 auto; cursor:ns-resize; padding:.25rem 0;}
div#container div#intermediate div.pill {display:block; width:4rem; height:.2rem; background-color:#888; border-radius:1rem; margin:0 auto;}


div#container div#database {flex:1 1 auto; border:1px solid #000; /*padding:0 1rem;*/ position:relative; text-align:center;}
div#container div#database {overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;}
div#container div#database table {margin:1em auto; border-collapse:collapse; max-width:100%; border-radius:1em; font-size:.5rem; display:inline-block;}
div#container div#database table {box-shadow: 0 0 .25em rgba(0,0,0, 0.5); transition:.25s;}
div#container div#database table.dbt {}
div#container div#database table.result {border:solid dodgerblue;}
div#container div#database table.gone {display:none;}
div#container div#database table:hover {box-shadow: 0 0 .5em rgba(0,0,0, 0.5);}
div#container div#database table h3,
div#container div#database table h4 {margin:.5em 0 .25em;}
div#container div#database table tr.headrow {background-color:#fe7;}
div#container div#database table tr th,
div#container div#database table tr td {border:1px solid #0001; color:#000C; padding:.75em .5em .5em;}
div#container div#database table tr.attrList th {background-color:#29f;}
div#container div#database table tr.attrList th.primary {background-color:#9acd32;}


/* Wider Screen */
@media screen and (min-width:1000px) {
	div#container {display:flex; flex-direction:column; height:100%; }
}

/* Narrow Screen */
@media screen and (max-width:999px) {
	div#container div#user {flex-direction:column;}
	div#container div#user div#userquery {flex:0 1 auto; margin:.5rem 0;}
	div#container div#user div#tablefilter {flex:0 1 auto; margin:.5rem 0;}
	div#container div#user div#tablefilter label {flex:0 0 20%;}
}

/* Narrow Screen */
@media screen and (max-width:700px) {
	div#container div#user div#tablefilter label {flex:0 0 25%;}
}

/* Narrow Screen */
@media screen and (max-width:500px) {
	div#container div#user div#tablefilter label {flex:0 0 50%;}
}

/* Short Screen */
@media screen and (max-height:700px) {
	/*div#container {height:200%;}*/
	/*div#container div#user {flex:0 1 auto;}*/
	/*div#container div#database {flex:0 1 auto;}*/
}