html, body {
	font-family: monospace;
	font-size: 16px;
}

a {
	color: #0066cc;
	text-decoration-line: overline;
}

input, button {
	color: #0066cc;
	cursor: pointer;
	padding: 0.25em 1em;
	font-family: monospace;
	font-size: 1rem;
	background-color: white;
}
input:hover, input:active,
button:hover, button:active {
	/*background-color: #eeeeee;*/
}

hr {
	margin-top: 1em;
	border: 0;
	border-top: #eeeeee 5px dotted;
}



.italic {
	font-style: italic;
}



.wrapper {
	margin: 0 auto;
	max-width: 40rem;
}
@media only screen and (min-width: 800px) {
	.wrapper {
		margin-top: 1rem;
	}
}

#overlay {
	display: none;
	
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	
	justify-content: center;
	align-items: flex-start;
	background-color: rgba(255,255,255,0.85);
}
#overlay.visible {
	display: flex;
}
	#overlay p {
		margin-top: 11rem;
		padding: 1rem 2rem;
		border-radius: 10px;
		background-color: white;
	}


#drop-file-zone {
	box-sizing: border-box;
	background-color: #eeeeee;
	background-image: linear-gradient(45deg, #eeeeee 25%, #fafafa 25%, #fafafa 50%, #eeeeee 50%, #eeeeee 75%, #fafafa 75%, #fafafa 100%);
	background-size: 56.5px 56.5px;
	border-radius: 10px;
	width: 100%;
	padding: 10px;
}
	#drag-upload-file {
		width: 75%;
		margin: 0 auto;
	}
		#drag-upload-file p {
			text-align: center;
		}
		#drag-upload-file .button-upload {
			border: 1.5px solid #0066cc;
			border-radius: 5px;
			padding: 0.5rem 1rem;
			text-transform: uppercase;
		}
		#drag-upload-file #selectfile {
			display: none;
		}


#listing {
}
	#listing ul {
		list-style: none;
		padding-left: 1rem;
	}
	#listing li {
		word-break: break-all;
		padding: 0.1rem 0;
	}
	#listing a {
	}
	#listing a.download-item,
	#listing a.delete-item {
		text-decoration: none;
		border: 1.5px solid #0066cc;
		border-radius: 5px;
		padding: 0 0.75rem;
		margin-left: 0.5rem;
	}
	#listing a.download-item {
		border-radius: 5px 0 0 5px;
	}
	#listing a.delete-item {
		border-radius: 0 5px 5px 0;
		border-left: none;
		margin-left: -1px;
	}