:root {
	--badge: #4babce;
	--text-on-badge: white;
	--text-on-badge-secondary: rgba(255, 255, 255, 0.7);
}

:root {
	--body-harsh: white;
	--body: #fbfbfb;
	--body-offset: #f5f7f9;
	--text: #333;
	--text-secondary: #7d7d7d;
	--border: rgba(0, 0, 10, 0.05);
	--border-2: #e4e4e4;
	--border-dark: rgba(0, 0, 10, 0.1);
	--header-background: var(--badge);
	--hover: #e8eaec;
}

@media (prefers-color-scheme: dark) {
	:root {
		--body-harsh: black;
		--body: black;
		--body-offset: #0c0c0c;
		--text: #c9c9c9;
		--text-secondary: #a1a1a1;
		--border: #1f1f1f;
		--border-dark: rgba(255, 255, 255, 0.2);
		--border-2: #555555;
		--border-dark-2: #2b2b2b;
		--header-background: black;
		--hover: #353535;
	}

	select {
		filter: invert(1);
	}
}

html, body {
	min-height: calc(100vh - env(safe-area-inset-top));
}

body {
	--main-footer-height: 0px;
	--footer-height: 0px;
	margin: 0;
	color: var(--text-secondary);
	background: var(--body);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-variant-numeric: tabular-nums;
	border-top: env(safe-area-inset-top) solid transparent;
}

body[data-is-dev="true"]::after {
	content: "DEV";
	display: flex;
	justify-items: center;
	position: fixed;
	bottom: -12px;
	left: -30px;
	color: var(--text-on-badge);
	background: var(--badge);
	z-index: 999;
	transform: rotate(45deg);
	padding: 0 30px;
	padding-bottom: 30px;
}

.mobile-nav {
	position: fixed;
	top: -5px;
	left: 0;
	width: 100%;
	height: calc(env(safe-area-inset-top) + 5px);
	background: var(--header-background);
	z-index: 100;
}

/* Util */

.anchor {
	text-decoration: none;
	color: var(--badge-text, var(--badge));
}

.anchor:hover {
	text-decoration: underline;
}

.hide-on-desktop {
	display: none;
}

/* Layout */

.wrapper-all {
	display: grid;
	grid-template-columns: calc(300px + env(safe-area-inset-left)) 1fr;
}

.content-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding-right: env(safe-area-inset-right);
	padding-left: env(safe-area-inset-left);
}

.content-inner {
	width: calc(100% - 40px);
	max-width: 1000px;
	margin: 80px 0;
	padding-bottom: var(--footer-height);
}

.content-inner .section:not(.decreased-margin)+.section:not(.decreased-margin) {
	margin: 50px 0;
}

.content-inner .section.decreased-margin {
	margin: 20px 0;
}

/* Sidebar */

aside.main-sidebar {
	width: 100%;
	height: calc(100vh - env(safe-area-inset-top));
	max-height: calc(100vh - env(safe-area-inset-top));
	overflow-y: auto;
	background: var(--body-offset);
	position: sticky;
	top: env(safe-area-inset-top);
	box-sizing: border-box;
	padding: 20px;
	border-left: env(safe-area-inset-left) solid transparent;
}

aside.main-sidebar>*+* {
	margin-top: 20px;
}

aside .logo img {
	width: 3rem;
	border-radius: 4px;
}

aside .logo-section>a {
	text-decoration: none;
	color: var(--text);
}

aside .logo {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 20px;
	align-items: center;
	margin: 20px 0;
	margin-bottom: 40px;
}

aside .logo h1 {
	margin: 0;
}

aside .logo .square, aside .logo svg {
	width: 30px;
	--a: var(--badge);
	--b: var(--badge);
}

aside .logo .square {
	height: 30px;
	transform: rotate(45deg);
	background: var(--badge);
}

aside hr {
	width: 100%;
	height: 1px;
	border: 0;
	background: var(--border);
	margin: 10px 0;
}

details>summary {
	list-style: none;
}

details>summary::-webkit-details-marker {
	display: none;
}

details.settings>summary {
	list-style: none;
}

details.settings>summary svg {
	display: block;
}

details>summary .summary-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
}

details>summary:focus {
	outline: 0;
}

details .icons {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

details .icons>*+* {
	margin-left: 10px;
}

details[open]>summary svg.feather-chevron-down {
	transform: rotate(180deg);
}

details>summary::-webkit-details-marker {
	display: none;
}

details.settings .details-inner {
	margin-top: 10px;
}

details .summary-inner .sub-title {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	word-break: break-word;
}

details .summary-inner .sub-title .badge {
	margin-right: 10px;
}

details.big-summary summary {
	padding: 10px 5px;
	padding-top: 15px;
	margin: 0 -5px;
	border-bottom: 1px solid var(--border-dark);
	position: sticky;
	top: env(safe-area-inset-top);
	background: var(--body);
	z-index: 10;
}

details .manga-grid {
	margin-top: 20px;
}

/* Util */

.title {
	margin: 0;
	color: var(--text);
}

.sub-title {
	color: var(--text);
	margin-top: 0;
}

.sub-title.spread {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.list-type-picker {
	display: none;
	flex-wrap: nowrap;
}

.list-type-picker>*+* {
	margin-left: 5px;
}

.list-type-option {
	padding: 5px;
	border-radius: 4px;
	background: var(--border);
	color: var(--text-secondary);
	cursor: pointer;
}

[data-list-type="list"] .list-type-option.set-list-list, [data-list-type="grid"] .list-type-option.set-list-grid, .list-type-option.is-selected {
	background: var(--badge);
	color: var(--text-on-badge);
}

.list-type-option svg {
	width: 20px;
	height: 20px;
	display: block;
}

.badges .badge {
	margin-bottom: 5px;
}

.badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
}

.badge svg {
	display: block;
}

.badge-background, .badge-background .small-title {
	background: var(--badge) !important;
	border-color: var(--badge) !important;
	color: var(--text-on-badge) !important;
	--text-secondary: var(--text-on-badge-secondary);
	/* I don't like using !important, but there's no better way to do priority here */
}

.nsfw-background {
	background: #d04040 !important;
	color: white !important;
}

.badge-nsfw {
	font-size: 0.8em;
	margin-right: 10px;
}

.secondary-badge {
	box-sizing: border-box;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	color: var(--text);
	background: var(--body-offset);
	border: 1px solid var(--border);
	border-radius: 4px;
}

.secondary-badge svg {
	display: block;
	margin-right: 5px;
}

.tertiary-badge {
	padding: 5px 10px;
	background: var(--hover);
	border-radius: 4px;
	margin-right: 5px;
	margin-top: 5px;
}

label~input {
	margin-top: 5px;
}

input, textarea {
	font-size: 1rem;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--border-dark);
	border-radius: 4px;
	padding: 5px 8px;
	background: var(--body);
	color: var(--text);
	appearance: none;
	-webkit-appearance: none;
}

/* Announcement banners */

.announcement-banner {
	box-sizing: border-box;
	width: 100%;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr auto;
	grid-gap: 20px;
	margin-bottom: 20px;
	padding: 10px;
	border-radius: 4px;
}

.announcement-banner * {
	margin: 0;
}

.announcement-banner .info {
	/* font-weight: bold; */
	margin-top: 5px;
}

.announcement-banner .remove-announcement svg {
	display: block;
}

.remove-announcement {
	cursor: pointer;
}

.announcement-banner .secondary {
	font-weight: normal;
	color: var(--text-secondary);
}

/* Switch */

.setting-wrapper.toggle {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.setting-wrapper.toggle:not(.no-spread) {
	justify-content: space-between;
}

.setting-wrapper.toggle.no-spread>*:first-child {
	margin-right: 10px;
}

.switch {
	appearance: none;
	-webkit-appearance: none;
	width: 50px;
	height: 24px;
	position: relative;
	border-radius: 20px;
}

.switch::before {
	content: "";
	display: block;
	position: absolute;
	transition: left 150ms;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 50px;
	background: var(--badge);
	left: 2px;
}

.switch:checked::before {
	left: calc(100% - 20px - 2px);
}

/* Manga grid layout */

.manga-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	grid-gap: 30px 10px;
}

.manga-grid .show-all {
	grid-column: 1 / -1;
	padding: 8px;
	background: var(--body-offset);
	border: 1px solid rgba(0, 0, 0, 0.03);
	font-size: 1rem;
	color: var(--text);
	border-radius: 4px;
}

.show-all-wrapper:not(.do-show-all):not(.force-show) .do-hide {
	display: none;
}

.show-all-wrapper.do-show-all .show-all, .show-all-wrapper.force-show .show-all {
	display: none;
}

/* Manga items */

.manga-card {
	width: 100%;
	display: grid;
	grid-template-columns: 100%;
	grid-gap: 15px;
	grid-template-rows: auto 1fr;
}

.manga-card .title-div {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

.manga-card .title-div>span {
	display: flex;
	align-items: center;
}

.manga-card .title-div>span .badge {
	margin-right: 5px;
	display: inline-block;
}

.manga-card .title-div .to-manga-page {
	margin-left: 5px;
}

.manga-card .to-manga, .manga-card .to-manga-page {
	/* Href */
	color: var(--color);
	text-decoration: none;
}

.manga-card .to-manga:hover {
	text-decoration: underline;
}

.manga-card .poster {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--border-2);
	border-radius: 6px;
	display: block;
	height: 288px;
	object-fit: contain;
	background: var(--border);
}

.manga-card .manga-meta {
	height: 100%;
}

.manga-card .manga-meta>* {
	margin: 0;
}

.manga-card .manga-meta>*:first-child {
	margin-bottom: 5px;
}

.manga-card .title-small {
	margin: 0;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-y: hidden;
	word-break: break-word;
}

/* List of small manga */

.small-manga-list {
	display: grid;
	grid-template-columns: 100%;
	grid-gap: 8px;
	margin-top: 10px;
}

.small-manga-list>*:nth-child(n + 5) {
	display: none;
}

/* Small manga card */

.small-manga {
	border-radius: 4px;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	grid-gap: 8px;
	color: var(--text-secondary);
	text-decoration: none;
}

.small-manga:not(.no-margin) {
	padding: 0 5px;
	margin-left: -5px;
}

.small-manga.badge-background {
	padding: 5px;
}

.small-manga .icon {
	padding: 5px;
	border-radius: 6px;
	background: rgba(0, 0, 20, 0.1);
}

.small-manga:not(.badge-background) .icon {
	color: var(--text-secondary);
}

.small-manga.badge-background .icon {
	background: transparent;
	color: inherit;
	border-radius: 4px;
}

.small-manga .icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.small-manga .small-title {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow-y: hidden;
	color: inherit;
}

.small-manga .sub-title {
	margin: 0;
	color: var(--text-secondary);
	font-weight: regular;
}

.small-manga .content.do-padding {
	padding: 5px 0;
}

/* Posters */

.poster-img {
	width: 100%;
	padding-bottom: 150.3%;
	border-radius: 4px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	border: 1px solid var(--border-2);
	box-sizing: border-box;
}

.poster-img .provider-image {
	position: absolute;
	right: 5px;
	top: 5px;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 4px;
	border: 1px solid var(--border);
	background: white;
	word-break: break-all;
	font-size: 0.5rem;
	object-fit: contain;
}

.poster-img .badge {
	position: absolute;
	bottom: 5px;
	right: 5px;
}

.poster-img .unread-chapter-count {
	position: absolute;
	top: 5px;
	left: 5px;
	padding: 1px 4px;
	border-radius: 4px;
	background: var(--body);
	color: var(--text);
	border: 2px solid var(--border);
}

.poster-img .poster-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

.poster-bottom {
	width: 100%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
	color: white;
	padding-top: 20px;
	display: none;
}

.poster-img .poster-inner .poster-text {
	padding: 8px 5px;
}

/* Progress bar */

.progress-bar-wrapper {
	width: 100%;
	height: 10px;
	background: rgba(255, 255, 255, 0.2);
}

.progress-bar-wrapper .progress-bar-line {
	height: 100%;
	background: var(--badge);
}

/* Manga layout */

.manga-top {
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-gap: 50px;
}

.manga-top .side-nav {
	margin-top: 20px;
}

.manga-top .aside-inner {
	position: sticky;
	top: calc(20px + env(safe-area-inset-top));
}

.poster {
	box-sizing: border-box;
	width: 100%;
	border-radius: 4px;
	border: 1px solid var(--border);
}

.banner {
	display: none;
}

.manga-top .side-nav.selection-actions .secondary-button {
	display: flex;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 0;
	width: 100%;
	font-size: 1rem;
	cursor: pointer;
}

.manga-top .side-nav.selection-actions .secondary-button .icon {
	margin-right: 8px;
}

.manga-top .selection-actions .show-on-selection-mode {
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms;
}

.is-selection-mode .selection-actions .show-on-selection-mode {
	opacity: 1;
	pointer-events: initial;
}

.manga-page-section {
	margin-bottom: 40px;
}

/* Manga progress */

.bar-wrapper {
	width: 100%;
	height: 0.5rem;
	border-radius: 100px;
	background: var(--border);
	display: flex;
}

.bar-wrapper .bar-inner {
	display: flex;
	align-items: center;
	border-radius: 100px;
}

/* Chapters */

.chapter-list {
	margin-top: 40px;
}

.chapter-list .chapters .chapter.badge-background {
	border-radius: 4px;
	border-top: 0;
}

.chapters .chapter:not(.badge-background) {
	color: var(--text);
}

.chapters .chapter:not(.badge-background):hover {
	background: var(--border);
}

.chapters .chapter {
	padding: 12px 20px;
	margin-left: -20px;
	text-decoration: none;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 5px;
}

.chapters .chapter .select {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}

.chapters .chapter .select svg {
	width: 1.2rem;
	height: 1.2rem;
	display: block;
	--size: 8px;
	padding: var(--size);
	margin-top: calc(var(--size) * -1);
	margin-left: calc(var(--size) * -1);
	margin-bottom: calc(var(--size) * -1);
	color: var(--text-secondary);
	background-color: transparent;
	transition: background-color 150ms;
	border-radius: 4px;
}

.chapters .chapter .select:hover svg {
	background-color: var(--border);
}

.chapters .chapter .label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.chapters .chapter .date {
	color: var(--text-secondary);
	margin-left: 10px;
}

.chapters .chapter .progress {
	text-align: right;
}

.progress[data-color="recent"] {
	color: var(--badge-text, var(--badge));
}

.chapters .chapter.badge-background .progress[data-color="recent"] {
	color: var(--text-on-badge);
}

.progress[data-color="neutral"] {
	color: inherit;
}

.chapters .chapter+.chapter {
	border-top: 1px solid var(--border-dark);
}

.chapter .chapter-icon svg {
	display: inline-block;
	margin-right: 10px;
	color: var(--badge-text, var(--badge));
}

.chapter .do-center {
	display: flex;
	align-items: center;
}

/* Chapter navigation */

.chapter-navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "current current""reload-chapter reload-chapter""previous next";
	grid-gap: 10px 5px;
	color: var(--text);
	align-items: center;
}

.chapter-navigation .current {
	text-align: center;
	grid-area: current;
	white-space: nowrap;
}

.chapter-navigation .next {
	grid-area: next;
}

.chapter-navigation .previous {
	grid-area: previous;
}

.secondary-button {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	grid-gap: 5px;
	text-decoration: none;
	color: inherit;
	padding: 5px 8px;
	border: 1px solid var(--border);
	background: var(--body);
	box-sizing: border-box;
	border-radius: 4px;
	word-break: break-word;
}

.chapter-navigation .secondary-button {
	display: grid;
}

.secondary-button.single-column {
	grid-template-columns: 100%;
}

@media (hover: hover) {
	.secondary-button:hover {
		background: var(--hover);
	}
}

.next .secondary-button {
	grid-template-columns: 1fr auto;
	text-align: right;
}

/* Reader */

.manga-reader:not(.loaded) {
	width: 100%;
}

.loading {
	position: relative;
	z-index: 0;
	width: 100%;
	height: calc(100vh - env(safe-area-inset-top));
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading::before {
	content: "";
	display: block;
	width: 25px;
	height: 25px;
	border-radius: 4px;
	background: var(--badge);
	animation: spin 1s infinite linear;
	z-index: 1;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.manga-reader.loaded .loading {
	display: none;
}

/* Pages */

.manga-reader.loaded {
	width: 100%;
	padding-bottom: calc(var(--footer-height) + 50px);
	padding-bottom: 0;
}

/* Horizontal reader */

.pages[data-reader-direction="horizontal"], .pages[data-reader-direction="horizontal-reversed"] {
	/* Horizontal reader */
	max-width: 100%;
	overflow-x: auto;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	scroll-snap-type: x mandatory;
	max-height: calc(100vh - env(safe-area-inset-top));
	overflow-y: hidden;
}

/* Image fit thing */

.pages[data-image-scaling="height"] .page-container {
	max-width: 100vw;
	overflow-x: auto;
	justify-items: initial;
	margin-right: 10px;
}

.pages[data-image-scaling="height"] img.pageImg {
	width: initial;
	max-width: initial;
}

.pages[data-reader-direction="vertical"] {
	max-height: calc(100vh - env(safe-area-inset-top));
	overflow-y: auto;
	scroll-snap-type: y mandatory;
}

.pages .pageImg.hidden {
	display: none;
}

.pageImg {
	display: block;
	object-fit: contain;
	max-width: 100%;
}

.page-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
	justify-items: center;
}

.pages[data-reader-direction="horizontal"] .pageImg, .pages[data-reader-direction="horizontal-reversed"] .pageImg {
	height: calc(100vh - var(--footer-height) - env(safe-area-inset-top) - 50px);
}

/* Vertical reader */

.pages[data-reader-direction="long-strip"][data-vertical-gap="yes"] .pageImg {
	margin-bottom: 10px;
}

.pages[data-reader-direction="long-strip"][data-vertical-image-size="full-height"] .pageImg, .pages[data-reader-direction="horizontal"] .pageImg, .pages[data-reader-direction="horizontal-reversed"] .pageImg, .pages[data-reader-direction="vertical"] .pageImg {
	width: 100%;
	max-height: calc(100vh - env(safe-area-inset-top));
	height: calc(100vh - env(safe-area-inset-top));
}

[data-reader-reader-direction="long-strip"][data-reader-vertical-image-size="full-height"] .manga-reader.loaded, .manga-reader.loaded .pages[data-reader-direction="vertical"][data-vertical-image-size="full-height"], [data-reader-reader-direction="vertical"][data-reader-vertical-image-size="full-width"] .manga-reader.loaded, .manga-reader.loaded .pages[data-reader-direction="vertical"][data-vertical-image-size="full-width"] {
	width: 100%;
}

.pages[data-reader-direction="long-strip"][data-vertical-image-size="full-width"] .pageImg {
	width: 100%;
	max-height: auto;
}

/* Pages */

.pages>* {
	width: 100%;
	min-width: 100%;
	scroll-snap-align: start;
}

.pages[data-reader-direction="long-strip"]>* {
	scroll-padding-top: env(safe-area-inset-top);
	scroll-margin-top: env(safe-area-inset-top);
}

/* Reader settings */

.setting-wrapper+.setting-wrapper {
	margin-top: 10px;
}

.setting.boxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	margin-top: 5px;
}

.setting.boxes.small {
	grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}

.setting.boxes:not(.small) .setting-box svg {
	margin-bottom: 5px;
}

.setting-box {
	box-sizing: border-box;
	border: 1px solid var(--border);
	padding: 10px;
	width: 100%;
	text-align: center;
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

details.settings-toggle[open]~.chapters {
	display: none;
}

.setting-box svg {
	width: 100%;
	height: 24px;
	display: block;
}

.setting-box:not(.selected):hover {
	cursor: pointer;
	background: var(--hover);
}

.setting-box.selected {
	background: var(--body);
	color: var(--text);
}

.quick-select .setting-box.selected, .content-inner .setting-box.selected {
	background: var(--badge);
	color: var(--text-on-badge);
}

/* Chapter quick select */

.toggle-quick-select:not(.quick-select-wrapper):hover {
	text-decoration: underline;
	cursor: pointer;
}

.quick-select-wrapper:not(.visible) {
	display: none;
}

.quick-select {
	background: var(--body);
	box-sizing: border-box;
	border: 1px solid var(--border);
	border-radius: 4px;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90%;
	max-width: 320px;
	transform: translate(-50%, -50%);
	max-height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	overflow-y: auto;
	z-index: 200;
}

.quick-select .manga-profile-medium, .quick-select .add-padding {
	padding: 20px;
}

.quick-select .section.add-padding {
	border-bottom: 1px solid var(--border);
}

.quick-select .section.add-padding[open] {
	border-bottom: 0;
}

.quick-select .manga-profile-medium {
	border-bottom: 1px solid var(--border);
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-gap: 10px;
	align-items: center;
}

.quick-select .small-title {
	margin: 0;
	color: var(--text);
	margin-bottom: 5px;
}

.quick-select .chapters .small-title {
	margin-top: 30px;
	margin-left: 20px;
	margin-bottom: 15px;
}

.quick-select .poster {
	width: 100%;
	display: block;
}

.quick-select .chapter {
	padding-left: 20px;
	margin-left: 0;
}

.quick-select-wrapper::before {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.2);
	z-index: 131;
}

.quick-select .scroll {
	max-height: 300px;
	overflow-y: auto;
	position: relative;
}

.quick-select.settings-is-open .chapters {
	display: none;
}

.quick-select .scroll>.chapter:first-child {
	margin-top: 50px;
}

.quick-select .scroll>.chapter:last-child {
	margin-bottom: 50px;
}

/* Prevent page scrolling */

.overlay-visible, .overlay-body body {
	overflow-y: hidden;
}

/* The oppoite of responsiveness */

.floating-button-wrapper {
	position: fixed;
	display: flex;
	width: calc(100% - 20px);
	/* Footer height including padding, normal footer, margin, extra footer */
	top: calc(100vh - var(--main-footer-height) - var(--footer-height) - 50px - 10px);
	left: calc(10px + env(safe-area-inset-left));
	margin-left: -2px;
	margin-right: -2px;
	z-index: 20;
}

[data-reader-back-location="top-left"] .floating-button-wrapper, [data-reader-back-location="top-right"] .floating-button-wrapper {
	top: env(safe-area-inset-top);
}

[data-reader-back-location="top-right"] .floating-button-wrapper, [data-reader-back-location="bottom-right"] .floating-button-wrapper {
	justify-content: flex-start;
	flex-direction: row-reverse;
}

.is-floating-button {
	display: none;
	min-height: 36px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	background: var(--body);
	border-radius: 4px;
	border: 2px solid var(--border);
	margin: 10px 0;
}

.is-floating-button.do-width {
	min-width: 36px;
}

.is-floating-button.do-padding {
	padding: 0 10px;
}

.floating-button-wrapper>* {
	margin-left: 2px;
	margin-right: 2px;
}

.floating-button {
	width: 36px;
}

.floating-button svg {
	display: block;
	color: var(--text);
}

.floating-button.badge-background svg {
	color: var(--text-on-badge);
}

/* Backups */

.backups {
	margin: 20px 0;
	display: grid;
	grid-template-columns: 100%;
	grid-gap: 10px;
}

.backup {
	background: var(--body-offset);
	padding: 10px 20px;
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.backup .title {
	margin: 0;
	color: var(--text);
	font-weight: normal;
}

.backup button {
	border: 0;
	padding: 4px 8px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1rem;
}

/* Selects */

select {
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 10, 0.05);
	font-size: 1em;
	background: #f5f7f9;
	color: #333;
}

/* Lists page */

.list-nav {
	position: sticky;
	top: 55px;
}

/* Lists editor */

.lists-wrapper {
	display: flex;
	flex-wrap: wrap;
}

.lists-wrapper .badge {
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
	margin-right: 5px;
}

.lists-wrapper svg {
	margin-right: 5px;
	color: var(--text-secondary);
	cursor: pointer;
}

.lists-wrapper .input-div input, .lists-wrapper .secondary-badge {
	margin: 2px 0;
	margin-right: 5px;
}

.lists-wrapper .input-div input {
	height: calc(100% - 4px);
}

.display-lists {
	display: flex;
	flex-wrap: wrap;
}

.shake {
	animation: 200ms shake linear infinite;
}

@keyframes shake {
	0% {
		margin-left: 5px;
	}

	33% {
		margin-left: 0px;
	}

	66% {
		margin-left: 10px;
	}

	100% {
		margin-left: 5px;
	}
}

.input-div {
	display: inline-block;
	position: relative;
	z-index: 1;
}

.input-div .suggestions {
	width: 100%;
	box-sizing: border-box;
	position: absolute;
	top: 100%;
	left: 0;
	padding: 5px 0;
	background: var(--body);
	border: 1px solid var(--border);
	border-radius: 4px;
	max-height: 200px;
	overflow-y: auto;
	display: none;
}

.input-div input.show-suggestions~.suggestions:not(:empty) {
	display: flex;
	flex-wrap: wrap;
}

/* Suggestions */

.suggestions {
	box-shadow: 0 3px 5px var(--border);
}

.suggestions .suggestion {
	width: 100%;
	padding: 8px 5px;
}

.suggestions .suggestion:hover {
	background: var(--hover);
	cursor: pointer;
}

.suggestions>*+* {
	border-top: 1px solid var(--border);
}

/* Another footer type situation */

.is-footer {
	width: 100%;
	background: var(--body-offset);
	box-sizing: border-box;
	position: fixed;
	grid-gap: 10px;
	left: 0;
	bottom: 0;
	min-height: var(--footer-height);
	padding: 0 10px;
	border-bottom: env(safe-area-inset-bottom) solid transparent;
	justify-content: space-around;
	align-items: center;
	border-top: 1px solid var(--border);
	display: none;
	box-sizing: border-box;
	z-index: 130;
}

.is-footer .nav-link {
	text-decoration: none;
	color: inherit;
	padding: 5px 20px;
	border-radius: 4px;
}

.nav-link.is-current-nav-item {
	background: var(--badge);
	color: var(--text-on-badge);
}

.nav-link:not(.is-current-nav-item).link-loading {
	background: var(--border);
}

.is-footer svg {
	display: block;
}

div.selection-actions {
	opacity: 0;
	pointer-events: none;
	transition: opacity 150ms;
}

.is-secondary-footer {
	box-sizing: border-box;
	padding: 10px;
	position: fixed;
	bottom: var(--footer-height);
	width: 100%;
	background: var(--body-offset);
	border-top: 1px solid var(--border);
	z-index: 111;
}

.is-footer .secondary-button, .is-secondary-footer .secondary-button {
	display: block;
	text-align: center;
	padding: 8px;
	margin-left: 0;
}

div.selection-actions .secondary-button .icon {
	display: none;
}

.is-footer .secondary-button .small-title, div.selection-actions .secondary-button .small-title {
	color: var(--text);
	font-size: 1rem;
	font-weight: normal;
}

div.selection-actions .selection-actions-inner {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 5px;
	align-items: center;
}

/* Alternative page counter */

.current-pages-button {
	position: fixed;
	bottom: calc(10px + env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
}

.current-pages-button>* {
	white-space: nowrap;
}

.current-pages-button>*:not(:first-child):not(:empty):before {
	/* margin-left: 20px; */
	content: "•";
	display: inline-block;
	margin: 0 12px;
	color: var(--text);
}

.current-pages-button .do-margin-right {
	margin-right: 6px;
}

/* Chapter navigation at end of chapter */

.in-chapter-navigation {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 80px 20px;
	padding-bottom: calc(80px + var(--footer-height));
}

.in-chapter-navigation .nav-items {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas: "previous next";
	grid-gap: 10px;
}

.in-chapter-navigation .nav-items .secondary-button {
	background: var(--body-harsh);
	color: var(--text);
}

.in-chapter-navigation .nav-items .secondary-button:hover {
	background: transparent;
}

.in-chapter-navigation .nav-items .next {
	grid-area: next;
}

.in-chapter-navigation .nav-items .previous {
	grid-area: previous;
}

/* Camera mode buttons */

.is-floating-button.is-camera-button {
	display: none;
}

[data-reader-show-camera-button="yes"] .is-floating-button.is-camera-button {
	display: flex;
}

/* Progress on desktop */

.main-sidebar .current-loading-progress:not(:empty) {
	margin-left: 20px;
}

.main-sidebar .current-loading-progress:not(:empty)::before {
	content: "(";
}

.main-sidebar .current-loading-progress:not(:empty)::after {
	content: ")";
}

/* Reload chapters */

.reload-chapters-button svg {
	cursor: pointer;
}

.main-sidebar .reload-chapter {
	grid-area: reload-chapter;
}

.main-sidebar .reload-chapters-button {
	justify-self: center;
}

.main-sidebar .reload-chapters-button svg {
	vertical-align: text-bottom;
}

.reload-chapters-button.hidden {
	display: none;
}

/* Image share */

.img-share {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	box-sizing: border-box;
	z-index: 999;
	padding: 20px;
	padding-top: calc(20px + env(safe-area-inset-top));
	padding-bottom: calc(20px + env(safe-area-inset-bottom));
	background: rgba(0, 0, 0, 0.5);
}

.img-share .to-share {
	width: 100%;
}

.el-hidden {
	display: none;
}

/* Push */

.push-notif-button:not(.el-hidden) {
	width: 100%;
	background: var(--body-offset);
	color: var(--text);
	padding: 8px 16px;
	border: 1px solid var(--border);
	border-radius: 6px;
	margin: 20px 0;
	font-size: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.push-notif-button svg {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
}

/* Responsiveness */

@media screen and (max-width: 900px), (orientation: portrait) {

	/* Set footer height */
	body {
		--main-footer-height: 50px;
		--footer-height: calc(var(--main-footer-height) + env(safe-area-inset-bottom));
	}

	/* Hide search in top part */
	aside.main-sidebar {
		max-width: 0;
		max-height: 0;
		padding: 0;
		margin: 0;
	}

	aside.main-sidebar>*:not(.chapter-navigation) {
		display: none;
	}

	.content-inner {
		margin: 40px 0;
	}

	/* Fix settings */
	.content-inner .settings.details-inner {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}

	/* Show footer */
	aside.main-sidebar .section.nav {
		display: none;
	}

	.is-footer {
		display: flex;
	}

	/* Toggle on tap */
	.toggle-on-tap {
		transition: opacity 300ms;
		opacity: 0;
		pointer-events: none;
	}

	.toggle-on-tap:not(.toggle-on-tap-alt):not(.current-pages-button).tapped, [data-reader-do-toggle-alt="yes"] .toggle-on-tap-alt.tapped, [data-reader-do-toggle-alt="no"] .toggle-on-tap-alt, body:not([data-reader-do-toggle-alt]) .toggle-on-tap-alt, [data-reader-show-info-badge="yes"] .current-pages-button.tapped {
		opacity: 1;
		pointer-events: initial;
	}

	/* Selection mode */
	.is-selection-mode .selection-actions {
		opacity: 1;
		pointer-events: initial;
	}

	.side-nav.selection-actions {
		display: none;
	}

	/* Extra margin for chapters */
	.content-inner .chapters {
		margin-bottom: calc(50px + calc(env(safe-area-inset-bottom)));
	}

	/* Floating buttons and stuff */
	.is-floating-button {
		display: flex;
		color: var(--text);
	}

	/* Scaling */
	.pages {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
	}

	[data-reader-reader-direction="vertical"] .pages .pageImg {
		max-height: initial;
	}

	[data-reader-reader-direction="vertical"][data-reader-image-scaling="100%"] .pages .pageImg {
		width: 100%;
	}

	/* Chapter navigation */
	.chapter-navigation {
		width: 100%;
		background: var(--body-offset);
		box-sizing: border-box;
		position: fixed;
		grid-template-columns: 1fr auto 1fr;
		grid-gap: 10px;
		grid-template-areas: "previous current next";
		left: 0;
		bottom: var(--footer-height);
		height: 50px;
		padding: 0 10px;
		z-index: 20;
		border-top: 1px solid var(--border);
	}

	.chapter-navigation :not(svg).decorative {
		display: none;
	}

	.chapter-navigation .secondary-button {
		text-align: center;
	}

	/* Main layout */
	.wrapper-all {
		grid-template-columns: 100%;
	}

	/* Sidebar */
	aside.main-sidebar {
		position: initial;
		height: auto;
		max-height: initial;
	}

	aside .logo img {
		max-width: 250px;
	}

	.chapter-list .chapters .chapter {
		margin-right: -20px;
		border-radius: 0;
	}
}

@media screen and (min-width: 900px), (orientation: landscape) {
	.wrapper-all.tapped {
		grid-template-columns: 100%;
	}

	.wrapper-all.tapped .main-sidebar {
		display: none;
	}
}

@media screen and (max-width: 450px) {

	/* Chevrons in nav */
	.chapter-navigation .secondary-button {
		grid-template-columns: 100%;
	}

	.chapter-navigation svg.decorative {
		display: none;
	}

	/* Manga page */
	.manga-top {
		grid-template-columns: 100%;
		grid-gap: 40px;
	}

	.has-banner .manga-top {
		grid-gap: calc(280px - env(safe-area-inset-top));
	}

	.manga-card .title-div>span {
		display: block;
	}

	/* Sub title spread */
	.sub-title.spread:not(.do-spread) {
		display: block;
	}

	.sub-title.spread>select {
		margin-top: 10px;
		width: 100%;
	}

	.manga-top .aside-inner {
		position: initial;
	}

	.content-inner.has-banner {
		margin-top: 0;
	}

	.poster {
		display: none;
	}

	.banner-wrapper {
		position: fixed;
		top: 0;
		--banner-extra: 0px;
		margin-top: calc(env(safe-area-inset-top) * -1);
		width: 100%;
		height: calc(280px + env(safe-area-inset-top) + var(--banner-extra));
		z-index: 105;
	}

	.banner {
		display: block;
		height: 100%;
		background: var(--border);
		width: calc(100% + 0px);
		margin: 0 -20px;
		object-fit: cover;
		/* margin-top: calc(env(safe-area-inset-top) * -1); */
	}

	.has-banner .banner-wrapper::before {
		/* iPhone top */
		content: "";
		display: block;
		position: fixed;
		top: 0;
		width: calc(100% + 40px);
		margin-left: -20px;
		height: env(safe-area-inset-top);
		background: rgba(0, 0, 0, 0.3);
	}

	.has-banner .top-content {
		position: relative;
		border-left: 20px solid var(--body);
		border-right: 20px solid var(--body);
		background: var(--body);
		margin-left: -20px;
		margin-right: -20px;
		z-index: 110;
	}

	.has-banner .top-content::before {
		content: "";
		display: block;
		background: var(--body);
		width: calc(100% + 40px);
		height: 25px;
		top: -25px;
		position: absolute;
		left: -20px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		border-top: 1px solid var(--border);
	}

	.has-banner .top-content::after {
		content: "";
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: env(safe-area-inset-top);
		background: var(--header-background);
		z-index: 200;
		opacity: 0;
		transition: opacity 200ms;
	}

	.has-banner .top-content.show-status::after {
		opacity: 1;
	}

	.hide-on-desktop {
		display: initial;
	}

	.hide-on-mobile {
		display: none;
	}
}

@media screen and (max-width: 500px) {

	/* Manga grid */
	.manga-grid {
		grid-gap: 10px;
	}

	[data-list-type="list"] .manga-grid {
		grid-template-columns: 100%;
	}

	[data-list-type="grid"] .manga-grid {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}

	/* Picker */
	.list-type-picker {
		display: flex;
	}

	/* Cards */
	.manga-card {
		grid-template-rows: auto;
		align-items: center;
	}

	[data-list-type="grid"] .manga-card {
		grid-template-columns: 1fr;
	}

	[data-list-type="list"] .manga-card {
		grid-template-columns: 100px 1fr;
	}

	[data-list-type="grid"] .poster-bottom {
		display: block;
	}

	[data-list-type="list"] .manga-card .manga-meta {
		height: auto;
	}

	[data-list-type="grid"] .manga-card .manga-meta {
		display: none;
	}
}

/* Camera mode */

.is-camera-mode .toggle-on-tap {
	opacity: 0 !important;
}