header,footer {
	background: #80d0d0;
}
header {
	height: 3rem;
	overflow: hidden;
}
header td {
	vertical-align: top;
}
header input[type="text"] {
	width: 80%;
}
header table td:last-child {
	justify-content: right;
}
.icon	{
	width:2em;
}
header table {
	width: 100%;
}
footer {
	position: fixed;
	left: 5px;
	right: 5px;
	bottom: 0;
	z-index: 10;
	min-height: 1.5rem;
}
.right_text {
	text-align: right;
}
.nomargin {
	margin: 0;
}
.text-center {
	text-align: center;
}
.right-float {
	float: right;
	display: flex;
	padding-top:0.5rem;
}
#login,#pass {
	font-size: 50%;
	width: 6rem;
}
button {
	border: 1px solid;
	border-radius: 0.2em;
	padding: 0.1rem 0.3rem;
	margin: 0 1em 6px 1em;
	box-shadow: 5px 5px grey;
	user-select: none;
}
button:hover {
	background-color: white;
}
button:active {
	transform: translate(2px,2px);
	box-shadow: 3px 3px black;
}
button img {
	width: 1rem;
	height: 1rem;
}
.maindiv {
}
nav {
	padding-bottom: 2px;
	background: #f0f0f0;
}
.dirdiv {
	border: 1px solid;
	overflow-y: scroll;
	min-height: 120px;
	max-height: calc(100vh - 7rem - 9px);
}
.dragover {
	outline: 3px solid green;
	background: #d0ffd0;
}
.small {
	max-height: 50vh;
}
.dirlist {
	width: 100%;
}
.dirlist th {
	position: sticky;
	top: 0;
	background: #f8f8f8;
}
.dirlist th:first-child,.dirlist td:first-child {
	width:1rem;
}
.dirlist tr th:nth-last-child(1),.dirlist tr td:nth-last-child(1) {
	width: 8rem;
	text-align: center;
}
.dirlist tbody td:nth-last-child(2),.dirlist tbody td:nth-last-child(3) {
	text-align: right;
	width: 4rem;
	padding-right: 0.3rem;
}
.dirlist tbody tr:hover {
	background: #c0c0c0;
}
.alertdiv {
	width: 50%;
	position: fixed;
	left: 25vw;
	top: 20vh;
	border: 3px double;
	background: #e0c0c0;
	box-shadow: 5px 5px grey;
	padding: 1em;
	z-index: 20;
}
.form_div {
	position: fixed;
	width: 50%;
	left: 20vw;
	top: 20vh;
	background: #e0ffff;
	border: 3px double;
	box-shadow: 5px 5px grey;
	z-index: 20;
	display: none;
	opacity: 0;
	transition: opacity 1s;
}
.active_div {
	z-index: 30;
}
.form_div_err {
	left: 10vw;
	top: 25vh;
	background: #ffe0e0;
	z-index: 15;
}
.form_div>div:first-child {
	width: 100%;
	text-align: center;
	background: #c0c0ff;
	user-select: none;
}
.form_div_inner {
	max-height:50vh;
	margin: 0.5rem;
	word-break: break-word;
	overflow: auto;
}
form {
	margin-bottom: 0.3rem;
}
form table {
	width: 100%;
	border: 0;
}
#form_data {
	width: 94%;
}
.invisible {
	display: none;
}
.nohidden {
	display: initial;
	opacity: 1;
}
#dirlistdesc:hover {
	cursor: pointer;
}
.figure {
	width: 100px;
	height: 120px;
	color: blue;
	border: 1px solid black;
	margin: 0.5rem;
	float: left;
	cursor: pointer;
	overflow: hidden;
}
.visited {
	color: purple;
}
.figimg {
	width: 100%;
	height: 75%;
	background-image: url('../img/unknown.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.figcap {
	width: 100%;
	word-wrap: break-word;
	overflow: hidden;
	font-size: 80%;
	text-align: center;
}
.figimg input[type="checkbox"] {
	position:relative;
	width: 30px;
	height: 30px;
	margin:0;
	opacity: 0.6;
	cursor: default;
	z-index: 5;
}
.figimg input[type="checkbox"]:hover {
	opacity: 1;
}
nav input[type="checkbox"] {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0 1rem;
	transform: translateY(8px);
}
.redbackground {
	background: red;
}
.disabled {
	opacity: 0.5;
}
.upload-inprogress,.upload-inprogress::marker {
	color: blue;
}
.upload-inprogress::marker {
	animation-duration:0.5s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-name: oO;
}
@keyframes oO {
	from {content: '⇪ ';font-size: 1%;}
	to {content: '⇪ ';font-size: 90%;}
}
.upload-done,.upload-done::marker {
	color: green;
}
.upload-failed,.upload-failed::marker {
	color: red;
}
ul {
	margin: 0;
}
@media only screen and (max-width:480px) {
	header input[type="text"] {
		width: 70%;
	}
	table {
		font-size: 0.8rem;
	}
	h1 {
		font-size: 1em;
	}
	button {
		margin: 0 0.3rem 6px 0.3rem;
		font-size: 0.6em;
	}
	nav input[type="checkbox"] {
		margin: 0 0.3rem;
	}
	.figure {
		margin: 0.2rem;
		width: 80px;
		height: 100px;
	}
	.figcap {
		font-size: 60%;
	}
}