@charset "utf-8";
/*.inner::after is for filtered*/
/*hide everything until page loaded to prevent style pops*/
.scripts-enabled #content {
	opacity: 0;
}
.loading-finished #content {
	transition: opacity 500ms;
	opacity: 1;
}

/*tags this page*/
.scripts-enabled #tags-this-page.hidden {
	padding-bottom: 0;
	border-bottom-left-radius: 0.5rem;
}
.scripts-enabled #tags-this-page h2::after {
	content: " ▲";
}
.scripts-enabled #tags-this-page.hidden h2::after {
	content: " ▼";
}
.scripts-enabled #tags-this-page h2 {
	cursor: pointer;
}
.scripts-enabled #tags-this-page.hidden :not(h2) {
	display: none;
}

/*dim shade*/
.scripts-enabled #dim {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.75;
}
.scripts-enabled .preferences-open #dim {
	display: block;
}

/*preferences*/
.scripts-enabled #preferences-link {
	text-decoration: underline;
	cursor: pointer;
}
.scripts-enabled #preferences {
	display: none;
	width: 460px;
	position: fixed;
	top: calc(50vh - 128px);
	left: calc(50% - 230px);
}
.scripts-enabled .preferences-open #preferences {
	display: block;
}
.scripts-enabled #preferences input[type=button] {
	background-color: var(--danger-background);
	color: var(--danger-foreground);
	border-color: var(--form-border);
}
@media only screen and (max-width: 512px)
{
	.scripts-enabled #preferences {
		width: calc(100% - 3rem);
		min-width: auto;
		top: 1.5rem;
		left: 1.5rem;
	}
}

/*jumbo thumbnails*/
.scripts-enabled.jumbo-thumbnails {
	--per-search-results-row: 4;
}
@media only screen and (max-width: 1024px) {
	.scripts-enabled.jumbo-thumbnails {
		--per-search-results-row: 2;
	}
}
@media only screen and (max-width: 600px) {
	.scripts-enabled.jumbo-thumbnails {
		--per-search-results-row: 1;
	}
}

/*uncropped thumbnails*/
.scripts-enabled.uncropped-thumbnails .thumbnail video,
.scripts-enabled.uncropped-thumbnails .thumbnail picture,
.scripts-enabled.uncropped-thumbnails .thumbnail picture img {
	object-fit: contain;
}

/*filtered*/
.scripts-enabled .filtered .inner::before {
	display: block;
	content: "";
	position: absolute;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url(file_filtered.svg);
	background-color: var(--filtered-color);
	background-size: 72%;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
}
/*for filtered thumbnails hide everything inside of .inner and the category overlay*/
.scripts-enabled .filtered .inner *,
.scripts-enabled .filtered .inner::after {
	opacity: 0;
	/*cursor: not-allowed;*/
}
/*set indicator needs to specifically be suppressed?*/
.scripts-enabled .filtered .set-indicator {
	opacity: 0;
}

/*hide filtereded entirely*/
.scripts-enabled.hide-filtered .filtered {
	display: none;
}

/*hover to preview filtered*/
.scripts-enabled.preview-filtered .filtered:hover .inner::before {
	display: none;
}
.scripts-enabled.preview-filtered .filtered:hover .inner * {
	opacity: 1;
}
.scripts-enabled.preview-filtered .filtered:hover .set-indicator {
	opacity: 1;
}

/*show unblurred r18*/
.show-r18 .thumbnail[data-r18] picture {
	filter: initial;
}

/*tag search*/
.scripts-enabled #section-search-files #tags {
	display: none;
}
.scripts-enabled .tags-preview-wrapper {
	font-size: 0;
    text-align: left;
    border: 1px solid var(--form-border);
	border-bottom-color: var(--input-border);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
	border-bottom: none;
    background-color: var(--input-background);
    color: var(--input-foreground);
    padding-left: 1px;
    padding-bottom: 1px;
}
.scripts-enabled .tags-preview-wrapper.empty {
	display: none;
}
.scripts-enabled .tags-preview-wrapper + input[type=text] {
	width: 100%;
	border: 1px solid var(--form-border);
	border-bottom: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top-width: 0px;
}
.scripts-enabled .tags-preview-wrapper.empty + input[type=text] {
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	border-top-width: 1px;
}
.scripts-enabled .tags-preview {
	padding-left: 0.2px;
}
.scripts-enabled .tags-preview .tag {
	cursor: pointer;
}
.scripts-enabled .tags-preview .tag::after {
	content: "𝘅";
	display: inline-block;
	font-size: 13px;
	color: inherit;
	text-decoration: inherit;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
	padding-bottom: 2px;
	text-align: center;
	cursor: pointer;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.25);
}
.scripts-enabled .tags-preview .tag:hover::after {
	background-color: rgba(0, 0, 0, 0.5);
}

/*upload field*/
/*uncomment this when i put back autoupload* /
.scripts-enabled label[for=file-upload] {
	width: 100%;
	text-align: center;
	font-size: 1.75rem;
	line-height: calc(128px - 0.5rem);
	height: 128px;
	position: relative;
	cursor: pointer;
}
.scripts-enabled label[for=file-upload]::before {
	content: "";
	display: block;
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	width: calc(100% - 2rem);
	height: calc(100% - 2rem);
	border: 0.5rem dashed white;
	border-radius: 0.5rem;
}
.scripts-enabled #file-upload {
	display: none;
}
/**/

/*file edit*/
.scripts-enabled #copy-tags{
	font-size: 1rem;
	text-align: left;
	margin-bottom: 0.5rem;
}
.scripts-enabled #copy-tags a {
	font-size: 1rem;
	cursor: pointer;
	text-decoration: underline;
	color: var(--foreground);
}
.scripts-enabled #section-edit-file .tag-field {
	border-left: 1px solid var(--form-border);
	border-right: 1px solid var(--form-border);
}
.scripts-enabled #section-edit-file .tags-preview-wrapper.empty + .tag-field {
	border-top: 1px solid var(--form-border);
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
}