html, body {
	margin: 0;
	color: black;
	background-color: white;
	width: 100vw;
	height: 100vh;
}
body {
	overflow: hidden;
}
a, button, img, input, textarea {
	margin: unset;
	padding: unset;
	color: unset;
	background-color: unset;
	font-size: unset;
	font-family: unset;
	text-decoration: unset;
	border: unset;
	outline: unset;
}
a, button, img {
	display: block
}
a, button {
	cursor: pointer;
}
img {
	max-width: 100%;
	max-height: 100%;
}
table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
}
th, td {
	white-space: nowrap;
	padding: 2px 10px;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
span {
	outline: none;
}
.hidden {
	display: none;
}
.flex {
	display: flex;
}
.flexcol {
	display: flex;
	flex-direction: column;
}
.ellipsis {
	overflow: hidden;
/*	max-width: 30vw; */
	text-overflow: ellipsis;
	white-space: nowrap;
}
.maxw {
	max-width: 30vw;
}
.aic {
	align-items: center;
}
.flexsb {
	display: flex;
	justify-content: space-between;
}
.relative {
	position: relative;
}
.tcenter {
	text-align: center;
}
.center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.bad_form {
	display: none;
}
.gray {
	color: gray;
}
.highlight {
	background-color: #1e1e1e;
}
.popup {
	background-color: white;
	border: 1px solid gray;
	border-radius: 8px;
	padding: 40px;
	max-height: 75%;
	box-sizing: border-box;
	overflow-y: auto;
}
#login_username.wrong, #login_password.wrong, #mkdir_input.wrong, #rename_input.wrong {
	border-color: red;
}
.undo {
	width: 100%;
	height: 100%;
	text-decoration: underline;
	color: red;
}
.undo:focus-visible {
	outline: 3px solid yellow;
}
span.dir {
	color: #0008ff;
}



/*
 *	Background
 */
#bg, #bg1, #bg2, #bg3, #bg1::before, #bg2::before, #bg3::before {
	position: absolute;
}
#bg, #bg1::before, #bg2::before, #bg3::before {
	width: 100%;
	height: 100%;
}
#bg1::before, #bg2::before, #bg3::before {
	content: "";
	left: 0;
	top: 0;
	background-image:
		url("/noise.jpg");
	background-color: transparent;
	background-repeat: repeat;
}
#bg {
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 30%, #ffffff, rgba(0, 0, 0, 0)),
		url(data:image/png;base64,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);
}
#bg.blur {
	filter: blur(16px);
	opacity: 0.7;
	pointer-events: none;
	user-select: none;
}
#bg1 {
	bottom: -64px;
	left: 20%;
	width: clamp(300px, 60%, 850px);
	height: 600px;
	background-color: #57f9b4;
	border-radius: 24px;
}
#bg2 {
	bottom: -64px;
	right: 10%;
	width: clamp(400px, 40%, 650px);
	height: 400px;
	background-color: #e71276;
	border-radius: 44px;
}
#bg3 {
	bottom: -64px;
	left: -10%;
	width: clamp(300px, 50%, 900px);
	height: 250px;
	background-color: #7ff3ff;
	border-radius: 80px;
}
#bg1::before {
	background-size: 500px;
	border-radius: 24px;
	opacity: 0.15;
}
#bg2::before {
	background-size: 700px;
	border-radius: 44px;
	opacity: 0.1;
}
#bg3::before {
	background-size: 300px;
	border-radius: 80px;
	opacity: 0.25;
}



/*
 *	Content
 */
#container {
	position: relative;
	width: 100%;
	height: 100vh;
}
#container.blur {
	filter: blur(4px);
	pointer-events: none;
	user-select: none;
}



/*
 *	Header
 */
#header, #slider, .option {
	height: 50px;
}
#slider, .option {
	width: 100px;
}
#header {
	margin-bottom: 64px;
	display: flex;
	width: 100%;
	background: white;
	border-bottom: 1px solid gray;
}
#slider {
	position: absolute;
	left: 0;
	top: 0;
	background: #e0e0e0;
	transition: transform 0.2s ease-out;
}
.option {
	z-index: 1;
	color: #404040;
	transition: color 0.1s;
	transition-delay: 0.05s;
}
.option.selected {
	color: #000000;
}
#home_button:focus-visible, #search_button:focus-visible, #history_button:focus-visible, #logout_button:focus-visible {
	outline: 3px solid yellow;
}
#home_button, #search_button, #history_button, #logout_button {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}



/*
 *	Login
 */
#login_form, #login_error {
	background-image: linear-gradient(320deg, #dfdfdf, #ffffff);
	font-family: arial;
	letter-spacing: 2px;
	background-color: #eeeeee;
	box-sizing: border-box;
	width: clamp(340px, 80%, 440px);
	border-radius: 12px;
	box-shadow: 3px 3px 18px 4px rgba(0, 0, 0, 0.22);
}
#login_form {
	display: flex;
	flex-direction: column;
	padding: 40px;
	gap: 22px;
}
#login_error {
	padding: 70px 40px;
	text-align: center;
}
#login_error_heading {
	margin: 0;
}
#login_error_text {
	margin: 36px 0;
	line-height: 1.3;
}
#login_error_back_span, #login_submit_span {
	z-index: 2;
	position: relative;
}
#login_error_back, #login_submit {
	overflow: hidden;
	border: 3px solid white;
	height: 100%;
}
#login_submit {
	margin-top: 6px;
	background: linear-gradient(320deg, #fbfbfb, #e8e8e8);
	font-weight: bold;
	text-align: center;
}
#login_error_back {
	border-radius: 999px;
	padding: 14px;
	position: relative;
	margin: 0 auto;
	width: 60%;
}
#login_username, #login_password {
	display: block;
	background-color: white;
	border: 2px solid #939393;
	transition: border-color 0.3s ease;
}
#login_username, #login_password, #login_submit {
	border-radius: 8px;
	padding: 14px;
	box-sizing: border-box;
	font-size: 1.3rem;
	width: 100%;
	position: relative;
}
#login_eye {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 11px;
	right: 11px;
}
#login_eye:focus-visible {
	background: yellow;
}
#login_eye_img {
	margin: 3px;
	width: 26px;
	height: 26px;
}
#login_submit::after, #login_error_back::after {
	content: "";
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	height: 120%;
	width: 120%;
	border-radius: 20%;
	background-color: white;
	scale: 0 0;
	translate: 0 140%;
	transition: scale 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), translate 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#login_submit:hover::after, #login_submit:focus-within::after, #login_error_back:hover::after, #login_error_back:focus-within::after {
	scale: 1.5 1.5;
	translate: 0 0;
	border-radius: 50%;
}



/*
 *	Stuff
 */
#main {
	font-size: 20px;
	width: clamp(0px, 85%, 1200px);
	margin: 0 auto;
	height: calc(100vh - 32px - 50px - 32px - 32px);
	border-radius: 8px;
	background: #ffffff;
	box-sizing: border-box;
	padding: 8px 0 8px 30px;
	border: 1px solid gray;
}
.scroll {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}
.content {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 22px 30px 22px 0;
}
.listing {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.listing:hover {
	background-color: #f0f0f0;
}
.listing:not(:last-child)::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	background: #d0d0d0;
	bottom: -1px;
	left: 0;
}
.listing_link:focus-visible, .listing_text:focus-visible, #mkdir:focus-visible, #upload:focus-visible {
	background: yellow;
}
.listing_link, .listing_text, #mkdir, #upload {
	overflow: hidden;
	max-width: calc(100% - 124px - 16px - 16px);
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 5px 16px;
}
.listing_link {
	flex: 1;
}
#edit {
	display: flex;
	gap: 10px;
	padding: 5px 16px;
}
.info:focus-visible, .download:focus-visible, .rename:focus-visible, .delete:focus-visible {
	background: yellow;
}
.edit_icon {
	margin: 3px;
	height: 18px;
}
#preview {
	height: calc(100% - 22px - 22px);
}
#preview_header {
	position: relative;
	width: 100%;
	padding: 5px 0;
}
#preview_header::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	background: #d0d0d0;
	bottom: -1px;
	left: 0;
}
#preview_back {
	margin-left: 16px;
}
#preview_back:focus-visible {
	outline: 3px solid yellow;
}
#preview_content {
	height: 100%;
	margin: 0 16px;
}
#preview_content_textarea {
	background: #e0e0e0;
	resize: vertical;
	width: 100%;
}
#preview_content_iframe {
	all: unset;
	height: 100%;
	aspect-ratio: 7.5 / 11;
}
#preview_content_zip {
	background: #e0e0e0;
	width: 100%;
}



/*
 *	Popups
 */
#overlay {
	font-size: 20px;
}
#rename_submit, #mkdir_submit, #upload_submit, #delete_submit {
	margin-left: 16px;
	width: 30px;
	height: 30px;
}
#rename_submit:focus-visible, #mkdir_submit:focus-visible, #upload_submit:focus-visible, #delete_submit:focus-visible {
	background: yellow;
}
.popup_icon {
	height: 24px;
	width: 24px;
	margin-left: 16px;
	margin: 3px;
	max-width: unset;
}
#error_popup {
	border-color: red;
}
#error_heading {
	margin: 0;
}
#error_text {
	margin: 26px 0 0 0;
}
#rename_input, #search_input, #mkdir_input {
	border-radius: 8px;
	padding: 6px 12px;
	border: 2px solid #939393;
	transition: border-color 0.3s ease;
}
#search_popup {
	width: max-content;
}
#search_content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.search_link:focus-visible {
	outline: 3px solid yellow;
}
#nun {
	height: 16px;
	width: 100%;
}
#upload_input {
	position: absolute;
	height: 1px;
	width: 1px;
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
}
#upload_popup {
	min-width: 320px;
}
#history_popup {
	font-size: 1rem;
	font-family: monospace;
}

@media only screen and (max-device-width: 768px) and (max-width: 1000px) {
	html {
		font-size: 0.85rem;
	}
	#bg {
		display: none;
	}
	#main {
		width: 100%;
		border-radius: unset;
		border: unset;
		border-top: 1px solid gray;
		border-bottom: 1px solid gray;
	}
	#header {
		position: sticky;
		top: 0;
	}
	.popup {
		padding: 30px 15px;
		max-width: 100vw;
	}
}