/* POSSIBLE BREAKING POINTS:
	L: 1200px;
	M:  960px;
	S:  600px;
	XS: 350px;
*/


@font-face {
	font-family: "lexend_deca";
	src: url('https://static.fansubs.cat/fonts/lexend_deca_regular.ttf');
}

@font-face {
	font-family: "lexend_deca_bold";
	src: url('https://static.fansubs.cat/fonts/lexend_deca_bold.ttf');
}

@font-face {
	font-family: "lexend_deca_light";
	src: url('https://static.fansubs.cat/fonts/lexend_deca_light.ttf');
}

@font-face {
	font-family: "lexend_deca_numbers";
	src: url('https://static.fansubs.cat/fonts/lexend_deca_numbers.ttf');
}

@font-face {
	font-family: "fansubscat_icons";
	src: url('https://static.fansubs.cat/fonts/fansubscat_icons.ttf');
}

a {
	color: rgb(var(--positive-color));
	cursor: pointer;
	text-decoration: none;
}

b {
	font-family: "lexend_deca_bold";
}

/* Custom icons */
[class^="fsc-"]:before, [class*=" fsc-"]:before {
	font-family: "fansubscat_icons";
	font-style: normal;
	font-weight: normal;
	speak: never;

	display: inline-block;
	text-decoration: inherit;
	width: 1.25em;
	text-align: center;

	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;

	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;

	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fsc-catalogue:before {
	content: '\e800';
}
.fsc-news:before {
	content: '\e801';
}
.fsc-hentai:before {
	content: '\e802';
}
.fsc-play-speed-ultraslow:before {
	content: '\e803';
}
.fsc-play-speed-slow:before {
	content: '\e804';
}
.fsc-play-speed-normal:before {
	content: '\e805';
}
.fsc-play-speed-fast:before {
	content: '\e806';
}
.fsc-play-speed-ultrafast:before {
	content: '\e807';
}

:root {
	--header-height: 4.2rem;
	--header-height-local: 4.2rem;
	--page-padding: 3.6rem;
	--search-layout-width: 28rem;
	--ultrafast-animation-duration: .2s;
	--fast-animation-duration: .3s;
	--slow-animation-duration: .6s;
	--is-hovering-device: 0;
	--always-positive-color: 255, 255, 255;
	--always-negative-color: 0, 0, 0;
	--always-primary-color: 106, 160, 248;
	--always-primary-color-hover: 76, 130, 218;
	--primary-color: 106, 160, 248;
	--primary-color-hover: 76, 130, 218;
	--secondary-color: 249, 192, 43;
	--secondary-color-hover: 219, 162, 13;
	--neutral-color: 136, 136, 136;
	--error-color: 255, 68, 68;
	--brightness-hover: 1.1;
	--carousel-element-width: 21.2rem;
	--carousel-element-height: 33.5rem;
	--thumbnail-margin: 0.5rem;
	--thumbnail-text-height: 3.5rem;
	--thumbnail-transition-delay: 0.5s;
	--carousel-scaling: 1.25;
	--background-image: url('../images/site/background_dark_uhd.jpg');
	--background-image-opacity: 0.5;
	--divider-border-height: 0.4rem;
	--completed-color: 25, 152, 0;
	--semicompleted-color: 60, 142, 177;
	--in-progress-color: 209, 173, 0;
	--abandoned-color: 179, 110, 7;
	--cancelled-color: 187, 19, 4;
}

.theme-dark {
	/* Generic white color */
	--positive-color: 255, 255, 255;
	/* Same but on hover: a little less bright, -40/+60 */
	--positive-color-button-hover: 215, 215, 215;
	/* Generic black color */
	--negative-color: 0, 0, 0;
	/* Same but on hover: a little more bright, +60/-40 */
	--negative-color-button-hover: 60, 60, 60;
	/* Darker version, +70/-50 */
	--negative-color-button-hover-darker: 70, 70, 70;
	/* Used in footer links, a bit darker so when hovered they can change to neutral, -30/+30 */
	--neutral-color-links: 106, 106, 106;
	/* Generic background for all pages WITHOUT background images, +20,-20 */
	--background-color-standard: 20, 20, 20;
	/* Background color for side filter panel, +50/-40 */
	--background-color-side-panel: 50, 50, 50;
	/* User dropdown menu background color when hovering, +40/-20 */
	--menu-background-color-hover: 40, 40, 40;
	/* Card background color */
	--card-background-color: 30, 30, 30;
	/* Card background color alternate */
	--card-background-color-alternate: 30, 35, 40;
	/* Color for header icons */
	--icon-button-color: 255, 255, 255;
	/* Same but on hover: a little less bright, -40/+80 */
	--icon-button-color-hover: 215, 215, 215;
	/* Drop shadow transparency for cards/thumbnails */
	--drop-shadow-transparency-card: 0.4;
	/* Drop shadow transparency for menus or popups that appear above the content */
	--drop-shadow-transparency-menu: 0.5;
	/* Comment reply background color */
	--comment-reply-background-color: 45, 45, 45;
}

.theme-light {
	--positive-color: 0, 0, 0;
	--positive-color-button-hover: 60, 60, 60;
	--negative-color: 255, 255, 255;
	--negative-color-button-hover: 215, 215, 215;
	--negative-color-button-hover-darker: 205, 205, 205;
	--neutral-color-links: 166, 166, 166;
	--background-color-standard: 235, 235, 235;
	--background-color-side-panel: 215, 215, 215;
	--menu-background-color-hover: 235, 235, 235;
	--card-background-color: 225, 225, 225;
	--card-background-color-alternate: 255, 250, 245;
	--icon-button-color: 0, 0, 0;
	--icon-button-color-hover: 80, 80, 80;
	--drop-shadow-transparency-card: 0.2;
	--drop-shadow-transparency-menu: 0.5;
	--comment-reply-background-color: 240, 240, 240;
	--background-image: url('../images/site/background_light_uhd.jpg');
	--background-image-opacity: 0.6;
}

.fansubscat-header *, .fansubscat-header *:before, .fansubscat-header *:after, .fansubscat-footer *, .fansubscat-footer *:before, .fansubscat-footer *:after {
	box-sizing: inherit;
}

.fansubscat-header a, .fansubscat-footer a {
	color: rgb(var(--positive-color));
	cursor: pointer;
}

/* Hide dots in Firefox... screws accessibility though */
:focus {
	outline:none;
}
::-moz-focus-inner {
	border:0;
}

::-webkit-scrollbar {
	background: transparent;
	width: 0.7rem;
}
::-webkit-scrollbar-thumb {
	background: rgb(var(--neutral-color));
	border-radius: 99rem;
}

html {
	font-family: "lexend_deca", sans-serif;
	font-size: 62.5%;
	color: rgb(var(--positive-color));
	background-color: rgb(var(--negative-color));
	scrollbar-gutter: stable;
	min-width: 280px;
	overflow-y: scroll;
}

body {
	margin: 0 auto;
	padding: 0;
	font-size: 1.2rem;
	line-height: 1.2;
	text-align: left;
	background: rgb(var(--background-color-standard));
	overflow: hidden;
}

.fansubscat-header .hidden {
	display: none !important;
	opacity: 0;
}

.centered {
	text-align: center !important;
}

.post-header {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.post-subheader {
	font-family: "lexend_deca_bold", sans-serif;
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.notransition * {
	transition: none !important;
}

/* Forum */
.fansubscat-header {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--page-padding);
	padding-bottom: 0;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	color: rgb(var(--positive-color));
	font-family: "lexend_deca", sans-serif;
}

#wrap {
	padding: 0 var(--page-padding);
	padding-top: calc(var(--page-padding) / 1.5);
}

.navbar {
	padding: 0;
	background: none;
	border-color: transparent;
	box-shadow: none;
}

.forabg, .forumbg, .post {
	border-radius: 1.5rem;
	border: none;
	padding: calc(var(--page-padding) / 2);
}

#viewprofile .column1, #viewprofile .column2, .flair-container, #viewprofile .signature {
	background-color: rgb(var(--card-background-color));
	border-radius: 1.5rem;
	border: none;
	padding: calc(var(--page-padding) / 6) calc(var(--page-padding) / 2);
	box-sizing: border-box;
	overflow: hidden;
}

.signature {
	max-height: 250px;
	overflow: auto;
}

.signature img {
	max-height: 240px;
	overflow: auto;
	object-fit: contain;
}

.forumbg, .post {
	margin: 2rem 0;
}

.forabg ul.topiclist li.header a, .forumbg ul.topiclist li.header a, .forabg ul.topiclist li.header .list-inner, .forumbg ul.topiclist li.header .list-inner {
	font-size: 2rem;
	padding-left: 0;
}

.forabg ul.topiclist .list-inner, .forumbg ul.topiclist .list-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.list-inner-container {
	flex-grow: 1;
}

.forum-image {
	display: flex !important;
	padding-top: 0;
	margin-right: 1.5rem;
}

.forum-image img {
	border-radius: 0.8rem;
	width: 56px;
	height: 56px;
}

li.header dl.row-item dt .list-inner {
	padding-left: 0;
}

.forabg ul.topiclist li.header, .forumbg ul.topiclist li.header {
	padding: 0;
	margin: 0;
	margin-bottom: 1.2rem;
	background: none;
}

.bg1 {
	background-color: rgb(var(--card-background-color-alternate));
}

.bg2 {
	background-color: rgb(var(--card-background-color));
}

blockquote {
	background-color: rgba(var(--primary-color), 0.1);
	border-left-color: rgb(var(--primary-color));
}

.panel-container .panel, .panel {
	background: none;
	border: none;
	box-shadow: none;
}

.panel {
	padding: 0;
}

.panel-container .panel, #options-panel, #poll-panel {
	padding: 4px 9px
}

dl.row-item dt .list-inner {
	padding-left: 60px;
}

.navbar ul.linklist {
	padding: 0;
}

.notification-icon-option.non-zero strong, .notification-ball strong {
	background: rgb(var(--secondary-color));
	border-radius: 50%;
	width: 1.8rem;
	height: 1.8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.notification-ball {
	width: 1.8rem;
	height: 1.8rem;
	position: absolute;
	bottom: -0.5rem;
	right: -0.3rem;
	pointer-events: none;
}

.notification-icon-option strong .counter, .notification-ball strong .counter {
	display: none;
	color: rgb(var(--always-negative-color));
	font-weight: bold;
	line-height: 1;
	font-size: 1.2rem;
	align-items: center;
	justify-content: center;
}

.notification-icon-option.non-zero strong .counter, .notification-ball strong .counter {
	display: inline-flex;
}

.page-body .navbar {
	margin-bottom: 1.5rem;
}

dl.row-item {
	display: flex;
	align-items: center;
}

dd.lastpost, dd.redirect, dd.moderation, dd.time, dd.info {
	font-size: 1.4rem;
}

ul.linklist > li.breadcrumbs {
	font-size: 2rem;
	line-height: 1.2;
}

li.header dt .list-inner {
	text-indent: 0;
}

h2.solo, h2.memberlist-title, h2.ucp-title {
	display: none;
}

.simple h2.solo {
	display: block;
}

.breadcrumbs .crumb {
	padding-left: 20px;
}

.breadcrumbs .crumb:before {
	font-size: 12px;
	width: 16px;
}

#mchat-status {
	font-size: 1.4rem;
}

.mchat-status-error {
	background: #aa0000;
	font-size: 1.4rem;
	border-radius: 0.5rem;
	padding: 0 1rem;
	color: var(--always-positive-color);
}

.forabg + .forabg {
	margin-top: 1.5rem;
}

a.forumtitle, a.topictitle {
	font-size: 1.8rem;
}

.forum-description {
	font-size: 1.4rem;
	color: rgba(var(--positive-color), 0.8);
}

.topic-poster {
	font-size: 1.4rem;
	color: rgba(var(--positive-color), 0.8);
	float: none;
	margin-top: 0.2rem;
}

.button span + .icon {
	float: left;
	padding-right: 0.5rem;
	padding-top: 0.2rem;
}

.caret {
	border-left: none;
}

li.row {
	border-bottom: none;
}

.post-buttons .button, .format-buttons .button, .mchat-button-bbcodes, .mchat-button-add, .mchat-panel-buttons #smiley-toggle, .mchat-button-userlist {
	padding: 0.6rem 0.75rem !important;
}

#mchat-bbcodes .format-buttons {
	justify-content: center;
}

.postimage.coverimage {
	max-width: 300px !important;
	max-height: 450px !important;
	border-radius: 1rem;
}

.avatar {
	border-radius: 99rem;
}

.postprofile {
	text-align: center;
	padding: 0 2rem;
}

.postprofile dd.profile-rank {
	font-size: 1.4rem;
}

.postprofile > dt > a {
	font-size: 1.6rem;
}

.postprofile + .postbody > div {
	padding-left: 2rem;
}

.dropdown .dropdown-contents {
	border-radius: 1rem;
	border-width: 2px;
}

.icon.icon-red, a:hover .icon.icon-red {
	color: rgb(var(--secondary-color));
}

span.username-coloured {
	margin-left: 0;
}

.notification_list li.bg3 p.notification-time, .notification_list li.bg3 p.notifications_time {
	color: rgb(var(--positive-color));
}

.notification_list li.bg3 a {
	color: rgb(var(--positive-color));
}

.notification_list li.bg3 a:hover {
	color: #d0d0d0;
}

#pmheader-postingbox .recipients {
	padding-top: 0.5rem;
}

.format-buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
}

.format-buttons > button, .format-buttons select {
	margin: 0.2rem;
}

.panel-container .panel p, .panel p {
	font-size: 1.4rem;
}

div#message p {
	font-size: 1.6rem;
}

.simple .panel {
	padding: 0;
}

.simple fieldset.fields1 dt {
	width: 10em;
}

.simple fieldset.fields1 dd {
	margin-left: 10em;
}

div#message {
	text-align: center;
}

.tribute-container li {
	padding: 0.2rem 1rem;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.tribute-container li .smiley {
	width: 32px;
	height: 32px;
	margin-right: 0.5rem;
	object-fit: contain;
}

.tribute-container li .avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	margin-right: 0.5rem;
}

.smiley-box {
	max-height: 200px;
	overflow-y: scroll;
}

.mchat-message-header {
	font-size: 1.4rem;
}

.mchat-avatar {
	width: 42px;
	margin-right: 0.5rem;
	cursor: pointer;
}
	
#mchat-whois #mchat-userlist {
	font-size: 1.4rem;
}
	
#mchat-whois #mchat-userlist ul {
	list-style: none;
}

#mchat-whois .user-row {
	cursor: pointer;
}

.chat-inactive {
	border-radius: 50%;
	width: 1rem;
	height: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.5rem;
}

.chat-disconnect {
	opacity: 0.5;
}

.chat-inactive-green {
	background: #66CC66;
}

.chat-inactive-yellow {
	background: #CCCC66;
}

.chat-inactive-red {
	background: #CC6666;
}

#mchat-body blockquote, #mchat-body blockquote cite {
	font-size: 1.4rem;
}

.mchat-text {
	padding: 0.5rem 0 0;
	font-size: 1.4rem;
}

.mchat-topic {
	text-align: center;
	font-size: 1.6rem;
	padding: 0.5rem;
	font-weight: bold;
}

.mchat-text .responsive-hide {
	display: none;
}

#mchat-smilies {
	max-height: 120px;
	overflow-y: scroll;
}

#mchat-whois {
	width: 192px;
	min-width: 192px;
}

.settings-section-data {
	margin-top: 2rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.settings-section-data + .settings-section-data {
	border-top: 0.1rem solid rgb(var(--primary-color));
	padding-top: 2rem;
}

.settings-section-data-header {
	font-size: 1.7rem;
	flex-grow: 1;
	flex-shrink: 1;
	padding-right: 1rem;
}

.settings-section-data-header-title {
	font-family: "lexend_deca_bold", sans-serif;
}

.settings-section-data-header-subtitle {
	font-size: 1.4rem;
	margin-top: 0.5rem;
}

.settings-section-data-switch {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
}

.settings-section-data-switch .settings-combo {
	width: auto;
}

.tribute-container li .empty {
	padding: 0.5rem 0;
}

.spoiler-header {
	background-color: transparent;
	color: rgb(var(--positive-color));
}

.spoiler-title {
	font-weight: bold;
}

details.spoiler, .spoiler-header {
	border-color: rgb(var(--positive-color));
	background-color: transparent;
}

dl.details dd, .notification_list li.bg3 strong {
	color: rgb(var(--positive-color));
}

.flair-tooltip {
	width: 400px;
	background: rgb(var(--negative-color));
	padding: 1.5rem;
	position: absolute;
	z-index: 1000;
	border-radius: 1rem;
	box-shadow: 0 0 2px rgb(var(--always-negative-color));
}

.flair-tooltip img {
	width: 66px;
	height: 66px;
	float: left;
	margin-right: 1.5rem;
}

html.chat-page body {
	display: flex;
	flex-direction: column;
}

html.chat-page #wrap {
	flex-grow: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
}

html.chat-page #page-body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

html.chat-page .forabg {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	padding: 0;
}

html.chat-page .forabg .inner {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

html.chat-page #mchat-body {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

html.chat-page #mchat-main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

html.chat-page #mchat-messages {
	flex-grow: 1;
	padding: 1.5rem;
}

html.chat-page .mchat-external-wrapper {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
}

.profile-personal_message {
	font-size: 1.2rem !important;
	background: rgba(var(--primary-color), 0.2);
	border: 1px solid rgb(var(--primary-color));
	border-radius: 0.5rem;
	color: rgb(var(--positive-color)) !important;
	margin-bottom: 10px;
}
	
#mchat-whois .show-users {
	display: none;
}

html.chat-page #mchat-whois h3 {
	margin-top: 0;
}

.fansubscat-footer {
	padding: 0;
	padding-bottom: var(--page-padding);
	font-family: "lexend_deca", sans-serif;
}

.fansubscat-header .header {
	flex-grow: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: calc(100% + var(--page-padding) + var(--page-padding));
	padding-bottom: var(--page-padding);
	margin-left: calc(-1 * var(--page-padding));
	margin-right: calc(-1 * var(--page-padding));
	padding-left: var(--page-padding);
	padding-right: var(--page-padding);
	border-bottom: var(--divider-border-height) solid rgb(var(--primary-color));
}

.catalogues-navigation {
	height: var(--header-height);
	margin-left: 2.5rem;
	font-size: 2rem;
	text-transform: uppercase;
	align-self: end;
	display: flex;
	align-items: center;
	font-family: "lexend_deca_light", sans-serif;
	letter-spacing: -0.1rem;
	order: 20;
}

.catalogues-navigation a {
	display: block;
	white-space: nowrap;
}

.catalogues-explicit-category {
	font-size: 2.2rem;
	margin-left: 1rem;
}

.catalogue-selected-processed {
	/* -webkit-text-stroke: 0.03rem rgb(var(--positive-color)); */
	font-family: "lexend_deca", sans-serif;
	text-decoration: none !important;
}

.catalogue-selected {
	/* -webkit-text-stroke: 0.03rem rgb(var(--positive-color)); */
	font-family: "lexend_deca", sans-serif;
	text-decoration: underline rgb(var(--primary-color)) 0.3rem;
	text-underline-offset: 0.4rem;
}

.catalogues-separator {
	margin-left: 1.2rem;
	margin-right: 1.2rem;
	display: inline-block;
	margin-top: -0.2rem;
	pointer-events: none;
}

.catalogues-underline {
	position: absolute;
	border-bottom: 0.3rem solid rgb(var(--primary-color));
	z-index: 1;
	transition: left var(--fast-animation-duration) ease-in-out, top var(--fast-animation-duration) ease-in-out, width var(--fast-animation-duration) ease-in-out, height var(--fast-animation-duration) ease-in-out;
	pointer-events: none;
}

.catalogues-underline-noanim {
	transition: none !important; /* Disable all animations */
}

.footer {
	flex-grow: 0;
	margin-top: 2.5rem;
	text-align: center;
}

.obscured-background {
	background: linear-gradient(to bottom, transparent 0%, rgba(var(--primary-color),0.35) 25% 75%, transparent 100%);
	backdrop-filter: grayscale(1);
	background-attachment: fixed;
}

.overlay-page {
	justify-content: center;
}

.social-link {
	font-size: 3.6rem;
	text-align: left;
	transition: color var(--fast-animation-duration);
	margin-right: 2.2rem;
}

.fansubscat-header .separator {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: var(--header-height);
	justify-content: end;
	order: 30;
}

.user-options {
	flex-grow: 0;
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	height: var(--header-height);
	justify-content: center;
	order: 50;
}

.user-login {
	text-align: center;
	font-weight: normal;
	display: inline-block;
	background: rgb(var(--primary-color));
	color: rgb(var(--always-positive-color)) !important;
	padding: 0.75rem 2.25rem;
	margin: 0 0.4rem;
	min-width: 6rem;
	font-size: 1.5rem;
	border-radius: 0.4rem;
	order: 40;
}

.user-avatar {
	display: block;
	border-radius: 99rem;
	width: 5rem;
	height: 5rem;
	border: 0.2rem solid rgb(var(--primary-color));
	cursor: pointer;
}

.anon-avatar {
	display: flex;
	width: 5rem;
	height: 5rem;
	font-size: 2.5rem;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	color: rgb(var(--icon-button-color));
	border-radius: 99rem;
}

.dropdown-menu {
	float: right;
	position: relative;
	display: block;
	user-select: none;
}

.anon-options {
	margin-right: 1.5rem;
	font-size: 2.4rem;
	color: rgb(var(--positive-color));
}

.dropdown-button {
	cursor: pointer;
}

.dropdown-button .avatar {
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.dropdown-button i {
	pointer-events: none;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: rgb(var(--negative-color));
	min-width: 18rem;
	overflow: auto;
	filter: drop-shadow(0em 0.5rem 0.65rem rgba(var(--always-negative-color),var(--drop-shadow-transparency-menu)));
	right: 0;
	z-index: 999;
	border-radius: 0.6rem;
	margin-top: 0.6rem;
}

.dropdown-title {
	font-family: "lexend_deca_bold", sans-serif;
	color: rgb(var(--positive-color));
	padding: 0.8rem 2.5rem;
	text-decoration: none;
	display: block;
	text-align: center;
	font-size: 1.7rem;
	white-space: nowrap;
}

.dropdown-separator, .dropdown-separator-secondary {
	border: 0.1rem solid rgb(var(--primary-color));
	margin: 0 0;
}

.dropdown-content a {
	color: rgb(var(--positive-color));
	padding: 1.5rem 2.2rem;
	text-decoration: none;
	display: block;
	text-align: left;
	font-size: 1.5rem;
	font-weight: normal;
	white-space: nowrap;
}

.dropdown-show {
	display: block;
}

.main-section {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.contact-button {
	display: inline-block;
	background: rgb(var(--negative-color));
	color: rgb(var(--positive-color));
	padding: 0.7rem 2rem;
	margin: 0em 0.3rem;
	margin-bottom: 1.3rem;
	min-width: 10rem;
	font-size: 1.3rem;
	border-radius: 0.6rem;
	border: 0.1rem solid rgb(var(--negative-color));
	transition: border var(--fast-animation-duration), background var(--fast-animation-duration);
	text-align: center;
}

.footer-text {
	color: rgb(var(--neutral-color));
}

.footer-text a {
	color: rgb(var(--neutral-color-links));
}

.main-logo {
	width: 36rem;
	height: 10rem;
	max-width: 100%;
	object-fit: contain;
	user-select: none;
}

.logo-layer {
	position: absolute;
	pointer-events: none;
	left: -6rem;
	top: -6rem;
	width: 48rem;
	height: 22rem;
}

svg.main-logo g {
	fill: rgb(var(--positive-color)) !important;
}

svg.main-logo path#line_1, svg.main-logo path#line_2 {
	transition: d var(--fast-animation-duration);
}

svg.main-logo path#line_1, svg.main-logo path#line_2, svg.main-logo path#line_3, svg.main-logo path#line_4 {
	fill: rgb(var(--primary-color));
	stroke: rgb(var(--primary-color));
}

svg.main-logo.keep-hover path#line_3 {
	visibility: visible;
}

svg.main-logo.keep-hover path#line_1 {
	d: path("M26 145.763v-1h477v1z");
}

svg.main-logo.keep-hover path#line_2 {
	d: path("M133 178.763v-1h348v1z");
}

label {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}

input:not([type='range']), select, textarea {
	padding: 0.7rem;
	border-radius: 0.6rem;
	border: none;
}

input:not([type='range']):not([type='submit']):not([type='button']):not([type='reset']), select, textarea {
	background: rgb(var(--always-positive-color));
	color: rgb(var(--always-negative-color));
	border: 1px solid rgb(var(--always-negative-color));
}

input:not([type='range']):not([type='submit']):not([type='reset']):not([type='button']):hover, select:hover, textarea:hover, input:not([type='range']):not([type='submit']):not([type='reset']):not([type='button']):focus, select:focus, textarea:focus {
	background: rgb(var(--always-positive-color));
	color: rgb(var(--always-negative-color));
	border: 1px solid rgb(var(--always-negative-color));
}

input[type=color] {
	border: none;
	padding: 0;
	border-radius: 2rem;
	overflow: hidden;
	cursor: pointer;
	background: transparent !important;
	border: 1px solid rgb(var(--positive-color)) !important;
}

input[type=color]::-webkit-color-swatch {
	border: none;
	border-radius: 2rem;
	padding: 0;
}

input[type=color]::-webkit-color-swatch-wrapper {
	border: none;
	border-radius: 2rem;
	padding: 0;
}

input[type=color]:hover, input[type=color]:focus {
	border: 1px solid rgb(var(--positive-color)) !important;
}

.chat-choose-color-wrapper div {
	margin-bottom: 0.5rem;
}

.chat-choose-color-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.chat-choose-color-wrapper .dark {
	padding: 0 0.3rem;
	border-radius: 0.5rem;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	background: rgb(var(--always-negative-color));
	color: rgb(var(--always-positive-color));
}

.chat-choose-color-wrapper .light {
	padding: 0 0.3rem;
	border-radius: 0.5rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	background: rgb(var(--always-positive-color));
	color: rgb(var(--always-negative-color));
	border: 1px solid rgb(var(--neutral-color));
}

a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
	border: none;
}

.panel > .inner > h3:first-child, .panel > h3:first-child {
	font-size: 1.8rem;
}

*:not(.ucp-main) > #postform > .panel:first-of-type, *:not(.cp-main) > #postingbox {
	padding: 0;
}

fieldset.fields1 div {
	margin-bottom: 0;
}

.message-box {
	width: 100%;
	box-sizing: border-box;
}

.cp-menu {
	margin: 0;
}

fieldset.submit-buttons {
	margin: 0;
}

.cp-mini {
	background: rgb(var(--negative-color));
}

#mchat-panel {
	background: none;
}

.top {
	top: 0;
}

.topicreview {
	padding-right: 0;
	height: auto;
	max-height: 300px;
}

.review .right-box {
	font-size: 1.6rem;
}

.smiley-box {
	width: auto;
	float: none;
}

.bg3.panel {
	background-color: rgb(var(--card-background-color));
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
}

.bg3.panel:before, .bg3.panel:after {
	background: none;
}

#navigation a {
	background: rgb(var(--background-color-side-panel));
	color: rgb(var(--positive-color));
}

#navigation a:hover {
	background: rgb(var(--negative-color-button-hover-darker));
	color: rgb(var(--positive-color));
}

#navigation #active-subsection a {
	background: rgb(var(--negative-color-button-hover));
	color: rgb(var(--positive-color));
}

#navigation #active-subsection a:hover {
	background: rgb(var(--negative-color-button-hover-darker));
	color: rgb(var(--positive-color));
}

.submit-buttons input[name="preview"], .submit-buttons input[name="save"], .submit-buttons input[name="load"], input[type="reset"] {
	opacity: 0.8;
}

#subject {
	font-size: 1.6rem;
	box-sizing: border-box;
	width: 100% !important;
	margin-bottom: 1.5rem;
}

.error {
	color: rgb(var(--secondary-color));
}

.mark {
	text-align: center;
}

.mark input[type="checkbox"]{
	margin: auto;
}

.posthilit {
	background-color: rgba(var(--secondary-color), 0.3);
	color: rgb(var(--secondary-color));
}

.content a:not(.button):not(.mention) {
	text-decoration: underline;
}

blockquote cite > a:first-of-type {
	text-decoration: none !important;
}

.notice {
	font-size: 1.4rem;
}

#add_keywords {
	font-size: 1.4rem;
}

textarea.inputbox {
	box-sizing: border-box;
}

.action-bar .button-search {
	padding: 0.7rem;
}

.icon.icon-black, a:hover .icon.icon-black {
	color: rgb(var(--positive-color));
}

#cp-main .pm {
	background-color: rgb(var(--menu-background-color-hover));
}

.normal-button, .button, input[type='submit'], input[type='reset'], div#message a:first-of-type {
	font-family: inherit;
	border: none;
	cursor: pointer;
	text-align: center;
	font-weight: normal;
	display: inline-block;
	background: rgb(var(--primary-color));
	color: rgb(var(--always-positive-color));
	padding: 0.7rem 2.2rem;
	font-size: 1.5rem;
	border-radius: 0.7rem;
}

div#message a:first-of-type {
	
}

.cancel-button, div#message a {
	font-family: inherit;
	border: none;
	cursor: pointer;
	text-align: center;
	font-weight: normal;
	display: inline-block;
	background: rgb(var(--neutral-color));
	color: rgb(var(--always-positive-color));
	padding: 0.7rem 2.2rem;
	font-size: 1.5rem;
	border-radius: 0.7rem;
}

.error-page a, a.secondary-link {
	color: rgb(var(--secondary-color));
}

.logo-small {
	height: var(--header-height);
	display: flex;
	justify-content: center;
	align-items: center;
	order: 10;
	position: relative;
	min-width: 18rem;
}

.logo-small svg {
	display: block;
	width: 18rem;
	height: 5rem;
	z-index: 0;
}

.logo-layer-small {
	position: absolute;
	pointer-events: none;
	width: 24rem;
	height: 11rem;
	left: -3rem;
}

h2{
	font-family: "lexend_deca_bold", sans-serif;
	font-size: 2rem;
	color: rgb(var(--positive-color)) !important;
}

h3{
	font-family: "lexend_deca_bold", sans-serif;
	font-size: 1.8rem;
}

h4{
	font-family: "lexend_deca_bold", sans-serif;
	font-size: 1.65rem;
}

h2.section-title:first-of-type {
	margin-top: 0;
}

.user-login-icon {
	display: none;
}

.search-form {
	margin-right: 0.6rem;
}

#search_form {
	position: relative;
	display: inline-block;
}

#search_query {
	width: 26rem;
	margin-right: 0.7rem;
	vertical-align: middle;
	height: 3.4rem;
	border-radius: 0.7rem;
	padding: 0 3.2rem 0 1rem;
	display: inline-block;
	border: 0.1em solid rgb(var(--always-negative-color));
	color: rgb(var(--always-negative-color));
	font-size: 1.5rem;
	margin-top: 0.2rem;
}

#search_query_autocomplete {
	position: absolute;
	margin-right: 0.7rem;
	z-index: 99;
	top: 3rem;
	left: 0;
	right: 0;
	border: 0.1em solid rgb(var(--always-negative-color));
	border-top: none;
	background: rgb(var(--always-positive-color));
	border-bottom-left-radius: 0.7rem;
	border-bottom-right-radius: 0.7rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 4rem;
	color: rgb(var(--always-negative-color));
	overflow: hidden;
}

.filter-button {
	margin-right: 2rem;
	font-size: 1.4rem;
	color: rgb(var(--icon-button-color));
	position: relative;
}

.mobile-search-button {
	display: none;
}

#search_button {
	cursor: pointer;
	font-size: 1.7rem;
	margin-left: -3.4rem;
	color: gray;
	float: right;
	margin-right: 1.5rem;
	margin-top: 1rem;
        position: relative;
        z-index: 2;
}

input[type="checkbox"] {
	background-color: rgb(var(--always-positive-color));
	appearance: none;
	margin: 0;
	margin-right: 0.2rem;
	font-size: 1.6rem;
	cursor: pointer;
	height: 2rem;
	width: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Font Awesome 7 Free" !important;
	font-weight: 900;
	content: '\f00c' !important;
	color: rgb(var(--always-positive-color));
}

input[type="checkbox"]:before {
	font-family: "Font Awesome 7 Free" !important;
	font-weight: 900;
	content: '\f00c' !important;
	color: rgb(var(--always-positive-color));
}

input[type="checkbox"]:checked {
	background-color: rgb(var(--primary-color));
}

input[type="checkbox"]:disabled {
	background-color: rgb(var(--neutral-color));
}

input[type="checkbox"]:checked:before {
	color: rgb(var(--always-negative-color));
}

.style-type-login input:not([type='range']):not([type='checkbox']), .style-type-login select, .style-type-login textarea, .style-type-contact input:not([type='range']), .style-type-contact select, .style-type-contact textarea, .account-profile-layout input:not([type='range']), .account-profile-layout select {
	border: 0.1rem solid rgb(var(--positive-color));
}

#dialog-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(var(--negative-color),0.5);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dialog-overlay-blurred {
	backdrop-filter: blur(15px);
}

#dialog-overlay-content {
	max-width: 960px;
	border-radius: 2rem;
	border: 0.3rem solid rgb(var(--primary-color));
	margin: 1rem;
	padding: 2rem 5rem;
	text-align: center;
	font-size: 1.5rem;
	background: rgb(var(--background-color-standard));
	position: relative;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

#dialog-title {
	font-size: 2.4rem;
	margin-top: 0;
	margin-bottom: 2rem;
}

#dialog-message {
	margin: 0 -3rem;
}

.scrollable-dialog #dialog-message {
	overflow-y: scroll;
}

#dialog-message hr {
	border: 0.1rem solid rgb(var(--primary-color));
}

#dialog-center-checkbox {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 1rem;
}

#dialog-center-checkbox label {
	margin-top: 0;
	margin-left: 0.5rem;
	width: auto;
}

#dialog-buttonbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 2rem;
}

.dialog-button {
	margin: 0 0.5rem;
	min-width: 10rem;
}

#dialog-post-explanation {
	font-size: 1.2rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.dialog-close-button {
	position: absolute;
	right: 0.75rem;
	top: 1rem;
	font-size: 3rem;
}

.error-icon {
	color: rgb(var(--error-color));
}

.error-image {
	max-width: 100%;
}

#warning-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(var(--negative-color),0.5);
	backdrop-filter: blur(15px);
	z-index: 9001; /* OVER 9000! */
	display: flex;
	align-items: center;
	justify-content: center;
}

.obscured-background:has(#warning-overlay) {
	backdrop-filter: none;
}

#warning-overlay-content {
	max-width: 960px;
	border-radius: 2rem;
	border: 0.3rem solid rgb(var(--primary-color));
	margin: 1rem;
	padding: 2rem;
	text-align: center;
	font-size: 1.5rem;
	background: rgb(var(--negative-color));
}

#warning-title {
	font-size: 2.5rem;
	margin-top: 0;
	margin-bottom: 2rem;
}

#warning-buttonbar {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#warning-close-button {
	margin-top: 0.8rem;
	background: rgb(var(--always-primary-color));
}

#warning-post-explanation {
	font-size: 1.2rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.hentai-button {
	margin-right: 1rem;
	font-size: 1.4rem;
	color: rgb(var(--icon-button-color));
	position: relative;
}

@media (hover: hover) and (pointer: fine) {
	:root {
		--is-hovering-device: 1;
	}

	.hentai-button:hover {
		color: rgb(var(--icon-button-color-hover));
	}

	a.secondary-link:hover {
		color: rgb(var(--secondary-color-hover));
		text-decoration: underline;
	}

	.anon-avatar:hover {
		color: rgb(var(--icon-button-color-hover));
	}

	.user-avatar:hover {
		filter: brightness(var(--brightness-hover));
	}

	.dropdown-menu a:hover {
		background-color: rgb(var(--menu-background-color-hover));
	}

	.user-login:hover, .user-logout:hover {
		background-color: rgb(var(--primary-color-hover));
	}

	.contact-button:hover {
		border: 0.1rem solid rgb(var(--primary-color));
	}

	.footer-text a:hover {
		color: rgb(var(--neutral-color));
		text-decoration: underline;
	}

	svg.main-logo:hover path#line_1 {
		d: path("M26 145.763v-1h477v1z");
	}

	svg.main-logo:hover path#line_2 {
		d: path("M133 178.763v-1h348v1z");
	}

	.normal-button:hover, div#message a:first-of-type:hover {
		background-color: rgb(var(--primary-color-hover));
		filter: none;
	}

	.cancel-button:hover, div#message a:hover {
		filter: brightness(0.8);
	}

	.error-page a:hover {
		color: rgb(var(--secondary-color-hover));
		text-decoration: underline;
	}

	.filter-button:hover {
		color: rgb(var(--icon-button-color-hover));
	}

	input[type="checkbox"]:hover {
		filter: brightness(0.9);
	}

	input[type="checkbox"]:disabled:hover {
		filter: none;
	}

	.dialog-close-button:hover {
		color: rgb(var(--positive-color-button-hover));
	}

	#warning-close-button:hover {
		background-color: rgb(var(--always-primary-color-hover));
	}
	
	.arrow-left:hover .icon, .arrow-right:hover .icon {
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 1920px){
	:root {
		--background-image: url('../images/site/background_dark_hd.jpg');
	}

	.theme-light {
		--background-image: url('../images/site/background_light_hd.jpg');
	}

	.subtheme-hentai {
		--background-image: url('../images/site/background_dark_hentai_hd.jpg');
	}

	.theme-light.subtheme-hentai {
		--background-image: url('../images/site/background_light_hentai_hd.jpg');
	}
}

@media (max-width: 1500px){
	.user-login {
		min-width: 4rem;
		padding: 0.75rem 0.75rem;
	}

	#search_query {
		width: 20rem;
	}

	.user-login-text {
		display: none;
	}

	.user-login-icon {
		display: inline;
	}
}

@media (max-width: 1400px){
	.catalogues-navigation {
		flex-wrap: wrap;
	}
	
	.catalogues-newline {
		width: 100%;
	}

	.catalogues-newline-separator {
		display: none;
	}
}

@media (max-width: 1000px){
	.catalogues-separator {
		margin-left: 0.6rem;
		margin-right: 0.6rem;
	}
}

@media (max-width: 960px){
	:root {
		--header-height-local: 8.4rem;
		--page-padding: 1rem;
		--carousel-element-width: 12.72rem;
		--carousel-element-height: 20.1rem;
		--thumbnail-margin: 0.3rem;
		--thumbnail-text-height: 2.1rem;
	}

	.hentai-button, .filter-button {
		font-size: 1.1rem;
	}

	.main-logo {
		width: 24rem;
		height: 6.667rem;
	}

	.logo-layer {
		left: -4rem;
		top: -4rem;
		width: 32rem;
		height: 14.667rem;
	}

	h2 {
		font-size: 1.8rem;
	}

	.fansubscat-header .header {
		justify-content: left;
		flex-wrap: wrap;
	}

	.catalogues-navigation {
		margin-left: 0;
		width: 100%;
		justify-content: center;
		align-items: center;
		order: 99;
		font-size: 1.8rem;
	}

	.catalogues-explicit-category {
		font-size: 1.4rem;
		margin-left: 0.8rem;
	}

	.logo-small {
		min-width: 12rem;
	}

	.logo-small svg {
		width: 12rem;
		height: 3.333rem;
	}

	.logo-layer-small {
		width: 16rem;
		height: 7.333rem;
		left: -2rem;
	}

	.user-avatar {
		width: 4rem;
		height: 4rem;
	}

	.anon-avatar {
		width: 4rem;
		height: 4rem;
		margin-right: -0.8rem;
	}

	.user-login-text {
		display: inline;
	}

	.user-login-icon {
		display: none;
	}

	#dialog-title {
		font-size: 2.2rem;
		margin-bottom: 1rem;
	}

	.normal-button, .login-button, .cancel-button {
		font-size: 1.4rem;
	}

	.mobile-search-button {
		display: block;
	}
	
	.search-form {
		display: none;
	}
	
	.filter-button.dropdown-button {
		margin-right: 1rem;
	}
}

/* This breakpoint does not exist in the normal site, but it's what the forum uses */
@media (max-width: 700px){
	.forabg ul.topiclist li.header a, .forumbg ul.topiclist li.header a, .forabg ul.topiclist li.header .list-inner, .forumbg ul.topiclist li.header .list-inner {
		font-size: 1.8rem;
	}
	
	.forabg ul.topiclist li.header, .forumbg ul.topiclist li.header {
		margin-bottom: 0;
	}

	ul.linklist > li.breadcrumbs {
		font-size: 1.6rem;
	}
	
	.forabg, .forumbg, .post {
		zoom: 0.9;
	}

	.forumbg, .post {
		margin: 0.5rem 0;
	}
	
	.postprofile {
		text-align: left;
		padding: 0;
	}
	
	.postprofile + .postbody {
		margin-left: -215px;
	}
	
	.postprofile dd, .postprofile dt {
		line-height: 1.1;
	}
	
	h3 {
		font-size: 1.6rem;
	}
	
	#viewprofile .column2 {
		margin-top: 1rem;
	}

	fieldset.submit-buttons input {
		margin-top: 0.5rem;
	}
	
	p {
		font-size: 1.3rem;
	}

	html.chat-page .mchat-external-wrapper {
		flex-direction: column;
	}
	
	#mchat-whois h3 {
		display: none;
	}

	html.chat-page #mchat-messages {
		padding: 0.4rem;
	}
	
	html.chat-page .mchat-external-wrapper {
		position: relative;
	}
	
	#mchat-whois #mchat-userlist {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	#mchat-whois .show-users {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
	}
	
	#mchat-whois.show-user-list #mchat-userlist {
		display: block;
		position: absolute;
		top: 3.2rem;
		right: 0;
		background-color: rgb(var(--negative-color));
		border: 2px solid rgb(var(--primary-color));
		padding: 1rem;
		border-radius: 1rem;
		z-index: 1;
	}

	.profile-rank br, .profile-rank img {
		display: none;
	}
}

@media (max-width: 600px){
	:root {
		--search-layout-width: 90vw;
	}

	.user-login-text {
		display: none;
	}

	.user-login-icon {
		display: inline;
	}
}

@media (max-width: 350px){
	.catalogues-navigation {
		font-size: 1.6rem;
	}

	.hentai-button, .filter-button, .filter-button.dropdown-button {
		margin-right: 0.1rem;
	}
}