/* ==UserStyle==
@name			SweClockers Dark
@description	A modern dark theme for SweClockers
@version		24.91.1451
@license		MPL-2.0
@author			Soitora <simon.mattila@protonmail.com> (https://soitora.com)
@namespace		https://github.com/Soitora
@homepageURL	https://github.com/Soitora/SweClockers-Dark
@supportURL		https://github.com/Soitora/SweClockers-Dark/issues
@updateURL		https://raw.githubusercontent.com/Soitora/SweClockers-Dark/gh-pages/sweclockers-dark.user.styl
@preprocessor	stylus

@var	color		var-background-1 "Background color 1" #121212
@var	color		var-background-2 "Background color 2" #1D1D1F
@var	color		var-background-3 "Background color 3" #2A2A2C
@var	color		var-text-1 "Text color 1" #C8C8C8
@var	color		var-text-2 "Text color 2" #AAAAAA
@var	color		var-border-color "Border color" #101013
@var	color		var-border-color-light "Border color light" #3B3B3B
@var	color		var-highlight "Highlight color" #2A2A2D
@var	color		var-warning "Warning color" #EE4757
@var	color		var-theme "Theme color" #F19A57
@var	color		var-theme-text "Theme color text" #FFFFFF
@var	number		var-image-brightness "Image brightness" [0.75, 0, 1, 0.05]
@var	select		var-scrollbar-style "Scrollbar" {
	"Original": "scrollbar-original",
	"Custom (Default)*": "scrollbar-custom"
}
@var	select		var-accessibility-focus "Accessibility: Focus" {
	"Original (Default)*": "accessibility-focus-original",
	"Disabled": "accessibility-focus-disabled"
}
@var	select		var-accessibility-row_contrast "Accessibility: Row contrast" {
	"Enabled": "accessibility-row_contrast-enabled",
	"Disabled (Default)*": "accessibility-row_contrast-disabled"
}
@var	select		var-lemonillusion-width "LemonIllusion: Width" {
	"Enabled": "lemonillusion-width-enabled",
	"Disabled (Default)*": "lemonillusion-width-disabled"
}
@var	select		var-lemonillusion-ad_movement "LemonIllusion: Ad movement" {
	"Enabled": "lemonillusion-ad_movement-enabled",
	"Disabled (Default)*": "lemonillusion-ad_movement-disabled"
}
@var	select		var-lagers-signature "Lagers: Signature removal" {
	"Enabled": "lagers-signature-removal-enabled",
	"Disabled (Default)*": "lagers-signature-removal-disabled"
}

==/UserStyle== */
@-moz-document domain("www.sweclockers.com") {
	var-background-1 ?= #121212
	var-background-2 ?= #1D1D1F
	var-background-3 ?= #2A2A2C
	var-text-1 ?= #C8C8C8
	var-text-2 ?= #AAAAAA
	var-border-color ?= #101013
	var-border-color-light ?= #3B3B3B
	var-highlight ?= #2A2A2D
	var-warning ?= #EE4757
	var-theme ?= #F19A57
	var-theme-shade ?= shade(var-theme, 20%)
	var-theme-text ?= #FFFFFF
	var-image-brightness ?= 0.75
	var-scrollbar-style ?= scrollbar-original
	var-accessibility-focus ?= accessibility-focus-original
	var-accessibility-row_contrast ?= accessibility-row_contrast-disabled
	var-lemonillusion-width ?= lemonillusion-width-disabled
	var-lemonillusion-ad_movement ?= lemonillusion-ad_movement-disabled
	var-lagers-signature ?= lagers-signature-removal-disabled
	var-on-background-1 = var-background-2
	var-on-background-2 = darken(var-background-2, 25%)
	var-on-background-2-button = lighten(var-background-2, 3%)
	var-border = 1px solid var-border-color
	var-border-light = 1px solid var-border-color-light
	var-border-radius = 0.6rem
	var-hover-opacity = 0.8
	var-hover-text = none
	var-box-shadow = 0 0 0 1px var-border-color
	var-box-shadow-light = 0 0 0 1px var-border-color-light
	var-box-shadow-inset = inset 0 0 0 1px var-border-color
	var-box-shadow-inset-light = inset 0 0 0 1px var-border-color-light
	var-box-shadow-warning = 0 0 0 1px var-warning
	var-text-shadow = 1px 1px 2px var-black
	var-filter-light = brightness(0) saturate(100%) invert(92%) sepia(0) saturate(489%) hue-rotate(229deg) brightness(90%) contrast(86%)
	var-filter-grey = sepia(0) saturate(0.29) brightness(67%) contrast(184%) hue-rotate(179deg) invert(8%)
	var-black = #000000
	var-white = #ffffff
	var-beige = #9c6500
	var-blue = #305d84
	var-green = #1c5a00
	var-pink = #b34d84
	var-purple = #8e78a2

	if (var-scrollbar-style == "scrollbar-custom") {
		::-webkit-scrollbar {
			width: 17px
			height: 12px
		}

		::-webkit-scrollbar-corner {
			background: var-background-1
		}

		::-webkit-scrollbar-thumb {
			border-right: 4px solid var-background-1 !important
			border-left: 4px solid var-background-1 !important
			background: var-theme
		}

		::-webkit-scrollbar-track {
			background: var-background-1
		}

		::-webkit-resizer {
			background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABB0lEQVQ4jcXSvytHYRQG8I9fZWNg8A8og0wMyKKMFEpZlPxYZaEsysJCFuprUSYs6ptQshlYLUa7JAsGSW+9V7fb/fK9GZzp7X3O8/Q85xx/rZrAfylNFJEJnDU8Ns0dbtcWNFCHElbQGT6KCDTiGDPYwGz4rK+S3IwTDGARWwlQjUAbztGBKRykwd8E2nGBVozgLNvwk0A3TuOcBnGT11RpiEO4wiv6M+QG7GK5ksAkynhAH+5TWIhyifnEfTbCAjZxjWE8p7CuuIkWjMb3t4NwXetxPeUYIU0ej6Kf6E3IaYE9LGEfY3hLkVdxhFv04C5viCFnuK5pfGRivWMnunrKn/m/Fb4AFQsvGVJYWLQAAAAASUVORK5CYII=") !important
			background-position: 3px 3px !important
			background-size: 12px auto !important
			background-repeat: no-repeat !important
		}
	}

	if (var-accessibility-focus == "accessibility-focus-disabled") {
		:focus {
			outline: none !important
		}
	}

	if (var-accessibility-row_contrast == "accessibility-row_contrast-enabled") {
		table {
			tr {
				&:nth-child(odd) {
					td {
						background: var-on-background-1 !important
					}
				}

				&:nth-child(even) {
					td {
						background: darken(var-on-background-1, 20%) !important
					}
				}
			}
		}
	}

	if (var-lemonillusion-width == "lemonillusion-width-enabled") {
		.col {
			&.col-content {
				margin-right: 10px
				max-width: 100%

				&-wide {
					margin-right: 0
					padding-right: 10px
				}

				.card-banner {
					img {
						width: 100%
					}
				}
			}

			&-side {
				display: inherit !important
				margin-right: 0 !important
				margin-left: 0 !important
			}

			&-outer-side {
				position: relative
				left: 260px
			}
		}

		.container {
			overflow: visible
		}

		.tv-frame {
			width: auto
		}

		.pw-notifications {
			.display-none {
				&:not(.m-m-r) {
					display: inherit !important
				}
			}
		}
	}

	if (var-lemonillusion-ad_movement == "lemonillusion-ad_movement-enabled") {
		#outsider-1 {
			position: static !important
		}
	}

	if (var-lagers-signature == "lagers-signature-removal-enabled") {
		.forum-post-body .signature {
			display: none
		}
	}

	filter() {
		filter: arguments
		-moz-filter: arguments
		-ms-filter: arguments
		-o-filter: arguments
		-webkit-filter: arguments
	}

	border-radius() {
		border-radius: arguments
		-moz-border-radius: arguments
		-ms-border-radius: arguments
		-o-border-radius: arguments
		-webkit-border-radius: arguments
	}

	box-shadow() {
		box-shadow: arguments
		-moz-box-shadow: arguments
		-ms-box-shadow: arguments
		-o-box-shadow: arguments
		-webkit-box-shadow: arguments
	}

	user-select(n) {
		user-select: n
		-moz-user-select: n
		-ms-user-select: n
		-o-user-select: n
		-webkit-user-select: n
	}

	body {
		background-color: var-background-1 !important
		color: var-text-2 !important
	}

	a,
	.link {
		color: var-theme
	}

	a:hover,
	a:hover>.label,
	.link:hover,
	.link:hover>.label {
		text-decoration: var-hover-text
		opacity: var-hover-opacity
	}

	img {
		filter: brightness(var-image-brightness)
	}

	.ad {
		&.adPanorama,
		&.adModule,
		&.adInsider,
		&.adOutsider {
			iframe {
				border-radius: var-border-radius
				background-color: darken(var-background-1, 40%)
			}
		}

		&.adPanorama {
			+ #content-columns {
				.col {
					&.col-content-wide {
						background-color var-background-1
						border-radius var-border-radius
					}
				}
			}
		}
	}

	.button,
	.tanukiButton {
		border: var-border
		background-color: var-on-background-1
		color: var-text-1

		&:hover,
		&:active {
			background-color: var-highlight
			color: var-text-1
			opacity: 1
		}

		&.isLoading,
		&.is-loading {
			background-color: darken(var-on-background-2-button, 25%) !important
			color: var-text-2 !important
		}

		&[title="Avbryt"] {
			&[href*="/sakerhet"] {
				color: var-warning
			}
		}

		.loader {
			filter: invert(85%)
		}
	}

	.tanukiCombobox {
		.tcbTriggerFrame {
			border-color: transparent
			background-color: transparent

			input {
				box-shadow: var-box-shadow-inset

				&:focus {
					box-shadow: var-box-shadow-inset-light
				}
			}
		}

		.tcbSelectedItem {
			border-color: var-border-color-light
			border-radius: var-border-radius
			background-color: var-on-background-2

			&:hover {
				background-color: var-highlight
			}
		}

		.tcbPanel {
			border-color: var-border-color
			background-color: var-on-background-2
		}
	}

	select {
		border-color: var-border-color
		background-color: var-on-background-2
		color: var-text-2

		&:focus {
			border-color: var-border-color-light
			color: var-text-1
		}
	}

	input,
	textarea {
		border-color: var-border-color
		border-radius: var-border-radius
		background-color: var-on-background-2
		color: var-text-2

		&:focus {
			border-color: var-border-color-light
			color: var-text-1
		}

		&:disabled {
			background-color: var-on-background-2-button
			color: var-text-1

			&:hover {
				cursor: not-allowed
			}
		}
	}

	input,
	select,
	textarea {
		&[type=text],
		&[type=email],
		&[type=url],
		&[type=search],
		&[type=number],
		&[type=password] {
			&.is-loading {
				filter: invert(85%)
			}
		}
	}

	input {
		&[type=checkbox] {
			filter: invert(70%) brightness(0.5)

			&:checked {
				filter: invert(100%) brightness(0.9)
			}
		}
	}

	.hasErrors {
		select,
		input,
		textarea {
			outline: none !important
			border-color: var-warning !important
		}
	}

	.error {
		background-color: var-warning !important
		color: white !important
		text-shadow: var-text-shadow
	}

	fieldset {
		.button,
		.tanukiButton {
			background-color: var-on-background-2

			&:hover {
				background-color: var-highlight
			}

			&.isDisabled {
				background-color: darken(var-on-background-2-button, 25%) !important
				color: var-text-2 !important
				pointer-events: all !important

				&:hover {
					cursor: not-allowed !important
				}
			}
		}
	}

	.bg {
		&-orange {
			background-color: var-theme-shade !important
			color: var-theme-text !important
			text-shadow: var-text-shadow !important

			&:not(.no-hover):hover {
				background-color: darken(var-theme, 10%) !important
			}

			&.color-white {
				color: var-theme-text !important
			}

			&.list-comment-bubble {
				background-color: var-theme-shade !important
				color: var-theme-text !important
				text-shadow: var-text-shadow !important
			}

			a {
				color: red
			}
		}

		&-grey-primary {
			background-color: var-on-background-1 !important
			color: var-text-2 !important

			&:not(.no-hover):hover {
				background-color: #fff !important
			}

			a {
				color: var-theme
			}
		}

		&-grey-secondary {
			background: var-on-background-2 !important
			color: var-text-2 !important

			&:not(.no-hover):hover {
				background-color: #efeeec !important
			}

			a {
				color: #1f5994
			}
		}

		&-dark-grey-primary {
			background-color: transparent !important
			color: var-text-1 !important

			&:not(.no-hover):hover {
				background-color: #424242 !important
			}

			a {
				color: #ccc
			}
		}

		&-blue {
			background-color: var-blue !important

			&.list-classified-button,
			&.compact {
				text-shadow: var-text-shadow
			}
		}

		&-blue-secondary {
			background-color: darken(var-blue, 20%) !important
		}

		&-green {
			background-color: var-green !important

			&.list-classified-button,
			&.compact {
				text-shadow: var-text-shadow
			}
		}

		&-pink {
			background-color: var-pink !important

			&.list-classified-button,
			&.compact {
				text-shadow: var-text-shadow
			}
		}

		&-beige {
			background-color: var-beige !important

			&.list-classified-button,
			&.compact {
				text-shadow: var-text-shadow
			}
		}

		&-white {
			background-color: transparent !important
		}
	}

	.color {
		&-white {
			color: var-text-1 !important
			fill: var-text-1 !important

			svg {
				fill: var-text-1 !important
			}
		}

		&-black {
			color: var-black !important
			fill: var-black !important

			svg {
				fill: var-black !important
			}
		}

		&-orange {
			color: var-theme !important
			fill: var-theme !important

			svg {
				fill: var-theme !important
			}
		}

		&-grey-primary {
			color: #f1efec !important
			fill: #f1efec !important

			svg {
				fill: #f1efec !important
			}
		}

		&-dark-grey-primary {
			color: #282828 !important
			fill: #282828 !important

			svg {
				fill: #282828 !important
			}
		}

		&-yellow {
			color: #fafad9 !important
			fill: #fafad9 !important

			svg {
				fill: #fafad9 !important
			}
		}
	}

	.content {
		&-primary {
			background-color: var-on-background-1 !important

			.infoText h1 {
				color: var-text-1
			}
		}

		&-secondary {
			background-color: var-on-background-1 !important
		}

		&-orange {
			background-color: var-on-background-1 !important
		}

		&-body {
			box-shadow: var-box-shadow-inset
		}
	}

	.widget {
		&.content-secondary,
		&.content-orange,
		&.bg-blue-secondary,
		&.bg-dark-grey-primary {
			box-shadow: var-box-shadow-inset

			.widget-head {
				.title {
					color: var-theme !important
				}

				.title-secondary {
					color: var-text-1

					a {
						color: var-text-2
					}
				}
			}

			.widget-body {
				.title {
					color: var-text-1
				}

				.list {
					.list-meta {
						&.list-bubble {
							&.date {
								background-color: var-blue !important
								color: var-white !important
								text-shadow: var-text-shadow !important
							}
						}
					}

					.list-link {
						color: var-text-2
					}
				}
			}
		}

		&.bg-blue-secondary {
			background-color: var-on-background-1 !important
		}

		&.bg-dark-grey-primary {
			box-shadow: none
		}
	}

	.bbcode {
		.bbExpander {
			.expanderHeader {
				border-color: var-border-color-light
				color: var-text-1
			}

			.expanderFrame {
				.expanderFade {
					background: -moz-linear-gradient(top, transparent 0, transparent 10%, var-background-1 100%) !important
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(45%, transparent), color-stop(100%, var-background-1)) !important
					background: -webkit-linear-gradient(top, transparent 0, transparent 10%, var-background-1 100%) !important
					background: -o-linear-gradient(top, transparent 0, transparent 10%, var-background-1 100%) !important
					background: -ms-linear-gradient(top, transparent 0, transparent 10%, var-background-1 100%) !important
					background: linear-gradient(to bottom, transparent 0, transparent 10%, var-background-1 100%) !important
				}
			}

			.expanderFooter {
				border-color: var-border-color-light
			}
		}

		.bbChart {
			img[src*="/artikel/diagram/"] {
				filter: invert(85%) !important
			}
		}

		// Recolor SweClockers user signature custom colors
		.bbColor {
			// SweClockers Orange
			&[style="color: #c15200;"],
			&[style="color: #c45e0b;"] {
				color: var-theme !important
			}

			// Some gray variant
			&[style="color: #5c5c68;"] {
				color: #aaaab5 !important
			}

			// Red variants
			&[style="color: #690000;"],
			&[style="color: #d00;"],
			&[style="color: red;"] {
				color: #ff4949 !important
			}

			// Black variants
			&[style="color: #000;"],
			&[style="color: #000000;"],
			&[style="color: black;"] {
				color: #fff !important
			}

			// Green variants
			&[style="color: green;"] {
				color: #3fff62 !important
			}

			// Blue variants
			&[style="color: #1f5994;"]
			&[style="color: #0000ff;"]
			&[style="color: blue;"] {
				color: #3f76ff !important
			}

			// Yellow variants
			&[style="color: #ffff00;"],
			&[style="color: yellow;"] {
				color: #faed2f !important
			}
		}

		.bbImage {
			a {
				&:hover {
					opacity: 1
				}

				img {
					border-radius: var-border-radius
				}
			}
		}

		.bbVideo {
			iframe {
				border-radius: var-border-radius
			}
		}

		.bbIns {
			border-bottom: 1px dotted darken(var-blue, 25%)
			background-color: darken(desaturate(var-blue, 25%), 50%) // #243125
			text-shadow: var-text-shadow
		}

		.bbMark {
			padding: 3px 2px
			border-radius: 4px
			background-color: darken(var-purple, 60%)
			color: var-text-1
			text-shadow: var-text-shadow
			font-weight: 600
		}

		.bbMarketBid {
			border-color: var-border-color
			border-radius: var-border-radius
			background-color: var-on-background-2

			.bbMarketBid {
				&__title {
					color: var-text-1
				}

				&__text {
					color: var-text-2
				}
			}
		}

		.bbPre {
			&.showFrame {
				border-color: var-border-color
				border-radius: var-border-radius
				background-color: var-on-background-2

				::-webkit-scrollbar {
					width: auto
					height: auto
				}

				::-webkit-scrollbar-corner {
					background: var-on-background-2
				}

				::-webkit-scrollbar-thumb {
					border-top: 4px solid var-on-background-2 !important
					border-right-color: var-on-background-2 !important
					border-bottom: 4px solid var-on-background-2 !important
					border-left-color: var-on-background-2 !important
					background: darken(var-text-2, 75%)
				}

				::-webkit-scrollbar-track {
					background: var-on-background-2
				}
			}
		}

		.bbVar,
		.bbKbd,
		.bbSamp,
		.bbCmd {
			border-radius: 4px
			background-color: #222222
			box-shadow: 0 0 0 1px #222222, 0 0 0 2px #393939
			color: var-text-1
		}

		.bbPoll {
			.inner {
				background-color: var-on-background-2
				box-shadow: var-box-shadow-inset

				.pollQuestion {
					color: var-text-1
				}

				.pollBody {
					.pollOptions {
						.votesRel,
						.votesAbs {
							color: var-text-2
						}

						.optionBar {
							> div {
								background-color: var-theme-shade
							}
						}
					}

					.pollSums {
						.pollControls {
							button {
								background-color: var-on-background-2-button
								color: var-text-1

								&:hover {
									background-color: var-highlight
								}

								&.isDisabled {
									background-color: darken(var-on-background-2-button, 25%) !important
									color: var-text-2 !important
									pointer-events: all !important

									&:hover {
										cursor: not-allowed !important
									}
								}
							}
						}

						.pollMessage {
							color: var-text-1
						}

						.totalVotes {
							border-top-color: var-border-color-light
							color: var-text-2
						}
					}
				}
			}
		}

		.bbPullQuote {
			color: var-theme
		}

		.bbBlockQuote {
			&::after {
				color: var-theme
			}
		}

		.bbSpoiler {
			.spoilerHeader {
				background-color: transparent
			}

			.spoilerFrame {
				border-color: var-border-color
				border-radius: var-border-radius
				background-color: var-on-background-2
			}
		}

		.bbTable {
			border-color: var-border-color !important
			background-color: var-on-background-2 !important

			thead,
			tbody {
				th {
					background-color: darken(var-background-2, 40%) !important
					color: var-theme !important
				}
			}

			thead {
				tr {
					span,
					p {
						color: var-text-1 !important
					}

					&:first-child th {
						border-bottom: 1px solid darken(var-background-2, 80%) !important

						&:first-child {
							border-right: 1px solid darken(var-background-2, 80%) !important
							border-bottom: 1px solid darken(var-background-2, 80%) !important
						}

						&:last-child {
							border-color: var-border-color
						}
					}

					th {
						border-color: darken(var-background-2, 80%)
					}
				}

				th {
					border-right-color: darken(var-background-2, 80%)
					background-color: darken(var-background-2, 60%) !important
				}
			}

			tbody {
				tr {
					&:last-child {
						th {
							border-color: var-border-color !important
						}
					}

					th {
						border-right: 1px solid darken(var-background-2, 50%) !important
						border-bottom: 1px solid var-on-background-2 !important

						&:first-child {
							span,
							p {
								color: var-text-1 !important
							}
						}
					}

					td {
						border-color: var-border-color !important
						border-bottom: 1px solid darken(var-background-2, 50%) !important
						background-color: darken(var-background-2, 20%) !important
					}
				}
			}

			a {
				color: var-theme !important

				&:hover {
					text-decoration: var-hover-text !important
					opacity: var-hover-opacity !important
				}
			}
		}

		.bbLink {
			text-decoration: none
		}

		.bbRelatedBox {
			border-color: var-border-color
			background-color: var-on-background-2
		}

		.bbQuote {
			border-color: var-border-color
			background-color: var-on-background-2

			.quoteContent {
				border-top-color: var-border-color-light
			}

			.quoteFade {
				background: -moz-linear-gradient(top, transparent 0, transparent 10%, var-background-1 100%) !important
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0, transparent), color-stop(45%, transparent), color-stop(100%, var-background-1)) !important
				background: -webkit-linear-gradient(top, transparent 0, transparent 10%, var-background-1 100%) !important
				background: -o-linear-gradient(top, transparent 0, transparent 10%, var-background-1 100%) !important
				background: -ms-linear-gradient(top, transparent 0, transparent 10%, var-background-1 100%) !important
				background: linear-gradient(to bottom, transparent 0, transparent 10%, var-background-1 100%) !important
			}
		}
	}

	.wndSimpleWindow {
		.wndSimpleWindowDecorator {
			background-color: var-on-background-1
			border-radius: var-border-radius
			border-color: var-border-color-light

			.wndSimpleWindowHeader {
				border-color: var-border-color-light

				.wndSimpleWindowTitle h4,
				.wndToolbarControls svg {
					color: var-text-1
					fill: var-text-1
				}
			}

			.wndSimpleWindowContent {
				.forum-files {
					&__loader {
						.loading .loader {
							filter: var-filter-light
						}
					}

					&__error {
						.error,
						.errorBox {
							background-color: var-warning !important
							color: white !important
							text-shadow: var-text-shadow
						}

						button {
							background-color: var-on-background-2 !important
							color: var-text-2 !important
							border-color: var-border-color-light

							&:hover {
								background-color: var-highlight !important
							}
						}
					}

					&__upload-wrapper {
						.files-upload {
							&__dropzone {
								background-color: var-on-background-2
								border-color: var-border-color-light

								&--active {
									background-color: blend(rgba(var-theme,.10), var-on-background-2)
								}

								.files-upload {
									&__input {
										.tcLabel {
											background-color: var-on-background-1 !important
											color: var-text-2 !important
											border-color: var-border-color-light

											&:hover {
												background-color: var-highlight !important
											}
										}
									}

									&__preview {
										img {
											border-radius: 4px
										}
									}
								}
							}

							.forum-files__text {
								color: var-text-2
							}
						}

						.forum-files__footer {
							border-color: var-border-color-light

							button {
								background-color: var-on-background-2 !important
								color: var-text-2 !important

								&:hover {
									background-color: var-highlight !important
								}

								&[disabled],
								&.isDisabled {
									background-color: lighten(var-on-background-2, 1%) !important
									pointer-events: all !important

									.icon {
										fill: darken(var-text-2, 70%) !important
									}

									&:hover {
										cursor: not-allowed !important
									}
								}
							}
						}
					}
				}
			}
		}
	}

	#header {
		.nav-top {
			background-color: var-background-1

			.container {
				.logo {
					a:hover img {
						opacity: unset
					}
				}

				.profile-wrapper {
					.pw-notifications {
						a {
							&.color-orange {
								span {
									color: var-theme
								}
							}

							svg {
								fill: var-text-2
							}

							span {
								color: var-text-2
							}
						}
					}

					.pw-link {
						color: var-text-1
					}

					.button {
						background-color: var-on-background-1
						color: var-text-2

						&:hover {
							background-color: var-highlight
						}
					}
				}
			}
		}

		.nav-main {
			border-top: var-border
			border-bottom: var-border
			background-color: var-background-2

			.ninja-search {
				.ns-field {
					border-color: var-border-color-light
					background-color: var-on-background-2

					.nsf-icon {
						fill: var-text-2
					}

					input {
						background-color: var-on-background-2
						color: var-text-2

						&:focus {
							color: var-text-1

							&::placeholder {
								color: darken(var-text-2, 50%)
							}
						}

						&::placeholder {
							color: var-text-2
						}
					}
				}

				.ns-toggle {
					svg {
						fill: darken(var-text-1, 40%) !important
					}

					&:hover {
						cursor: pointer

						svg {
							fill: darken(var-text-1, 50%) !important
						}
					}
				}

				&.is-loading {
					.nsf-icon {
						filter: var-filter-light
					}
				}
			}

			ul {
				li {
					@media (min-width: 769px) {
						&:hover:not(.is-selected)>ul {
							background-color: var-background-2
						}
					}

					a {
						color: var-text-2

						&:hover {
							background-color: var-highlight
						}

						span {
							color: var-text-2
						}

						svg {
							fill: var-text-2
						}
					}

					&.menu-lock {
						svg {
							fill: darken(var-text-1, 40%) !important

							&.lock_open {
								fill: var-text-2 !important
							}
						}

						&:hover {
							svg {
								fill: darken(var-text-1, 50%) !important
							}
						}
					}

					&:not(.no-hover) {
						&:not(.is-mobile) {
							&:hover {
								ul {
									background-color: var-on-background-1

									li a {
										color: var-text-2
									}
								}
							}
						}
					}
				}

				ul {
					border: var-border
				}
			}
		}
	}

	#content-container {
		.ninja-search-result {
			.nsrt-main {
				border-color: var-border-color
				border-bottom-right-radius: var-border-radius
				border-bottom-left-radius: var-border-radius
				background-color: var-on-background-1 !important

				.nsrg-header {
					h6 {
						color: var-theme
					}

					a {
						color: var-text-2
					}
				}

				.nsrg-result {
					.nsrg-item {
						.nsrg-label {
							color: var-text-2
						}

						.nsrg-date {
							color: var-text-1
						}
					}

					.nsrg-empty {
						p {
							color: var-text-2
						}
					}
				}
			}
		}

		.notification {
			border-radius: 6px
			background-color: var-background-3
			box-shadow: var-box-shadow-inset
			color: var-text-1

			&:hover {
				background-color: var-highlight
			}

			svg {
				fill: var-theme
			}
		}
	}

	#content {
		> .container {
			background-color: transparent !important

			> .container-padding {
				> .columns {
					.content-background {
						background-color: transparent
					}

					.content-head {
						h1 {
							color: var-text-2
						}

						#searchForm {
							.search-query {
								input {
									background-color: var-on-background-1
									color: var-text-2

									&:focus {
										color: var-text-1
									}

									&::placeholder {
										color: var-text-2 !important
									}
								}
							}
						}

						.article-head {
							.article-meta {
								.category {
									color: var-theme
								}

								.date {
									color: var-text-2
								}

								.authors a {
									color: var-text-1
								}
							}

							.article-sponsored {
								background-color: transparent
							}

							.article-bbcode {
								.bbImage {
									.inner {
										a:has(+ .caption:not([style*="display: none;"])) {
											img {
												border-bottom-left-radius: 0
												border-bottom-right-radius: 0
											}
										}

										a + .caption {
											background-color: var-on-background-1
											color: var-text-1
											border-bottom-left-radius: var-border-radius
											border-bottom-right-radius: var-border-radius

											a {
												color: var-text-2

												&:hover {
													text-decoration: var-hover-text !important
													opacity: var-hover-opacity !important
												}
											}
										}
									}
								}
							}
						}
					}

					.content-body {
						.article-body {
							.article-bbcode {
								.bbImage {
									.inner {
										a:has(+ .caption:not([style*="display: none;"])) {
											img {
												border-bottom-left-radius: 0
												border-bottom-right-radius: 0
											}
										}

										a + .caption {
											background-color: var-on-background-2
											color: var-text-2
											border-bottom-left-radius: var-border-radius
											border-bottom-right-radius: var-border-radius
										}
									}
								}

								.bbAward {
									.reason {
										background-color: var-on-background-1
										color: var-text-2
									}
								}
							}

							.bbcode,
							.expanderContent {
								> .bbImage.alignRight a img {
									filter: invert(85%)
								}
							}
						}

						.article-navigation {
							.head {
								border-bottom-color: var-border-color-light

								h5 {
									color: var-text-1
								}
							}

							.page-item {
								&::before {
									color: var-text-2
								}

								&.is-current {
									background-color: var-on-background-2
									box-shadow: var-box-shadow-inset

									&::before {
										color: var-text-1
									}

									svg {
										fill: var-text-1
									}
								}
							}
						}

						.article-keywords {
							.button {
								background-color: var-on-background-2

								&:hover {
									background-color: var-highlight
								}
							}
						}

						.article-authors {
							hr {
								color: var-border-color-light
							}
						}

						.article-proofreading {
							a {
								border-top-color: var-border-color-light
							}
						}
					}

					.market-header {
						.is-verified {
							color: var-text-2
						}

						.margin-medium-bottom {
							color: var-text-2
						}
					}

					.market-box {
						background-color: var-on-background-1

						.button {
							background-color: var-on-background-2-button
							color: var-text-1

							&.market-button {
								fill: var-text-1

								&:hover {
									background-color: var-highlight
								}
							}

							&.report {
								fill: var-text-1

								&:hover svg {
									fill: var-warning
								}
							}
						}
					}

					.market-edit-image__container,
					.market-edit-upload,
					.checkboxItem label {
						border-color: var-border-color
						background-color: var-on-background-2

						.tcLabel {
							background-color: var-on-background-2-button
							color: var-text-1

							&:hover {
								background-color: var-highlight
							}
						}
					}

					.checkboxItem label,
					.market-edit-image__container {
						&:hover {
							background-color: var-highlight
						}
					}

					.carousel {
						.section {
							.slide {
								&:hover {
									.front a {
										text-decoration: var-hover-text
									}
								}

								.inner {
									&:hover img {
										opacity: 0.65
									}

									.click:hover {
										opacity: 1
									}

									.front {
										pointer-events: none

										a {
											opacity: 1
										}
									}
								}
							}
						}

						.border-radius-none {
							border-radius: var-border-radius !important
						}
					}

					.cards {
						box-shadow: var-box-shadow-inset

						.card {
							border-top: 1px solid var-border-color

							&:first-child {
								border-top: none
							}

							.card-banner {
								img {
									border-radius: var-border-radius
									box-shadow: var-box-shadow
								}
							}

							.card-body {
								.title a {
									color: var-text-2
								}

								.article-meta {
									.category {
										color: var-theme
									}

									.date {
										color: var-text-1
									}
								}

								.card-text {
									a {
										color: var-theme
									}
								}
							}

							.cards-related {
								legend {
									color: var-text-1
								}

								li {
									border-top: var-border-light
								}
							}

							.article-sponsored {
								background-color: transparent
							}
						}

						.ad {
							border-top-color: var-border-color

							iframe {
								border-radius: var-border-radius
							}
						}
					}

					.forum-posts {
						.forum-post {
							.forum-post-header {
								background-color: var-on-background-2
								color: var-text-1
							}

							.forum-post-body {
								background-color: var-on-background-1

								.col {
									&.side {
										background-color: darken(var-on-background-1, 10%)

										&.profile {
											.person {
												.title {
													color: var-text-2
												}
											}

											.avatar {
												border-radius: var-border-radius !important
											}

											.meta {
												dt {
													color: darken(var-text-2, 20%)
												}

												dd {
													color: var-text-2
												}
											}

											.details {
												.activity {
													&.online {
														color: var-theme
													}

													&.offline {
														color: darken(var-text-2, 50%)
													}
												}
											}
										}
									}

									&.controls {
										.button {
											&.like {
												&.is-popular {
													.score {
														color: var-theme !important
													}
												}

												&:not(.is-popular) {
													.score {
														color: var-text-2 !important
													}
												}

												.icon {
													&.is-liked {
														fill: var-theme !important
													}

													&:not(.is-liked) {
														.icon {
															fill: var-text-2 !important
														}
													}
												}
											}

											&.is-disabled {
												background-color: lighten(var-on-background-2, 1%) !important
												pointer-events: all !important

												.icon {
													fill: darken(var-text-2, 70%) !important
												}

												&:hover {
													cursor: not-allowed !important
												}
											}

											&.report {
												&:hover {
													svg {
														fill: var-warning
													}
												}
											}
										}
									}
								}
							}

							.button {
								background-color: var-on-background-2
								color: var-text-1

								&:hover {
									background-color: var-highlight
								}

								&.like {
										&.is-popular {
											.score {
												color: var-theme !important
											}
										}

										&:not(.is-popular) {
											.score {
												color: var-text-2 !important
											}
										}

										.icon {
											&.is-liked {
												fill: var-theme !important
											}

											&:not(.is-liked) {
												.icon {
													fill: var-text-2 !important
												}
											}
										}
									}

								&.is-disabled {
									background-color: lighten(var-on-background-2, 1%) !important
									pointer-events: all !important

									.icon {
										fill: darken(var-text-2, 70%) !important
									}

									&:hover {
										cursor: not-allowed !important
									}
								}
							}

							&.is-linked {
								.forum-post-header,
								.forum-post-body {
									border-color: var-border-color-light
								}
							}

							&.is-author {
								.forum-post-header,
								.forum-post-body {
									border-left: 2px solid var-theme
								}
							}

							&.isReader:not(.is-author) {
								.forum-post-header,
								.forum-post-body {
									border-left-color: var-blue
								}
							}

							&.is-author.isReader {
								.forum-post-header,
								.forum-post-body {
									border-left-color: var-blue
								}
							}
						}
					}

					.list-actions {
						.list-search {
							input {
								background-color: var-on-background-1

								&:focus {
									border-color: var-border-color

									&::placeholder {
										color: darken(var-text-2, 60%)
									}
								}
							}
						}

						select {
							background-color: var-on-background-1
							color: var-text-2
						}
					}

					.quick-reply {
						box-shadow: var-box-shadow-inset

						.controls {
							.tanukiButton {
								background-color: var-on-background-2

								&:hover {
									background-color: var-highlight
								}

								&.isDisabled {
									background-color: lighten(var-on-background-2, 1%) !important
									pointer-events: all !important

									.icon {
										fill: darken(var-text-2, 70%) !important
									}

									&:hover {
										cursor: not-allowed !important
									}
								}
							}
						}
					}

					.comments-bubble {
						.cb-top {
							background-color: var-theme-shade !important
							color: var-theme-text !important
							text-shadow: var-text-shadow !important
						}

						.cb-bottom {
							border-color: transparent var-theme-shade transparent transparent
						}
					}

					.sorter {
						.is-current {
							color: var-theme
						}

						.column,
						.is-current {
							&:hover {
								border-radius: var-border-radius
								background-color: var-highlight
							}
						}
					}

					.pages {
						> a {
							color: var-text-2
							fill: var-text-2 !important
							text-shadow: 1px 1px 1px var-background-1

							&:hover {
								background-color: var-highlight
								opacity: 1
							}

							&.is-current {
								border-color: transparent
								background-color: var-highlight
								color: var-theme
							}

							svg {
								filter: drop-shadow(1px 1px 1px var-background-1)
							}
						}

						> span {
							&.is-disabled {
								fill: darken(var-text-2, 50%) !important
							}
						}
					}

					.profileHeader {
						.avatar img {
							border-radius: var-border-radius
						}

						h1 {
							color: var-theme
						}

						p {
							color: var-text-2
						}

						.ph-meta {
							span {
								color: var-text-2

								&.label {
									color: var-text-1
								}
							}
						}

						.ph-links {
							a:hover {
								opacity: 1
							}

							li {
								svg {
									border-color: var-border-color
									background-color: var-on-background-2-button
									fill: var-text-2

									&:hover {
										background-color: var-highlight
									}
								}

								&:first-child svg {
									fill: var-text-2
								}

								&:last-child {
									a:not(.pm-link) {
										svg {
											fill: var-warning
										}
									}
								}
							}
						}

						.bg-white {
							background-color: var-on-background-2 !important
							box-shadow: var-box-shadow-inset

							a {
								color: var-theme
							}

							span {
								color: var-text-2
							}
						}
					}

					.profileFeed {
						.feedItem {
							border-bottom-color: var-border-color-light
						}

						.feedControl {
							.button {
								background-color: var-on-background-2

								&:hover {
									background-color: var-highlight
								}
							}
						}
					}

					.tipsportal {
						&-header {
							background-color: var-on-background-1
							box-shadow: var-box-shadow-inset

							h1 {
								color: var-theme
							}

							p {
								color: var-text-2
							}

							a {
								color: var-theme
							}
						}

						.tips {
							&-header {
								border-color: var-border-color-light
							}

							&-row {
								border-color: var-border-color

								&:nth-child(odd) {
									background-color: var-on-background-1
								}

								&:nth-child(even) {
									background-color: var-on-background-2
								}

								&:hover {
									.col-wrapper {
										background-color: var-highlight
									}
								}
							}

							&-title {
								color: var-text-1
							}

							.col-wrapper {
								&:hover {
									opacity: 1

									.col-product,
									.col-user {
										text-decoration: none
									}
								}

								.is-desc {
									.label {
										color: var-theme
									}
								}

								.col-product,
								.col-category,
								.col-vendor,
								.col-user {
									color: var-text-2
								}

								.col-price {
									color: var-text-1
								}

								.col-score:not(.is-desc) .label {
									background-color: var-theme-shade
									color: var-theme-text
									text-shadow: var-text-shadow

									&:hover {
										opacity: var-hover-opacity
									}
								}
							}

							.cell-pj-graph {
								filter: invert(85%) !important
							}

							.num-comments a {
								&:hover {
									text-decoration: var-hover-text
								}
							}
						}

						.vendor {
							&-header {
								.vendor-name {
									color: var-text-1
								}

								.ad-info {
									color: var-text-2
								}
							}

							&-products {
								border-color: var-border-color
								background-color: var-on-background-2

								.product {
									border-color: var-border-color

									&-header {
										.product-price {
											&-offer {
												color: var-text-1
											}

											&-regular {
												color: var-text-2
											}

											&-savings {
												background-color: var-theme-shade
												color: var-theme-text
												text-shadow: var-text-shadow
											}
										}
									}

									&-footer {
										background-color: var-on-background-1

										.product-descr {
											color: var-text-2
										}
									}
								}
							}

							&-guides {
								h2 {
									color: var-text-1
								}

								p {
									color: var-text-2
								}

								.guide {
									.icon {
										img {
											filter: var-filter-grey !important

											&:hover {
												opacity: 0.8
											}
										}
									}

									span {
										color: var-text-2
									}
								}
							}
						}

						#guide-wrapper {
							border-color: var-border-color
							border-radius: var-border-radius
							background-color: var-on-background-1
						}
					}

					#editor {
						.imageForm {
							button {
								background-color: var-on-background-2

								&:hover {
									background-color: var-highlight
								}
							}
						}
					}

					#signatureForm {
						.forum-post-body {
							background-color: transparent
						}
					}

					#replies {
						.forum-post-header {
							.columns {
								background-color: var-background-2

								.author {
									color: var-text-2

									a {
										color: var-theme
									}
								}

								.created {
									color: var-text-1
								}

								&.threadTitle {
									background-color: var-on-background-2

									.label {
										color: var-text-1
									}
								}
							}
						}
					}

					#forumList-1 {
						table {
							background-color: transparent

							caption {
								background-color: var-background-2
							}

							.head {
								.cell {
									background-color: var-on-background-2
								}
							}

							.body {
								.cell {
									border-color: var-border-color
									background-color: var-on-background-1

									&.title {
										h2 a {
											color: var-theme
										}

										.descr {
											color: var-text-2
										}

										.subforums {
											.button {
												box-shadow: var-box-shadow
												color: var-text-1 !important

												&:hover {
													background-color: var-highlight !important
												}
											}
										}
									}

									&.lastThread {
										h3 {
											color: var-text-1
										}

										.dateline {
											a {
												color: var-theme
											}

											.by,
											.date {
												color: var-text-2

												.time {
													color: var-text-1
												}
											}
										}
									}
								}
							}
						}
					}

					#threadList-1 {
						table {
							background-color: transparent

							caption {
								background-color: var-background-2
							}

							.head {
								.cell {
									background-color: var-on-background-2

									&:first-child {
										border-top-left-radius: var-border-radius
									}

									&:last-child {
										border-top-right-radius: var-border-radius
									}
								}
							}

							.body {
								.row {
									&.isSelected {
										.cell {
											background-color: var-highlight !important
										}
									}
								}

								.cell {
									border-bottom: var-border
									background-color: var-on-background-1

									&.title {
										h2 a {
											color: var-text-1
										}

										.pageLinks {
											.link.last {
												color: var-theme
												text-decoration: none
											}
										}

										.descr {
											color: var-text-2
										}
									}

									&.status {
										.thread-status {
											.icon {
												fill: var-theme

												&.thread {
													&_locked,
													&_pinned {
														fill: var-text-2
													}
												}
											}
										}

										.posts {
											color: var-text-2
										}
									}

									&.lastReply {
										.name {
											color: var-theme
										}

										.date {
											color: var-text-2

											time .time {
												color: var-text-1
											}
										}
									}
								}
							}

							.allPostsRead {
								.cell {
									&.title {
										h2 a {
											color: darken(var-text-1, 40%)
										}

										.pageLinks {
											.link.last {
												color: var-text-2
											}
										}

										.descr {
											color: darken(var-text-2, 40%)
										}
									}

									&.status {
										.thread-status {
											.icon {
												fill: darken(var-text-2, 40%)

												&.thread {
													&_locked,
													&_pinned {
														fill: darken(var-text-2, 40%)
													}
												}
											}
										}

										.posts {
											color: darken(var-text-2, 40%)
										}
									}
								}
							}
						}
					}

					.table {
						&.classifieds {
							.caption {
								background-color: var-on-background-1
								color: var-text-1
							}

							.head {
								.row {
									.cell {
										background-color: var-on-background-2
										color: var-text-1
									}
								}
							}

							.body {
								.row {
									.cell {
										border-color: var-border-color
										background-color: var-on-background-1

										&.classifieds-thumb {
											img {
												border-radius: var-border-radius
											}

											.no-image {
												svg {
													fill: var-theme
												}
											}

											.classifieds-click {
												border-color: var-border-color
											}

											&:hover {
												img {
													opacity: var-hover-opacity
												}
											}
										}

										&.classifieds-body {
											h2 {
												color: var-text-1
											}

											.classifieds-meta {
												.color-black {
													color: var-text-2 !important

													&:nth-child(2) {
														color: var-theme !important
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.lightbox {
		.lbSlide {
			&Contents {
				background-color: black !important
			}
		}
	}

	#footer {
		.bottom {
			background-color: var-background-2
			color: var-text-2

			a {
				color: var-text-1
			}

			.copyright {
				color: var-text-2
			}
		}
	}

	#adblockBanner {
		border-bottom-color: var-border-color-light
		background-color: var-background-2

		.table .row .cell {
			background-color: transparent

			.button {
				background-color: var-theme-shade
				color: var-theme-text
				text-shadow: var-text-shadow

				&:hover {
					background-color: var-highlight
				}
			}
		}
	}

	.form-mfa,
	#signinForm,
	#mfaForm,
	#totpForm {
		.form-mfa__code-manually {
			background-color: var-on-background-2
			border-color: var-border-color
		}

		.form-mfa__seperator {
			border-color: var-border-color-light
		}

		.form-mfa__code {
			border-color: var-border-color
			border-radius: var-border-radius

			input {
				background: repeating-linear-gradient(90deg, var-on-background-2 0, var-on-background-2 29px, var-border-color-light 30px)
			}
		}

		.frc-captcha {
			background-color: var-background-3
			border-color: var-border-color-light

			.frc-icon {
				filter: var-filter-light !important
			}

			.frc-button {
				background-color: lighten(var-background-3, 10%)

				&:hover {
					background-color: var-background-2
				}
			}

			.frc-progress {
				&::-webkit-progress-bar {
					background: var-background-1
				}

				&::-webkit-progress-value {
					background: var-theme
				}
			}

			* {
				color: var-text-1
			}
		}
	}

	#onetrust-consent-sdk {
		#onetrust-banner-sdk {
			background-color: var-background-2 !important
			box-shadow: 1px -1px 0px #3b3b3b
		}

		#onetrust-pc-btn-handler {
			&.cookie-setting-link {
				background-color: var-on-background-2 !important
				box-shadow: var-box-shadow-inset !important
				color: var-text-1 !important
				text-decoration: none !important
			}
		}

		#onetrust-accept-btn-handler {
			border-color: var-theme-shade !important
			background-color: var-theme-shade !important
			color: var-theme-text !important
			text-shadow: var-text-shadow !important
		}

		#onetrust-pc-sdk {
			background-color: var-background-2 !important

			#ot-pc-content {
				&::-webkit-scrollbar-track {
					background: transparent !important
				}

				#ot-pc-title {
					color: var-text-1 !important
				}

				#ot-pc-desc {
					color: var-text-2 !important

					a {
						color: var-theme !important
						text-decoration: none !important
					}
				}

				#accept-recommended-btn-handler {
					border-color: var-theme-shade !important
					background-color: var-theme-shade !important
					color: var-theme-text !important
					text-shadow: var-text-shadow !important
				}

				.ot-sdk-row {
					#ot-category-title {
						color: var-theme !important
					}

					.ot-cat-item {
						border-color: var-border-color-light !important
					}

					.ot-cat-header {
						color: var-text-1 !important
					}

					.ot-acc-grpcntr {
						background-color: var-on-background-2 !important
					}

					.ot-plus-minus {
						filter: invert(60%) !important
					}

					.ot-always-active {
						color: var-theme !important
					}

					.ot-switch-nob {
						filter: invert(100%) !important
					}
				}
			}

			.ot-pc-header {
				border-color: transparent !important
			}

			.ot-pc-footer {
				border-color: transparent !important

				&-logo {
					background-color: transparent !important

					a {
						filter: invert(85%) !important
					}
				}
			}

			.save-preference-btn-handler {
				border-color: var-theme-shade !important
				background-color: var-theme-shade !important
				color: var-theme-text !important
				text-shadow: var-text-shadow !important
			}

			&.otPcCenter {
				border-radius: var-border-radius
				box-shadow: var-box-shadow-inset-light
			}
		}

		p {
			color: var-text-2 !important
		}
	}

	#better-sweclockers-document {
		.better-sweclockers-editing-tools {
			.button {
				background-color: var-on-background-2

				&:hover {
					background-color: var-highlight
				}

				&[title="Markerad/framhävd text"] {
					border-radius: 4px
					background: linear-gradient(0deg, darken(var-purple, 40%) 0%, darken(var-purple, 40%) 100%) content-box, linear-gradient(0deg, var-on-background-2 0%, var-on-background-2 100%) padding-box
					background-color: darken(var-purple, 60%)
					text-shadow: var-text-shadow
					font-weight: 600

					&:hover {
						background: linear-gradient(0deg, darken(var-purple, 40%) 0%, darken(var-purple, 40%) 100%) content-box, linear-gradient(0deg, var-highlight 0%, var-highlight 100%) padding-box
					}

					mark {
						color: var-text-1
					}
				}

				&[title="Tillagd text"] {
					background: linear-gradient(0deg, darken(desaturate(var-blue, 25%), 20%) 0%, darken(desaturate(var-blue, 25%), 20%) 100%) content-box, linear-gradient(0deg, var-on-background-2 0%, var-on-background-2 100%) padding-box

					&:hover {
						background: linear-gradient(0deg, darken(desaturate(var-blue, 25%), 20%) 0%, darken(desaturate(var-blue, 25%), 20%) 100%) content-box, linear-gradient(0deg, var-highlight 0%, var-highlight 100%) padding-box
					}

					ins {
						color: var-text-1
					}
				}
			}
		}
	}
}