/*
	Sngle-File Share-Frontend
*/
/* Common styles */
* {
	--background: 		rgb(40,40,40);
	--text-title: 		rgb(30,120,220);
	--download:				rgb(0,180,50);
	--newfolder:			rgb(0,180,30);
	--newtoken:				rgb(0,180,30);
	--upload:					rgb(0,130,255);
	--delete:					rgb(200,50,50);
	--separator:			rgb(255,50,50);
	--text-high: 			rgb(255,255,255);
	--text-default: 	rgb(200,200,200);
	--text-medium:		rgb(140,140,140);
	--text-lower: 		rgb(105,105,105);
	--text-low: 			rgb(90,90,90);
	--text-dark: 			rgb(50,50,50);
	--border-text:		rgb(170,170,170);
	--border-media:		rgb(50,50,50);
	--border-file:		rgb(70,70,70);
	--border-player:	rgb(130,130,130);
	--error-color: 		rgb(250,40,40);
	--progress: 			rgb(0,220,0);
	font-family: Verdana;
}
html {
	height: 100%;
}
body {
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: var(--background);
	color: var(--text-default);
}
form {
	margin: 0;
	padding: 0;
	height: 100%;
}
div {
	box-sizing: border-box;
}
pre {
}
input {
	border: 1px solid var(--text-color);
	padding: 3px;
}
input[type="file"] {
	display: none;
}
a {
	color: var(--text-default);
	text-decoration: none;
}
a:visited {
	color: none;
}
a:hover {
	color: var(--text-high);
}
a.renew,
a.delete {
	font-size: 1.2rem;
}
a.renew {
	opacity: .8;
	color: var(--download);
}
a.renew.low {
	opacity: .4;
}
i.delete,
a.delete {
	color: var(--delete);
}
i.newfolder,
i.sendInvitation {
	color: var(--newfolder);
}
i.new-upload-token {
	color: var(--newtoken);
}
label.file-admin,
label.file-client {
	cursor: pointer;
}
label.file-admin i {
	color: var(--upload);
}
.nowrap {
	white-space: nowrap; 
}
.text-low {
	color: var(--text-low) !important;
}
.text-dark {
	color: var(--text-dark) !important;
}
.status {
	font-weight: normal;
}
.error {
	color: var(--error-color);
}
/* Login/Logout */
input.login-button {
	width: 100%;
}
div.login {
	padding-top: 3.0em;
}
div.login table {
	border-collapse: collapse;
}
div.login table td {
	padding: .2em;
}
div.login input {
	background: var(--text-low);
	color: var(--text-default);
	border: 1px solid var(--text-medium);
}
div.alert.error {
	font-size: 0.9rem;
	padding: 1.5em 0 0 0;
	color: var(--error-color);
	text-align: center;
}

/* Client-Content */
div.client-container {
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}
div.client-item {
	width: 350pt;
	max-width: 95%;
	max-height: 50%;
	text-align: center;
	color: var(--border-text);
	border: 0px solid red;
}
div.client-item.preview {
	max-height: 40%;
}

div.client-item + div.client-item {
	margin-top: 2vh;
}
div.client-item.preview + div.client-item {
	margin-top: .5vh;
}
div.client-item a {
	color: inherit;
}
div.client-item.title {
	width: 280pt;
	font-size: 1.2rem;
	padding-bottom: .3em;
	border-bottom: 1px solid var(--separator);
	color: var(--text-default);
}
div.client-item.text {
	font-size: 0.85rem;
	line-height: 145%;
}
div.client-item.text .smaller {
	font-size: 0.70rem;
}
div.client-item.success div:nth-child(1) {
}
div.client-item.success div:nth-child(2) {
	color: var(--newtoken);
}
div.client-item.success a:hover {
	border-bottom: 1px dotted var(--newtoken);
}

div.client-buttons {
	display: flex;
	flex-direction: row;
	gap: 0 12pt;
	justify-content: center;
	font-size: 1.4rem;
}
div.client-buttons div.download i {
	color: var(--download);
	filter: brightness(.9);
}
div.client-buttons div.disabled a {
	color: var(--text-low);
	pointer-events: none;
}
div.client-buttons div.home a {
	color: var(--upload);
	filter: brightness(.8);
}

div.client-item div.upload-area {
	position: relative;
	border: 1px solid var(--text-medium);
	background: var(--text-low);
	height: 55pt;		/* height: client-item = 350pt */
}
div.client-item div.upload-area label {
	position: absolute;
	top: 27%;
	height: 46%;
	left: 5%;
	width: 90%;
	color: rgba(255,255,255,.8);
	text-shadow: 1px 1px 2px var(--text-dark);	
	background: var(--text-medium);
	border: 0px solid red;
	z-index: 10;
	cursor: pointer;
}
div.client-item div.upload-area label:hover {
	color: rgba(255,255,255,1.0);
}
div.client-item div.upload-area label.disabled {
	color: rgba(255,255,255,.5);
	text-shadow: 1px 1px 2px var(--text-medium);	
	cursor: default;
}
div.client-item div.upload-area label div {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
div.client-item div.upload-area div.client-status {
	position: absolute;
	z-index: 20;
	left: 0;
	bottom: 0;
	width: 100%;
	font-size: .9rem;
	line-height: 1;
	color: var(--text-default);
	/* offset-x | offset-y | blur-radius | color */
	text-shadow: 1px 1px 2px var(--text-dark);	
	cursor: default;
}
div.client-item div.upload-area div.client-progress {
	position: absolute;
	z-index: 10;
	display: none;
	left: 0;
	bottom: 0;
	height: 15px;
	width: 100%;
	border-top: 1px solid var(--text-medium);
	background: var(--text-lower);
}
div.client-item div.upload-area div.client-progress div {
	position: relative;
	height: 100%;
	width: 70%;
	background: rgb(0,150,0);
}

div.client-item div.upload-area div + div {
	margin-top: 0.5em;
}

/* Medien */
div.client-item img,
div.client-item audio,
div.client-item video {
	max-height: 100%;
	max-width: 100%;
	border: 1px solid var(--border-player);
	vertical-align: middle;
}
div.client-item.object {
	height: 400px;
}
div.client-item.object object {
	width: 70%;
	height: 100%;
}
div.client-item.object object img {
	border: none;
	max-height: 100%;
	max-width: 100%;
}
div.client-item.preview img {
	box-sizing: border-box;
	border: none;
}
div.client-item div.text-preview {
	border: 1px solid var(--border-player);
	max-width: 100%;
	max-height: 60vh;
	padding: .3em;
	overflow: scroll;
	font-family: "Courier";
	font-size: .7rem;
	white-space: pre;
	line-height: 125%;
	text-align: left;
}
div.client-item.audio {
	border: 0px solid red;
}
div.client-item audio {
	width: 99%;
}

/* Footer + Errors */
div.client-item.footer {
	width: 30em;
	max-width: 95%;
	margin-top: 1.6em;
	padding-top: .03em;
	color: var(--text-lower);
	border-top: 1px solid var(--text-lower);
	line-height: 155%;
	font-size: .70rem;
}
div.client-item.footer i {
	font-size: .60rem;
}
div.client-item.footer a:hover {
	color: var(--text-medium);
}

div.client-item.error {
	width: 18em;
	padding: .5em 2.0em;
	border: 1px solid var(--error-color);
	color: var(--error-color);
}

/* Admin-Form */
div.admin-container {
	text-align: center;
	font-size: .8rem;
}
div.share-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 1.0em auto;
	max-width: 100%;
}
div.share-block {
	margin: 10pt 2pt;
	padding: 0;
	width: 550pt;
	max-width: 100%;
	text-align: left;
}
div.share-block div.header {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 20pt; 
	font-weight: bold;
	background: var(--text-low);
	padding: .3em 0;
}
div.share-block div.header > div {
	min-width: 17pt;
	text-align: center;
}
div.share-block div.header i {
	font-size: 1.4em;
	cursor: pointer;
}
div.share-block div.item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	background: var(--text-dark);
	font-size: .93em;
	line-height: 165%;
}
div.share-block div.item + div.item {
	border-top: 1px solid var(--border-file);
}
div.share-block div.item div.cell {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
div.share-block div.item div.cell i {
	padding: 0 0.1em;
	font-size: .9em;
}
div.share-block div.item div.cell:nth-child(1) {
	width: 30%;
	min-width: 160pt;
}
div.share-block div.item div.cell:nth-child(2) {
	width: 8%;
	min-width: 49pt;
	text-align: right;
}
div.share-block div.item div.cell:nth-child(3) {
	width: 13%;
	min-width: 66pt;
	text-align: center;
}
div.share-block div.item div.cell:nth-child(4) {
	width: 40%;
	min-width: 220pt;
}
div.admin-buttons {
	max-width: 100%;
	margin: 0 2pt;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2pt;
	justify-content: center;
}
div.admin-buttons > div {
	width: 75pt;
	background: var(--text-dark);
	border: 1px solid var(--text-low);
	padding: .3em .6em;
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	gap: .5em;
}
div.admin-buttons > div:hover {
	border: 1px solid var(--text-medium);
	color: var(--text-high);
	cursor: pointer;
}
div i.button:hover {
	color: var(--text-high);
	cursor: pointer;
}
div.admin-buttons > div i {
}
div.admin-newfolder,
div.admin-invite {
	margin: 1.0em 0;
	display: none;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5pt 5pt;
	justify-content: center;
	align-items: center;
}
div.admin-newfolder > div {
	border: 0px solid red;
}
div.admin-newfolder input,
div.admin-invite input {
	background: var(--text-low);
	color: var(--text-high);
	border: 1px solid var(--text-medium);
	font-family: Courier;
}
div.admin-newfolder input {
	width: 80pt;
}
div.admin-newfolder i {
	font-size: 1.5em;
	cursor: pointer;
	padding-top: .2em;
}
div.admin-invite {
}
div.admin-invite div.flex {
	display: flex;
	flex-direction: row;
	gap: 0 5pt;
	align-items: center;
	justify-content: center;
	max-width: 70%;
}
div.admin-invite div.flex div {
}
div.admin-invite input[type="text"] {
	width: 60pt;
}
div.admin-invite input[type="email"] {
	width: 150pt;
}
div.admin-invite i {
	font-size: 1.2em;
}

@media all and (max-width: 320px) {
	body {
		font-size: 0.9rem;
	}
}
@media all and (max-width: 270px) {
	body {
		font-size: 0.8rem;
	}
}