/* For SamToki.github.io */
/* Released under GNU GPL v3 open source license. */
/* © 2023 SAM TOKI STUDIO */

/* Reminders */
	/* About abbreviations */
		/* Do not abuse abbreviations. Use only when a word is longer than 8 letters. */
		/* For example, abbreviate "Animation" into "Anim", but do not abbreviate "Language" into "Lang". */
		/* Exceptions: "Ctrl", "Avg", etc. */
	/* About simplicity */
		/* Make rule names as simple as possible. Avoid over-specific names like "#1 #2 .3" unless needed. */
		/* Avoid using ":is" as it is a little confusing. */
		/* Do not abuse "!important". */
	/* About stacking context */
		/* "z-index" is a relative value. Avoid applying "z-index" when a parent element already has "z-index". */

/* General */
	/* Basics */
		/* Web fonts */
		@font-face {
			font-family: "Inter"; font-weight: normal; font-style: normal;
			src: local("Inter"), url(../fonts/Inter-Regular.woff2); font-display: swap;
		}
		@font-face {
			font-family: "Inter"; font-weight: normal; font-style: italic;
			src: local("Inter"), url(../fonts/Inter-Italic.woff2); font-display: swap;
		}
		@font-face {
			font-family: "Inter"; font-weight: bold; font-style: normal;
			src: local("Inter"), url(../fonts/Inter-Bold.woff2); font-display: swap;
		}
		@font-face {
			font-family: "Inter"; font-weight: bold; font-style: italic;
			src: local("Inter"), url(../fonts/Inter-BoldItalic.woff2); font-display: swap;
		}
		@font-face {
			font-family: "Iosevka";
			src: local("Iosevka"), url(../fonts/Iosevka-Regular.woff2); font-display: swap;
		}

		/* Overall */
		* {
			transform-origin: inherit;
			box-sizing: inherit; padding: 0; margin: 0;
			font-variant-numeric: inherit; font-size: inherit; font-style: inherit; /* These properties need to be set as inherit due to buttons, textboxes and cheating mode. */
			transition: inherit; scroll-behavior: inherit;
		}
		*:lang(en-US) {
			font-family: "Inter", "Helvetica", "Arial", sans-serif;
		}
		*:lang(ja-JP) {
			font-family: "Inter", "Sarasa UI J", "Source Han Sans", "Noto Sans JP", "HiraginoKaku", "Yu Gothic UI", "MS UI Gothic", sans-serif;
		}
		*:lang(zh-CN) {
			font-family: "Inter", "Sarasa UI SC", "Source Han Sans SC", "Noto Sans SC", "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei UI", sans-serif;
		}
		*:lang(zh-TW) {
			font-family: "Inter", "Sarasa UI TC", "Source Han Sans TC", "Noto Sans TC", "Hiragino Sans TC", "PingFang TC", "Microsoft JhengHei UI", sans-serif;
		}
		#Html {
			transform-origin: center center;
			box-sizing: border-box;
			color: #000000; accent-color: #8040A0; font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.2;
			scroll-padding-top: 60px;
			transition: 250ms, z-index 0ms; scroll-behavior: smooth;
		}
		#Html:has(#Topbar.Hidden) {
			scroll-padding-top: 0;
		}
		#BgImage {
			position: fixed; top: 0; left: 0; z-index: -1;
			width: 100%; height: 100vh; height: 100dvh; /* dvh compatibility fallback */
			background-color: #808080; background-image: url(../images/Background.jpg); background-attachment: fixed; background-position: top center; background-size: cover; background-repeat: no-repeat;
		}
		#BgImage.Blur {
			filter: blur(10px);
		}

		/* Containers */
		.NonInteractiveCtnr {
			display: none;
		}

		/* Sections */
		section {
			padding: 0 15px;
			overflow: hidden;
		}
		section:has(.Viewport) {
			height: calc(100vh - 60px); height: calc(100dvh - 60px);
		}
		#Html:has(#Topbar.Hidden) section:has(.Viewport) {
			height: 100vh; height: 100dvh;
		}
		.Viewport {
			position: relative;
			width: 100%; height: calc(100% - 30px); margin: 15px 0;
		}

		/* Group frameworks */
		ul.ItemGroup, ul.CtrlGroup, ul.DropctrlGroup {
			list-style-type: none;
		}
		.ItemGroup {
			margin: 0 -15px;
			display: flex; flex-wrap: wrap; justify-content: center;
		}
		.Item {
			width: 410px; border-radius: 5px; padding: 15px; margin: 0 15px 30px 15px;
			background-color: #F0F0F0E0;
		}
		.Prolog {
			width: unset; max-width: 410px;
		}
		.CtrlGroup {
			display: flex; flex-wrap: wrap; justify-content: space-between;
		}
		.CtrlGroup.BelowParagraph {
			margin: 10px 0 0 0;
		}
		.Ctrl {
			position: relative;
			height: 35px;
		}
		.Ctrl:has(h2) {
			width: 100%; height: auto;
		}
		.Ctrl:has(textarea) {
			height: 80px;
		}
		fieldset {
			width: 100%; border: none; padding: 15px 0;
		}
		fieldset > .CtrlGroup {
			width: 100%;
		}
		fieldset > .CtrlGroup > .Ctrl {
			width: 100%; max-width: 100%; margin: 0 0 10px 0;
		}
		.ScrollableLog {
			height: unset; max-height: 180px;
			overflow: auto;
		}
		.ScrollableList {
			height: 295px;
			overflow: auto;
		}
		.ScrollableList .Ctrl {
			width: 100%;
		}
		.ListHeader {
			padding: 5px;
			display: flex; justify-content: space-between; align-items: center;
		}
		label {
			width: 100%; height: 100%; border-radius: 5px;
			text-wrap: nowrap; /* "text-wrap: nowrap" improves animation on hiding horizontally. */
			display: flex; align-items: center; /* "label" cannot have "overflow: hidden" because of "Textbox". */
		}
		label > * {
			margin: 0 0 0 5px;
		}

		/* Texts */
		.SectionTitle {
			padding: 30px 10px;
			font-size: 2.50em; text-align: center;
		}
		h2 {
			padding: 0 5px 0 0;
			font-size: 1.50em;
		}
		h3 {
			padding: 5px 0;
			font-size: 1.25em; font-weight: normal; line-height: 1.5;
		}
		p {
			max-width: 400px; padding: 5px 0;
			line-height: 1.5;
		}
		a {
			border-radius: 5px;
			color: #8040A0; text-decoration: none;
		}
		i {
			font-style: italic;
		}

		/* Images */
		img {
			border-radius: 5px;
			object-fit: cover;
		}

		/* Icons */
		.Icon {
			width: 1.25em; height: 1.25em; min-width: 1.25em; min-height: 1.25em;
			fill: currentColor;
		}
		.Icon.Smaller {
			width: 1.00em; height: 1.00em; min-width: 1.00em; min-height: 1.00em;
		}
		.Icon.Larger {
			width: 1.50em; height: 1.50em; min-width: 1.50em; min-height: 1.50em;
		}
		.Item:has(fieldset.Hidden) .CollapseCaret {
			transform: rotate(-90deg);
		}
		.LabelAfterIcon {
			margin: 0 0 0 5px;
		}

		/* Shapes */
		.Shape {
			width: 100%; height: 100%;
			fill: #FFFFFF;
			stroke: #00000040; stroke-width: 1px; stroke-linecap: round; stroke-linejoin: round;
			overflow: visible;
		}

		/* Rolling digits */
		.RollingDigit {
			position: absolute; top: unset; left: 0;
			width: 100%;
			transition: none !important;
		}
		.RollingDigit span {
			width: 100%;
			text-align: center;
			display: flex; justify-content: center; align-items: center;
		}

		/* Progress indicators */
		.Progbar {
			position: relative;
			width: 100%; height: 100%; border-radius: 5px;
			background-color: #00000020;
		}
		.Progbar.Shaped {
			border: none;
			background-color: transparent;
		}
		.Progbar.Shaped .Shape {
			fill: #00000020;
		}
		.Progbar.Shaped .ProgbarText {
			color: #000000;
		}
		.ProgbarFg {
			position: absolute; top: 0; left: 0;
			width: 10px; height: 100%; border-radius: 5px;
			background-color: #8040A0;
		}
		.ProgbarFg.Vertical {
			bottom: 0; top: unset;
			width: 100%; height: 10px;
		}
		.ProgbarFg.Shaped {
			width: 100%; height: 100%; clip-path: inset(0 100% 0 0);
			background-color: transparent;
		}
		.ProgbarFg.Vertical.Shaped {
			clip-path: inset(100% 0 0 0);
		}
		.ProgbarFg.Shaped .Shape {
			fill: #D090F0;
		}
		.Progring {
			width: 100%; height: 100%;
		}
		.ProgringBg {
			fill: transparent;
			stroke: #00000020; stroke-width: 5;
		}
		.ProgringFg {
			transform: rotate(-90deg);
			fill: transparent;
			stroke: #8040A0; stroke-width: 5; stroke-linecap: round;
		}
		.ProgringText {
			position: absolute; top: 0; left: 0;
			width: 100%; height: 100%;
			text-align: center;
			display: flex; justify-content: center; align-items: center;
		}
		.Needle {
			height: 100%;
		}
		.NeedleFg {
			width: 100%; height: 50%;
			background-color: #000000;
		}
		.NeedleArrow {
			position: absolute; top: 0; left: 0;
			width: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%);
			background-color: #000000;
		}

		/* Indicator lights */
		.IndicatorLight {
			width: 15px; height: 15px;
		}
		.IndicatorLight.Off {
			background-color: #00000040;
		}
		.IndicatorLight.Red {
			background-color: #FF0000;
		}
		.IndicatorLight.Orange {
			background-color: #E06000;
		}
		.IndicatorLight.Green {
			background-color: #00A000;
		}
		.IndicatorLight.Blue {
			background-color: #0090D0;
		}

		/* Interactive ctrls */
		.Button, .Combobox {
			width: 100%; height: 100%; border: 1px solid #00000040; border-radius: 5px; padding: 5px 10px;
			background-color: #FFFFFF;
			color: #000000; text-align: center; text-wrap: nowrap;
			display: flex; justify-content: center; align-items: center; overflow: hidden;
		}
		.Button.Shaped, .Button.ShownAsLabel {
			border: none; padding: 0;
			background-color: transparent;
		}
		.Button.Shaped .Shape {
			position: absolute; top: 0; left: 0;
		}
		.Button.ShownAsLabel {
			text-align: start; text-wrap: wrap;
			justify-content: start;
		}
		.DropctrlGroup {
			position: absolute; top: unset; left: unset; z-index: 2;
			width: 122px; border: 1px solid #00000040; border-radius: 5px;
			background-color: #FFFFFF; box-shadow: 0 0 4px 2px #00000040;
			display: flex; flex-wrap: wrap; overflow: hidden;
		}
		.Dropctrl {
			width: 100%; height: 35px;
		}
		.Dropctrl .Button {
			border: none !important;
		}
		.Combobox {
			padding: 5px;
			text-align: unset;
		}
		fieldset .Combobox {
			width: 200px;
		}
		.Textbox {
			width: 100%; height: 100%; border: 1px solid #00000040; border-radius: 5px; padding: 5px;
			background-color: #FFFFE8;
			color: #000000;
		}
		.Textbox.ShownAsLabel {
			border: none;
			background-color: transparent;
		}
		fieldset .Textbox {
			width: 240px;
		}
		textarea {
			resize: none;
			tab-size: 4;
		}
		.Slider {
			width: 240px;
		}

		/* Floating ctrls */
		.ScreenFilter {
			position: fixed; top: 0; left: 0;
			width: 100%; height: 100vh; height: 100dvh;
			background-color: #00000080;
		}
		.ScreenFilter.AsWindow {
			background-color: #F0F0F0E0; backdrop-filter: blur(5px);
		}
		.Window {
			z-index: 2;
			border-radius: 5px; padding: 15px;
			background-color: #F0F0F0E0; backdrop-filter: blur(5px); box-shadow: 0 0 4px 2px #00000040;
			overflow: hidden;
		}
			/* Hotkey indicators */
			.HotkeyIndicator {
				position: absolute; bottom: -9px; left: calc(50% - 12.5px); z-index: 1;
				width: 25px; height: 18px; border-radius: 5px;
				background-color: #FFFFFF; box-shadow: 0 0 4px 2px #00000040;
				font-size: 14px; text-align: center;
				display: flex; justify-content: center; align-items: center; overflow: hidden;
				pointer-events: none;
			}
			.HotkeyIndicator.TopAligned {
				top: -9px; bottom: unset;
			}
			.HotkeyIndicator.LeftAligned {
				bottom: calc(50% - 9px); left: -12.5px;
			}
			.HotkeyIndicator.RightAligned {
				bottom: calc(50% - 9px); right: -12.5px; left: unset;
			}

			/* Toast */
			#Toast {
				position: fixed; top: calc(50vh + 5px); top: calc(50dvh + 5px); left: 0; z-index: 102;
				width: 100%; height: 50px; padding: 5px 10px;
				background-color: #F0D0FFE0; backdrop-filter: blur(5px); box-shadow: 0 0 4px 2px #00000040;
				font-size: 2.00em; text-align: center;
				display: flex; justify-content: center; align-items: center; overflow: hidden;
				pointer-events: none;
			}
			#Html:has(#Topbar.Hidden) #Toast {
				top: calc(50vh - 25px); top: calc(50dvh - 25px);
			}
			#Label_Toast {
				display: flex; justify-content: center; align-items: center;
			}

			/* Dialog */
			#ScreenFilter_Dialog {
				z-index: 110;
			}
			#Window_Dialog {
				position: fixed; top: calc(50vh - 100px); top: calc(50dvh - 100px); left: calc(50% - 190px); z-index: 111;
				width: 380px; height: 200px;
				display: flex; flex-direction: column; justify-content: space-between;
			}
			#Window_Dialog .HiddenHorizontally {
				display: none;
			}
			#CtrlGroup_DialogPrompt {
				width: 100%; height: 80px;
			}
			.DialogIcon {
				width: 35px; height: 35px;
			}
			#DialogIcon_Info, #DialogIcon_Question {
				fill: #0090D0;
			}
			#DialogIcon_Caution {
				fill: #E06000;
			}
			#DialogIcon_Error {
				fill: #FF0000;
			}
			#Ctrl_DialogText {
				width: calc(100% - 35px); height: 100%; padding: 7px 5px 0 10px;
				line-height: 1.5;
				overflow: auto;
			}
			#CtrlGroup_DialogCheckboxOption {
				width: 100%; height: 35px;
			}
			#CtrlGroup_DialogCheckboxOption .Ctrl {
				width: 100%;
			}
			#CtrlGroup_DialogOptions {
				width: 100%; height: 35px;
				flex-wrap: nowrap; justify-content: end;
			}
			#CtrlGroup_DialogOptions .Ctrl {
				min-width: 100px; margin: 0 0 0 10px;
			}

			/* Watermarks */
			.Watermark {
				position: fixed; top: unset; left: unset; z-index: 121;
				color: #00000080; text-shadow: 0 0 5px #FFFFFF; font-weight: bold; text-align: center;
				display: flex; justify-content: center; align-items: center;
				pointer-events: none;
			}
			#Watermark_TestVersion {
				top: 100vh; top: 100dvh; left: 0;
				width: 100%;
			}
			#Watermark_TestVersion span {
				position: absolute; bottom: 0; left: unset;
				padding: 15px;
			}

	/* Variants */
		/* Size */
		.WidthDividedBy2 {
			width: calc((100% - 10px) / 2) !important;
		}
		.WidthDividedBy3 {
			width: calc((100% - 20px) / 3) !important;
		}
		.WidthDividedBy4 {
			width: calc((100% - 30px) / 4) !important;
		}
		.WidthDividedBy5 {
			width: calc((100% - 40px) / 5) !important;
		}
		.Width60 {
			width: 60px !important;
		}
		.Width80 {
			width: 80px !important;
		}
		.Width100 {
			width: 100px !important;
		}
		.Width120 {
			width: 120px !important;
		}
		.Width160 {
			width: 160px !important;
		}
		.Width200 {
			width: 200px !important;
		}
		.Width240 {
			width: 240px !important;
		}
		.Spin {
			animation: Anim_Spin 1000ms infinite linear;
		}
			@keyframes Anim_Spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}

		/* Background */
		.Box {
			border-radius: 5px;
			background-color: #F0F0F0E0;
			overflow: hidden;
		}
		.Active {
			background-color: #D0FFD0;
		}
		.Button.Shaped.Active .Shape {
			fill: #D0FFD0;
		}
		.Transparent {
			opacity: 0.2;
		}
		.Transparent.Less {
			opacity: 0.6;
		}
		.Blink {
			animation: Anim_Blink 1000ms infinite ease-in-out;
		}
			@keyframes Anim_Blink {
				0%, 80%, 100% {
					opacity: 1;
				}
				40%, 60% { /* .Transparent */
					opacity: 0.2;
				}
			}
		.Breathe {
			animation: Anim_Breathe 1000ms infinite ease-in-out;
		}
			@keyframes Anim_Breathe {
				0%, 100% {
					opacity: 1;
				}
				50% { /* .Transparent.Less */
					opacity: 0.6;
				}
			}
		.Shadow {
			box-shadow: 0 0 4px 2px #00000040;
		}
		.Glow {
			box-shadow: 0 0 4px 2px #8040A0;
			animation: Anim_Glow 1500ms infinite ease-in-out;
		}
			@keyframes Anim_Glow {
				0%, 100% {
					box-shadow: none;
				}
				50% {
					box-shadow: 0 0 4px 2px #8040A0;
				}
			}
		.IAmHere {
			box-shadow: 0 0 4px 2px #8040A0;
		}

		/* Foreground */
		.RedText {
			color: #E00000;
		}
		.OrangeText {
			color: #D05000;
		}
		.GreenText {
			color: #008000;
		}
		.SmallerText {
			font-size: 0.75em;
		}
		.LargerText {
			font-size: 1.25em;
		}
		.CenteredText {
			text-align: center;
		}
		.RightAlignedText {
			text-align: end;
		}
		.TableHeader {
			font-weight: bold;
		}
		.Code {
			font-family: "Iosevka", "Sarasa Mono SC", "LXGW WenKai Mono", "XHei Square Mono", "Consolas", monospace;
			white-space: pre; /* https://stackoverflow.com/a/13446005 */
		}

		/* Layout: hiding */
		.Hidden {
			height: 0 !important; border-top: none !important; border-bottom: none !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important;
			opacity: 0 !important;
			overflow: hidden !important;
			pointer-events: none !important;
		}
		#Toast.Hidden {
			top: calc(50vh + 30px); top: calc(50dvh + 30px);
		}
		#Html:has(#Topbar.Hidden) #Toast.Hidden, #Window_Dialog.Hidden {
			top: 50vh; top: 50dvh;
		}
		.HiddenHorizontally {
			width: 0 !important; border-left: none !important; border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important;
			opacity: 0 !important;
			overflow: hidden !important;
			pointer-events: none !important;
		}
		.HiddenToCorner {
			width: 0 !important; height: 0 !important; border: none !important; padding: 0 !important; margin: 0 !important;
			opacity: 0 !important;
			overflow: hidden !important;
			pointer-events: none !important;
		}
		.Faded, .ForceFaded {
			opacity: 0 !important;
			pointer-events: none !important;
		}

		/* Functionality */
		/* .NeedsTooltip {
			cursor: help;
		} */

	/* Interactions */
		/* Hover */
		a:hover, label:not(:has(:disabled:not(option))):hover, .Button:enabled:hover /* .Combobox:enabled:hover, .Textbox:enabled:hover */ {
			background-color: #F0D0FF;
		}
		.Active:enabled:hover, .Active:not(:has(:disabled:not(option))):hover {
			background-color: #B8E8B8;
		}
		.Button.Shaped:enabled:hover .Shape {
			fill: #F0D0FF;
		}
		.Button.Shaped.Active:enabled:hover .Shape {
			fill: #B8E8B8;
		}
		.Textbox.ShownAsLabel:enabled:hover, .Textbox.ShownAsLabel:focus-visible {
			background-color: #FFFFE8;
		}

		/* Click */
		a:active, label:not(:has(:disabled:not(option))):active, .Button:enabled:active,
		.Combobox:enabled:active, .Textbox:enabled:active, .Textbox.ShownAsLabel:enabled:active,
		.Active:enabled:active, .Active:not(:has(:disabled:not(option))):active {
			background-color: #8040A0;
			color: #FFFFFF;
		}
		.Button.Shaped:enabled:active .Shape, .Button.Shaped.Active:enabled:active .Shape {
			fill: #8040A0;
		}
		/* *:active {
			transition: none; // Disabled due to SVG icon incompatibility.
		} */

		/* Focus */
		*:focus-visible {
			outline: none; box-shadow: 0 0 0 2px #8040A0 !important;
		}
		.Button.Shaped:focus-visible {
			box-shadow: none !important;
		}
		.Button.Shaped:focus-visible .Shape {
			stroke: #8040A0 !important; stroke-width: 2px !important;
		}
		.Dropctrl .Button:focus-visible {
			box-shadow: 0 0 0 2px inset #8040A0 !important;
		}

		/* Disabled */
		*:disabled {
			opacity: 0.4;
		}
		*:disabled * {
			opacity: unset;
		}

		/* Text selection */
		::selection {
			background-color: #D090F0;
			color: #000000;
		}

/* Area specific */
	/* Header */
	#Topbar {
		position: fixed; top: 0; left: 0; z-index: 101;
		width: 100%; height: 60px; padding: 12.5px 15px;
		background-color: #FFFFFFE0; backdrop-filter: blur(5px); box-shadow: 0 0 4px 2px #00000040;
	}
	#Topbar .CtrlGroup {
		position: relative;
		width: 100%; height: 100%;
	}
	#Topbar .Button {
		border: none;
	}
	#Topbar .Button:not(:hover):not(:active) {
		background-color: transparent;
	}
	#Ctrl_Title {
		position: absolute; top: 0; left: 0;
		width: 35px;
	}
	#Ctrl_Title .Button {
		padding: 0;
	}
	#Ctrl_Title img {
		width: 100%; height: 100%;
	}
	#Ctrl_Nav {
		position: absolute; top: 0; left: unset;
	}
	#DropctrlGroup_Nav {
		top: 0; left: 0;
		width: 100%; border: none;
		background-color: transparent; box-shadow: none;
	}
	.Nav {
		width: 120px;
	}
	#Ctrl_NavUnderline {
		position: absolute; top: calc(100% - 2px); left: 4px;
		width: 0; height: 2px; border-radius: 1px;
		background-color: #000000;
	}
	#Ctrl_CollapseAllFieldsets {
		position: absolute; top: 0; right: 0;
		width: 35px;
	}
	#Topbar:has(#Ctrl_HomePage) #Ctrl_CollapseAllFieldsets {
		right: 35px;
	}
	#Ctrl_HomePage {
		position: absolute; top: 0; right: 0;
		width: 35px;
	}

	/* Main */
	#Main {
		padding: 60px 0 0 0;
		background-color: #E0E0E0E0;
	}
	#Html:has(#Topbar.Hidden) #Main {
		padding: 0;
	}

	/* Footer */
	footer {
		padding: 15px;
		background-color: #E0E0E0E0;
		color: #00000080; text-align: center;
		display: flex; justify-content: center; align-items: center;
	}

/* Responsive web design */
@media (max-width: 920px) {
	/* General */
		/* Basics */
			/* Group frameworks */
			.ItemGroup {
				margin: 0 -7.5px;
			}
			.Item {
				margin: 0 7.5px 15px 7.5px;
			}
			.ScrollableList {
				height: 225px;
			}

			/* Floating ctrls */
				/* Toast */
				#Toast {
					top: calc(50vh + 12.5px); top: calc(50dvh + 12.5px);
					height: 35px;
					font-size: 1.25em;
				}
				#Html:has(#Topbar.Hidden) #Toast {
					top: calc(50vh - 17.5px); top: calc(50dvh - 17.5px);
				}

	/* Area specific */
		/* Header */
		#Ctrl_Title {
			left: calc(50% - 17.5px);
		}
		#Ctrl_Nav {
			left: 0 !important;
			width: 35px !important;
		}
		#DropctrlGroup_Nav {
			width: 122px; border: 1px solid #00000040;
			background-color: #FFFFFF; box-shadow: 0 0 4px 2px #00000040;
		}
		.HiddenInMobileLayout { /* .HiddenToCorner */
			width: 0 !important; height: 0 !important; border: none !important; padding: 0 !important; margin: 0 !important;
			opacity: 0 !important;
			overflow: hidden !important;
			pointer-events: none !important;
		}
}
@media (max-width: 440px) {
	/* General */
		/* Basics */
			/* Group frameworks */
			.Prolog {
				width: 410px;
			}

			/* Texts */
			.SectionTitle {
				text-align: start;
			}
}
/* @media (min-width: 830px) { // Optimization for long fieldsets exceeding 600px height.
	// These should be configured in style.css.
} */
/* @media (max-aspect-ratio: 0.999) {
	/ General /
		/ Basics /
			/ Overall /
			#BgImage {
				background-image: url(../images/Background_Narrow.jpg);
			}
} */

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important; animation: none !important; scroll-behavior: auto !important;
	}
}

/* Dev */
#Html.TryToOptimizePerformance * {
	backdrop-filter: none !important;
	transition: unset;
}
#Html.ShowDebugOutlines * {
	outline: 1px solid #00C000;
}
#Html.ShowDebugOutlines section {
	outline: 3px dashed #000000;
}
#Html.ShowDebugOutlines .ItemGroup, #Html.ShowDebugOutlines .Viewport, #Html.ShowDebugOutlines .Window {
	outline: 3px solid #FF8080;
}
#Html.ShowDebugOutlines .Item, #Html.ShowDebugOutlines .Ctnr {
	outline: 3px dashed #FF0000;
}
#Html.ShowDebugOutlines .CtrlGroup, #Html.ShowDebugOutlines .DropctrlGroup {
	outline: 2px solid #8080FF;
}
#Html.ShowDebugOutlines .Ctrl, #Html.ShowDebugOutlines .Dropctrl {
	outline: 2px dashed #0000FF;
}
#Html.Cheat {
	font-style: oblique 15deg !important;
}