/*==============================*\ | "Clarity" by Valerio Lyndon | | R28.0 | \*==============================*/
@\import "https://fonts.googleapis.com/css2?family=Oswald&display=swap";
@\import "https://valeriolyndon.github.io/MAL-Public-List-Designs/resources/font-awesome-4.7.0/css/font-awesome-force-legacy.min.css";

#search-box:after,
.open~#search-button {
    pointer-events: none
}

#advanced-options,
#fancybox-outer {
    box-shadow: 0 0 32px rgba(0, 0, 0, .5)
}

:root {
    --name: none;
    --avatar: none;
    --banner: url(https://i.imgur.com/VoPJz2S.jpg);
    --character: url(https://i.imgur.com/6IPyngH.png);
    --background: none;
    --pbg: #efefef;
    --bg: #fff;
    --bg-dark: #ddd;
    --text: #323232;
    --text-h: #787878;
    --text-dim: #bababa;
    --text-dim-h: #646464;
    --text-dark: #111;
    --shadow: rgba(0, 0, 0, 0.2);
    --icon: #323232;
    --accent: #4065ba;
    --banner-text: #fff;
    --banner-text-shadow: rgba(0, 0, 0, 0.45);
    --btn-bg: #ebebeb;
    --btn-bg-h: #323232;
    --btn-head-bg-h: #1d439b;
    --btn-text-h: #fff;
    --text-head: #9b9b9b;
    --text-head-h: #787878;
    --watching: #2db039;
    --completed: #26448f;
    --onhold: #f1c83e;
    --dropped: #a12f31;
    --plantowatch: #c3c3c3;
    --cover-bg: #323232;
    --edit-btn: #d9d9d9;
    --checkmark: #9696eb;
    --font-1: Arial, Verdana, "FontAwesome 4", FontAwesome, sans-serif;
    --font-2: Verdana, Arial, "FontAwesome 4", FontAwesome, sans-serif;
    --font-icon: "FontAwesome 4", FontAwesome
}

#advanced-options .advanced-options-button a,
#fancybox-close,
#search-box,
#search-box input,
#search-box:after,
.data.chapter,
.data.demographic a,
.data.genre a,
.data.image .link:after,
.data.licensor a,
.data.priority,
.data.progress,
.data.score a,
.data.studio a,
.data.tags a,
.data.tags a.edit:after,
.data.volume,
.fixed .status-menu:after,
.header .header-title:after,
.icon-menu svg,
.icon-menu.setting,
.icon-menu.setting .text,
.icon-menu.setting .text a,
.icon-menu:after,
.icon-menu:before,
.list-table .list-table-header .header-title .link.sort,
.list-table-header .header-title,
.status-button:after,
.status-menu-container.fixed .status-menu,
.status-menu-container:not(.fixed) .status-menu,
.status-menu:after {
    transition: .3s !important
}

#advanced-options .advanced-options-header .description,
#advanced-options .advanced-options-header .description:before,
#advanced-options [class*="-widget"] input,
#advanced-options [class*="-widget"] label,
#advanced-options [class*="-widget"] select,
#search-button i,
.header-info a,
.list-table-data a,
.more-info .td1>div>a {
    transition: .15s !important
}

.header .header-title,
.header-info,
.icon-menu,
.icon-menu.quick-add:before,
.list-menu-float .icon-menu,
.list-table>tbody:first-of-type:after,
.stats a {
    display: inline-block;
    height: 26px !important;
    width: 26px !important;
    background: var(--bg) !important;
    border-radius: 13px;
    box-shadow: 0 1px 2px var(--shadow);
    overflow: hidden;
    color: var(--text) !important;
    font: normal 0/26px var(--font-1);
    text-indent: 0;
    text-align: left;
    white-space: nowrap;
    vertical-align: top;
    transition: .3s !important
}

.header .header-title:hover,
.icon-menu:hover,
.list-menu-float .icon-menu:hover,
.stats a:hover {
    width: 100px !important;
    background: var(--btn-head-bg-h) !important;
    color: var(--btn-text-h) !important
}

html {
    position: relative;
    min-height: 100%
}

body {
    padding-bottom: 64px;
    background: var(--pbg) var(--background) no-repeat center/cover fixed !important
}

.list-container {
    position: static;
    width: 100%;
    background: 0 0 !important;
    border: none
}

.list-block {
    width: 1060px;
    min-height: initial;
    margin: 64px auto 0
}

.status-menu-container.fixed+.list-block {
    margin-top: 128px !important
}

.list-unit {
    width: 100% !important;
    margin: 0
}

.cover-block,
.cover-block:before {
    width: 100%;
    position: absolute;
    left: 0
}

.list-table,
.more-info {
    border: none !important
}

a,
a:hover {
    color: var(--accent)
}

#cover-image,
#recaptcha-terms,
.btn-list-setting,
.btn-menu span.username,
.icon-watch,
.icon-watch2,
.initialize-tutorial,
.list-status-title .text,
.list-table-header .header-title a.hover_info,
.list-table-header .header-title.tags,
.status:not(.plantowatch):not(.plantoread)~.data.priority {
    display: none !important
}

.cover-block {
    top: 0;
    z-index: 25;
    min-width: 1060px;
    height: 318px;
    background: var(--cover-bg) var(--banner) no-repeat center center/cover scroll
}

.cover-block:before {
    content: "";
    bottom: 0;
    display: block;
    height: 50px;
    background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent)
}

#list-container #cover-image-container {
    display: block !important;
    width: 1060px;
    height: 100%;
    padding: 0;
    background: var(--character) no-repeat right center/contain;
    margin: 0 auto
}

#cover-image-container:after {
    content: var(--name);
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -475px;
    color: var(--banner-text);
    font: bold 60px/60px Oswald;
    text-align: left;
    letter-spacing: normal;
    text-shadow: 1px 4px 7px var(--banner-text-shadow);
    text-transform: none;
    white-space: pre;
    transform: scale(.9) perspective(350px) rotateY(8deg) rotateZ(-3deg);
    animation: 3s .5s backwards name-slide
}

@keyframes name-slide {
    0% {
        top: 12px;
        margin-left: -535px;
        opacity: 0;
        letter-spacing: 0;
        animation-timing-function: ease-out
    }

    90% {
        top: 55px;
        margin-left: -475px
    }

    100% {
        letter-spacing: normal;
        opacity: 1;
        animation-timing-function: cubic-bezier(0, 0, .75, 1)
    }
}

.header {
    z-index: 36;
    display: flex;
    height: 36px;
    margin-top: 282px
}

.header .header-menu {
    position: static;
    display: flex;
    width: auto;
    height: 26px;
    margin-left: 6px;
    order: 2
}

.btn-menu {
    height: 0;
    font-size: 0 !important
}

#fancybox-outer [class^=fancy-],
.btn-menu #header-menu-button,
.icon-menu.quick-add svg,
.notes,
div[style="padding-top: 8px"] {
    display: none
}

.header .header-title {
    position: static;
    margin-left: 155px;
    order: 1;
    z-index: 1
}

.header .header-title:before {
    content: "\f015";
    display: inline-block;
    width: 26px;
    background: 0 0 !important;
    font-size: 14px;
    font-family: var(--font-icon);
    text-align: center !important
}

.header .header-title:hover:before,
.icon-menu.quick-add:hover:before,
.list-menu-float .icon-menu:hover .text {
    color: var(--btn-text-h) !important
}

.header .header-title:after {
    content: "Home";
    display: inline-block;
    height: 26px !important;
    width: 26px !important;
    font: 14px/26px var(--font-1);
    color: var(--text)
}

.header .header-title:hover:after,
[data-owner=""] .icon-menu.profile:hover:after,
[data-owner=""] .icon-menu.profile:hover:before {
    color: var(--btn-text-h)
}

.header .header-menu .list-menu {
    position: static;
    order: 1;
    display: inline-block;
    height: 26px;
    border: none;
    background: 0 0;
    box-shadow: none
}

.header .icon-menu.anime-list,
.header .icon-menu.manga-list {
    position: static;
    padding: 0;
    margin-right: 6px;
    font-size: 0 !important;
    font-weight: 400 !important
}

.header .icon-menu.anime-list .text,
.header .icon-menu.manga-list .text {
    position: static !important;
    font: 14px/26px var(--font-1);
    vertical-align: top
}

.header .header-menu .list-menu .icon-menu svg.icon {
    position: static;
    max-width: 14px;
    max-height: 14px;
    padding: 6px;
    fill: var(--text)
}

.header .header-menu .list-menu .icon-menu:hover svg.icon,
.list-menu-float .icon-menu:hover svg.icon {
    fill: var(--btn-text-h)
}

.header-info {
    position: static;
    width: auto !important;
    padding: 0 8px;
    margin: 0 !important;
    font-size: 12px;
    order: 2
}

.header-info a,
.list-table .list-table-data .data a {
    color: var(--text) !important;
    text-decoration: none !important
}

.header-info a:hover,
.list-table .list-table-data a:not(.edit-disabled):hover {
    color: var(--text-h) !important
}

.btn-menu a.username {
    position: absolute;
    left: 0;
    top: -7px;
    display: block;
    width: 150px;
    height: 150px;
    background: 0 0;
    border-radius: 50%;
    font-size: 0
}

.status-menu-container {
    position: relative;
    z-index: 35 !important;
    width: 100%;
    min-width: 1060px;
    height: 64px;
    background: 0 0;
    border: none !important
}

.status-menu-container.fixed {
    z-index: 45 !important
}

.status-menu-container:after,
.status-menu-container:before {
    content: "";
    position: absolute;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%
}

.status-menu-container:before {
    top: 0;
    height: 64px;
    background: var(--bg)
}

.status-menu-container:after {
    top: 64px;
    height: 2px;
    background: linear-gradient(to bottom, var(--shadow), transparent)
}

.status-menu {
    position: relative;
    display: block !important;
    width: 1060px;
    padding: 0 0 0 173px;
    margin: 0 auto;
    box-sizing: border-box
}

.fixed .status-menu {
    padding: 0 0 0 71px
}

.status-menu:after {
    content: "";
    position: absolute;
    top: -51px;
    left: -8px;
    width: 150px;
    height: 150px;
    background: var(--bg-dark) var(--avatar) no-repeat center top/cover;
    border: 8px solid var(--bg);
    border-radius: 50%;
    opacity: 1;
    box-shadow: 0 1px 2px var(--shadow)
}

.fixed .status-menu:after {
    top: 0;
    width: 48px;
    height: 48px;
    box-shadow: none
}

.status-menu .status-button {
    display: inline-block !important;
    height: 32px;
    padding: 16px 0 !important;
    margin: 0 15px !important;
    color: var(--text-head) !important;
    font-size: 17.6px !important;
    line-height: 30px;
    white-space: nowrap;
    font-family: Oswald !important;
    text-transform: uppercase;
    letter-spacing: 1px
}

.status-menu .status-button.on {
    color: var(--text-head-h) !important
}

.status-button.all_anime:after {
    background: var(--accent) !important
}

.status-button.reading:after,
.status-button.watching:after,
.status.reading,
.status.watching {
    background: var(--watching) !important
}

.status-button.completed:after,
.status.completed {
    background: var(--completed) !important
}

.status-button.onhold:after,
.status.onhold {
    background: var(--onhold) !important
}

.status-button.dropped:after,
.status.dropped {
    background: var(--dropped) !important
}

.status-button.plantoread:after,
.status-button.plantowatch:after,
.status.plantoread,
.status.plantowatch {
    background: var(--plantowatch) !important
}

.status-menu-container .search-container {
    top: 19px;
    right: 0;
    z-index: 1
}

#search-box {
    padding-right: 22px;
    border: 2px solid transparent;
    border-radius: 13px;
    margin-top: 0 !important
}

#search-box.open {
    width: 150px !important;
    background: var(--btn-bg);
    border: 2px solid var(--bg-dark)
}

#search-box input {
    background: 0 0;
    border: none;
    border-radius: 13px;
    outline: 0;
    color: var(--text)
}

#search-box.open input {
    text-indent: 7.5px;
    line-height: 20px
}

.status-menu-container .search-container #search-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 13px;
    margin-top: 0;
    text-align: center
}

#search-button i {
    color: var(--text-head) !important;
    font-size: 18px;
    line-height: 26px
}

.open~#search-button i {
    font-size: 14px;
    line-height: 24px
}

#search-box:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 22px;
    padding-right: 22px;
    background: linear-gradient(to right, var(--btn-bg) 2px, transparent 9.5px, transparent 142.5px, var(--btn-bg) 150px) content-box;
    border: 2px solid transparent;
    border-radius: 13px;
    opacity: 0
}

#search-box.open:after {
    width: 150px;
    opacity: 1
}

.list-menu-float {
    position: relative;
    top: auto;
    display: block;
    width: 904px;
    height: 0;
    padding-left: 155px;
    margin: 0 auto;
    border: none;
    background: 0 0;
    text-align: left;
    font-size: 0;
    z-index: 38
}

.icon-menu.setting .text,
.list-table-header {
    padding: 2px 0;
    z-index: -1;
    pointer-events: none
}

.icon-menu,
.list-menu-float form {
    display: inline-block !important
}

.list-menu-float .icon-menu {
    top: 74px;
    margin: 0 6px 0 0
}

.list-menu-float .icon-menu .text {
    top: 0 !important;
    left: 26px !important;
    display: inline-block;
    width: auto !important;
    height: 26px;
    color: var(--text) !important;
    font-size: 14px !important;
    opacity: 1 !important
}

.list-menu-float .icon-menu svg.icon {
    top: 6px !important;
    left: 6px !important;
    max-width: 14px;
    max-height: 14px;
    fill: var(--text)
}

[data-owner="1"] .list-menu-float .icon-menu.profile {
    position: absolute;
    left: 0;
    top: -43px;
    display: block !important;
    width: 150px !important;
    height: 150px !important;
    background: 0 0 !important;
    border-radius: 50%;
    font-size: 0;
    box-shadow: none
}

[data-owner=""] .icon-menu.profile {
    background-image: none !important
}

[data-owner=""] .icon-menu.profile:before {
    content: "\f007";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 26px;
    height: 26px;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    color: var(--text);
    font-family: var(--font-icon)
}

[data-owner=""] .icon-menu.profile:after {
    content: "Profile";
    position: absolute;
    top: 0;
    left: 26px;
    display: inline-block;
    height: 26px;
    font-size: 14px;
    color: var(--text)
}

.icon-menu.quick-add:before {
    content: "\f067";
    background: 0 0 !important;
    font-size: 14px;
    text-align: center;
    font-family: var(--font-icon);
    box-shadow: none
}

.icon-menu.setting {
    overflow: visible
}

.icon-menu.setting:hover {
    width: 26px !important
}

.icon-menu.setting .text {
    top: -2px !important;
    left: 0 !important;
    width: 240px !important;
    height: 26px !important;
    overflow: visible;
    font-size: 0 !important;
    opacity: 1 !important
}

.icon-menu.setting:hover .text,
.list-table>tbody:first-of-type:hover .list-table-header {
    pointer-events: auto
}

.icon-menu.setting .text a {
    position: absolute !important;
    top: 2px !important;
    left: 13px !important;
    width: 0 !important;
    height: 26px !important;
    background: var(--btn-bg-h) !important;
    border: none !important;
    border-radius: 0 13px 13px 0;
    overflow: hidden;
    color: var(--btn-text-h) !important;
    font: 14px/26px var(--font-1) !important;
    text-indent: 9px;
    text-align: center;
    white-space: nowrap;
    opacity: 0 !important
}

.icon-menu.setting:hover .text a {
    width: 120px !important;
    border-radius: 0 13px 13px 0;
    opacity: 1 !important
}

.icon-menu.setting:hover .text .link-list-setting {
    left: 120px !important
}

.icon-menu.setting .text a:hover {
    background: var(--btn-head-bg-h) !important
}

.list-unit .list-status-title {
    width: 1060px;
    height: 64px;
    margin-top: -64px;
    background: 0 0
}

.list-status-title .stats {
    position: absolute;
    top: 10px;
    right: 32px !important;
    display: block;
    width: auto;
    height: 26px !important;
    border-radius: 0 0 26px;
    font-size: 0;
    line-height: 13px !important
}

.stats a {
    margin: 0 0 0 6px !important;
    font: 14px/26px var(--font-1)
}

.stats a i {
    width: 26px;
    text-align: center
}

i.fa-chart-column::before {
    content: "\f080"
}

.list-stats {
    position: absolute;
    top: 416px;
    width: 1060px !important;
    background: 0 0 !important;
    color: var(--text) !important;
    font-weight: 700
}

#fancybox-outer,
.list-item {
    background: var(--bg) !important
}

.list-table>tbody:first-of-type {
    position: relative;
    top: -26px;
    margin-top: -30px;
    left: 1032px;
    display: block;
    width: 30px;
    height: 30px;
    background: 0 0 !important;
    z-index: 39
}

.list-table>tbody:first-of-type:after {
    content: "\f0dc";
    position: absolute;
    top: 0;
    right: 0;
    margin: 2px;
    font-size: 14px;
    font-family: var(--font-icon);
    text-align: center
}

.list-table>tbody:first-of-type:hover:after {
    background: var(--btn-head-bg-h) !important;
    color: var(--btn-text-h) !important
}

.list-table-header {
    position: absolute;
    top: 0;
    right: 15px;
    display: block;
    width: auto;
    height: 26px;
    font-size: 0;
    white-space: nowrap
}

.data,
.data.status {
    padding: 0 !important
}

.list-table .list-table-header .header-title {
    position: relative;
    display: inline-block;
    width: auto !important;
    height: auto;
    padding: 0 !important;
    border: none;
    background: 0 0;
    font-weight: 400
}

#advanced-options,
#footer-block,
.data.number,
.data.priority {
    background: var(--bg)
}

.data.image a:hover:after,
.list-table>tbody:first-of-type:hover .header-title {
    opacity: 1
}

.list-table .list-table-header .header-title .link.sort {
    display: block;
    width: 13px;
    height: 26px;
    background: var(--btn-bg-h);
    border-radius: 13px 0 0 13px;
    margin-left: -13px;
    overflow: hidden;
    box-sizing: border-box;
    color: var(--btn-text-h) !important;
    font: 11px/26px var(--font-2);
    text-align: center;
    text-indent: -9px;
    white-space: normal;
    opacity: 0
}

.list-table tbody:first-of-type:hover .list-table-header .header-title .link.sort {
    width: 80px;
    opacity: 1
}

.list-table .list-table-header .header-title .link.sort:hover {
    background: var(--btn-head-bg-h)
}

.list-table-header .header-title a .sort-icon {
    position: absolute;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    color: inherit !important;
    font-size: 10px;
    line-height: 10px
}

.sort-icon.fa-sort-up {
    top: 2px
}

.sort-icon.fa-sort-down {
    bottom: 2px
}

.anime tbody:first-of-type:hover .header-title.finished a,
.anime tbody:first-of-type:hover .header-title.started a {
    padding: 0 13px
}

.manga tbody:first-of-type:hover .header-title.finished a,
.manga tbody:first-of-type:hover .header-title.started a {
    width: 100px !important
}

.header-title.title a {
    font-size: 0 !important
}

.header-title.title a:after {
    content: "Title";
    font-size: 11px
}

.list-item {
    position: relative;
    display: block;
    width: 100%;
    border: none;
    margin-bottom: 8px
}

.list-table-data {
    position: relative;
    display: flex;
    max-width: 1060px;
    min-height: 64px;
    align-items: center;
    font-size: 0
}

.data,
.data.image a {
    display: block !important
}

.data {
    border: none !important;
    flex: 0 0 auto;
    color: var(--text);
    font-size: 11px
}

.list-unit .loading-space {
    margin: 14px 0 22px
}

.list-unit .loading-space #loading-spinner {
    width: 20px;
    height: 20px;
    margin: 0 auto;
    color: var(--text)
}

.list-table[data-items="[]"]:after {
    content: "No entries found. Try another category?";
    display: block;
    width: 900px;
    background: var(--bg);
    border-radius: 16px;
    margin: 32px auto;
    color: var(--text);
    font: 16px/32px var(--font-1);
    text-align: center
}

[data-owner="1"] .list-table[data-items="[]"]:after {
    content: "No entries found. Why not add some?"
}

[data-query*='"s":'] .list-table[data-items="[]"]:after {
    content: "No entries found. Perhaps your search terms are too restrictive?"
}

.data.status {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px !important;
    height: 100%
}

.data.number {
    position: relative;
    top: -22px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    margin: 0 -28px 0 8px;
    order: 1;
    line-height: 20px;
    font-weight: 700;
    z-index: 1
}

.list-item:nth-child(n+101) .data.number {
    text-indent: -7px
}

.list-item:nth-child(n+1001) .data.number {
    width: 27px;
    margin-right: -35px
}

.list-item:nth-child(n+10001) .data.number {
    width: 34px;
    margin-right: -42px
}

.data.image {
    width: 64px;
    height: 64px;
    margin: 4px 0 4px 8px;
    order: 1
}

.data.title,
.data.type {
    height: 16px;
    line-height: 16px
}

.data.image a {
    position: relative;
    border-radius: 50%;
    overflow: hidden
}

.data.image img {
    width: 64px !important;
    height: 64px !important;
    border: none !important;
    object-fit: cover
}

.data.image a:after {
    content: "\f14c";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font: 30px/64px var(--font-icon);
    opacity: 0
}

.data.title {
    position: relative;
    width: 142px;
    padding: 32px 0 0 8px !important;
    order: 12;
    flex: 1 0 auto
}

.data.title .link.sort {
    position: absolute;
    top: 16px;
    left: 8px;
    display: inline-block;
    max-width: 100%;
    padding-right: 16px;
    overflow: hidden;
    box-sizing: border-box;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis
}

.list-table .list-table-data .title .link:hover,
.list-table .more-info .more-content a:hover {
    color: var(--accent) !important
}

.content-status,
.rereading,
.rewatching {
    color: var(--text-dim) !important;
    font-size: 10px !important
}

.content-status:before,
.rereading:before,
.rewatching:before {
    content: "["
}

.content-status:after,
.rereading:after,
.rewatching:after {
    content: "] - "
}

.add-edit-more {
    display: inline;
    float: none !important;
    color: var(--text-dim)
}

.list-table .list-table-data .title .add-edit-more a {
    color: var(--text-dim) !important
}

.list-table .list-table-data .title .add-edit-more a:hover {
    color: var(--text-dim-h) !important
}

.data.type {
    position: relative;
    top: -16px;
    z-index: 1;
    width: 92px;
    padding-left: 8px !important;
    margin-right: -100px;
    order: 11;
    text-align: left !important;
    color: var(--text-dim);
    font-size: 10px
}

.data.number+td:not(.image)~.type {
    margin-left: 28px;
    margin-right: -128px
}

.data.mal_score,
.data.popularity,
.data.score_diff {
    width: 65px;
    order: 12
}

.data.rated,
.data.score_diff {
    width: 40px
}

.data.popularity {
    width: 80px
}

.data.mal_score::before {
    content: "MAL Score:";
    display: block;
    color: var(--text-dim);
    white-space: nowrap
}

.data.score_diff::before {
    content: "Diff:";
    display: block;
    color: var(--text-dim)
}

.data.popularity::before {
    content: "Popularity:";
    display: block;
    color: var(--text-dim)
}

.score~.data.score_diff {
    order: 13;
    padding-top: 3em !important;
    margin-left: -34px;
    margin-right: -6px;
    font-style: italic
}

.score~.data.score_diff::before {
    color: transparent
}

.data.score {
    position: relative;
    width: 26px;
    height: 26px;
    order: 13
}

.data.score a {
    display: block;
    width: 26px;
    height: 26px;
    background: var(--btn-bg);
    border-radius: 13px;
    margin: 0 0 0 auto;
    line-height: 26px
}

.list-table .list-table-data .demographic span a:hover,
.list-table .list-table-data .genre span a:hover,
.list-table .list-table-data .licensor span a:hover,
.list-table .list-table-data .score a:not(.edit-disabled):hover,
.list-table .list-table-data .studio span a:hover,
.list-table .list-table-data .tags span a:hover {
    background: var(--btn-bg-h);
    color: var(--btn-text-h) !important
}

.data.score select {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 40px;
    height: 26px;
    padding: 0 9px;
    background: var(--btn-bg-h) url(https://i.imgur.com/KF8oOyC.png) no-repeat 20px center/16px auto;
    border: none;
    border-radius: 13px;
    box-shadow: none !important;
    color: var(--btn-text-h);
    font: bold 1.1em/26px var(--font-2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.data.chapter span,
.data.priority,
.data.progress span,
.data.volume span {
    color: var(--text)
}

.data.score select:focus {
    outline: 0 !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .3)
}

.data.chapter,
.data.progress,
.data.volume {
    width: 92px;
    order: 15
}

.data.chapter {
    margin-top: -34px
}

.data.volume {
    margin: 34px 0 0 -92px
}

.data.progress:before {
    content: "Progress:";
    color: var(--text-dim)
}

.data.chapter:before {
    content: "Chapters:";
    color: var(--text-dim)
}

.data.volume:before {
    content: "Volumes:";
    color: var(--text-dim)
}

.data.chapter span:only-of-type:after,
.data.progress span:only-of-type:after,
.data.volume span:only-of-type:after {
    content: " \f058";
    position: relative;
    top: 1px;
    color: var(--checkmark);
    font-family: var(--font-icon);
    font-size: 13px
}

.data.chapter input,
.data.progress input,
.data.volume input {
    height: 15px;
    padding: 0 1px;
    background: var(--btn-bg);
    border: 1px solid var(--bg-dark);
    outline-color: var(--accent) !important;
    box-sizing: border-box;
    color: var(--text-dark);
    font: 11px var(--font-2)
}

.data.priority {
    width: 92px;
    height: 74px;
    order: 14;
    line-height: 74px;
    z-index: 1
}

.data.priority:before {
    content: "\f0a2";
    font-family: var(--font-icon)
}

.data.chapter~.priority,
.data.progress~.priority,
.data.volume~.priority {
    position: relative;
    margin-right: -92px;
    opacity: 1;
    pointer-events: none;
    z-index: 1
}

.list-item:hover .chapter~.priority,
.list-item:hover .progress~.priority,
.list-item:hover .volume~.priority {
    opacity: 0
}

.data.magazine,
.data.rated,
.data.retail,
.data.season,
.data.storage {
    margin-right: 4px;
    order: 19;
    flex-shrink: 1
}

.data.magazine {
    width: 90px
}

.data.retail,
.data.storage {
    width: 72px
}

.data.season {
    width: 92px;
    order: 20
}

.data.magazine:before,
.data.rated:before,
.data.retail:before,
.data.season:before,
.data.storage:before {
    display: block;
    color: var(--text-dim)
}

.data.rated:before {
    content: "Rated:"
}

.data.magazine:before {
    content: "Magazine:"
}

.data.retail:before,
.data.storage:before {
    content: "Storage:"
}

.data.season:before {
    content: "Premiered:"
}

.data.season:empty:after {
    content: "Unknown";
    display: block;
    color: var(--text-dim)
}

.data.demographic,
.data.genre,
.data.licensor,
.data.studio,
.data.tags {
    width: 120px;
    padding: 3px 0 !important;
    margin-right: 8px;
    order: 21;
    flex-shrink: 1
}

.data.licensor,
.data.studio {
    order: 22
}

.data.demographic span,
.data.genre span,
.data.licensor span,
.data.studio span,
.data.tags span {
    display: block;
    padding: 1px 0;
    font-size: 0 !important;
    line-height: 0
}

.data.demographic a,
.data.genre a,
.data.licensor a,
.data.studio a,
.data.tags a:not(.edit) {
    display: block;
    padding: 1px;
    background: var(--btn-bg);
    border-radius: 8.5px;
    color: var(--text) !important;
    font-size: 11px !important;
    line-height: 15px
}

.data.demographic:empty:before,
.data.genre:empty:before,
.data.licensor:empty:before,
.data.magazine:empty:before,
.data.studio:empty:before {
    display: block;
    padding: 1px;
    color: var(--text-dim);
    font-size: 10px;
    line-height: 15px;
    white-space: pre
}

.data.genre:empty:before {
    content: "Unknown\a Genre"
}

.data.demographic:empty:before {
    content: "Unknown\a Demographic"
}

.data.studio:empty:before {
    content: "Unknown\a Studio"
}

.data.licensor:empty:before {
    content: "Unknown\a Licensor"
}

.data.magazine:empty:before {
    content: "Unknown\a Magazine"
}

.data.tags textarea {
    position: absolute;
    top: 3px;
    right: 4px;
    z-index: 5;
    width: 530px !important;
    height: calc(100% - 6px) !important;
    background: var(--btn-bg);
    border: 1px solid var(--bg-dark);
    outline-color: var(--accent) !important;
    resize: none;
    color: var(--text)
}

@-moz-document url-prefix() {
    .data.score select {
        padding: 0 16px 0 0;
        text-align: center
    }

    .data.tags textarea {
        width: 524px !important;
        height: calc(100% - 14px) !important;
        padding: 2px;
        box-sizing: initial !important
    }
}

.data.tags a.edit {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px !important;
    height: 100% !important;
    background: var(--edit-btn);
    text-align: left !important;
    font-size: 0 !important;
    opacity: 0;
    z-index: 1
}

.list-item:hover .data.tags a.edit {
    opacity: .7
}

.list-item:hover .data.tags a.edit:hover {
    width: 25px !important;
    opacity: 1
}

.data.tags a.edit:after {
    content: "\f040";
    position: absolute;
    top: 50%;
    right: 0;
    width: 100%;
    height: 20px;
    margin-top: -10px;
    color: var(--text);
    font: 0/20px var(--font-icon);
    text-align: center;
    opacity: 0
}

.data.tags a.edit:hover:after {
    font-size: 14px;
    opacity: 1
}

.data.airing-finished,
.data.airing-started,
.data.days,
.data.finished,
.data.started {
    position: relative;
    display: flex !important;
    width: 100px;
    height: 14px;
    flex-flow: row wrap;
    overflow: hidden;
    order: 25;
    color: var(--text);
    font-size: 9px;
    line-height: 14px;
    text-align: left !important;
    text-overflow: ellipsis;
    white-space: nowrap
}

.data.started {
    top: -20px
}

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

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

.data.airing-started {
    top: -10px
}

.data.airing-finished {
    top: 10px;
    margin-left: -100px
}

.data.airing-finished:before,
.data.airing-started:before,
.data.days:before,
.data.finished:before,
.data.started:before {
    display: inline-block;
    width: 29px;
    padding-right: 4px;
    border-right: 1px solid var(--text-dim);
    margin-right: 3px;
    flex: 0 0 auto;
    text-align: right;
    color: var(--text-dim)
}

.data.started:before {
    content: "Start"
}

.data.finished:before {
    content: "End"
}

.data.days:before {
    content: "Days"
}

.data.airing-started:before {
    content: "Aired"
}

.manga .data.airing-started:before {
    content: "Issued"
}

.data.airing-finished:before {
    content: "to"
}

.manga .data.airing-finished,
.manga .data.airing-started {
    width: 107px
}

.manga .data.airing-finished {
    margin-left: -107px
}

.manga .data.airing-finished:before,
.manga .data.airing-started:before {
    width: 36px
}

.data.airing-finished::after,
.data.airing-started::after,
.data.days::after,
.data.finished::after,
.data.started::after {
    content: "-";
    display: block;
    width: 63px;
    flex: 0 0 auto;
    color: var(--text-dim);
    font-size: 14px
}

.more-info .td1 {
    position: relative;
    padding-top: 23px;
    color: var(--text-dark)
}

.more-info .td1>div {
    margin: 0
}

.more-info .td1>div>a {
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 2px solid var(--accent)
}

.list-table .more-info .more-content a {
    color: var(--text-dark) !important
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

#footer-block {
    min-width: 1060px;
    height: 32px;
    padding: 16px 0
}

#footer-block:before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 100%;
    min-width: 1060px;
    height: 2px;
    background: linear-gradient(to top, rgba(0, 0, 0, .1), transparent)
}

#copyright {
    padding: 0;
    color: var(--text-head);
    line-height: 16px
}

#copyright:after {
    content: "\aList design by Valerio Lyndon.";
    white-space: pre
}

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

#fancybox-outer #fancybox-close {
    top: -13px;
    right: -13px;
    width: 16px;
    height: 16px;
    padding: 2px;
    background: var(--btn-bg);
    border: 3px solid var(--btn-text-h);
    border-radius: 13px;
    color: var(--text);
    text-align: center;
    box-shadow: 0 1px 2px var(--shadow)
}

#fancybox-outer #fancybox-close:after {
    content: "\f00d";
    display: block;
    margin-top: -1px;
    font: 16px/1 var(--font-icon)
}

#fancybox-outer #fancybox-close:hover {
    background: var(--text);
    color: var(--btn-text-h)
}

#advanced-options {
    top: 64px;
    width: 910px;
    padding: 32px 0;
    border: none;
    color: var(--text-dark)
}

#advanced-options .advanced-options-button,
#advanced-options .advanced-options-header,
#advanced-options [class*="-widget"] {
    width: 100%;
    padding: 0;
    border: none
}

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

#advanced-options .filter,
#advanced-options .sort {
    padding-bottom: 32px
}

#advanced-options .advanced-options-header {
    font-size: 0;
    line-height: 26px;
    box-sizing: border-box
}

#advanced-options .advanced-options-header:before {
    display: inline-block;
    width: 249px;
    height: 100%;
    padding-bottom: 7.5px;
    font-size: 16px;
    line-height: 26px;
    text-align: right
}

#advanced-options .filter .advanced-options-header:before {
    content: "Filter"
}

#advanced-options .sort .advanced-options-header:before {
    content: "Sort"
}

#advanced-options .advanced-options-header .description {
    display: inline-block;
    width: 20px;
    margin: 0;
    color: transparent;
    white-space: nowrap;
    vertical-align: top;
    transition: .15s;
    pointer-events: none
}

#advanced-options .advanced-options-header .description:hover {
    color: inherit;
    pointer-events: auto
}

#advanced-options .advanced-options-header .description:before {
    content: "\f059";
    display: inline-block;
    width: 20.5px;
    color: var(--icon);
    font: 14px/26px var(--font-icon);
    text-align: center;
    pointer-events: auto
}

#advanced-options .advanced-options-header .description:hover:before {
    color: var(--text-dim)
}

#advanced-options [class*="-widget"] {
    font-size: 0;
    line-height: 1;
    white-space: nowrap
}

#advanced-options [class*="-widget"]>* {
    font-size: 12px;
    vertical-align: top
}

#advanced-options [class*="-widget"] .widget-header {
    width: 250.5px;
    height: 26px;
    padding: 11px 7.5px 11px 0;
    border-right: 2px solid var(--text-dim);
    margin-right: 7.5px;
    line-height: 26px;
    text-align: right
}

#advanced-options [class*="-widget"] span {
    line-height: 26px
}

#advanced-options [class*="-widget"] input,
#advanced-options [class*="-widget"] label,
#advanced-options [class*="-widget"] select,
#advanced-options [class*="-widget"] span:not(.widget-header) {
    height: 26px;
    margin: 11px 0;
    border-color: var(--text-dim) !important;
    border-radius: 13px;
    box-sizing: border-box;
    color: var(--text-dark);
    font-size: 12px
}

#advanced-options [class*="-widget"] input,
#advanced-options [class*="-widget"] select {
    padding: 0 7.5px;
    background: 0 0;
    outline: 0
}

#advanced-options [class*="-widget"] select {
    padding-right: 16px;
    background: url(https://i.imgur.com/hFijppc.png) right center/16px auto no-repeat
}

#advanced-options [class*="-widget"] input:focus,
#advanced-options [class*="-widget"] option,
#advanced-options [class*="-widget"] select:focus {
    background-color: var(--btn-bg) !important
}

#advanced-options :disabled,
#advanced-options input:disabled+label {
    opacity: .5;
    color: var(--text) !important
}

#advanced-options .magazine select,
#advanced-options .producer select,
#advanced-options .title input {
    width: 387.5px !important
}

#advanced-options .filter-widget[class*="-status"] select {
    width: 197.5px !important
}

#advanced-options .filter-widget[class*="-date"] span:nth-of-type(n+2) {
    display: inline-block;
    width: 40px;
    padding: 0 3px 0 7.5px;
    border: 1px solid var(--text-dim);
    border-right: none;
    border-radius: 13px 0 0 13px;
    margin-right: 0 !important;
    line-height: 24px;
    font-style: italic
}

#advanced-options .filter-widget[class*="-date"] span:nth-of-type(3) {
    margin-left: 7.5px !important
}

#advanced-options .filter-widget[class*="-date"] .day,
#advanced-options .filter-widget[class*="-date"] .month,
#advanced-options .filter-widget[class*="-date"] .year {
    border-radius: 0;
    padding: 0 16px 0 7.5px;
    border-left-width: 0
}

#advanced-options .filter-widget[class*="-date"] .month,
#advanced-options .filter-widget[class*="-date"] .year {
    border-right: none
}

#advanced-options .filter-widget[class*="-date"] .day {
    border-radius: 0 13px 13px 0
}

#advanced-options .aired-season .year,
#advanced-options .filter-widget[class*="-date"] .year {
    width: 60px !important
}

#advanced-options .filter-widget[class*="-date"] .day,
#advanced-options .filter-widget[class*="-date"] .month {
    width: 45px !important
}

#advanced-options .aired-season .season {
    width: 130px !important;
    margin-left: 7.5px
}

#advanced-options .first select,
#advanced-options .second select {
    width: 190px !important
}

#advanced-options .sort-widget input[type=radio]+label {
    width: 92.25px !important;
    border-radius: 13px;
    margin-left: 7.5px;
    background: 0 0 !important;
    color: var(--text-dark);
    line-height: 14px;
    transition: .15s
}

#advanced-options .sort-widget input[type=radio]:not(:disabled)+label:hover {
    background: var(--btn-bg) !important
}

#advanced-options .sort-widget input[type=radio]:not(:disabled):checked+label {
    background: var(--text-dim) !important;
    border: 1px solid var(--text-dim);
    color: var(--bg) !important
}

#advanced-options .sort-widget input[type=radio]:not(:checked)+label i {
    color: var(--icon)
}

#advanced-options #fancybox-close,
#advanced-options .advanced-options-button a {
    width: 90px;
    height: 26px;
    padding: 0;
    background: var(--btn-bg);
    border-radius: 13px;
    box-shadow: 0 1px 2px var(--shadow);
    color: var(--text-dark);
    line-height: 26px;
    text-align: center
}

#advanced-options #fancybox-close:hover,
#advanced-options .advanced-options-button a:hover,
div[style^="width: 300px;
] input:hover {
    background: var(--btn-bg-h);
    color: var(--btn-text-h)
}

#advanced-options .advanced-options-button .btn-apply {
    margin: 0 0 0 -106px
}

#advanced-options .advanced-options-button .btn-clear {
    margin: 0 0 0 8px
}

#advanced-options #fancybox-close {
    left: 50%;
    top: auto;
    bottom: 32px;
    border: none;
    margin-left: 53px
}

#advanced-options .btn-apply:before {
    content: "\f00c ";
    font-family: var(--font-icon)
}

#advanced-options .btn-clear:before {
    content: "\f12d ";
    font-family: var(--font-icon)
}

#advanced-options #fancybox-close:after {
    content: "\f00d Close";
    font: 12px/26px var(--font-1)
}

#fancybox-wrap[style*="width: 320px;
] {
    height: 120px !important
}

[style*="width: 320px;
] #fancybox-inner {
    height: calc(100% - 20px) !important
}

div[style^="width: 300px;
] {
    display: flex;
    height: 100% !important;
    flex-flow: column nowrap;
    justify-content: center;
    color: var(--text);
    font-size: 13px !important
}

div[style^="width: 300px;
] div {
    font-size: 0
}

div[style^="width: 300px;
] input {
    display: block;
    width: 240px;
    height: 26px;
    background: var(--btn-bg);
    border: none;
    border-radius: 13px;
    box-shadow: 0 1px 2px var(--shadow);
    margin: 0 auto 5px;
    color: var(--text);
    font: normal 12px/26px var(--font-1);
    transition: .3s;
    cursor: pointer
}

.data.image a::before,
.data.image img,
.status-menu::after {
    image-rendering: -webkit-optimize-contrast
}