/*==============
VARIABLE OPTIONS
==============*/

/* COLOURS */
:root {
    /* List Text Colour */
    --text: #C41E6A ;
}

/* OTHER OPTIONS */

/*
--tag-width controls the width of the tags and title sections.
  Change this to accomodate a greater of lesser amount of list columns.
  Smaller width = more space for other columns

--row-height controls the amount of text lines the rows can fit.
  Raise this number as needed when you lower the tag-width.
  If your tags are overlapping on the 5th line, set it to 5.

--title-offset controls the title width as compared to the tags.
  Increase this number if the edit/more buttons are getting wrapped to the next line.

--tag-offset controls how far from the left-side of the list the tags appear.
  This generally shouldn't need changing, but if the tags appear misaligned
  with the title, change this number.

These options can be changed separately for the anime and manga lists.
*/

/* Animelist settings */
.anime {
    --tag-width: 600px ;
    --row-height: 3 ;
    --title-offset: 110px ;
    --tag-offset: 124px ;
}

/* Mangalist settings */
.manga {
    --tag-width: 550px ;
    --row-height: 4 ;
    --title-offset: 110px ;
    --tag-offset: 124px ;
}

/*=========================
CHANGE TEXT COLOURS & SIZES
=========================*/

/* GENERIC */

body,
#status-menu .status-button,
.list-table .list-table-header .header-title .link,
.list-table .list-table-header .header-title .link.sort,
.list-table .list-table-data .data .link {
    color: var(--text);
}

.list-table .list-table-data .tags a {
    color: var(--text) !important;
}

/* CATEGORY HEADERS */

#status-menu .status-button {
    /* Fallback colour */
    color: COLOUR;
} #status-menu .status-button:nth-child(1) {
    /* All items */
    color: COLOUR;
} #status-menu .status-button:nth-child(2) {
    /* Current */
    color: COLOUR;
} #status-menu .status-button:nth-child(3) {
    /* Completed */
    color: COLOUR;
} #status-menu .status-button:nth-child(4) {
    /* On hold */
    color: COLOUR;
} #status-menu .status-button:nth-child(5) {
    /* Dropped */
    color: COLOUR;
} #status-menu .status-button:nth-child(6) {
    /* Planned */
    color: COLOUR;
}

/* CATEGORY TITLE */

.list-unit .list-status-title .text {
    color: COLOUR;
}

/* STAT/FILTER BUTTONS */

#show-stats-button {
    color: COLOUR;
}

#advanced-options-button {
    color: COLOUR;
}

/* STATUS COLUMN */

.list-table .list-table-data .data.status.reading,
.list-table .list-table-data .data.status.watching {
    /* Current */
    background-color: COLOUR;
}

.list-table .list-table-data .data.status.completed {
    /* Completed */
    background-color: COLOUR;
}

.list-table .list-table-data .data.status.onhold {
    /* On Hold */
    background-color: COLOUR;
}

.list-table .list-table-data .data.status.dropped {
    /* Dropped */
    background-color: #FF0000;
}

.list-table .list-table-data .data.status.plantoread,
.list-table .list-table-data .data.status.plantowatch {
    /* Planned */
    background-color: COLOUR;
}

/* NUMBER COLUMN */

.header-title.number,
.data.number {
    color: COLOUR;
}

/* IMAGE COLUMN */

.list-table .list-table-header .header-title.image .link {
    color: COLOUR;
}

/* TITLE COLUMN */

.list-table .list-table-data .data.title .link {
    color: COLOUR;
    font-size:1.3em;
}

/* SCORE COLUMN */

.list-table .list-table-header .header-title.score .link,
.list-table .list-table-data .data.score .link {
    color: black;
}

/* TYPE COLUMN */

.list-table .list-table-header .header-title.type .link,
.data.type {
    color: COLOUR;
}

/* PROGRESS COLUMN */

.list-table .list-table-header .header-title.progress .link,
.list-table .list-table-data .data.progress,
.list-table .list-table-data .data.progress .link {
    color: COLOUR;
}

/* TAGS COLUMN */

.list-table .list-table-data .tags div {
    font-size: 1.1em;
}

.list-table .list-table-data .tags span,
.list-table .list-table-data .tags a {
    color: COLOUR !important;
}
/* SCORE COLUMN */

/* Header */
.list-table .list-table-header .header-title.score .link {
    font-size: 1.1em;
}

/* Cell */
.list-table .list-table-data .data.score .link {
    font-size: 1.3em;
}

/*===============
MOVE TAG LOCATION
===============*/

/* Force list row height to prevent overflow issues */
.list-table-data {
    height: calc(25px + 16px * var(--row-height));
    /* tag padding PLUS ( tag line height TIMES lines ) */
}

/* Force tag line height for consistency with calc function */
.data.tags { line-height: 16px; }

/* Align title to Top */
.list-table .list-table-data .data.title { vertical-align: top; }

/* Set max title width */
.data.title {
    width: var(--tag-width);
    min-width: var(--tag-width);
}

.data.title .link {
    /* Prevent multi-line titles */
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: left;
    /* Force width to prevent edit/more from wrapping to next line */
    max-width: calc(var(--tag-width) - var(--title-offset));
}

/* Remove tag column header */
.list-table .list-table-header .header-title.tags {
    width: 0;
    padding: 0;
    font-size: 0;
}

/* Reposition tags */
.list-table .list-table-data .data.tags {
    position: absolute;
    left: var(--tag-offset);
    max-width: var(--tag-width);
    padding: 22px 8px 3px;
    border: none;
    text-align: left;
    /* disable mouse interaction */
    pointer-events: none;
}

/* Change tag block to inline so that the edit button can wrap next to it */
.list-table .list-table-data .data.tags div { display: inline; }

/* Recolour tag text */
.list-table .list-table-data .tags a { color: black !important; }

/* Restyle edit button */
.list-table .list-table-data .tags .edit {
    display: inline-block;
    width: auto;
    pointer-events: auto;
    text-transform: uppercase;
}

/*======================
TRANSPARENT LIST EFFECTS
======================*/

/*FOR LIGHT LAYOUTS*/
body{
background-size: cover !important;
background-attachment: fixed !important;
}

.list-table > tbody:nth-of-type(2n+1),
.list-table, .list-container,
.list-table .list-table-header .header-title{
  background-color: transparent !important;
     border: 0 transparent solid !important;
}
.list-table .list-table-data .data{
  border: 0 transparent solid !important;
}

.status-menu-container{
  background-color: rgba(255,255,255,.8) !important;
}

.cover-block {
padding-left: 17px;
padding-right: 17px;
}

.list-block, .cover-block{
  background-color: rgba(255,255,255,.8) !important;
}
/* remove table header lines */
.list-table .list-table-header .header-title { background-image: none; }

body.ownlist {
    /*
    each of these properties has a comma-separated list of values relating to the first and second backgrounds.
    the first background shows on top, the second below.
    */
    background-image:
        url(https://i.imgur.com/OuAENUn.jpg), /* first background */
        url(https://i.imgur.com/LEspWvO.jpeg); /* second background */
    background-size:
        contain, /* first background */
        250px auto /* second background */
        !important;
    background-repeat:
        no-repeat, /* first background */
        repeat; /* second background */
    background-position:
        center, /* first background */
        center; /* second background */
}