/*------------------------------*\
|             IMPORTS            |
\*------------------------------*/

@\import "https://dl.dropboxusercontent.com/s/btg20q1gkpgppm4/Clarity-Theme.css";

@\import "https://dl.dropboxusercontent.com/s/wbfk1iqb34x3oec/Clarity-Theme-DarkMode.css";

@\import "https://malscraper.azurewebsites.net/covers/anime/LEGENDS_OF_ANIME/presets/dataimagelinkbefore";

@\import "https://malscraper.azurewebsites.net/covers/anime/LEGENDS_OF_ANIME/presets/dataimagelinkbefore";


/*=====================*\
|Dark Mode Filter Fix   |
\*=====================*/
body[data-owner="1"] #fancybox-frame { filter: none; }

/*================================*/

/*------------------------------*\
|              NAME              |
\*------------------------------*/
body { --name: "LEGENDS OF\a   ANIME"; }
#cover-image-container:after {
    top: 55px;
    left: 33%;
}

body { --character: none; }

#cover-image-container:after {
    text-shadow: 1px 4px 5px #274970;
    color: #26a39c;
}



/*
██╗███╗░░░███╗░█████╗░░██████╗░███████╗░██████╗
██║████╗░████║██╔══██╗██╔════╝░██╔════╝██╔════╝
██║██╔████╔██║███████║██║░░██╗░█████╗░░╚█████╗░
██║██║╚██╔╝██║██╔══██║██║░░╚██╗██╔══╝░░░╚═══██╗
██║██║░╚═╝░██║██║░░██║╚██████╔╝███████╗██████╔╝
╚═╝╚═╝░░░░░╚═╝╚═╝░░╚═╝░╚═════╝░╚══════╝╚═════╝░
*/
/*------------------------------*\
|           AVATAR               |
\*------------------------------*/
[data-query*="status\":7"] { --avatar: url(https://i.imgur.com/PMRwrZV.png); }
/* Watching */
[data-query*="status\":1"] { --avatar: url(https://i.imgur.com/6WDDcbc.gif); }
/* Completed */
[data-query*="status\":2"] { --avatar: url(https://i.imgur.com/okrCnDO.gif); }
/* Onhold */
[data-query*="status\":3"] { --avatar: url(https://i.imgur.com/bjFQzKs.gif); }
/* Dropped */
[data-query*="status\":4"] { --avatar: url(https://i.imgur.com/EuWYXkT.gif); }
/* Planned */
[data-query*="status\":6"] { --avatar: url(https://i.imgur.com/twVcJxJ.gif); }


/*AVATAR LOCATION*/
.status-menu:after {
    left: -12px;
    border-radius: 30%;
    top: -55px;
}

/*------------------------------*\
|             BANNER             |
\*------------------------------*/
/* All Anime */
[data-query*='status":7'] { --banner: url(https://i.imgur.com/6Oscn4T.jpg); }
/* Watching/Reading */
[data-query*='status":1'] { --banner: url(https://i.imgur.com/0YfSPBK.png); }
/* Completed */
[data-query*='status":2'] { --banner: url(https://i.imgur.com/i5yfzkd.jpg); }
/* Onhold */
[data-query*='status":3'] { --banner: url(https://i.imgur.com/qWsIEf8.jpg); }
/* Dropped */
[data-query*='status":4'] { --banner: url(https://i.imgur.com/hhd4Pdx.png?1); }
/* Planned */
[data-query*='status":6'] { --banner: url(https://i.imgur.com/73pNrNU.jpg); }


/*------------------------------*\
|     CHANGE BANNER HIGHT        |
\*------------------------------*/
/*Change number here*/
:root { --banner-height: 500px; }

.cover-block { height: var(--banner-height); }
.header { margin-top: calc(var(--banner-height) - 36px); }
.list-stats { top: calc(var(--banner-height) + 98px); }


/*------------------------------*\
|           BACKGROUND           |
\*------------------------------*/
/* All Anime */
body[data-query*='status":7'] { --background: url(https://i.imgur.com/Ax7MtRm.jpg); }
/* Watching/Reading */
body[data-query*='status":1'] { --background: url(https://i.imgur.com/Ax7MtRm.jpg); }
/* Completed */
body[data-query*='status":2'] { --background: url(https://i.imgur.com/Ax7MtRm.jpg); }
/* Onhold */
body[data-query*='status":3'] { --background: url(https://i.imgur.com/Ax7MtRm.jpg); }
/* Dropped */
body[data-query*='status":4'] { --background: url(https://i.imgur.com/Ax7MtRm.jpg); }
/* Planned */
body[data-query*='status":6'] { --background: url(https://i.imgur.com/Ax7MtRm.jpg); }


/*
░█████╗░░█████╗░██╗░░░░░░█████╗░██████╗░
██╔══██╗██╔══██╗██║░░░░░██╔══██╗██╔══██╗
██║░░╚═╝██║░░██║██║░░░░░██║░░██║██████╔╝
██║░░██╗██║░░██║██║░░░░░██║░░██║██╔══██╗
╚█████╔╝╚█████╔╝███████╗╚█████╔╝██║░░██║
░╚════╝░░╚════╝░╚══════╝░╚════╝░╚═╝░░╚═╝
*/

/*EDIT/MORE TEXT*/
.add-edit-more {
	/* text */
	--text-dim: #a3a0a0;
	/* text on hover */
	--text-dim-h: #bfbdbd;
}

/*------------------------------*\
|    CATEGORY LINE BORDER        |
\*------------------------------*/
[data-query*='status":7']
{--header-border:var(--accent)}

[data-query*='status":1']{--header-border:var(--watching)}

[data-query*='status":2']{--header-border:var(--completed)}

[data-query*='status":3']{--header-border:var(--onhold)}

[data-query*='status":4']{--header-border:var(--dropped)}

[data-query*='status":6']{--header-border:var(--plantowatch)}

.status-menu-container:before{
  height:56px;
  border-width:4px 0;
  border-style:solid;
  border-color:var(--header-border)}

.status-menu:after{
  left:-4px;
  top:-47px;
  border-width:4px;
  box-shadow:0 0 0 4px var(--header-border)}
  
.fixed .status-menu:after{
	top:4px;
}

/*------------------------------*\
|       STATUS TEXT COLORS       |
\*------------------------------*/
:root {
  	/* Status Colours */
	/*--watching: #2db039;*/
	--watching: #2ad449;
	--completed: #3492f7;
	--onhold: #f7ff03;
	--dropped: #d1171a;
	--plantowatch: #fff;
}

/*------------------------------*\
|    HEARDER STATUS TEXT COLOR   |
\*------------------------------*/
.status-menu 
.status-button{transition:color .3s ease}

.status-menu 
.status-button.on:nth-of-type(1),

.status-menu 
.status-button:nth-of-type(1):hover{color:var(--accent)!important}

.status-menu 
.status-button.on:nth-of-type(2),

.status-menu 
.status-button:nth-of-type(2):hover{color:var(--watching)!important}

.status-menu 
.status-button.on:nth-of-type(3),

.status-menu 
.status-button:nth-of-type(3):hover{color:var(--completed)!important}

.status-menu 
.status-button.on:nth-of-type(4),

.status-menu 
.status-button:nth-of-type(4):hover{color:var(--onhold)!important}

.status-menu 
.status-button.on:nth-of-type(5),

.status-menu 
.status-button:nth-of-type(5):hover{color:var(--dropped)!important}

.status-menu 
.status-button.on:nth-of-type(6),

.status-menu 
.status-button:nth-of-type(6):hover{color:var(--plantowatch)!important}






/*------------------------------*\
|   AIRING/NOT AIRING TEXT       |
\*------------------------------*/
.data.title {
	padding: 10px !important;
	height: auto;
}

.data.title::after {
	content: none;
}

.data.title .link.sort {
	position: static;
	display: inline;
	padding-right: 0;
	margin-right: 3px;
	white-space: normal;
}

.content-status,
.rereading,
.rewatching {
	--text-dim: #a3a0a0;
    --text-dim-h: #bfbdbd;
  
}

.content-status::before,
.rereading::before,
.rewatching::before,
.content-status::after,
.rereading::after,
.rewatching::after {
	content: none;
}

.list-table .list-table-data .data.title .add-edit-more {
	display: block;
	height: 15px;
}


/*------------------------------*\
|    SCORE DESCRIPTION POPUP     |
\*------------------------------*/
/*
.score-na::before {
	content: "- NOT DECIDED";
}
.score-10::before {
	content: "10 MASTERPIECE";
}
*/

/*------------------------------*\
|        PREVIEW IMAGE           |
\*------------------------------*/
.data.image a {
	overflow: visible;
}

.data.image a:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -186px;
	z-index: 50;
	
	width: 150px;
	height: 0;
	background: var(--bg-dark) no-repeat center / cover;
	border-radius: 8px;
	box-shadow: 0 0 2px #000;
	
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
}

.list-item:hover .data.image a:before {
	top: calc(50% - 100px);
	
	height: 200px;
	
	opacity: 1;
}

.data.image img, .data.image a:after {
	border-radius: 50%;
}

/*------------------------------*\
|    PREVIEW IMAGE BORDER        |
\*------------------------------*/
/*Border*/
.data.image a::before {
	border: 3px solid var(--item-category);
	box-sizing: border-box;
}

/*------------------------------*\
|   HOVER IMAGE COLOR SETUP      |
\*------------------------------*/
.watching ~ .data, .reading ~ .data {
	--item-category: var(--watching);
	--item-category-contrast: #fff;
} .completed ~ .data {
	--item-category: var(--completed);
	--item-category-contrast: #fff;
} .onhold ~ .data {
	--item-category: var(--onhold);
	--item-category-contrast: #fff;
} .dropped ~ .data {
	--item-category: var(--dropped);
	--item-category-contrast: #fff;
} .plantowatch ~ .data, .plantoread ~ .data {
	--item-category: var(--plantowatch);
	--item-category-contrast: #fff;
}

/*------------------------------*\
|     CUSTOM HOVER IMAGES        |
\*------------------------------*/
/*
.data.image a[href^="/anime/41487/"]:before {
	background-image:url(https://cdn.myanimelist.net/images/anime/1236/113727l.jpg)
}
*/

/*------------------------------*\
|  Transparent List Rows         |
\*------------------------------*/
:root {
	/* Change colour here */
	--row-tint: rgba(33,33,33,0.5);
}

.list-item, .data.priority, .data.number, .data.status:before, .data.status:after {
	background: linear-gradient(var(--row-tint),var(--row-tint)), var(--background) no-repeat center / cover fixed transparent !important;}

/* Internals */
.score-label {
	display: inline-block;
	transition: color 0.3s ease;
}

.score-label:hover {
	color: #fff !important;
}

.score-label::before {
	position: absolute;
	z-index: 1;
	padding: 4px 8px;
	background: #111;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.3s ease;
	white-space: pre;
	text-align: left;
	pointer-events: none;
	margin-top: -4px;
	margin-left: -10px;
}

/* Fix for use with score-based row outlines */
.score-label::after {
	pointer-events: none;
}

.score a:hover .score-label::before {
	opacity: 1;
}



/*------------------------------*\
|      ENTRY NUMBER COLOR        |
\*------------------------------*/
.data.number {
	background-color: var(--btn-bg) !important;
	color: #cfcfcf;
}

/*

██████╗░░█████╗░░██╗░░░░░░░██╗
██╔══██╗██╔══██╗░██║░░██╗░░██║
██████╔╝██║░░██║░╚██╗████╗██╔╝
██╔══██╗██║░░██║░░████╔═████║░
██║░░██║╚█████╔╝░░╚██╔╝░╚██╔╝░
╚═╝░░╚═╝░╚════╝░░░░╚═╝░░░╚═╝░░
*/

/*ROW STATUS BAR SIZE*/
.data.status { width: 3px !important; }
.list-table-data { padding-left: 0px; }


/*------------------------------*\
|  ROW ELEMENTS COLOR CONFIG     |
\*------------------------------*/
.data.progress span:only-of-type:after{
  content:" \f058";
  color:var(--item-category)!important;
}
.list-table .list-table-data .data a {
    color: #fff !important;
    text-decoration: none!important;
}
.data.chapter span, .data.progress span, .data.volume span {
    color: #fff;
}

.data.progress:before {
    content: "Progress:";
    color: #fff;
}
.data.started {
    top: -10px;
}
.data.finished {
	top: 8px;
	margin-left: -100px;
}
.data.type {
    top: -22px;
}

.data.days {
	top: 25px;
	left: 0;
	margin-left: -100px;
}


.data.airing-finished:before, .data.airing-started:before, .data.days:before, .data.finished:before, .data.started:before {
    color: #a8a8a8;
}


/*------------------------------*\
|     ROW HOVER ANIMATION        |
\*------------------------------*/
.list-item:hover {
  transform:scale(1.03);
}
.list-item:hover {
	z-index: 1; 
}
.list-item:hover {
	background-color: #292929 !important;
}


/*------------------------------*\
|      ROW BACKGROUND            |
\*------------------------------*/
.list-item {
	z-index: 0;
	background: none !important;
}

.data.title {
	position: static;
}

.title .link::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: linear-gradient(var(--row-tint),var(--row-tint)), var(--background) no-repeat center / cover fixed;
	pointer-events: none;
}


/*------------------------------*\
|  HEADER - ROW LIST SPACING     |
\*------------------------------*/
.list-table > tbody:first-of-type {
	/* adjust this number to increase or decrease spacing
	 * negative numbers e.x -12px are accepted */
	margin-bottom: 17px;
}

/*

██╗░░░░░██╗░██████╗████████╗
██║░░░░░██║██╔════╝╚══██╔══╝
██║░░░░░██║╚█████╗░░░░██║░░░
██║░░░░░██║░╚═══██╗░░░██║░░░
███████╗██║██████╔╝░░░██║░░░
╚══════╝╚═╝╚═════╝░░░░╚═╝░░░
*/

/*------------------------------*\
|    Change List Width           |
\*------------------------------*/
:root {
	--listWidth: 1140px; /* desired list width - 1060px is default */
}

.list-block {
	min-width: 1060px; /* Minimum list width */
	width: var(--listWidth);
	max-width: calc(100% - 30px); /* prevents list overflowing page edges */
}

.list-table-data {
	max-width: var(--listWidth);
}

/* change some items so they remain in their correct positions after width change */
.list-unit .list-status-title {
	width: 100%;
}

.list-status-title .stats {
	right: calc(50% - 498px) !important;
}

.list-table > tbody:first-of-type {
	left: calc(50% + 502px);
}

/* Tag edit button fix */
.data.tags a.edit {
    right: -1140px;
    width: 8px!important;
}

/*

████████╗░█████╗░░██████╗░░██████╗
╚══██╔══╝██╔══██╗██╔════╝░██╔════╝
░░░██║░░░███████║██║░░██╗░╚█████╗░
░░░██║░░░██╔══██║██║░░╚██╗░╚═══██╗
░░░██║░░░██║░░██║╚██████╔╝██████╔╝
░░░╚═╝░░░╚═╝░░╚═╝░╚═════╝░╚═════╝░
*/

/*------------------------------*\
|       HORIZONTAL TAGS          |
\*------------------------------*/
.list-table-data {
	padding-bottom: 20px;
}
.data.tags{
  position:absolute;
  left:0;
  top:0;
  display:flex!important;
  width:0;
  height:100%;
  padding:0!important;
  align-items:flex-end
}
.data.tags div{
  max-width:980px;
  margin:0 0 4px 80px;
  font-size:0;
  white-space:nowrap
}
.data.tags span{
  display:inline-block;
  padding:0
}
.data.tags span a{
  padding:1px 8px!important;
  margin:0 4px 0 0;
  white-space:nowrap
}

/*
.data.tags span a[href*="=Favo"]{
  padding:0!important
}
*/

.data.tags a.edit{right:-1060px}.data.tags textarea{right:-1060px}


/*------------------------------*\
|          GENRES TAGS           |
\*------------------------------*/



/*------------------------------*\
|       NON-GENRE TAGS           |
\*------------------------------*/
.data.tags span a[href*="=Rewatched"] { background: BGCOLOUR; color: #7463c9 !important }

/*  Template
.data.tags span a[href*="=TAG_HERE"] { background: BGCOLOUR; color: # !important }
*/

/*------------------------------*\
|       TAG DESCRIPTION          |
/*------------------------------*/

/* Template
.data.tags a[href*="=TAG_HERE"]:after {
	content: "DESCRIPTION_HERE"
}
*/



/*------------------------------*\
|    TAG DESCRIPTION CONFIG      |
\*------------------------------*/
/* Tag Descriptions - Base */
/*
.data.tags span a { position: relative; }
.data.tags span a:after, 
.data.tags span a:before {
	position: absolute;
	z-index: 5;
	
	display: block;
	
	opacity: 0;
	transition: all 0.15s ease;
	pointer-events: none;
}
.data.tags span a:after {
	top: 27px;
	left: calc(50% - 345px);
	
	width: auto;
	max-width: 340px;
	height: auto;
	padding: 4px 8px;
	background: var(--btn-bg);
	border: 1px solid var(--text-dim);
	border-radius: 4px;
	
	box-sizing: border-box;
	
	color: var(--text);
	font: 11px/15px Arial, Verdana;
	text-align: left;
	white-space: pre-wrap;
	
	transform: translateX(-50%) translateX(340px);
}
.data.tags span a:before {
	content: "";
	top: 17px;
	left: 50%;
	
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent var(--text-dim) transparent;
	margin-left: -10px;
}
.data.tags span a:hover:after {
	left: calc(50% - 340px);
	
	opacity: 1;
}
/*




/*
░█████╗░██████╗░██████╗░   ███████╗██╗░░░░░███████╗███╗░░░███╗███████╗███╗░░██╗████████╗░██████╗
██╔══██╗██╔══██╗██╔══██╗   ██╔════╝██║░░░░░██╔════╝████╗░████║██╔════╝████╗░██║╚══██╔══╝██╔════╝
███████║██║░░██║██║░░██║   █████╗░░██║░░░░░█████╗░░██╔████╔██║█████╗░░██╔██╗██║░░░██║░░░╚█████╗░
██╔══██║██║░░██║██║░░██║   ██╔══╝░░██║░░░░░██╔══╝░░██║╚██╔╝██║██╔══╝░░██║╚████║░░░██║░░░░╚═══██╗
██║░░██║██████╔╝██████╔╝   ███████╗███████╗███████╗██║░╚═╝░██║███████╗██║░╚███║░░░██║░░░██████╔╝
╚═╝░░╚═╝╚═════╝░╚═════╝░   ╚══════╝╚══════╝╚══════╝╚═╝░░░░░╚═╝╚══════╝╚═╝░░╚══╝░░░╚═╝░░░╚═════╝░
*/

/*------------------------/
|     DECIMAL SCORES      |
/------------------------*/
.data.tags a[href*="=.0"],
.data.tags a[href*="=.1"],
.data.tags a[href*="=.2"],
.data.tags a[href*="=.3"],
.data.tags a[href*="=.4"],
.data.tags a[href*="=.5"],
.data.tags a[href*="=.6"], 
.data.tags a[href*="=.7"], 
.data.tags a[href*="=.8"], 
.data.tags a[href*="=.9"] {
	position: absolute;
	top: calc(50% - 17px);
	left: 576px;
	width: 16px;
	height: 16px;
	padding: 0 !important;
	font-size: 10px !important;
	line-height: 16px;
	border-radius: 0 50% 50% 0;
	pointer-events: none;
}

/*--------------------------\
|    List Table border      |
\--------------------------*/
.data.status::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
	z-index: -1;
	width: var(--listWidth);
	height: 100%;
	pointer-events: none;
}
.data.status.watching::before,
.data.status.reading::before {
	box-shadow: 0 0 0 1px var(--watching);
}
.data.status.completed::before {
	box-shadow: 0 0 0 1px var(--completed);
}
.data.status.onhold::before {
	box-shadow: 0 0 0 1px var(--onhold);
}
.data.status.dropped::before {
	box-shadow: 0 0 0 1px var(--dropped);
}
.data.status.plantowatch::before,
.data.status.plantoread::before {
	box-shadow: 0 0 0 1px var(--plantowatch);
}

/*
██████╗░░█████╗░████████╗░█████╗░██╗░░██╗
██╔══██╗██╔══██╗╚══██╔══╝██╔══██╗██║░░██║
██████╔╝███████║░░░██║░░░██║░░╚═╝███████║
██╔═══╝░██╔══██║░░░██║░░░██║░░██╗██╔══██║
██║░░░░░██║░░██║░░░██║░░░╚█████╔╝██║░░██║
╚═╝░░░░░╚═╝░░╚═╝░░░╚═╝░░░░╚════╝░╚═╝░░╚═╝
*/

/* CLARITY THEMES + DEMOGRAPHICS PATCH */

.list-table .list-table-data .data.genre {
	position: absolute;
	margin-top: 45px;
	margin-left: 81px;
	text-align: left;
	color: var(--text-dim) !important;
}
	
.list-table .list-table-data .data.genre a{
	color: var(--text-dim) !important;
	font-size: 0.9em;
}
.list-table .list-table-data .data.genre a:hover{
	color:var(--text-dim-h) !important
}
	
.list-table .list-table-data .data.demographic {
	margin-top: 52px;
	right: 16px;
	font-size: 0.6rem;
	position: absolute;
}

.list-table .list-table-data a[href*="&demographic"] {
	color: #549790!important;
}

.list-table .list-table-data a[href*="&demographic"]:hover{
	color: #25d1bf!important;
}


/* ======================================================== */
.list-table .list-table-data .data.title .link {
    color: #4ba791!important;
}

.list-table .list-table-data .data.title .link:hover {
color: #25d1bf!important;
}


.data.airing-finished:before,
.data.airing-started:before,
.data.days:before,
.data.finished:before,
.data.started:before,
.data.airing-finished::after,
.data.airing-started::after,
.data.days::after,
.data.finished::after,
.data.started::after,
.data.airing-finished,
.data.airing-started,
.data.days,
.data.finished,
.data.started {
    color: #549790!important;
}

.content-status, .rereading, .rewatching {
    color: #cf3e3e!important;
}

.data.number {
    color: #39a199;
}



/*-S-T-A-R-T--------------------*\
| Overflow Titles on Hover       |
\*------------------------------*/

.data.title .link.sort {
	display: block;
	height: 16px;
	border-radius: 3px;
	padding: 0;
	margin-right: 8px;
	overflow: hidden;
	white-space: normal;
	transition: none !important;
} .data.title .link.sort:hover {
	z-index: 1;
	height: auto;
	padding: 2px 4px;
	background: var(--btn-bg);
	margin: 8px 0 0 -4px;
	transform: translateY(-50%);
}


/*-S-T-A-R-T--------------------*\
| Overflow Titles on Hover CUSTOM|
\*------------------------------*/

.data.title .link.sort {
	display: inline-block;
	vertical-align: top;
	max-width: calc(100% - 50px);
	height: 16px;
	border-radius: 3px;
	padding: 0;
	margin-right: 8px;
	overflow: hidden;
	white-space: nowrap;
	transition: none !important;
}

.data.title .link.sort:hover {
	position: absolute;
	left: 82px;
	top: calc(50% - 25px);
	display: block;
	max-width: 470px;
	z-index: 1;
	height: auto;
	padding: 2px 4px;
	background: var(--btn-bg);
	white-space: normal;
	transform: translateY(-50%);
}

.data.title {
	padding-bottom: 25px !important;
}

.add-edit-more {
	position: absolute;
	left: 82px;
	top: calc(50% - 20px + 11px);
}


.data.started:before,
.data.finished:before,
.data.days:before,
.data.airing-started:before,
.data.airing-finished:before {
	border-right: 1px solid #25bfae!important;
	color: #25bfae!important;
}

/*------------------------E-N-D-*/