/* "Brink" by Valerio Lyndon
 * Version 2.1.3
 * 
 * = TABLE OF CONTENTS =
 * 
 ! IMPORTS
 * 
 ! VARIABLES
 @ User
 @ Internal
 * 
 ! PAGE-BASE
 @ Scrollbars
 @ Generic
 @ Containers
 * 
 ! HEADER
 * 
 ! USER-MENU
 * 
 ! BANNER
 * 
 ! STATUS-MENU
 @ Search
 * 
 ! SORT-BUTTONS
 @ Filters
 @ Sort-By
 * 
 ! LIST
 @ Item-Base
 @ Image
 @ Status
 @ Title
 @ Notes
 @ Progress/Score
 @ Tags
 @ Number
 @ Type
 @ Rated
 @ MAL Scores
 @ Popularity
 @ Season
 @ Genre/Demographic/Studio/Licensor/Magazine
 @ Dates
 @ Priority
 @ Storage
 @ More-Info
 @ Loading-Icon
 * 
 ! OVERLAYS
 @ GDPR
 @ Streaming
 @ iFrames
 @ Rewatch-Box
 @ Filter-Menu
 * 
 ! FOOTER
 * 
 ! MEDIA-QUERIES
 * 
 ! FIXES
 * 
 ! MODS
 */


/*==============================*\
  !IMPORTS
\*------------------------------*/

@\import "https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap";
@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/resources/font-awesome-4.7.0/css/font-awesome-force-legacy.min.css";


/*==============================*\
  !VARIABLES @User
\*------------------------------*/

:root {
	/* USER OPTIONS
	 * 
	 * toggleStats / Toggles list statistics (found in the footer)
	 * valid values: visible / hidden
	 * 
	 * toggleStreaming / Toggles anime streaming service button.
	 * valid values: visible / hidden
	 * 
	 * toggleTopRating(Gold/Silver/Bronze) / Toggles banners on top of highly rated items.
	 * valid values: visible / hidden
	 * 
	 * bgDimness / Changes dimming of background image / Higher = Dimmer.
	 * min value: 0% / max value: 100%
	 * 
	 * bannerVignetteOpacity / Changes opacity of banner image vignette / Higher = More Opaque.
	 * min value: 0% / max value: 100%
	 * 
	 * imageBrightness(Hov) / Changes lightness of cover images / Higher = Brighter.
	 * min value: 0% / max value: 100%
	 * 
	 * imageBlurHov / Changes blurring of cover images / Higher = More
	 * valid values: any positive number value, ending in "px"
	 * 
	 * imageFade / Changes fading effect on bottom of cover images / Higher = More
	 * min value: 0 / max value: 1
	 * 
	 * infoBGOpacity / Changes opacity of background on list items for improved readability / Set to 0% to hide
	 * min value: 0% / max value: 100%
	 * 
	 * numberOpacity / Changes opacity of number text (or whichever column is in its place) / Higher = More opaque
	 * min value: 0% / max value: 100%
	 */
	
	--toggleStats: hidden;
	--toggleStreaming: visible;
	--toggleTopRatingGold: visible;
	--toggleTopRatingSilver: visible;
	--toggleTopRatingBronze: hidden;
	--bgDimness: 50%;
	--bannerVignetteOpacity: 90%;
	--imageBrightness: 85%;
	--imageBrightnessHov: 50%;
	--imageBlurHov: 2px;
	--imageFade: .95;
	--infoBGOpacity: 0%;
	--numberOpacity: 80%;
	
	/* THEME COLOURS
	 * 
	 * Colours are HSL values but without their surrounding parentheses.
	 * To get the correct values, simply strip away the surrounding parentheses and blurb.
	 * For instance, "hsl(244, 42%, 82%)" would simply become "244, 42%, 82%".
	 * For help with HSL: https://www.w3schools.com/colors/colors_hsl.asp
	 * 
	 * For help with what each colour controls, see the forum post: https://myanimelist.net/forum/?topicid=1772180
	 */
	
	--bg: 240, 3%, 9%;
	--bgAlt: 240, 3%, 14%;
	--btn: 240, 3%, 16%;
	--btnAlt: 240, 3.5%, 21%;
	--btnLight: 240, 100%, 94%, 4%;
	--btnAccent: 240, 17%, 34%;
	--accent: 240, 75%, 77%;
	
	--text: 0, 0%, 100%;
	--textProminent: 27, 87%, 67%;
	--textLinkHov: 240, 50%, 80%;
	
	--current: 35, 49%, 46%;
	--completed: 324, 49%, 46%;
	--paused: 80, 91%, 23%;
	--dropped: 6, 44%, 46%;
	--planned: 56, 18%, 56%;
	
	--goldRating: 32.5, 100%, 71%;
	--silverRating: 0, 0%, 80%;
	--bronzeRating: 25, 55%, 59%;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Internal
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

:root {
	/* INTERNALS
	 * 
	 * More advanced variables.
	 * Changing the font incorrectly may result in visual bugs.
	 */
	
	--listW: 100vw;
	
	--font: "Sarabun", "Segoe UI", "Arial", "FontAwesome 4", "FontAwesome", sans-serif;
	
	--timeText: 60ms;
	--timeButton: 160ms;
	--timeButtonLarge: 260ms;
	--timeItem: 120ms;
	--timeMenu: 350ms;
	--bezierFast: cubic-bezier(.38,.32,.25,1);
	--bezierSmooth: cubic-bezier(.45,.32,.25,1);
	--bezierItemBounce: cubic-bezier(.6,.48,.7,1.45);
	--delayMenu: 333.4ms;
	
	/* These SVGs will not display to non-list-owners.
	 * Find the images for other users in the !FIXES section.
	 */
	--arrowUp: url(https://files.catbox.moe/uure2q.svg);
	--arrowRt: url(https://files.catbox.moe/lqi5fy.svg);
	--arrowDn: url(https://files.catbox.moe/m9ot24.svg);
	--arrowLt: url(https://files.catbox.moe/68o5bn.svg);
}


/*==============================*\
  !PAGE-BASE @Scrollbars
\*------------------------------*/

/* Firefox */

* {
	scrollbar-color: hsl(var(--accent)) hsl(var(--bgAlt));
}

.list-item * {
	scrollbar-color: hsl(var(--accent)) transparent;
}

.data.tags, textarea {
	scrollbar-width: thin;
}

/* Chrome */

*::-webkit-scrollbar {
	width: 15px;
	background: hsl(var(--bgAlt));
}

*::-webkit-scrollbar-button:vertical {
	background: center / 10px auto no-repeat transparent;
} *::-webkit-scrollbar-button:vertical:start {
	background-image: var(--arrowUp);
} *::-webkit-scrollbar-button:vertical:end {
	background-image: var(--arrowDn);
} *::-webkit-scrollbar-button:horizontal {
	background: center / auto 10px no-repeat transparent;
} *::-webkit-scrollbar-button:horizontal:start {
	background-image: var(--arrowLt);
} *::-webkit-scrollbar-button:horizontal:end {
	background-image: var(--arrowRt);
}

*::-webkit-scrollbar-corner {
	background: hsl(var(--bgAlt));
}

*::-webkit-scrollbar-thumb {
	background: hsl(var(--accent)) content-box;
	border: 0 solid transparent;
	border-radius: 2px;
} *::-webkit-scrollbar-thumb:vertical {
	border-width: 0 2px;
} *::-webkit-scrollbar-thumb:horizontal {
	border-width: 2px 0;
} *::-webkit-scrollbar-thumb:hover {
	background-color: hsla(var(--accent), 70%);
}

.list-item *::-webkit-scrollbar {
	background: transparent;
}

.data.tags::-webkit-scrollbar,
textarea::-webkit-scrollbar {
	width: 8px;
}

.data.tags::-webkit-scrollbar-button,
textarea::-webkit-scrollbar-button {
	display: none;
}

.data.tags::-webkit-scrollbar-thumb:vertical,
textarea::-webkit-scrollbar-thumb:vertical {
	border-width: 0 1px;
} .data.tags::-webkit-scrollbar-thumb:horizontal,
textarea::-webkit-scrollbar-thumb:horizontal {
	border-width: 1px 0;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Generic
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

html {
	box-sizing: border-box;
} *, *::before, *::after {
	box-sizing: inherit;
}

a {
	text-decoration: none !important;
	transition: color var(--timeText) var(--bezierFast);
}

a,
.header a {
	color: hsl(var(--text));
} a:hover,
.header a:hover {
	color: hsl(var(--textLinkHov));
}

/* Buttons */

#header-menu-dropdown .icon-menu,
.list-unit .list-status-title .stats a,
.list-table > tbody:first-of-type::before,
#status-menu .search-container #search-box,
body #fancybox-close,
#advanced-options .advanced-options-button a,
div[style^="width: 300px;"] input {
	width: 96px;
	height: 32px;
	padding: 0;
	background: linear-gradient(225deg, hsla(var(--btnLight)) 20px, hsl(var(--btn)) 20px) hsl(var(--btn)) !important;
	border: 2px solid hsl(var(--btn));
	border-radius: 3px;
	box-shadow: -0.5px 0.7px 2.1px hsla(0, 0%, 0%, 35%);
	margin: 0;
	
	color: hsl(var(--text));
	font: normal 14px/26px var(--font);
	text-align: center;
	white-space: nowrap;
	
	transition: all var(--timeButton) var(--bezierFast);
} #header-menu-dropdown .icon-menu:hover,
.list-unit .list-status-title .stats a:hover,
.list-table > tbody:first-of-type:hover::before,
#status-menu .search-container #search-box:focus-within,
body #fancybox-close:hover,
#advanced-options .advanced-options-button a:hover,
div[style^="width: 300px;"] input:hover {
	border-color: hsl(var(--btnAccent));
	color: hsl(var(--accent));
	outline: none;
}

/* Animations */

@keyframes fade-in {
	from {
		opacity: 0;
	} to {
		opacity: 1;
	}
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Containers
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

html {
	height: 100%;
}

body {
	background-image: none;
} body.ownlist {
	position: relative;
	
	min-width: 700px;
	min-height: 100%;
	padding: 42px 0 0 !important;
	background-color: hsl(var(--bg)) !important;
	
	color: hsla(var(--text), 88%) !important;
	font: 12px var(--font);
	/*! background-image: url(https://i.imgur.com/NYSw623.jpg); */
}

#list-container {
	width: 100%;
	background: inherit !important;
	border: none;
}

.list-block {
	position: relative;
	z-index: 2;
	width: 100%;
	background: inherit;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	min-height: calc(100vh - (42px + 30vw));
	padding-top: 62px;
	padding-bottom: 60px;
	margin: 0 auto !important;
}

/* Adjusts list to size correctly with banner. See BANNER for its sizing rules. */

@media (min-width: 1920px) {
	.list-block {
		min-height: calc(100vh - (42px + (1920px * 0.3)));
	}
}

.list-unit {
	width: 100%;
}

.list-table {
	display: flex;
	width: calc(var(--listW) - 16px);
	border: none;
	flex-flow: row wrap;
	justify-content: center;
}

/* Image dimming */
.list-block::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
	background: hsla(var(--bg), var(--bgDimness));
}

/* Remove Tutorial/Notices */
.initialize-tutorial,
#recaptcha-terms {
	display: none !important;
}


/*==============================*\
  !HEADER
\*------------------------------*/

.header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	
	width: 100%;
	height: 42px;
	background: hsl(var(--bgAlt));
	box-shadow: 0 1.68px 3.36px hsla(0, 0%, 0%, 50%);
}

/* Left Area */

.header .header-title {
	top: 9px;
	left: 42px;
	
	width: 44px;
	height: 24px;
	background: url(https://files.catbox.moe/8q5kjg.svg) left 4px / auto 20px no-repeat;
	
	color: hsl(var(--text));
	
	opacity: 0.94;
	transition: all var(--timeButton) var(--bezierFast);
} .header .header-title:hover {
	opacity: 0.6;
}

/* Right Area */

.header .header-menu {
	position: static;
	
	display: flex;
	height: 32px;
	margin: 5px 12px 0 0;
	flex-flow: column nowrap;
	justify-content: center;
	float: right;
	
	line-height: 13px;
} [data-owner=""] .header .header-menu {
	padding-right: 139px;
}

/* Viewing __ List */

.header .header-menu .btn-menu {
	height: 15px;
	align-self: flex-end;
	color: hsl(var(--text));
	font-size: 12px;
	cursor: text;
} [data-owner="1"] .header .header-menu .btn-menu {
	font-size: 14px;
}

.header .btn-menu #header-menu-button {
	font-weight: normal;
	pointer-events: none;
}

#header-menu-button i {
	display: none;
}

/* Affinity, Login/out */

.header .header-menu .header-info {
	height: 15px;
	margin: 0;
	
	color: hsla(var(--text), 75%);
}

.header .header-menu .header-info,
.header .header-menu .header-info a {
	color: hsla(var(--text), 75%);
	font-weight: normal;
} .header .header-menu .header-info a:hover {
	color: hsl(var(--textLinkHov));
}

.header-info a[href="/login.php"], .header-info a[href="/register.php"] {
	font-size: 0;
} .header-info a[href="/login.php"]::before {
	content: "Login";
	font-size: 12px;
} .header-info a[href="/register.php"]::before {
	content: "Register";
	font-size: 12px;
}

/* Switch List Button */

#header-menu-dropdown {
	top: 5px;
	right: 12px;
	
	display: block !important;
	background: none;
	border: none;
	box-shadow: none;
}

#header-menu-dropdown .icon-menu {
	--btn: var(--btnAlt);
	width: 130px;
	font-size: 0;
	box-shadow: none;
}

#header-menu-dropdown .icon-menu::before {
	content: "\f021";
	font-size: 14px;
	vertical-align: top;
	transition: inherit;
}

#header-menu-dropdown .icon-menu::after {
	display: inline-block;
	font-size: 14px;
	text-indent: 5px;
	transition: inherit;
} #header-menu-dropdown .icon-menu.manga-list::after {
	content: "Swap to Manga";
} #header-menu-dropdown .icon-menu.anime-list::after {
	content: "Swap to Anime";
}

#header-menu-dropdown .icon-menu svg,
.header .header-menu .list-menu .icon-menu .text {
	display: none;
}


/*==============================*\
  !USER-MENU
\*------------------------------*/

.list-menu-float {
	position: fixed;
	left: -228px;
	top: 42px;
	z-index: 200;
	
	display: flex;
	width: 228px;
	height: calc(100% - 42px);
	background: hsl(var(--bg));
	border: none;
	box-shadow: -1.2px 1.68px 3.36px hsla(0, 0%, 0%, 50%);
	border-right: 1px solid hsl(var(--bgAlt));
	margin: 0 !important;
	flex-flow: column nowrap;
	
	font-size: 0 !important;
	line-height: 0;
	
	transition: all var(--timeMenu) var(--bezierSmooth) var(--delayMenu);
} .list-menu-float:hover {
	left: 0;
	transition-delay: 0s;
}

.list-menu-float::after,
.list-container::before {
	content: "";
	position: fixed;
	left: 0;
	top: 0;
	
	width: 42px;
	height: 42px;
	box-sizing: initial;
	background: url(https://files.catbox.moe/0tnlh6.svg) center / auto no-repeat;
	
	color: hsl(var(--text));
	font: 21px/42px "FontAwesome";
	text-align: center;
	
	transition: inherit;
} /* Icon for logged out users */
.list-container::before {
	z-index: 200;
	filter: brightness(0.35);
	cursor: not-allowed;
} /* Hide for logged in users */
.list-menu-float + .list-container::before {
	content: none;
}

.list-menu-float::before {
	content: "USER MENU";
	position: absolute;
	left: 0;
	top: -42px;
	
	width: 180px;
	height: 42px;
	padding-left: 47px;
	border-right: 1px solid hsl(var(--bgAlt));
	background: inherit;
	box-sizing: initial;
	
	color: transparent;
	font: bold 16px/42px var(--font);
	text-align: left;
	
	transition: color calc(var(--timeMenu) * 0.3) ease-in-out var(--delayMenu);
	pointer-events: none;
} .list-menu-float:hover::before {
	color: hsl(var(--text));
	transition: color calc(var(--timeMenu) * 0.7) ease-in-out calc(var(--timeMenu) * 0.3);
}

#list-container::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	z-index: 190;
	
	width: 100%;
	height: 100%;
	background: hsla(0, 0%, 0%, 0%);
	
	transition: all var(--timeMenu) var(--bezierSmooth) var(--delayMenu);
	pointer-events: none;
} .list-menu-float:hover ~ #list-container::after {
	background: hsla(0, 0%, 0%, 78%);
	transition-delay: 0s;
}


.ownlist .list-menu-float .icon-menu {
	width: 100% !important;
	height: auto;
	background: none !important;
	text-align: left;
	transition: all var(--timeButton) var(--bezierFast);
}

.ownlist .list-menu-float .icon-menu svg {
	display: none;
}

.ownlist .list-menu-float .icon-menu::after,
.ownlist .list-menu-float .icon-menu:not(.setting) .text,
.ownlist .list-menu-float .icon-menu.setting .text .link-list-setting,
.ownlist .list-menu-float .icon-menu.setting .text .link-style-setting {
	position: static;
	
	width: 100%;
	height: 40px;
	padding: 10px 20px 10px 16px;
	background: none;
	border: none;
	border-left: 4px solid transparent;
	overflow: visible;
	
	color: hsl(var(--text));
	font: 15px/20px var(--font);
	text-align: left;
	
	opacity: 1;
	transition: inherit;
} .ownlist .list-menu-float .icon-menu:hover::after,
.ownlist .list-menu-float .icon-menu:not(.setting):hover .text,
.ownlist .list-menu-float .icon-menu.setting .text .link-list-setting:hover,
.ownlist .list-menu-float .icon-menu.setting .text .link-style-setting:hover {
	background: hsl(var(--bgAlt));
	border-color: hsl(var(--accent));
	line-height: 16px;
}

/* Individual Tweaks */

.ownlist .list-menu-float .icon-menu.setting .text {
	position: static;
	
	width: 100%;
	height: auto;
	
	opacity: 1;
}

.list-menu-float > :not(.quick-add) {
	order: 5;
} .list-menu-float form {
	order: 9 !important;
}

.ownlist .list-menu-float .icon-menu.profile::after {
	content: "Profile";
	display: block;
}

/* Dividers */

.ownlist .list-menu-float .icon-menu.quick-add,
.ownlist .list-menu-float .icon-menu.export,
.ownlist .list-menu-float .icon-menu.logout {
	margin-top: 15px;
} .ownlist .list-menu-float .icon-menu.quick-add::before,
.ownlist .list-menu-float .icon-menu.export::before,
.ownlist .list-menu-float .icon-menu.logout::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 10px;
	
	width: calc(100% - 20px);
	height: 1px;
	background: hsla(var(--text), 12%);
	
	pointer-events: none;
}


/*==============================*\
  !BANNER
\*------------------------------*/

.cover-block {
	position: relative;
	width: 100%;
}

#cover-image-container {
	display: block;
	width: 100%;
	height: 30vw;
	min-height: calc(700px * 0.3);
	max-height: calc(1920px * 0.3);
	padding: 0;
}

#cover-image-container.hide {
	display: none;
}

#cover-image {
	position: fixed;
	left: 0;
	width: inherit;
	max-width: initial;
	height: inherit;
	object-fit: cover;
}

#cover-image-container::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse farthest-corner at center top, transparent 66.6667%, hsla(var(--bg), var(--bannerVignetteOpacity)));
	box-shadow: inset 0 -12px 8px -8px hsla(0, 0%, 0%, 50%);
}

.cover-block .image-container .btn-list-setting {
	display: none !important;
}

/*==============================*\
  !STATUS-MENU
\*------------------------------*/

/* Top Bar */

#status-menu::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, hsla(var(--accent), 1), hsla(var(--accent), 0.55)) hsl(var(--bg));
} [data-query*='"status":1'] #status-menu::before {
	--accent: var(--current);
} [data-query*='"status":2'] #status-menu::before {
	--accent: var(--completed);
} [data-query*='"status":3'] #status-menu::before {
	--accent: var(--paused);
} [data-query*='"status":4'] #status-menu::before {
	--accent: var(--dropped);
} [data-query*='"status":6'] #status-menu::before {
	--accent: var(--planned);
}


/* Base */

#status-menu {
	position: sticky;
	z-index: 150;
	top: 0;
	
	width: 100%;
	height: 62px;
	padding-top: 17px;
	background: none;
	border: none;
	margin: 0px 0 -62px;
	
	pointer-events: none;
	transition: padding var(--timeMenu) var(--bezierFast);
} #status-menu.fixed {
	padding: 5px 0;
}

#status-menu::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, hsl(var(--bg)), transparent);
	opacity: 0;
}
#status-menu.fixed::after {
	opacity: 1;
}

#status-menu .status-menu {
	position: static;
	
	display: flex;
	width: calc(var(--listW) - (396px + 0.14 * (var(--listW) - 980px)));
	max-width: 700px;
	height: 42px;
	margin: 0 auto;
	justify-content: space-around;
	align-items: center;
	
	pointer-events: auto;
}

#status-menu .status-button {
	display: block;
	height: 32px;
	padding: 0 9px;
	border-radius: 3px;
	flex: 0 1 auto;

	font: 0/30px var(--font);
	text-shadow: -0.6px 0.84px 1.68px #000;
	
	transform: none;
}

#status-menu .status-button::before {
	display: block;
	color: hsla(var(--text), 48%);
	font-size: 18px;
	transition: all var(--timeButtonLarge) var(--bezierSmooth);
	pointer-events: none;
} #status-menu .status-button.all_anime::before {
	content: "ALL";
} #status-menu .status-button.watching::before,
#status-menu .status-button.reading::before {
	content: "CURRENT";
} #status-menu .status-button.completed::before {
	content: "COMPLETED";
} #status-menu .status-button.onhold::before {
	content: "PAUSED";
} #status-menu .status-button.dropped::before {
	content: "DROPPED";
} #status-menu .status-button.plantowatch::before,
#status-menu .status-button.plantoread::before {
	content: "PLANNED";
} #status-menu .status-button.on::before {
	color: hsl(var(--text));
	font-weight: bold;
} #status-menu .status-button:hover::before {
	color: hsl(var(--text));
	transform: translateY(-2px);
}

#status-menu .status-button::after {
	content: none;
}

.search-container,
.list-status-title,
tbody:first-of-type,
#status-menu::after {
	transition: opacity var(--timeMenu) var(--bezierFast), translate var(--timeMenu) var(--bezierFast);
}
#status-menu.fixed .search-container,
.fixed ~ .list-block .list-status-title,
.fixed ~ .list-block .list-table > tbody:first-of-type {
	opacity: 0;
	translate: 0 -32px;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Search
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

#status-menu .search-container {
	position: absolute;
	top: 22px;
	right: calc(20px + (50% - var(--listW) * 0.5));
	width: calc(169px + 0.07 * (var(--listW) - 980px));
}

#status-menu .search-container #search-box {
	width: 100%;
	transition:
		box-shadow var(--timeMenu) var(--bezierFast),
		border-color var(--timeButton) var(--bezierFast);
}

#status-menu .search-container #search-box input {
	background: none;
	padding: 2px 6px 2px 30px;
	border: none;
	color: hsla(var(--text), 80%);
	line-height: 28px;
} #status-menu .search-container #search-box input:focus {
	color: hsl(var(--text));
	outline: none;
}

#status-menu .search-container #search-box::after {
	content: "\f002";
	position: absolute;
	top: 0;
	left: 4px;
	
	width: 24px;
	
	color: hsla(var(--text), 83%);
	font-size: 16px;
	line-height: 30px;
	text-align: center;
}

#status-menu .search-container #search-button {
	display: none;
}


/*==============================*\
  !SORT-BUTTONS @Filters
\*------------------------------*/

.list-unit .list-status-title {
	position: absolute;
	top: 22px;
	left: calc(20px + (50% - var(--listW) * 0.5));
	z-index: 30;
	
	width: 80px;
	height: calc(100% - 22px);
	background: none;
}

.list-unit .list-status-title .text {
	display: none;
}

.list-unit .list-status-title .stats {
	position: sticky;
	top: 43px;
	font-size: 0;
	white-space: nowrap;
}

.list-unit .list-status-title .stats a {
	display: inline-block;
	width: calc(80px + 0.035 * (var(--listW) - 980px));
}

.list-unit .list-status-title .stats a:first-child {
	display: none;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Sort-By
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.list-table > tbody:first-of-type {
	position: absolute;
	top: 22px;
	left: calc(109px + (0.035 * (var(--listW) - 980px)) + (50% - var(--listW) * 0.5));
	z-index: 35;
	
	width: calc(80px + 0.035 * (var(--listW) - 980px));
	height: calc(100% - 22px);
	background: none !important;
	
	pointer-events: none;
}

.list-table > tbody:first-of-type::before {
	content: "\f0dc  Order";
	position: sticky;
	top: 22px;
	
	display: block;
	margin: 0 auto 10px auto;
	width: 100%;
	
	pointer-events: auto;
}

/* "Hitbox" */
.list-table > tbody:first-of-type:hover::after {
	content: "";
	position: absolute;
	top: 0;
	left: -12px;
	z-index: -1;
	width: calc(100% + 24px);
	height: 44px;
	border-radius: 12px 12px 0 0 / 100% 100% 0 0;
	pointer-events: auto;
}

.list-table .list-table-header {
	position: relative;
	left: 50%;
	
	display: inline-flex;
	min-width: calc(100% + 24px);
	height: auto;
	background: hsl(var(--btn));
	border-radius: 3px;
	box-shadow: -1.2px 1.68px 3.36px hsla(0, 0%, 0%, 50%);
	flex-flow: column nowrap;
	overflow: hidden;
	
	opacity: 0;
	transform: translateX(-50%);
	transition: all var(--timeButtonLarge) var(--bezierFast);
} .list-table tbody:first-of-type:hover .list-table-header {
	opacity: 1;
	pointer-events: auto;
}

.list-table .list-table-header .header-title {
	display: block;
	width: auto !important;
	height: auto;
	padding: 0 !important;
	background: none;
	border: none;
	
	font-size: 0 !important;
	line-height: 0;
	text-align: center !important;
}

.list-table .list-table-header .header-title a {
	width: 100%;
	height: 32px;
	padding: 0 8px;
	border-left: 2px solid hsl(var(--btn));
	border-right: 2px solid transparent;
	
	color: hsl(var(--text)) !important;
	font-size: 13px !important;
	line-height: 30px;
	font-weight: normal;
	text-indent: -1px;
	
	transition: all var(--timeButton) var(--bezierFast) !important;
} .list-table .list-table-header .header-title a:hover {
	background: hsla(var(--btnLight));
	border-left-color: hsl(var(--btnAccent));
	line-height: 28px;
}

.list-table .list-table-header .header-title .sort-icon {
	margin-left: 1px;
	color: hsl(var(--accent));
	font: 10.5px var(--font) !important;
	vertical-align: baseline;
} .list-table .list-table-header .header-title .fa-sort-up::before {
	content: "ASC";
} .list-table .list-table-header .header-title .fa-sort-down::before {
	content: "DESC";
}

.header-title.status,
.header-title.number,
.header-title.image,
.header-title.tags,
.header-title.days {
	display: none !important;
}


/*==============================*\
  !LIST
\*------------------------------*/

/* Empty Table Message */
.list-table[data-items="[]"]::before {
	--items: 3;
	--offset: 12.5%;
	
	display: block;
	width: calc(224px * var(--items));
	max-width: 100%;
	height: 309px;
	background: url(https://files.catbox.moe/zl9hm9.png);
	background-position-x: center;
	padding: 48px calc((224px * var(--items) * .5) - 90px);
	margin: 0 auto;
	font-size: 18px;
	text-align: center;
	
	--mask:
		linear-gradient(
			to right,
			#0000,
			#000f var(--offset),
			#000a calc(100% - var(--offset)),
			#0000
		),
		linear-gradient(
			to top,
			#0000,
			#000a 30%,
			#000f 80%
		);
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	
	/* No Entries (Generic/Non-Owner) */
	content: "No entries found.";
}
[data-owner="1"] .list-table[data-items="[]"]::before {
	/* No Entries (Owner) */
	content: "No entries found. Why not add some?";
}
[data-query*='"s":'] .list-table[data-items="[]"]::before {
	/* No Entries (Bad Search) */
	content: "No entries found. Perhaps your search terms are too restrictive?";
}

@media (min-width: 1150.5px) {
	.list-table[data-items="[]"]::before {
		--items: 5;
		--offset: 20%;
	}
}

@media (min-width: 1597.5px) {
	.list-table[data-items="[]"]::before {
		--items: 7;
		--offset: 25%;
	}
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Item-Base
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.list-item {
	position: relative;
	z-index: 1;
	
	display: block;
	width: 210px;
	height: 300px;
	background: none !important;
	margin: calc((300px * -0.025) + 12px) calc((210px * -0.025) + 12px);
	flex: 0 0 auto;
	
	color: hsl(var(--text));
	
	transform: scale(0.95);
	transition: all var(--timeItem) var(--bezierItemBounce);
} .list-item:hover {
	transform: scale(1);
}

.list-table-data {
	display: flex;
	width: calc(50% - 6px);
	height: 148px;
	padding: 0 0 0 6px;
	margin: 51px 0 0 6px;
	overflow: hidden;
	overflow-y: auto;
	flex-flow: column nowrap;
	align-items: flex-end;
	direction: rtl;
	scrollbar-width: thin;
	transition: scrollbar-color calc(var(--timeItem) * 1.5) var(--bezierFast);
}

.list-table .list-table-data .data {
	padding: 0;
	border-width: 0;
	border-style: solid;
}

.data:not(.image) {
	direction: ltr;
	z-index: 5;
	flex: 0 0 auto;
	text-shadow: -0.6px 0.84px 1.68px #000;
	line-height: 15px;
	opacity: 0;
	transition:
		all var(--timeButton) var(--bezierFast),
		opacity calc(var(--timeItem) * 1.5) var(--bezierFast);
	cursor: default;
} .list-item:hover .data:not(.image) {
	opacity: 1;
}

.list-table .list-table-data .data a {
	color: hsl(var(--text)) !important;
	transition-property: all;
} .list-table .list-table-data .data a:not(.edit-disabled):hover {
	color: hsl(var(--textLinkHov)) !important;
} .list-table .list-table-data a.edit-disabled {
	pointer-events: none;
}

/* data scroll */

.list-item:not(:hover) .list-table-data {
	scrollbar-color: transparent transparent;
}

.list-item:not(:hover) .list-table-data::-webkit-scrollbar-thumb {
	background: transparent;
}

.list-table-data::-webkit-scrollbar {
	width: 8px;
}

.list-table-data::-webkit-scrollbar-button {
	display: none;
}

.list-table-data::-webkit-scrollbar-thumb:vertical {
	border-width: 0 1px;
} .list-table-data::-webkit-scrollbar-thumb:horizontal {
	border-width: 1px 0;
}

/* Dynamic Columns */

.data:not(
	.status,
	.image,
	.type:not(.number~.type),
	.number,
	.title,
	.score,
	.tags,
	.progress,
	.chapter,
	.volume
) {
	position: relative;
	
	max-width: 100%;
	min-height: 15px;
	padding-left: 15px !important;
	margin-bottom: 4px;
	
	text-align: left !important;
	overflow-wrap: break-word;
}

/* Icons */

.data:not(
	.status,
	.image,
	.type:not(.number~.type)
	.number,
	.title,
	.score,
	.tags,
	.progress,
	.chapter,
	.volume,
	.days
)::after,
.data.days::before {
	position: absolute;
	top: 0;
	left: -3px;
	
	width: 16px;
	height: 15px;
	
	color: hsla(var(--text), 83%);
	text-align: center;
}

/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Image
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.image,
.data.image .link,
.data.image .image,
.data.image .link::before,
.data.image .link::after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	object-fit: cover;
}

.data.image {
	z-index: -1;	
	background: hsla(var(--bg), 70%);
	border-radius: 6px;
	box-shadow: -1.2px 1.68px 3.36px hsla(0, 0%, 0%, 35%);
	overflow: hidden;
	pointer-events: none;
}

.data.image .link {
	filter:
		brightness(var(--imageBrightness))
		opacity(var(--imageBrightness));
	transition: filter var(--timeItem) var(--bezierFast) !important;
} .list-item:hover .data.image .link {
	filter:
		brightness(var(--imageBrightnessHov))
		opacity(var(--imageBrightnessHov))
		blur(var(--imageBlurHov));
}

.data.image .link::before {
	content: "";
	background: linear-gradient(to top, hsl(var(--bg), var(--imageFade)) 5px, transparent calc(55% * var(--imageFade)));
	z-index: 1;
}

.data.image .link::after {
	content: "";
	background: center / cover no-repeat scroll;
	background-image: inherit;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Status
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.status {
	display: none;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Title
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.title {
	position: absolute;
	bottom: -.5px;
	left: 0;
	z-index: 10;
	
	width: 100%;
	padding: 5px 0 27px !important;
	background: hsla(var(--btn), var(--infoBGOpacity));
	border-radius: 0 0 6px 6px;
	order: 95;
	
	font-size: 0;
	
	opacity: 1;
}

.data.title .link {
	display: inline-block;
	max-width: 100%;
	max-height: 64px;
	padding: 5px 12px;
	overflow: hidden;
	
	font-size: 13px !important;
	line-height: 18px;
}


div[class^="icon-watch"] {
	display: inline;
}

.mal-icon {
	position: static !important;
}

.malicon {
	position: absolute;
	bottom: 12px;
	right: 7.5px;
	z-index: 1;
	
	width: auto;
	height: 15px;
	
	font-size: 0 !important;
	text-shadow: 0.84px 0.6px 1.68px #000;
	
	transform: rotate(90deg);
	transform-origin: right bottom;
	
	/*Toggle*/
	visibility: var(--toggleStreaming);
}

.malicon::after {
	content: "\f144  WATCH";
	
	color: hsla(var(--text), 80%);
	font-size: 12px;
	font-style: normal;
	line-height: 1;
	letter-spacing: 1.5px;
	white-space: nowrap;
	
	transition: color var(--timeText) var(--bezierFasft);
} .malicon:hover::after {
	color: hsl(var(--textLinkHov));
}

.content-status,
.rewatching,
.rereading {
	position: absolute;
	bottom: 270px;
	left: 7.5px;
	
	height: 15px;
	
	color: hsl(var(--textProminent)) !important;
	font-size: 12px !important;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-shadow: 0.84px 0.6px 1.68px #000;
	
	transform: rotate(90deg);
	transform-origin: left top;
	pointer-events: none;
}


.add-edit-more {
	position: absolute;
	bottom: 267px;
	right: 6px;
	z-index: 2;
	
	width: auto;
	padding: 1.5px;
	margin: 0 !important;
	
	font-size: 0 !important;
	
	opacity: 0;
	transition: inherit;
} .list-item:hover .add-edit-more {
	opacity: 1;
}

.add-edit-more span {
	float: left;
}

.add-edit-more a {
	display: block;
	padding: 4.5px;
	
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Notes
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.notes {
	position: absolute;
	left: 66.5px;
	bottom: 240px;
	z-index: 1;
	width: 50px !important;
	height: 52.5px;
	padding: .5px;
	text-align: right;
	opacity: 0;
	transition: opacity calc(var(--timeItem) * 1.5) var(--bezierFast);
	pointer-events: none;
} .list-item:hover .notes {
	opacity: 1;
} .notes:hover {
	z-index: 3;
	pointer-events: auto;
}

/* Add hitbox for "click" effect */
.add-edit-more:not(:active)::after {
	content: "";
	position: absolute;
	top: 1.5px;
	right: 86.5px;
	width: 50px;
	height: 24px;
	cursor: pointer;
}

.notes .text,
.notes textarea {
	position: absolute;
	left: -66.5px;
	top: 37px;
	width: 210px !important;
	height: auto;
	min-height: 39px;
	max-height: 162px;
	padding: 9px 15px 12px;
	background: hsla(var(--bgAlt), 0.96);
	border-radius: 6px;
	box-shadow: 0 0 3.36px 1.68px hsla(0, 0%, 0%, 50%);
	overflow: hidden;
	overflow-y: auto;
	color: hsl(var(--text)) !important;
	font-size: 12px;
	text-shadow: none;
	text-align: left;
	opacity: 0;
	cursor: text;
	transition: inherit;
} .notes:hover .text {
	opacity: 1;
}

.notes textarea {
	height: 162px;
	border: none;
	outline: none;
	opacity: 1;
	resize: none;
}

.notes .edit {
	display: none;
}

.notes .text:empty::before {
	content: "Add notes.";
	color: hsla(var(--text), 60%);
}

/* "Button" */
.notes::before {
	content: "NOTES";
	display: inline-block;
	padding: 4px;
	font-size: 12px;
	cursor: pointer;
	pointer-events: auto;
} .notes:hover::before {
	color: hsl(var(--textLinkHov));
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Progress/@Score
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.progress,
.data.chapter,
.data.volume,
.data.score {
	position: absolute;
	bottom: 12px;
	z-index: 10;
	height: 15px;
	white-space: nowrap;
	cursor: default;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  Score
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.score {
	left: 12px;
	max-width: calc(66% - 12px);
	text-align: left !important;
	opacity: 1;
}

.data.score::before {
	white-space: pre;
	vertical-align: top;
} [data-query*='"status":7'] .watching ~ .data.score::before,
[data-query*='"status":7'] .reading ~ .data.score::before {
	content: "Current | ";
} [data-query*='"status":7'] .completed ~ .data.score::before {
	content: "Completed | ";
} [data-query*='"status":7'] .onhold ~ .data.score::before {
	content: "Paused | ";
} [data-query*='"status":7'] .dropped ~ .data.score::before {
	content: "Dropped | ";
} [data-query*='"status":7'] .plantowatch ~ .data.score::before,
[data-query*='"status":7'] .plantoread ~ .data.score::before {
	content: "Planned | ";
}

.data.score .link {
	display: inline-flex;
	font-size: 14px !important;
	vertical-align: top;
	text-transform: capitalize;
}

.data.score .link::before {
	content: "Scored ";
	font-size: 12px;
	font-weight: normal;
	white-space: pre;
}

/* Planned */

[class*="planto"] ~ .data.score .link {
	display: none;
}

[class*="planto"] ~ .data.score::before {
	content: "Planned" !important;
}

/* Not Rated */

.data .score-na {
	font-size: 0;
	order: -1;
} .data .score-na::before {
	content: "Not ";
	font-size: 12px;
	font-weight: normal;
}

/* Top Rated Banners for highly rated items. */

.data .score-8 {
	--rated: var(--bronzeRating);
	--toggle: var(--toggleTopRatingBronze);
} .data .score-9 {
	--rated: var(--silverRating);
	--toggle: var(--toggleTopRatingSilver);
} .data .score-10 {
	--rated: var(--goldRating);
	--toggle: var(--toggleTopRatingGold);
}

.data .score-8::before,
.data .score-9::before,
.data .score-10::before {
	content: "";
	position: absolute;
	left: -12px;
	bottom: 282px;
	z-index: -1;
	
	width: 210px;
	height: 6px;
	border-top: 2px solid hsla(var(--rated), 0.8);
	border-radius: 6px 6px 0 0;
	
	pointer-events: none;
	box-shadow:
		0 -4px 3px -3px hsl(var(--rated)),
		inset 0 6px 3px -6px hsl(var(--rated));
	visibility: var(--toggle);
}

.data .score-8::after,
.data .score-9::after,
.data .score-10::after {
	content: "TOP RATED";
	position: absolute;
	left: 93px;
	bottom: 278px;
	z-index: -1;
	
	min-width: 100px;
	height: 16px;
	padding: 0 10px;
	border-radius: 3px;
	background: hsla(var(--rated), 0.9);
	box-shadow:
		-4px 1px 5px -4px hsla(var(--rated), 0.9),
		4px 1px 5px -4px hsla(var(--rated), 0.9),
		0 3px 5px -3px hsla(var(--rated), 0.3),
		0 5px 15px -6px hsl(var(--rated));
	
	color: hsl(var(--bg));
	font: bold 13px/13px var(--font);
	text-align: center;
	letter-spacing: 1px;
	text-shadow: none;
	
	backdrop-filter: blur(3px);
	transform: translateX(-50%);
	pointer-events: none;
	visibility: var(--toggle);
}

/* Prevent "change score box" layout flicker (a bug that is present on default list CSS) */

.data.score a:not([style="display: none;"]) + select {
	display: none;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  Progress
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.progress,
.data.chapter,
.data.volume {
	right: 12px;
	text-align: right !important;
	opacity: .64;
}

/* Remove Slash */

.progress div,
.chapter div,
.volume div {
	font-size: 0;
}

.progress span:first-of-type:not(:only-of-type) a::after,
.chapter span:first-of-type:not(:only-of-type) a::after,
.volume span:first-of-type:not(:only-of-type) a::after {
	content: " of ";
}

/* Watched # */

.data.progress a,
.data.chapter a,
.data.volume a {
	font-size: 12px;
}

/* Watched # - Planned */

.plantowatch ~ .data.progress span:first-of-type,
.plantoread ~ .data.chapter span:first-of-type,
.plantoread ~ .data.volume span:first-of-type {
	opacity: 0;
	transition: all var(--timeItem) var(--bezierFast);
}

.list-item:hover .plantowatch ~ .data.progress span:first-of-type,
.list-item:hover .plantoread ~ .data.chapter span:first-of-type,
.list-item:hover .plantoread ~ .data.volume span:first-of-type {
	opacity: 1;
}

/* Total # */

.progress span:nth-of-type(2),
.chapter span:nth-of-type(2),
.volume span:nth-of-type(2) {
	font-size: 12px;
	vertical-align: top;
}

/* Total # - Completed */

.progress span:only-of-type,
.chapter span:only-of-type,
.volume span:only-of-type {
	font-size: 14px;
}

.progress span:last-of-type::after {
	content: "ep";
} .chapter span:last-of-type::after {
	content: "ch";
} .volume span:last-of-type::after {
	content: "vol";
}

span:nth-of-type(2)::after {
	color: hsl(var(--text));
	text-shadow: inherit;
	transition: all var(--timeItem) var(--bezierFast);
} [data-owner="1"] .list-item:hover span:nth-of-type(2)::after {
	color: transparent;
	text-shadow: none;
}

/* Increment Total */

.list-table .list-item .data [class^="icon-add-"] {
	position: absolute;
	top: 3px;
	right: 0;
	
	display: inline-block;
	
	color: hsla(var(--text), 0%) !important;
	font-size: 12px !important;
	text-shadow: none;
	
	transition: all var(--timeItem) var(--bezierFast);
} .list-table .list-item:hover .data [class^="icon-add-"] {
	color: hsla(var(--text), 83%) !important;
	text-shadow: inherit;
}

[class^="icon-add-"] i::before {
	content: "\f067";
}

/* Remove Unsupported Items */

.data.chapter + .data.volume {
	display: none !important;
}

/* Prevent change episode box layout flicker (caused by default list functions) */

.progress a + input,
.chapter a + input,
.volume a + input {
	display: none;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Tags
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.tags {
	position: absolute;
	top: 51px;
	right: 6px;
	
	width: calc(50% - 6px);
	padding: 0 6px 0 0 !important;
	height: 148px;
	overflow-x: hidden;
	overflow-y: auto;
} 

.data.tags div,
.data.tags a {
	position: relative;
}

.data.tags span {
	display: block;
	min-height: 15px;
	margin-bottom: 4px;
	
	font-size: 0;
	line-height: 0;
	text-align: right;
}

.data.tags a {
	display: inline-block;
	padding-right: 15px;
	font: 12px/15px var(--font) !important;
	vertical-align: top;
	overflow-wrap: break-word;
}

.list-table .list-table-data .tags .edit {
	width: auto;
	float: right;
	color: hsl(var(--text)) !important;
}

.data.tags a::after {
	position: absolute;
	top: 1px;
	right: 0;
	display: inline-block;
	color: hsla(var(--text), 83%);
} .data.tags span a::after {
	content: "\f02b";
} .data.tags .edit::after {
	content: "\f040";
}

.data.tags textarea {
	position: absolute;
	top: 0;
	right: 6px;
	
	display: block;
	width: calc(100% - 6px) !important;
	height: 99% !important;
	border-style: solid;
	border-radius: 3px;
	overflow: auto;
	
	word-break: break-all;
	
	resize: none;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Number / @Type
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

/* These two columns share much code as Type takes the place of Number when one is not enabled. */

:nth-child(2):not(.number) ~ .data.type,
.data.number {
	position: absolute;
	top: 13px;
	left: 12px;
	
	padding-left: 0 !important;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
}

.list-item:not(:hover) :nth-child(2):not(.number) ~ .data.type,
.data.number {
	opacity: var(--numberOpacity);
}

.data.number::before {
	content: "#";
	font-size: 12px;
}

/* Type */

.number ~ .data.type::after {
	content: "\f069";
}

.data.type {
	order: 10;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @MAL Scores
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data:is(.mal_score,.score_diff)::after {
	content: "\f005 ";
}
.data.mal_score ~ .score_diff::after {
	content: none;
}

.data.mal_score,
.data.score_diff {
	order: 20;
}

.data.mal_score::before {
	content: "MAL: ";
}
.data.score_diff::before {
	content: "Diff:";
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Popularity
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.popularity::after {
	content: "\f0c0 ";
}

.data.popularity {
	order: 20;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Rated
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.rated::after {
	content: "\f129";
}

.data.rated {
	order: 20;
}

.data.rated:empty::before {
	content: "Unrated";
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Season
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.season::after {
	content: "\f1bb";
}

.data.season {
	order: 30;
}

.data.season:empty::before {
	content: "Unknown";
	color: hsla(var(--text), 50%);
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Genre/@Demographic/@Studio
  /@Licensor/@Magazine
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.genre::after {
	content: "\f02c";
} .data.genre + .data.genre::after,
.data.demographic::after {
	content: "\f200";
} .data.studio::after {
	content: "\f0b1";
} .data.licensor::after {
	content: "\f19c";
} .data.magazine::after {
	content: "\f02d";
}

.data.genre,
.data.demographic {
	order: 45;
}

.data.studio,
.data.licensor,
.data.magazine {
	order: 50;
}

.data.genre:empty::before,
.data.demographic:empty::before,
.data.studio:empty::before,
.data.licensor:empty::before,
.data.magazine:empty::before {
	content: "Unknown";
	color: hsla(var(--text), 50%);
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Dates
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.started::after {
	content: "\f073";
} .data.airing-started::after {
	content: "\f073";
} .data.days::before {
	content: "\f017";
}

.data[class*="started"],
.data[class*="finished"],
.data.days {
	order: 70;
}

.data.started,
.data.airing-started {
	margin: 0;
}

.data[class*="started"]::before {
	display: block;
	color: hsla(var(--text), 80%);
	font-size: 12px;
} .anime .data.started::before {
	content: "Watched";
} .manga .data.started::before {
	content: "Read";
} .anime .data.airing-started::before {
	content: "Aired";
} .manga .data.airing-started::before {
	content: "Published";
}

.data.finished::before,
.data.airing-finished::before {
	content: "to ";
	color: hsla(var(--text), 80%);
}


.data.days::after {
	content: "Days";
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Priority
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.priority::after {
	content: "\f005";
}

.data.priority {
	display: block !important;
	order: 90;
}

.status:not([class*="planto"]) ~ .data.priority {
	display: none !important;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Storage
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.data.storage::after,
.data.retail::after {
	content: "\f1c0";
}

.data.storage,
.data.retail {
	order: 95;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @More-Info
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.more-info {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 25;
	
	width: 100%;
	height: 100%;
	border: none !important;
	border-radius: 5px;
	overflow: hidden;
	
	opacity: 0;
	transition: all calc(var(--timeItem) * 1.5) var(--bezierFast);
	animation: var(--timeItem) var(--bezierFast) backwards fade-in;
	pointer-events: none;
} .list-item:hover .more-info {
	opacity: 1;
}

.more-info td,
.more-info table,
.more-info tbody,
.more-info tr {
	display: block;
}

.more-content {
	width: 100%;
	height: calc(100% - 37px);
	padding: 0 !important;
	background: hsla(var(--bgAlt), 0.96);
	border-radius: 6px 6px 0 0;
	box-shadow: 0 0 3.36px 1.68px hsla(0, 0%, 0%, 50%);
	margin-top: 37px;
	overflow-x: hidden;
	overflow-y: auto;
	
	backdrop-filter: blur(var(--imageBlurHov));
	pointer-events: auto;
}

.more-content table {
	padding: 9px 15px 12px !important;
}

.list-table .more-info .more-content a {
	color: hsl(var(--text));
	text-decoration: underline hsla(var(--text), 50%) !important;
} .list-table .more-info .more-content a:hover {
	color: hsl(var(--textLinkHov));
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Loading-Icon
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.list-unit .loading-space {
	height: auto;
	padding-top: 18px;
	margin: 0;
}

.list-unit .loading-space i {
	width: 24px;
	height: 24px;
	background: url(https://files.catbox.moe/qs9f3v.svg) center / auto no-repeat;
	margin: 0 auto;
	
	font-size: 0;
	animation: 1.2s cubic-bezier(.35,0,.35,1) 0s infinite both loading;
}

@keyframes loading {
	from {
		transform: rotate(45deg);
	} to {
		transform: rotate(405deg);
	}
}


/*==============================*\
  !OVERLAYS
\*------------------------------*/

body.ownlist #fancybox-overlay {
	background: #000 !important;
	opacity: 0.78 !important;
}

body #fancybox-close {
	box-shadow: none;
}

#fancybox-close::before {
	content: "Close";
}

/* Header bars */

#advanced-options::before,
.mal-modal-content::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, hsla(var(--accent), 1), hsla(var(--accent), 0.55)) hsl(var(--bg));
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @GDPR
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

#gdpr-modal-bottom .modal-wrapper {
	filter: invert(0.9) hue-rotate(180deg);
	width: 100%;
	margin: 0;
}

.dark-mode #gdpr-modal-bottom .modal-wrapper {
	filter: none;
}

#gdpr-modal-bottom .text {
	width: 100%;
}

#gdpr-modal-bottom a {
	color: #1d439b;
}

.dark-mode #gdpr-modal-bottom a {
	color: #abc4ed;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Streaming
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.mal-modal,
.mal-modal-backdrop {
	transition-duration: var(--timeMenu) !important;
	transition-timing-function: var(--bezierSmooth) !important;
}
.mal-modal-backdrop.show {
	opacity: 0.78 !important;
}

#list-container~div .mal-modal-content button.btn-close {
	color: var(--text) !important;
}

#list-container~div .mal-modal-body {
	background: none !important;
}

#list-container~div .mal-modal-content {
	color: hsl(var(--text)) !important;
	background: hsl(var(--bg)) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: -1.6px 2.24px 4.48px hsla(0, 0%, 0%, 70%);
}

#list-container~div .mal-modal-header,
#list-container~div .mal-modal-body .broadcasts {
	border-color: hsla(var(--text), 12%) !important;
}

#list-container~div .broadcast a:hover {
	background: hsl(var(--bgAlt)) !important;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @iFrames
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

body #fancybox-wrap {
	left: calc(50% - (190px + 20vw)) !important;
	width: calc(380px + 40vw) !important;
	height: auto !important;
	padding: 0;
}

#fancybox-outer .fancy-bg {
	display: none;
}

body.ownlist #fancybox-outer {
	padding: 14px 12px 56px;
	background: hsl(var(--bg)) !important;
	border-radius: 8px;
	box-shadow: -1.6px 2.24px 4.48px hsla(0, 0%, 0%, 70%);
}

body #fancybox-inner {
	position: static;
	width: 100% !important;
	border-radius: 4px;
}

html:not(.dark-mode) body #fancybox-frame {
	filter:
		sepia(20%)
		invert(91.5%);
}

#fancybox-outer #fancybox-close {
	top: auto;
	bottom: 12px;
	right: 20px;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Rewatch-Box
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

.ownlist #fancybox-wrap:not([style*="width: 1000px;"]) {
	left: calc(50% - 160px) !important;
	width: auto !important;
	height: auto !important;
}

#fancybox-wrap:not([style*="width: 1000px;"]) #fancybox-close {
	display: none !important;
}

#fancybox-wrap:not([style*="width: 1000px;"]) #fancybox-outer {
	padding: 12px;
}

#fancybox-wrap:not([style*="width: 1000px;"]) #fancybox-inner {
	width: auto !important;
	height: auto !important;
}

div[style^="width: 300px;"] {
	width: 100% !important;
	height: 100% !important;
	font: 0/0 var(--font) !important;
}

div[style^="width: 300px;"]::before {
	content: 'Finished rewatching?';
	color: hsla(var(--text), 88%);
	font-size: 14px;
	line-height: 1;
}

div[style^="width: 300px;"] div {
	display: flex;
	margin-top: 9px !important;
}

div[style^="width: 300px;"] input {
	width: auto;
	padding: 0 12px;
	font-family: inherit;
	cursor: pointer;
	text-transform: capitalize;
} div[style^="width: 300px;"] input + input {
	margin-left: 9px;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\
  @Filter-Menu
\*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

#advanced-options {
	position: fixed;
	top: calc(50px + 10vh);
	
	--pad: 100vw;
	width: calc(630px + 0.111 * (var(--pad) - 700px));
	min-width: 630px;
	max-width: 730px;
	height: auto;
	padding: 0 calc(40px + 0.05 * (var(--pad) - 700px)) 12px;
	background: hsl(var(--bg));
	box-shadow: -1.6px 2.24px 4.48px hsla(0, 0%, 0%, 70%);
	border: none;
	
	color: hsla(var(--text), 88%);
	font-family: var(--font);
}

@media (min-width: 1600px) {
	#advanced-options {
		--pad: 1600px;
	}
}

#advanced-options #fancybox-close {
	top: auto;
	bottom: 24px;
	right: calc(40px + 0.05 * (var(--pad) - 700px));
}

#advanced-options div {
	padding: 12px 0;
}

#advanced-options .advanced-options-header {
	width: 100%;
	height: 32px;
	border: none;
	
	font-size: 15px;
	line-height: 28px;
	text-align: left;
	text-transform: uppercase;
}

#advanced-options .advanced-options-header .description {
	display: none;
}

#advanced-options .sort-widget,
#advanced-options .filter-widget {
	display: flex;
	width: 100%;
	padding: 12px 12px 0 108px;
}

#advanced-options .sort-widget:last-of-type,
#advanced-options .filter-widget:last-of-type {
	padding-bottom: 12px;
}

#advanced-options .sort-widget .widget-header,
#advanced-options .filter-widget .widget-header {
	width: 108px;
	padding-left: 12px;
	margin-left: -108px;
	flex: 0 0 auto;
	font: 13px/22px var(--font);
}

#advanced-options input,
#advanced-options .sort-widget select,
#advanced-options .filter-widget select,
#advanced-options .sort-widget label {
	height: 24px !important;
	background: calc(100% - 5px) center / auto no-repeat hsl(var(--btn));
	border: none !important;
	border-radius: 3px;
	margin-right: 2%;
	flex: 0 1 auto;
	
	color: hsla(var(--text), 88%);
	font: 13px/16px var(--font);
}

#advanced-options .sort-widget select,
#advanced-options .filter-widget select {
	background-image: var(--arrowDn);
}

#advanced-options .sort-widget select:disabled,
#advanced-options .filter-widget select:disabled {
	background-blend-mode: soft-light;
	opacity: 0.57;
}

#advanced-options .filter-widget.title input[type="text"] {
	width: 80%;
}

#advanced-options .filter-widget.airing-status select,
#advanced-options .filter-widget.publishing-status select {
	width: 60%;
}

#advanced-options .filter-widget.producer select,
#advanced-options .filter-widget.magazine select {
	width: 60%;
}

#advanced-options .filter-widget.aired-date select.year,
#advanced-options .filter-widget.published-date select.year {
	width: 15%;
	border-radius: 4px 0 0 4px;
	margin-right: 0;
}

#advanced-options .filter-widget.aired-date select.month,
#advanced-options .filter-widget.published-date select.month {
	width: 12%;
	border-radius: 0;
	margin-right: 0;
}

#advanced-options .filter-widget.aired-date select.day,
#advanced-options .filter-widget.published-date select.day {
	width: 12%;
	border-radius: 0 4px 4px 0;
}

#advanced-options .filter-widget.aired-date .text,
#advanced-options .filter-widget.published-date .text {
	display: none;
}

#advanced-options .filter-widget.aired-season select.year {
	width: 20%;
}

#advanced-options .filter-widget.aired-season select.season {
	width: 28%;
}

#advanced-options .sort-widget select {
	width: 34%;
}

#advanced-options .sort-widget input[type=radio] + label {
	width: 12%;
	padding: 0;
	background: hsl(var(--btn)) !important;
	border: 2px solid hsla(var(--btnLight)) !important;
	margin: 0;
	
	color: hsla(var(--text), 88%) !important;
	line-height: 18px;
	
	transition: all var(--timeButton) var(--bezierFast);
} #advanced-options .sort-widget input[type=radio] + label:first-of-type {
	border-radius: 3px 0 0 3px;
	border-right-width: 0 !important;
} #advanced-options .sort-widget input[type=radio] + label:last-of-type {
	border-radius: 0 3px 3px 0;
	border-left-width: 0 !important;
} #advanced-options .sort-widget :not(:disabled) + label:hover,
#advanced-options .sort-widget :not(:disabled):checked + label {
	border-color: hsl(var(--btnAccent)) !important;
	color: hsl(var(--accent)) !important;
} #advanced-options .sort-widget input[type="radio"]:disabled + label {
	opacity: 0.57;
	cursor: default;
}

#advanced-options .advanced-options-button {
	width: 100%;
	padding: 12px 0;
	border: none;
	font-size: 0;
	text-align: left;
}

#advanced-options .advanced-options-button a {
	margin-right: 9px;
	box-shadow: none;
}


/*==============================*\
  !FOOTER
\*------------------------------*/

#footer-block {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	
	width: 100% !important;
	height: 60px;
	padding: 22px 0;
	background: none;
	
	font: 13px/16px var(--font);
}

#copyright {
	display: inline-block;
	padding: 0;
	color: hsla(var(--text), 40%);
	font: inherit;
	text-shadow: -0.6px 0.84px 1.68px hsl(var(--bg));
	transition: color var(--timeText) var(--bezierFast);
	cursor: text;
} #copyright:hover {
	color: hsla(var(--text), 100%)
}

#copyright::after {
	content: "List design by Valerio Lyndon.";
}

.list-unit .list-stats {
	position: absolute;
	bottom: 40px;
	left: 0;
	
	display: block !important;
	width: 100%;
	height: 16px;
	background: none;
	margin: 0 auto;
	
	color: hsla(var(--text), 40%);
	font: 12px/16px var(--font);
	
	/*Toggle*/
	visibility: var(--toggleStats);
}

.list-unit .list-stats a.floatRightHeader {
	display: none;
}


/*==============================*\
  !MEDIA-QUERIES
\*------------------------------*/

/* This section:
 * - Moves and resizes many elements to display better on small lists.
 */
@media (max-width: 926px) {
	.list-block {
		min-height: calc(100vh - (42px + (700px * 0.3)));
		padding-top: 106px;
	}
	
	.status-menu {
		transition: width var(--timeMenu) var(--bezierFast)
	}
	#status-menu:not(.fixed) .status-menu {
		width: 560px;
	}
	
	#status-menu .search-container {
		top: 62px;
		left: calc(50% - 32px);
		width: 250px;
	}
	
	.list-unit .list-status-title {
		top: 62px;
		left: calc(50% - 218px);
	}
	.list-unit .list-status-title .stats {
		top: 83px;
	}
	.list-unit .list-status-title .stats a {
		width: 84px;
	}
	
	.list-table > tbody:first-of-type {
		top: 62px;
		left: calc(50% - 125px);
		width: 84px;
	}
	.list-table > tbody:first-of-type::before {
		top: 62px;
	}
	
	body #fancybox-wrap {
		left: calc(50% - (190px + (700px * 0.2))) !important;
		width: calc(380px + (700px * 0.4)) !important;
	}
	
	#advanced-options {
		position: absolute;
		padding: 0 40px 12px;
	}
}

/* These sections:
 * - Adjust list width to fit an amount of list item columns
 *   min-width formula: 223.5px (list item) * # (columns) + 16px (extra spacing) + 17px (scrollbar)
 *   listW formula: 223.5px (list item) * # (columns) + 16px (extra spacing)
 */
 
@media (min-width: 0px) {
	:root {
		/*3*/
		--listW: 686.5px;
	}
}
@media (min-width: 927px) {
	:root {
		/*4*/
		--listW: 910px;
	}
}
@media (min-width: 1150.5px) {
	:root {
		/*5*/
		--listW: 1133.5px;
	}
}
@media (min-width: 1374px) {
	:root {
		/*6*/
		--listW: 1357px;
	}
}
@media (min-width: 1597.5px) {
	:root {
		/*7*/
		--listW: 1580.5px;
	}
}
@media (min-width: 1821px) {
	:root {
		/*8*/
		--listW: 1804px;
	}
}

/*==============================*\
  !FIXES
\*------------------------------*/

/* MAL Security Fix
 * - Replaces SVG files with PNG due to SVG getting blocked by MAL.
 */

[data-owner=""] {
	--arrowUp: url(https://i.imgur.com/Cu2u9Hu.png);
	--arrowRt: url(https://i.imgur.com/vqOtoms.png);
	--arrowDn: url(https://i.imgur.com/0YI7VxA.png);
	--arrowLt: url(https://i.imgur.com/BArw1oI.png);
}

[data-owner=""] .header .header-title {
	background-image: url(https://i.imgur.com/g0WEEth.png);
}

[data-owner=""] .list-menu-float::after,
[data-owner=""] .list-container::before {
	background-image: url(https://i.imgur.com/Ly6A4ph.png);
}

[data-owner=""] .list-unit .loading-space i {
	background-image: url(https://i.imgur.com/1NLFsAe.png);
}

/* Firefox Tweaks & Fixes */

@-moz-document url-prefix() {
	/* Performance */
	.list-item {
		will-change: transform;
	}
	
	/* Visual Tweaks */
	.data.title {
		padding-top: 2px !important;
	}
	
	/* fix for search transition being out of sync on Firefox */
	.search-container {
		will-change: top;
	}
}

/* Ad area on certain styles */

div[style="padding-top: 8px"] {
	display: none;
}

/*==============================*\
  !MODS
\*------------------------------*/