:root {
	--colorSpread:
		hsl(35, 15%, 92.15%)0%,
		hsl(35, 15%, 96.07%)3%,
		hsl(35, 15%, 100%)6%,
		hsl(35, 15%, 100%)40%,
		hsl(35, 15%, 96.08%)45%,
		hsl(35, 15%, 86.27%)49.5%,
		hsl(35, 15%, 70.58%)49.9%,
		hsl(35, 15%, 54.90%)50%,
		hsl(35, 15%, 78.43%)50.1%,
		hsl(35, 15%, 90.19%)50.5%,
		hsl(35, 15%, 100%)52%,
		hsl(35, 15%, 96.07%)58%,
		hsl(35, 15%, 100%)71%,
		hsl(35, 15%, 100%)100%;

	--colorSpreadSX:
		hsl(35, 15%, 92.15%)0%,
		hsl(35, 15%, 96.07%)6%,
		hsl(35, 15%, 100%)12%,
		hsl(35, 15%, 100%)80%,
		hsl(35, 15%, 96.08%)90%,
		hsl(35, 15%, 86.27%)99%,
		hsl(35, 15%, 70.58%)99.9%,
		hsl(35, 15%, 54.90%)100%;

	--colorSpreadDX:
		hsl(35, 15%, 54.90%)0%,
		hsl(35, 15%, 78.43%)0.2%,
		hsl(35, 15%, 90.19%)1.0%,
		hsl(35, 15%, 100%)4%,
		hsl(35, 15%, 96.07%)16%,
		hsl(35, 15%, 100%)42%,
		hsl(35, 15%, 100%)100%;

	--mb-thumb-size: 150;
	--mb-thumb-size-px: 150px;

	--mb-gradient-1: 30;
	--mb-gradient-2: 40;
	--mb-gr-color-1: transparent;
	--mb-gr-color-2: transparent;

}


[data-theme-reader="classic"] {
	--mb-gr-color-1: rgba(140, 130, 120, 1);
	--mb-gr-color-2: rgba(30, 20, 0, 1);
}

[data-theme-reader="light-accent"] {
	--mb-gr-color-1: hsl(var(--mb-gradient-1), calc(var(--mb-s)*0.5), 93%);
	--mb-gr-color-2: hsl(var(--mb-gradient-2), calc(var(--mb-s)*0.8), 80%);
}

[data-theme-reader="dark-accent"] {
	--mb-gr-color-1: hsl(var(--mb-gradient-1), calc(var(--mb-s)*0.8), 38%);
	--mb-gr-color-2: hsl(var(--mb-gradient-2), calc(var(--mb-s)*0.9), 6%);
}

[data-theme-reader="white"] {
	--mb-gr-color-1: white;
	--mb-gr-color-2: white;
}

[data-theme-reader="black"] {
	--mb-gr-color-1: black;
	--mb-gr-color-2: black;
}

[data-theme-reader="transparent"] {
	--mb-gr-color-1: var(--mb-page-color);
	--mb-gr-color-2: var(--mb-page-color);
}

.hide-scrollbar {
	/* Works in Firefox */
	scrollbar-width: none;

	/* Works in IE, Edge (legacy) */
	-ms-overflow-style: none;

	/* Works in Chrome, Safari, Edge (Chromium), Opera */
}

.hide-scrollbar::-webkit-scrollbar {
	display: none;
}

#readerBackground {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	/*z-index: 1001;*/
	/*background-image: linear-gradient(180deg, rgb(125, 120, 140), rgb(30, 0, 25));*/
	/*background-image: linear-gradient(180deg, rgba(140, 130, 120, 1), rgba(30, 20, 0, 1));*/

	background-color: transparent;
	/*background-image: linear-gradient(180deg, hsl(var(--mb-gradient-1), 18%, 91%), hsl(var(--mb-gradient-2), 40%, 76%));*/
	pointer-events: none;
	opacity: 1;
	transition: background-color 0.3s ease;
}

#readerBackground::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: var(--mb-gr-color-1);
	transition: background-color 0.3s ease;

	pointer-events: none;

}

#readerBackground::after {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: var(--mb-gr-color-2);
	transition: background-color 0.3s ease;

	-webkit-mask-image: linear-gradient(to bottom, transparent, black);
	mask-image: linear-gradient(to bottom, transparent, black);

	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;

	pointer-events: none;
}

#readerContainer.hidden #readerBackground {
	opacity: 0;
	transition: opacity 0.3s ease 0.5s;
}

#readerContainer:not(.hidden) #readerBackground {
	opacity: 1;
	transition: opacity 0.3s ease;
}

#webtoonContainer {
	position: absolute;
	top: 0;
	margin-top:var(--mb-top-spacer);
	overflow: hidden;
	bottom: 0;
	/*height:100vh;*/
	box-sizing: border-box;
	background: white;
}

/* reader overlay is just a placeholder, a virtual coordinate to move all together */
#readerOverlay {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	z-index: 1004;
	transition: top 0.3s;

	margin: 0;
	padding: 0;
}


#readerContainer {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1002;
	transition: top 0.3s;

	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--mb-page-color);
	/*height: 100vh;*/
	overflow: hidden;
	/*box-shadow: inset green 0px 0px 15px;*/
	background: none;
}

#readerContainer.hidden {
	/*opacity: 0;*/
	/*display: none;*/
	/*top:100vh;*/
	pointer-events: none;
}

img.page {
	transition: opacity 0.3s;
	/*position: absolute;*/
	/*TODO It was position: absolute but removed for floating*/
	border: none;
	color: transparent;
	opacity: 1;
}

/*
img.page:not([src]) {
	border: none;
	color: transparent;
}
*/

.webtoon-layout img.page {
	display: block;
}

.spread-layout{
	contain: layout style paint;
}

.spread-layout img.page {
	display: block;
	height: 100vh;
	contain: layout style paint;
}

/*
img.page:not(.loading) {
	opacity: 1;
}
*/

img.page.hidden {
	opacity: 0;
}

img.page:not(.hidden) {
	opacity: 1;
}

@keyframes loader_spin_page {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.page-shadow-left {
	position: absolute;
	top: 0;
	right: 0;
	width: 20%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.15s;
	background: linear-gradient(to Left, hsla(15, 19%, 33%, 1.0), transparent);
}

.page-shadow-right {
	position: absolute;
	top: 0;
	left: 0;
	width: 20%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.15s;
	background: linear-gradient(to Right, hsla(15, 19%, 33%, 1.0), transparent);
}

.page-light-right {
	position: absolute;
	top: 0;
	left: 50%;
	width: 15%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.15s;
	background: linear-gradient(to Right, rgba(255, 255, 250, 0.4), hsla(15, 19%, 33%, 0.2) 20%, transparent 80%);
}

.page-light-left {
	position: absolute;
	top: 0;
	right: 50%;
	width: 15%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.15s;
	background: linear-gradient(to Left, rgba(255, 255, 250, 0.4), hsla(15, 19%, 33%, 0.2) 20%, transparent 80%);
}

.hidden-page {
	opacity: 0 !important;
}

.page-container {
	position: relative;
	overflow: hidden;
	background: white;
}

.page-container.left-page {
	filter: sepia(5%);
	-webkit-filter: sepia(5%);

	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRF////////////////////////////////////////////////////////////////////////////////////NZumWwAAABV0Uk5TT1R3b0AqZkpzO1hians1f10wg0Ujj3EqfQAABp1JREFUeJwlVseS6zoOJZiTgt39/1/42lZmJge3RguVF5QMnCggBP5/VYG3YAulg3WgsK+bYHyI0wA/m4PSgGq6A4dZnJIC+74h1qR5WL6+NSbYpelmB3km9SfMOCzcS6yUJ7LCq8epfW1VLGqSylx5O1ayvy6ioz/1tSZ8bj4N1Zk0uCTeXl+Tp5Zosnn64DGjn/QTkxLRELbPt+kk2RjpWGsiKplL4GBf4IJX1mtwqgIj5VHVtcvTqEYAcwiWh2CkMZmabNGAfXxNPnBOC5H7VDUZ5O5k/fz86bDuMon6DqaxfnGa5z56gRf9vh7Gc+ms/Ixn2MEiKWk9KKO1aeA7gMpiqFiUjTzpGybI4GoVwWZCrnfu0RZxrcd8SncoFTgrgoRaNAxaOvG7B7HcoxIntiaLykTKnoBoEVinRcVkJGzUw7WSRxw/tUa/gzAX4Gb89mybW5jY2G1PowvSq4OnL+xro30aUzbXrFMH8DyU7sSj4TTxRf57H8Q9S76mXroAQSKnhB+yyMAIlJVeDbyqnbH+lQpIC57UZvb55H639HHt7syx73T+tAaAu5o2PPxuUPzzao3TP8uGKjxRdcf3jYPNLCRWLDGb46e4hQuC3ACct+r0dyKnhijkw4bQj3qAdBUt//v5CDF0PaX/mN7KQjLAb2UNl+nfMdfWbSOJ60oY2zt5B1IHc5l/VafVXMySgLqFqQZrHvlPZYowPVAH7K68T39LzS6q2kRQz3IJQcsw24SytPyYnuVrWenggqTnlIGd3KREphLIKz/cn6q5/4Tf1wiPe+D3o1lxu2o8TvSWxcAxoIB5pqxy0s3tbN407Q+vr8shFwQcr6D/oK9JH6AUaeOEeXOU7VZsOjEuzzkKyPp6HeYY75j+oe2y7f1xt0matkQcuk+plJmpBUG75nF1ThSk4sRXW5Ql/iNI02nmh+6FKJz/cA+icxXL6NleQD4+NRCt6EbZYDBn+qyxczz+7wdrKukUJe2kChaV/JvFUUUjUoc8H9SzC4w9q6k8sozO8ZeraMYqnvkQ5mmeJCJ40QOvqzkS5mgH+CFCcch5Pl7bGzXTWJgp2iRfc+H8Ht3X+z1SgOUhU77JDDoDAi+Q943LSoZLHC4byfLxcpsv0k1Pstras+zVdIgTTJe9jaZ/VAhcDmNJ9g5lxoHYIWxi8la9JuroiEQQ1OqAVxP71G+o7xPU4W5ZB1dZkjLkxSZCN+n3USkKOguXxZ9Y0GK3/9L1I1wvzdDTCPLUauTV0AolD7I8o809tJ99/qL0kkTBrO2et6UHlWhHCuMAmpYGjymYEEwdHIMsClGQpN/K/164/lhO5i6R/aFEY5Se1VMaVGC1Yi5Nl8eY6HL3t0idLfUEL9h/c6KMnWy4UyVl0794m55E19te6Cs6xCV1BfJQy8hOgDXd58sFe7sbhZTNwTNluWPk2osVSd1maCtyRNXyur8SQcEMrh/XMUTG4HlFIVMfg+/hXW7ds8K9svnQpZRIX0XADtpvg2JVqACyJjD1/s0BDfYig4Ve5TAHdInARxH80zERQaJqC6EY7pUtH+JC94hBaOtNM+hYdV125vMhNBxqyj0QkD7XgVyAYmH0n89y51ketDJfkNDHkBJVVgJVh+qnbvcYl3oQpOo0oZMBAjF9dPlnvHZbdlFqa61LLFDQ7sCzwbRcUjYs6Mg1Pag5px7QJnW8numRRbAPX445Qidd8ioO0wuHibUWZ7JJXIZWUVXy4zaXlIQNiDLM5eZ+Q/EQvrWJhtFAQ34dCEjv6uyCQ+QcYBSRRG8u0eBH0T2qEt2zHrINdWCXG5IwyfVj2vkKPFeFLFb7eRWKaUow2fxOqTtQ6SZGyQR4jYCdxRAIS77XVoZ63IaVDqLMASddPpTry6Lo9G0amdGewOADa755sWhp2f1dHBEPkXAuX9Pl49gpMtYv74kH2i0Oht4cnJyDytbdnZfGRo+oXSzTfw1rjqlCoyjFg6Pd8wwSAxJpAsGDPgwmyWMhUhPmfK3jxiJT7V6vpMpyop1M3RwsBPHPzCf84CHkJshTxbP+63jO2AWlucPTr31em60y64MB6+/P0AaetjzZio9j/C68UUxXlrxoOc34KL51GrEg+0HB0hSpvUGpVqABMEG72X9L9Ftf+AdAdB1ssjvxfVycpenEjgfzmbOQ8QGH3f+88/n7wfBTd/Ecc1x8DOKuexiK2EY3fIu+xkrg5oD1Cd/fdFo0DuGpNIUdyeyjSfSEYzcouAZZyf8AzN6ATrI99+cAAAAASUVORK5CYII="),
		radial-gradient(130% 60%,
			rgba(255, 255, 255, 0) 70%,
			rgba(0, 0, 0, 0.1) 100%),
		linear-gradient(90deg, var(--colorSpreadSX));
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: 10% 10%, 100% 100%, 100% 100%;
}

.page-container.right-page {
	filter: sepia(5%);
	-webkit-filter: sepia(5%);

	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRF////////////////////////////////////////////////////////////////////////////////////NZumWwAAABV0Uk5TT1R3b0AqZkpzO1hians1f10wg0Ujj3EqfQAABp1JREFUeJwlVseS6zoOJZiTgt39/1/42lZmJge3RguVF5QMnCggBP5/VYG3YAulg3WgsK+bYHyI0wA/m4PSgGq6A4dZnJIC+74h1qR5WL6+NSbYpelmB3km9SfMOCzcS6yUJ7LCq8epfW1VLGqSylx5O1ayvy6ioz/1tSZ8bj4N1Zk0uCTeXl+Tp5Zosnn64DGjn/QTkxLRELbPt+kk2RjpWGsiKplL4GBf4IJX1mtwqgIj5VHVtcvTqEYAcwiWh2CkMZmabNGAfXxNPnBOC5H7VDUZ5O5k/fz86bDuMon6DqaxfnGa5z56gRf9vh7Gc+ms/Ixn2MEiKWk9KKO1aeA7gMpiqFiUjTzpGybI4GoVwWZCrnfu0RZxrcd8SncoFTgrgoRaNAxaOvG7B7HcoxIntiaLykTKnoBoEVinRcVkJGzUw7WSRxw/tUa/gzAX4Gb89mybW5jY2G1PowvSq4OnL+xro30aUzbXrFMH8DyU7sSj4TTxRf57H8Q9S76mXroAQSKnhB+yyMAIlJVeDbyqnbH+lQpIC57UZvb55H639HHt7syx73T+tAaAu5o2PPxuUPzzao3TP8uGKjxRdcf3jYPNLCRWLDGb46e4hQuC3ACct+r0dyKnhijkw4bQj3qAdBUt//v5CDF0PaX/mN7KQjLAb2UNl+nfMdfWbSOJ60oY2zt5B1IHc5l/VafVXMySgLqFqQZrHvlPZYowPVAH7K68T39LzS6q2kRQz3IJQcsw24SytPyYnuVrWenggqTnlIGd3KREphLIKz/cn6q5/4Tf1wiPe+D3o1lxu2o8TvSWxcAxoIB5pqxy0s3tbN407Q+vr8shFwQcr6D/oK9JH6AUaeOEeXOU7VZsOjEuzzkKyPp6HeYY75j+oe2y7f1xt0matkQcuk+plJmpBUG75nF1ThSk4sRXW5Ql/iNI02nmh+6FKJz/cA+icxXL6NleQD4+NRCt6EbZYDBn+qyxczz+7wdrKukUJe2kChaV/JvFUUUjUoc8H9SzC4w9q6k8sozO8ZeraMYqnvkQ5mmeJCJ40QOvqzkS5mgH+CFCcch5Pl7bGzXTWJgp2iRfc+H8Ht3X+z1SgOUhU77JDDoDAi+Q943LSoZLHC4byfLxcpsv0k1Pstras+zVdIgTTJe9jaZ/VAhcDmNJ9g5lxoHYIWxi8la9JuroiEQQ1OqAVxP71G+o7xPU4W5ZB1dZkjLkxSZCN+n3USkKOguXxZ9Y0GK3/9L1I1wvzdDTCPLUauTV0AolD7I8o809tJ99/qL0kkTBrO2et6UHlWhHCuMAmpYGjymYEEwdHIMsClGQpN/K/164/lhO5i6R/aFEY5Se1VMaVGC1Yi5Nl8eY6HL3t0idLfUEL9h/c6KMnWy4UyVl0794m55E19te6Cs6xCV1BfJQy8hOgDXd58sFe7sbhZTNwTNluWPk2osVSd1maCtyRNXyur8SQcEMrh/XMUTG4HlFIVMfg+/hXW7ds8K9svnQpZRIX0XADtpvg2JVqACyJjD1/s0BDfYig4Ve5TAHdInARxH80zERQaJqC6EY7pUtH+JC94hBaOtNM+hYdV125vMhNBxqyj0QkD7XgVyAYmH0n89y51ketDJfkNDHkBJVVgJVh+qnbvcYl3oQpOo0oZMBAjF9dPlnvHZbdlFqa61LLFDQ7sCzwbRcUjYs6Mg1Pag5px7QJnW8numRRbAPX445Qidd8ioO0wuHibUWZ7JJXIZWUVXy4zaXlIQNiDLM5eZ+Q/EQvrWJhtFAQ34dCEjv6uyCQ+QcYBSRRG8u0eBH0T2qEt2zHrINdWCXG5IwyfVj2vkKPFeFLFb7eRWKaUow2fxOqTtQ6SZGyQR4jYCdxRAIS77XVoZ63IaVDqLMASddPpTry6Lo9G0amdGewOADa755sWhp2f1dHBEPkXAuX9Pl49gpMtYv74kH2i0Oht4cnJyDytbdnZfGRo+oXSzTfw1rjqlCoyjFg6Pd8wwSAxJpAsGDPgwmyWMhUhPmfK3jxiJT7V6vpMpyop1M3RwsBPHPzCf84CHkJshTxbP+63jO2AWlucPTr31em60y64MB6+/P0AaetjzZio9j/C68UUxXlrxoOc34KL51GrEg+0HB0hSpvUGpVqABMEG72X9L9Ftf+AdAdB1ssjvxfVycpenEjgfzmbOQ8QGH3f+88/n7wfBTd/Ecc1x8DOKuexiK2EY3fIu+xkrg5oD1Cd/fdFo0DuGpNIUdyeyjSfSEYzcouAZZyf8AzN6ATrI99+cAAAAASUVORK5CYII="),
		radial-gradient(130% 60%,
			rgba(255, 255, 255, 0) 70%,
			rgba(0, 0, 0, 0.1) 100%),
		linear-gradient(90deg, var(--colorSpreadDX));
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: 10% 10%, 100% 100%, 100% 100%;
}

.page-container:has(img.page)::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 30%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border-top-color: var(--mb-accent);
	transform: translate(-50%, -50%);
	opacity: 0;
	background: conic-gradient(transparent 0deg, var(--mb-accent-a30) 180deg, var(--mb-accent) 300deg, transparent 360deg);
	mask-image: radial-gradient(circle, transparent 50%, white 50%, white 70%);
	-webkit-mask-image: radial-gradient(circle, transparent 50%, white 50%, white 70%);
	transition: opacity 0.5s;
}

.page-container:has(img.page.loading)::before {
	opacity: 1;
	animation: loader_spin 1s linear infinite;
}

/* hidden viene impostato in questo caso? perché altrimenti taglia subito! */
.page-container:has(img.page.loaded)::before {
	opacity: 0;
	animation: loader_spin 1s linear 2;
}

img.multiply {
	mix-blend-mode: multiply;
	/*
	REMOVED TO IMPROVE SAFARI SPEED ON IOS/IPADOS
	filter: sepia(5%) opacity(100%);
	-webkit-filter: sepia(5%) opacity(100%);
*/
}

div.double-page,
div.two-pages,
div.cover-page,
div.single-page,
#coverlay {
	display: flex;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	box-sizing: content-box;
	/*z-index: 100;*/
}

/*
div.cover-page {
	object-position: center center;
}
*/
#coverlayer {
	position: absolute;
	left: 0px;
	top: 0px;

}

#coverlayer.LTR {
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.65)0%,
			rgba(255, 255, 255, 0.00)0.5%,
			rgba(30, 20, 0, 0.00)3%,
			rgba(30, 20, 0, 0.35)3.25%,
			rgba(255, 255, 255, 0.35)3.5%,
			rgba(30, 20, 0, 0.00)3.75%);
	mix-blend-mode: hard-light;
}

#coverlayer.RTL {
	background-image:
		linear-gradient(270deg, rgba(30, 20, 0, 0.65)0%,
			rgba(30, 20, 0, 0.00)0.5%,
			rgba(255, 255, 255, 0.00)3%,
			rgba(255, 255, 255, 0.35)3.25%,
			rgba(30, 20, 0, 0.35)3.5%,
			rgba(30, 20, 0, 0.00)3.75%);
	mix-blend-mode: hard-light;
}

div.double-page,
div.two-pages {

	align-items: center;
	justify-content: center;

}

#foreEdgeL {
	position: fixed;
	aspect-ratio: 1 / 10;
	height: 100%;
	top: 0;
	right: 100%;
	z-index: 50;

	background-image: linear-gradient(to left, #928678 0%, #D4CDC5 100%);
	background-repeat: repeat-x;
	background-size: calc(100% / 18) 100%;
	background-position: right top;

	/*image-rendering:pixelated;*/
}

#foreEdgeR {
	position: fixed;
	aspect-ratio: 1 / 10;
	height: 100%;
	top: 0;
	left: 100%;
	z-index: 50;

	background-image: linear-gradient(to right, #928678 0%, #D4CDC5 100%);
	background-repeat: repeat-x;
	background-size: calc(100% / 18) 100%;
	background-position: left top;
	/*image-rendering: pixelated;*/
}

#dropShadowL {
	position: fixed;
	aspect-ratio: 1 / 10;
	height: 100%;
	top: 0;
	right: 100%;
	background-image: linear-gradient(270deg, rgba(60, 40, 30, 0.15) 0%, rgba(0, 00, 0, 0) 30%);
	/*background-image: linear-gradient(270deg, rgba(200, 0, 0, 1) 0%, rgba(200, 0, 0, 0) 100%);*/
	transition: margin 0.3s;
	z-index: 100;
	opacity: 0;
}

#dropShadowR {
	position: fixed;
	aspect-ratio: 1 / 10;
	height: 100%;
	top: 0;
	left: 100%;
	background-image: linear-gradient(90deg, rgba(60, 40, 30, 0.15) 0%, rgba(0, 00, 0, 0) 30%);
	/*background-image: linear-gradient(90deg, rgba(0, 0, 200, 1) 0%, rgba(0, 0, 200, 0) 100%);*/
	transition: margin 0.3s;
	z-index: 100;
	opacity: 0;

}

#readerViewer,
#readerViewerWebtoon {
	background-position: center;
	background-size: 10% 10%, 100% 100%, 100% 100%;

	border-style: solid;
	border-color: transparent;

}

.page-container.cover-page-RTL {
	filter: sepia(5%);
	-webkit-filter: sepia(5%);
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRF////////////////////////////////////////////////////////////////////////////////////NZumWwAAABV0Uk5TT1R3b0AqZkpzO1hians1f10wg0Ujj3EqfQAABp1JREFUeJwlVseS6zoOJZiTgt39/1/42lZmJge3RguVF5QMnCggBP5/VYG3YAulg3WgsK+bYHyI0wA/m4PSgGq6A4dZnJIC+74h1qR5WL6+NSbYpelmB3km9SfMOCzcS6yUJ7LCq8epfW1VLGqSylx5O1ayvy6ioz/1tSZ8bj4N1Zk0uCTeXl+Tp5Zosnn64DGjn/QTkxLRELbPt+kk2RjpWGsiKplL4GBf4IJX1mtwqgIj5VHVtcvTqEYAcwiWh2CkMZmabNGAfXxNPnBOC5H7VDUZ5O5k/fz86bDuMon6DqaxfnGa5z56gRf9vh7Gc+ms/Ixn2MEiKWk9KKO1aeA7gMpiqFiUjTzpGybI4GoVwWZCrnfu0RZxrcd8SncoFTgrgoRaNAxaOvG7B7HcoxIntiaLykTKnoBoEVinRcVkJGzUw7WSRxw/tUa/gzAX4Gb89mybW5jY2G1PowvSq4OnL+xro30aUzbXrFMH8DyU7sSj4TTxRf57H8Q9S76mXroAQSKnhB+yyMAIlJVeDbyqnbH+lQpIC57UZvb55H639HHt7syx73T+tAaAu5o2PPxuUPzzao3TP8uGKjxRdcf3jYPNLCRWLDGb46e4hQuC3ACct+r0dyKnhijkw4bQj3qAdBUt//v5CDF0PaX/mN7KQjLAb2UNl+nfMdfWbSOJ60oY2zt5B1IHc5l/VafVXMySgLqFqQZrHvlPZYowPVAH7K68T39LzS6q2kRQz3IJQcsw24SytPyYnuVrWenggqTnlIGd3KREphLIKz/cn6q5/4Tf1wiPe+D3o1lxu2o8TvSWxcAxoIB5pqxy0s3tbN407Q+vr8shFwQcr6D/oK9JH6AUaeOEeXOU7VZsOjEuzzkKyPp6HeYY75j+oe2y7f1xt0matkQcuk+plJmpBUG75nF1ThSk4sRXW5Ql/iNI02nmh+6FKJz/cA+icxXL6NleQD4+NRCt6EbZYDBn+qyxczz+7wdrKukUJe2kChaV/JvFUUUjUoc8H9SzC4w9q6k8sozO8ZeraMYqnvkQ5mmeJCJ40QOvqzkS5mgH+CFCcch5Pl7bGzXTWJgp2iRfc+H8Ht3X+z1SgOUhU77JDDoDAi+Q943LSoZLHC4byfLxcpsv0k1Pstras+zVdIgTTJe9jaZ/VAhcDmNJ9g5lxoHYIWxi8la9JuroiEQQ1OqAVxP71G+o7xPU4W5ZB1dZkjLkxSZCN+n3USkKOguXxZ9Y0GK3/9L1I1wvzdDTCPLUauTV0AolD7I8o809tJ99/qL0kkTBrO2et6UHlWhHCuMAmpYGjymYEEwdHIMsClGQpN/K/164/lhO5i6R/aFEY5Se1VMaVGC1Yi5Nl8eY6HL3t0idLfUEL9h/c6KMnWy4UyVl0794m55E19te6Cs6xCV1BfJQy8hOgDXd58sFe7sbhZTNwTNluWPk2osVSd1maCtyRNXyur8SQcEMrh/XMUTG4HlFIVMfg+/hXW7ds8K9svnQpZRIX0XADtpvg2JVqACyJjD1/s0BDfYig4Ve5TAHdInARxH80zERQaJqC6EY7pUtH+JC94hBaOtNM+hYdV125vMhNBxqyj0QkD7XgVyAYmH0n89y51ketDJfkNDHkBJVVgJVh+qnbvcYl3oQpOo0oZMBAjF9dPlnvHZbdlFqa61LLFDQ7sCzwbRcUjYs6Mg1Pag5px7QJnW8numRRbAPX445Qidd8ioO0wuHibUWZ7JJXIZWUVXy4zaXlIQNiDLM5eZ+Q/EQvrWJhtFAQ34dCEjv6uyCQ+QcYBSRRG8u0eBH0T2qEt2zHrINdWCXG5IwyfVj2vkKPFeFLFb7eRWKaUow2fxOqTtQ6SZGyQR4jYCdxRAIS77XVoZ63IaVDqLMASddPpTry6Lo9G0amdGewOADa755sWhp2f1dHBEPkXAuX9Pl49gpMtYv74kH2i0Oht4cnJyDytbdnZfGRo+oXSzTfw1rjqlCoyjFg6Pd8wwSAxJpAsGDPgwmyWMhUhPmfK3jxiJT7V6vpMpyop1M3RwsBPHPzCf84CHkJshTxbP+63jO2AWlucPTr31em60y64MB6+/P0AaetjzZio9j/C68UUxXlrxoOc34KL51GrEg+0HB0hSpvUGpVqABMEG72X9L9Ftf+AdAdB1ssjvxfVycpenEjgfzmbOQ8QGH3f+88/n7wfBTd/Ecc1x8DOKuexiK2EY3fIu+xkrg5oD1Cd/fdFo0DuGpNIUdyeyjSfSEYzcouAZZyf8AzN6ATrI99+cAAAAASUVORK5CYII="),
		radial-gradient(130% 60%,
			rgba(255, 255, 255, 0) 70%,
			rgba(0, 0, 0, 0.1) 100%),
		linear-gradient(90deg, var(--colorSpread));
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: 10% 10%, 200% 100%, 200% 100%;
	background-position: left, left, left;
}

.page-container.cover-page-LTR {
	filter: sepia(5%);
	-webkit-filter: sepia(5%);
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRF////////////////////////////////////////////////////////////////////////////////////NZumWwAAABV0Uk5TT1R3b0AqZkpzO1hians1f10wg0Ujj3EqfQAABp1JREFUeJwlVseS6zoOJZiTgt39/1/42lZmJge3RguVF5QMnCggBP5/VYG3YAulg3WgsK+bYHyI0wA/m4PSgGq6A4dZnJIC+74h1qR5WL6+NSbYpelmB3km9SfMOCzcS6yUJ7LCq8epfW1VLGqSylx5O1ayvy6ioz/1tSZ8bj4N1Zk0uCTeXl+Tp5Zosnn64DGjn/QTkxLRELbPt+kk2RjpWGsiKplL4GBf4IJX1mtwqgIj5VHVtcvTqEYAcwiWh2CkMZmabNGAfXxNPnBOC5H7VDUZ5O5k/fz86bDuMon6DqaxfnGa5z56gRf9vh7Gc+ms/Ixn2MEiKWk9KKO1aeA7gMpiqFiUjTzpGybI4GoVwWZCrnfu0RZxrcd8SncoFTgrgoRaNAxaOvG7B7HcoxIntiaLykTKnoBoEVinRcVkJGzUw7WSRxw/tUa/gzAX4Gb89mybW5jY2G1PowvSq4OnL+xro30aUzbXrFMH8DyU7sSj4TTxRf57H8Q9S76mXroAQSKnhB+yyMAIlJVeDbyqnbH+lQpIC57UZvb55H639HHt7syx73T+tAaAu5o2PPxuUPzzao3TP8uGKjxRdcf3jYPNLCRWLDGb46e4hQuC3ACct+r0dyKnhijkw4bQj3qAdBUt//v5CDF0PaX/mN7KQjLAb2UNl+nfMdfWbSOJ60oY2zt5B1IHc5l/VafVXMySgLqFqQZrHvlPZYowPVAH7K68T39LzS6q2kRQz3IJQcsw24SytPyYnuVrWenggqTnlIGd3KREphLIKz/cn6q5/4Tf1wiPe+D3o1lxu2o8TvSWxcAxoIB5pqxy0s3tbN407Q+vr8shFwQcr6D/oK9JH6AUaeOEeXOU7VZsOjEuzzkKyPp6HeYY75j+oe2y7f1xt0matkQcuk+plJmpBUG75nF1ThSk4sRXW5Ql/iNI02nmh+6FKJz/cA+icxXL6NleQD4+NRCt6EbZYDBn+qyxczz+7wdrKukUJe2kChaV/JvFUUUjUoc8H9SzC4w9q6k8sozO8ZeraMYqnvkQ5mmeJCJ40QOvqzkS5mgH+CFCcch5Pl7bGzXTWJgp2iRfc+H8Ht3X+z1SgOUhU77JDDoDAi+Q943LSoZLHC4byfLxcpsv0k1Pstras+zVdIgTTJe9jaZ/VAhcDmNJ9g5lxoHYIWxi8la9JuroiEQQ1OqAVxP71G+o7xPU4W5ZB1dZkjLkxSZCN+n3USkKOguXxZ9Y0GK3/9L1I1wvzdDTCPLUauTV0AolD7I8o809tJ99/qL0kkTBrO2et6UHlWhHCuMAmpYGjymYEEwdHIMsClGQpN/K/164/lhO5i6R/aFEY5Se1VMaVGC1Yi5Nl8eY6HL3t0idLfUEL9h/c6KMnWy4UyVl0794m55E19te6Cs6xCV1BfJQy8hOgDXd58sFe7sbhZTNwTNluWPk2osVSd1maCtyRNXyur8SQcEMrh/XMUTG4HlFIVMfg+/hXW7ds8K9svnQpZRIX0XADtpvg2JVqACyJjD1/s0BDfYig4Ve5TAHdInARxH80zERQaJqC6EY7pUtH+JC94hBaOtNM+hYdV125vMhNBxqyj0QkD7XgVyAYmH0n89y51ketDJfkNDHkBJVVgJVh+qnbvcYl3oQpOo0oZMBAjF9dPlnvHZbdlFqa61LLFDQ7sCzwbRcUjYs6Mg1Pag5px7QJnW8numRRbAPX445Qidd8ioO0wuHibUWZ7JJXIZWUVXy4zaXlIQNiDLM5eZ+Q/EQvrWJhtFAQ34dCEjv6uyCQ+QcYBSRRG8u0eBH0T2qEt2zHrINdWCXG5IwyfVj2vkKPFeFLFb7eRWKaUow2fxOqTtQ6SZGyQR4jYCdxRAIS77XVoZ63IaVDqLMASddPpTry6Lo9G0amdGewOADa755sWhp2f1dHBEPkXAuX9Pl49gpMtYv74kH2i0Oht4cnJyDytbdnZfGRo+oXSzTfw1rjqlCoyjFg6Pd8wwSAxJpAsGDPgwmyWMhUhPmfK3jxiJT7V6vpMpyop1M3RwsBPHPzCf84CHkJshTxbP+63jO2AWlucPTr31em60y64MB6+/P0AaetjzZio9j/C68UUxXlrxoOc34KL51GrEg+0HB0hSpvUGpVqABMEG72X9L9Ftf+AdAdB1ssjvxfVycpenEjgfzmbOQ8QGH3f+88/n7wfBTd/Ecc1x8DOKuexiK2EY3fIu+xkrg5oD1Cd/fdFo0DuGpNIUdyeyjSfSEYzcouAZZyf8AzN6ATrI99+cAAAAASUVORK5CYII="),
		radial-gradient(130% 60%,
			rgba(255, 255, 255, 0) 70%,
			rgba(0, 0, 0, 0.1) 100%),
		linear-gradient(270deg, var(--colorSpread));
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: 10% 10%, 200% 100%, 200% 100%;
	background-position: right, right, right;
}

div.single-page {
	filter: sepia(5%);
	-webkit-filter: sepia(5%);
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRF////////////////////////////////////////////////////////////////////////////////////NZumWwAAABV0Uk5TT1R3b0AqZkpzO1hians1f10wg0Ujj3EqfQAABp1JREFUeJwlVseS6zoOJZiTgt39/1/42lZmJge3RguVF5QMnCggBP5/VYG3YAulg3WgsK+bYHyI0wA/m4PSgGq6A4dZnJIC+74h1qR5WL6+NSbYpelmB3km9SfMOCzcS6yUJ7LCq8epfW1VLGqSylx5O1ayvy6ioz/1tSZ8bj4N1Zk0uCTeXl+Tp5Zosnn64DGjn/QTkxLRELbPt+kk2RjpWGsiKplL4GBf4IJX1mtwqgIj5VHVtcvTqEYAcwiWh2CkMZmabNGAfXxNPnBOC5H7VDUZ5O5k/fz86bDuMon6DqaxfnGa5z56gRf9vh7Gc+ms/Ixn2MEiKWk9KKO1aeA7gMpiqFiUjTzpGybI4GoVwWZCrnfu0RZxrcd8SncoFTgrgoRaNAxaOvG7B7HcoxIntiaLykTKnoBoEVinRcVkJGzUw7WSRxw/tUa/gzAX4Gb89mybW5jY2G1PowvSq4OnL+xro30aUzbXrFMH8DyU7sSj4TTxRf57H8Q9S76mXroAQSKnhB+yyMAIlJVeDbyqnbH+lQpIC57UZvb55H639HHt7syx73T+tAaAu5o2PPxuUPzzao3TP8uGKjxRdcf3jYPNLCRWLDGb46e4hQuC3ACct+r0dyKnhijkw4bQj3qAdBUt//v5CDF0PaX/mN7KQjLAb2UNl+nfMdfWbSOJ60oY2zt5B1IHc5l/VafVXMySgLqFqQZrHvlPZYowPVAH7K68T39LzS6q2kRQz3IJQcsw24SytPyYnuVrWenggqTnlIGd3KREphLIKz/cn6q5/4Tf1wiPe+D3o1lxu2o8TvSWxcAxoIB5pqxy0s3tbN407Q+vr8shFwQcr6D/oK9JH6AUaeOEeXOU7VZsOjEuzzkKyPp6HeYY75j+oe2y7f1xt0matkQcuk+plJmpBUG75nF1ThSk4sRXW5Ql/iNI02nmh+6FKJz/cA+icxXL6NleQD4+NRCt6EbZYDBn+qyxczz+7wdrKukUJe2kChaV/JvFUUUjUoc8H9SzC4w9q6k8sozO8ZeraMYqnvkQ5mmeJCJ40QOvqzkS5mgH+CFCcch5Pl7bGzXTWJgp2iRfc+H8Ht3X+z1SgOUhU77JDDoDAi+Q943LSoZLHC4byfLxcpsv0k1Pstras+zVdIgTTJe9jaZ/VAhcDmNJ9g5lxoHYIWxi8la9JuroiEQQ1OqAVxP71G+o7xPU4W5ZB1dZkjLkxSZCN+n3USkKOguXxZ9Y0GK3/9L1I1wvzdDTCPLUauTV0AolD7I8o809tJ99/qL0kkTBrO2et6UHlWhHCuMAmpYGjymYEEwdHIMsClGQpN/K/164/lhO5i6R/aFEY5Se1VMaVGC1Yi5Nl8eY6HL3t0idLfUEL9h/c6KMnWy4UyVl0794m55E19te6Cs6xCV1BfJQy8hOgDXd58sFe7sbhZTNwTNluWPk2osVSd1maCtyRNXyur8SQcEMrh/XMUTG4HlFIVMfg+/hXW7ds8K9svnQpZRIX0XADtpvg2JVqACyJjD1/s0BDfYig4Ve5TAHdInARxH80zERQaJqC6EY7pUtH+JC94hBaOtNM+hYdV125vMhNBxqyj0QkD7XgVyAYmH0n89y51ketDJfkNDHkBJVVgJVh+qnbvcYl3oQpOo0oZMBAjF9dPlnvHZbdlFqa61LLFDQ7sCzwbRcUjYs6Mg1Pag5px7QJnW8numRRbAPX445Qidd8ioO0wuHibUWZ7JJXIZWUVXy4zaXlIQNiDLM5eZ+Q/EQvrWJhtFAQ34dCEjv6uyCQ+QcYBSRRG8u0eBH0T2qEt2zHrINdWCXG5IwyfVj2vkKPFeFLFb7eRWKaUow2fxOqTtQ6SZGyQR4jYCdxRAIS77XVoZ63IaVDqLMASddPpTry6Lo9G0amdGewOADa755sWhp2f1dHBEPkXAuX9Pl49gpMtYv74kH2i0Oht4cnJyDytbdnZfGRo+oXSzTfw1rjqlCoyjFg6Pd8wwSAxJpAsGDPgwmyWMhUhPmfK3jxiJT7V6vpMpyop1M3RwsBPHPzCf84CHkJshTxbP+63jO2AWlucPTr31em60y64MB6+/P0AaetjzZio9j/C68UUxXlrxoOc34KL51GrEg+0HB0hSpvUGpVqABMEG72X9L9Ftf+AdAdB1ssjvxfVycpenEjgfzmbOQ8QGH3f+88/n7wfBTd/Ecc1x8DOKuexiK2EY3fIu+xkrg5oD1Cd/fdFo0DuGpNIUdyeyjSfSEYzcouAZZyf8AzN6ATrI99+cAAAAASUVORK5CYII="),
		radial-gradient(130% 60%,
			rgba(255, 255, 255, 0) 70%,
			rgba(0, 0, 0, 0.1) 100%),
		linear-gradient(90deg, var(--colorSpread));
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: 10% 10%, 200% 100%, 200% 100%;
	background-position: left, left, left;
}

/*
div.double-page,
div.two-pages{
	box-shadow: 0px 0px 15px 0px rgba(60, 40, 30, 0.3);
}

div.cover-page,
div.single-page {
	box-shadow: 0px 0px 15px 0px rgba(60, 40, 30, 0.8);
}
*/

#readerViewer,
#readerViewerWebtoon {
	position: absolute;

	transform: translate(-50%, -50%);

	box-sizing: content-box;

	margin: 0;
	padding: 0;
	display: flex;

	align-items: center;
	justify-content: center;

	height: calc(100dvh);

	background: none;
	gap: 0px;

}

#readerContainer.hidden #readerViewer {
	top: 200%;
	left: 50%;
	transition: top 0.3s ease;
}

#readerContainer.hidden #readerViewerWebtoon {
	top: 50%;
	left: 200%;
	transition: left 0.3s ease;
}

#readerContainer:not(.hidden) #readerViewer {
	top: 50%;
	left: 50%;
	transition: top 0.3s ease 0.5s, left 0.3s, border-width 0.3s ease, border-image-slice 0.3s ease;
}

#readerContainer:not(.hidden) #readerViewerWebtoon {
	top: 50%;
	left: 50%;
	transition: top 0.3s, left 0.3s ease 0.5s, border-width 0.3s ease, border-image-slice 0.3s ease;
}

#bottomControls,
#topControls,
#zoomControls {
	display: grid;
	align-items: center;
	justify-content: center;
	position: fixed;
	height: 60px;
	left: 0px;
	right: 0px;
	gap: 0px;
	background-color: var(--mb-card-color);
	/* rgba(250, 250, 250, 0.8);*/
	/*z-index: 1003;*/
	transition: opacity 0.3s, top 0.3s, bottom 0.3s;
	padding-left: calc(max(10px, var(--mb-button-safe-left)));
	padding-right: calc(max(10px, var(--mb-button-safe-right)));
	/*backdrop-filter: blur(15px);*/
}

#bottomControls {
	border-bottom: var(--mb-card-color) solid var(--mb-bottom-spacer);
	box-sizing: content-box;
}

#topControls {
	padding-top: calc(var(--mb-drag-bar-height) + var(--mb-top-spacer))
}

/*
#thumbStripScrollContent {
	overflow-x: auto !important;
	overflow-y: hidden !important;
}

#thumbStripScrollContentWT {
	overflow-x: hidden !important;
	overflow-y: auto !important;
}
*/

#thumbStrip,
#thumbStripWT {
	position: fixed;

	display: flex;
	justify-content: left;

	background-color: var(--mb-card-color);
	box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.15);
}

#thumbStrip {
	height: calc(var(--mb-thumb-size-px) + 30px);
	left: 0px;
	right: 0px;
	bottom: calc(60px + var(--mb-bottom-spacer));
	overflow-x: auto;
	overflow-y: hidden;
	transition: opacity 0.3s, top 0.3s, bottom 0.3s, height 0.3s;
}

#thumbStripWT {
	width: calc(var(--mb-thumb-size-px) + 30px);
	top: 60px;
	bottom: 60px;
	right: 0px;
	overflow-x: hidden;
	overflow-y: auto;
	transition: opacity 0.3s, top 0.3s, left 0.3s, right 0.3s, width 0.3s;
}


#thumbStripButton,
#thumbStripButtonWT {
	position: fixed;


	margin: auto;
	/* Center it horizontally */
	z-index: 10;
	text-align: center;
	cursor: pointer;

}

#thumbStripButton {
	height: 20px;
	width: 150px;
	left: 0;
	right: 0;
	bottom: calc(var(--mb-thumb-size-px) + 60px + 10px + var(--mb-bottom-spacer));
	transition: opacity 0.3s, top 0.3s, bottom 0.3s;
}

#thumbStripButtonWT {
	width: 20px;
	height: 65px;
	top: 60px;
	bottom: 60px;
	right: calc(var(--mb-thumb-size-px) + 10px);
	transition: opacity 0.3s, left 0.3s, right 0.3s, bottom 0.3s;
}

.thumb-arrow {
	font-size: 10px;
}

#thumbStripInner,
#thumbStripInnerWT {
	display: flex;
	padding: 0;
	margin: 0;
	/* Important! lets it grow as needed */

	/*flex-direction: row-reverse;*/
}

#thumbStripInner {
	flex-direction: row;
	height: calc(var(--mb-thumb-size-px) + 10px);
	margin-left: 50%;
	margin-right: 50%;
	width: max-content;
}

#thumbStripInnerWT {
	flex-direction: column;
	width: calc(var(--mb-thumb-size-px) + 10px);
	margin-top: calc(50vh - 60px);
	margin-bottom: calc(50vh - 60px);
	height: max-content;
}

.spread-thumb {
	position: relative;
	display: flex;
	padding: 0;
	margin: 0;

	margin: 5px;
	margin-left: 5px;
	margin-right: 5px;
	cursor: pointer;
	background: white;
	box-shadow: inset rgba(0, 0, 0, 0.1) 0px 0px 15px, rgba(0, 0, 0, 0.45) 0px 0px 8px;
	border-radius: 3px;
}

.spread-thumb:not(.webtoon) {
	top: 20px;
	height: var(--mb-thumb-size-px);
	transition: height 0.3s;
}

.spread-thumb.webtoon {
	left: 20px;
	width: var(--mb-thumb-size-px);
	transition: width 0.3s;
}

.spread-thumb.current {
	/*
	margin-left:10px;
	margin-right:10px;
	*/
	box-shadow: var(--mb-accent) 0px 0px 0px 3px, inset rgba(0, 0, 0, 0.1) 0px 0px 15px, rgba(0, 0, 0, 0.45) 0px 0px 8px;
}

.page-thumb {
	/*position:absolute;*/
	display: inline-block;
	/*object-fit: contain;*/
	transition: opacity 0.3s, height 0.3s, width 0.3s;
}

.page-thumb.hidden {
	opacity: 0;
}

.page-thumb:not(.hidden) {
	opacity: 1;
}

.spread-thumb:has(.page-thumb)::before {
	content: "";
	position: absolute;

	top: 50%;
	left: 50%;

	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);

	opacity: 0;

	border-radius: 50%;
	border-top-color: var(--mb-accent);
	background: conic-gradient(transparent 0deg, var(--mb-accent-a30) 180deg, var(--mb-accent) 300deg, transparent 360deg);
	mask-image: radial-gradient(circle, transparent 45%, white 45%, white 100%);
	-webkit-mask-image: radial-gradient(circle, transparent 45%, white 45%, white 100%);
	transition: opacity 0.5s;
}

.spread-thumb:not(.webtoon):has(.page-thumb)::before {
	height: 60%;
}

.spread-thumb.webtoon:has(.page-thumb)::before {
	width: 80%;
}


.spread-thumb:has(.page-thumb.loading)::before {
	opacity: 1;
	animation: loader_spin 1s linear infinite;
}

.spread-thumb:has(.page-thumb.loaded:nth-of-type(1)):not(:has(.page-thumb:nth-of-type(2)))::before,
.spread-thumb:has(.page-thumb.loaded:nth-of-type(1)):has(.page-thumb.loaded:nth-of-type(2))::before {
	opacity: 0;
	animation: loader_spin 1s linear 5;
}

.spread-thumb:has(.page-thumb.finished:nth-of-type(1)):not(:has(.page-thumb:nth-of-type(2)))::before,
.spread-thumb:has(.page-thumb.finished:nth-of-type(1)):has(.page-thumb.finished:nth-of-type(2))::before {
	opacity: 0;
	background: none;
	mask-image: none;
	-webkit-mask-image: none;

}

#bottomControls {
	grid-template-columns: var(--mb-pill-width) var(--mb-pill-width) 1fr var(--mb-pill-width) var(--mb-pill-width);
	bottom: 0px;
	box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.15);
}

#zoomControls {
	grid-template-columns: var(--mb-pill-width) 50px var(--mb-pill-width);
	box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.15);
	width: calc(var(--mb-pill-width) + 50px + var(--mb-pill-width));
	left: 20px;
	bottom: calc(80px + var(--mb-bottom-spacer));
	border-radius: var(--mb-dialog-box-radius);
	padding-left: 10px;
	padding-right: 10px;
}

#scaleVal {
	width: 50px;
	font-size: 20px;
}

#topControls {
	grid-template-columns: var(--mb-pill-width) 1fr var(--mb-pill-width) var(--mb-pill-width) var(--mb-pill-width);
	top: 0px;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}

#controlPanel {
	transition: opacity 0.3s;
}

#controlPanel.hidden {
	pointer-events: none;
}

#controlPanel.hidden #topControls,
#readerContainer.hidden #topControls {
	top: calc(-100px - var(--mb-top-spacer));
}

#controlPanel.hidden #bottomControls,
#readerContainer.hidden #bottomControls,
#controlPanel.hidden #zoomControls,
#readerContainer.hidden #zoomControls {
	bottom: -100px !important; /*TODO Added !important to fix dependance from webtoon vs book, maybe can be avoided*/
}

#controlPanel.hidden #thumbStrip,
#readerContainer.hidden #thumbStrip {
	bottom: -600px;
}

#controlPanel.hidden #thumbStripWT,
#readerContainer.hidden #thumbStripWT {
	right: -600px;
}

#controlPanel.hidden #thumbStripButton,
#readerContainer.hidden #thumbStripButton {
	bottom: calc(var(--mb-thumb-size-px) - 600px + 50px - 20px);
}

#controlPanel.hidden #thumbStripButtonWT,
#readerContainer.hidden #thumbStripButtonWT {
	right: calc(var(--mb-thumb-size-px) - 600px + 50px - 20px);
}

#nextBookPanel.blankstart,
#prevBookPanel.blankstart,
#incognitoMark.blankstart {
	opacity: 0;
	transition: opacity 0.01s ease;
}

#nextBookPanel,
#prevBookPanel {
	position: absolute;
	left: 50%;
	top: 100px;
	transform: translate(-50%, 0);
	transition: opacity 0.5s ease;
	z-index: 15;
}

#controlPanel.hidden #nextBookPanel,
#readerContainer.hidden #nextBookPanel,
#readerOverlay.hidden #nextBookPanel,
#controlPanel.hidden #prevBookPanel,
#readerContainer.hidden #prevBookPanel,
#readerOverlay.hidden #prevBookPanel {
	opacity: 0;
	pointer-events: none;
}

#nextBookButton,
#prevBookButton {
	margin-top: 0px;
}

#nextBookPanel.hidden,
#prevBookPanel.hidden {
	opacity: 0;
	pointer-events: none;
}

#nextBookPanel.hidden #nextBookButton,
#prevBookPanel.hidden #prevBookButton{
	pointer-events: none;
}

#bookName {
	text-align: center;
	font-size: 20px;
	margin-left: 10px;
	margin-right: 10px;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

#readerProgressBar {
	flex-grow: 1;
	height: 10px;
	background: var(--mb-bar-color);
	position: relative;
	cursor: pointer;
	border-radius: 5px;
	box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.15);
	margin-left: 10px;
	margin-right: 10px;
}

#readerProgress {
	height: 100%;
	background: var(--mb-accent);
	width: 0;
	transition: all 0.05s;
	border-radius: 5px;
}

#readerPage {
  
	width: fit-content;
	min-width: 30px;
	height: 30px;
	padding: 0px 10px;
	margin: 0px;
	position: absolute;
	line-height: 30px;
	border-radius: 15px;
	color: white;
	left: -20px;
	top: -10px;
	background: var(--mb-accent);
	transition: left 0.05s, width 0.3s ease;
	text-align: center;
	white-space: nowrap;
	/*TODO RIVEDERE box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 6px;*/
}


.reader-buttons {
	-webkit-app-region: no-drag;

	width: var(--mb-dialog-button-height);
	height: var(--mb-dialog-button-height);
	padding: 0px;
	margin: 0px;
	font-size: 25px;
	line-height: var(--mb-dialog-button-height);
	background-color: var(--mb-accent);
	color: white;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s;
	text-align: center;
	vertical-align: middle;
}


.bar-note {
	width: var(--mb-dialog-button-height);
	height: var(--mb-dialog-button-height);
	padding: 0px;
	margin: 0px;
	text-align: center;
	line-height: var(--mb-dialog-button-height);
	background-color: var(--mb-bar-color);
	cursor: pointer;
}

.corner-circle {
	border-radius: var(--mb-dialog-button-radius);
}

.corner-right {
	border-radius: 0 var(--mb-dialog-button-radius) var(--mb-dialog-button-radius) 0;
	width: calc(var(--mb-pill-width) - var(--mb-pill-pad));
	padding-right: var(--mb-pill-pad);
	transform-origin: center left;

}

.corner-left {
	border-radius: var(--mb-dialog-button-radius) 0 0 var(--mb-dialog-button-radius);
	width: calc(var(--mb-pill-width) - var(--mb-pill-pad));
	padding-left: var(--mb-pill-pad);
	transform-origin: center right;

}


.reader-buttons.incognito {
	/*
	background-color: rgb(210, 168, 214);
	color: rgb(103, 24, 112);
	*/
	color: rgb(210, 168, 214);
	background-color: rgb(103, 24, 112);
	transition: all 0.3s;
}

.hidden-spread {
	opacity: 0;
	transition: opacity 0.2s ease;
	/*z-index: 10!important;*/
	/*transition: opacity 0.2s ease 2.5s;*/
	/* 0.5s delay before opacity transition */
	/*display: none;*/
}

.preloadedObj {
	opacity: 0;
}

/*//TODO Maybe this is not needed, it was not used before*/
/*
#readerOverlay {
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom:0px;
}
*/

#touchPanel {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	display: grid;
	/*box-shadow: inset green 0px 0px 15px;*/
	grid-template-columns: 1fr 1.5fr 1fr;
	/*z-index: 1002;*/
	z-index:1003;
	box-sizing: border-box;
	border-bottom: 5px solid transparent;

	transition: border 0.3s;
}

#touchPanel.hidden{
	pointer-events: none;
}

#touchPanel.shrink {
	top: calc(60px + var(--mb-top-spacer));
	bottom: calc(60px + var(--mb-bottom-spacer) + var(--mb-thumb-size-px) + 30px);
}

/*
#touchPanelWebtoon {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	display: grid;
	width: 100vw;
	height: 100vh;

	grid-template-rows: 1fr 1.5fr 1fr;

	box-sizing: border-box;
	border-bottom: 5px solid transparent;

	transition: border 0.3s;

	border:5px fuchsia solid;
}
*/
#incognitoMark {
	content: "";
	position: fixed;
	right: 0px;
	top: 0px;
	width: 0px;
	height: 0px;
	border-top: 20px solid rgba(196, 48, 212, 0.74);
	border-right: 20px solid rgba(196, 48, 212, 0.74);
	border-left: 20px solid transparent;
	border-bottom: 20px solid transparent;
	/*z-index:1003;*/
	filter: drop-shadow(-2px -2px 6px rgba(0, 0, 0, 0.6));
	/* Adds shadow to the triangle */
	opacity: 1;
	pointer-events: none;
	transition: opacity 0.3s;
}

#incognitoMark.hidden {
	opacity: 0;
}

#incognitoMark:not(.incognito) {
	opacity: 0;
}

/*
#touchPanel.incognito::after{
	opacity:1;
}
*/
#toLeftPage {
	background-color: rgba(200, 0, 0, 0.0);
}

#toRightPage {
	background-color: rgba(0, 200, 0, 0.0);
}

#openMenu {
	background-color: rgba(0, 0, 200, 0.0);
}