@charset "UTF-8";
html {
	scroll-behavior: smooth;
}

html > body {
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

app[name=main] {
	--window-height: 100vh;
	--navtab-padding: 6.25px;
	--navtab-width: 250px;
	--top-height: 50px;
}
app[name=main] > main {
	margin-top: var(--top-height);
	position: relative;
	top: 0;
	z-index: 0;
	width: 100%;
	min-height: calc(var(--window-height) - var(--top-height));
	background-color: var(--sys-main-bg-1);
	transition: var(--time-tst-fast) ease-out;
}
app[name=main]:not(.embedded) > main.shrink {
	transform: translateX(calc(var(--navtab-width) + var(--navtab-padding) * 2 + var(--sys-navtab-bd-thick)));
	width: calc(100% - var(--navtab-width) - var(--navtab-padding) * 2 - var(--sys-navtab-bd-thick));
}
@media only screen and (max-width: 768px) {
	app[name=main]:not(.embedded) > main.shrink {
		top: calc(var(--navtab-width) + 12.5px);
		transform: none;
		width: 100%;
	}
	app[name=main]:not(.embedded) > main.shrink ~ footer {
		transform: translateY(calc(var(--navtab-width) + 12.5px));
	}
}
app[name=main] > aside.navigator-tab {
	padding: var(--navtab-padding);
	position: fixed;
	top: var(--top-height);
	left: 0;
	transform: translateX(calc(-100% - 1.5625px));
	z-index: 10;
	width: var(--navtab-width);
	height: calc(100vh - var(--top-height) - var(--navtab-padding) * 2);
	background-color: var(--sys-navtab-bg-1);
	border-right: var(--sys-navtab-bd);
	transition: transform var(--time-tst-fast) ease-out, box-shadow var(--time-tst-xslow);
	overflow-x: hidden;
	overflow-y: auto;
}
app[name=main] > aside.navigator-tab[open] {
	transform: translateX(0);
	box-shadow: 5px 12.5px var(--shd-large) rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 768px) {
	app[name=main] > aside.navigator-tab {
		opacity: 0;
		filter: opacity(0);
		visibility: hidden;
		top: var(--top-height);
		transform: translateY(calc(-100% - 1.5625px));
		width: calc(100% - var(--navtab-padding) * 2);
		height: var(--navtab-width);
		border-right: none;
		border-bottom: var(--sys-navtab-bd);
		transition: var(--time-tst-fast) ease;
	}
	app[name=main] > aside.navigator-tab[open] {
		opacity: 1;
		filter: opacity(1);
		visibility: visible;
		transform: translateY(0);
		box-shadow: 0 5px var(--shd-large) rgba(0, 0, 0, 0.2);
	}
}
app[name=main] > header {
	position: fixed;
	top: 0;
	z-index: 20;
	width: 100%;
	height: var(--top-height);
	background-color: var(--sys-header-bg-1);
	box-shadow: 0 0 var(--sys-header-shadow-1);
	transition: var(--time-tst-xslow);
}
app[name=main] > header.shortcut {
	display: flex;
	justify-content: space-between;
}
app[name=main] > header.shortcut .section:not(:nth-child(n+2):nth-last-child(n+2)) {
	flex-shrink: 0;
}
app[name=main] > header.search, app[name=main] > header.auto {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
}
app[name=main] > header.search .section:first-child, app[name=main] > header.auto .section:first-child, app[name=main] > header.search .section:last-child, app[name=main] > header.auto .section:last-child {
	max-width: calc(100% - 2fr);
}
@media only screen and (max-width: 768px) {
	app[name=main] > header.auto {
		display: flex;
		justify-content: space-between;
	}
	app[name=main] > header.auto .section:not(:nth-child(n+2):nth-last-child(n+2)) {
		flex-shrink: 0;
	}
}
app[name=main] > header.scrolled {
	box-shadow: 0 1.25px var(--sys-header-shadow-2);
}
app[name=main] > header.safari .item.super .menu > a:hover {
	text-decoration-color: var(--sys-header-text-clr-1) !important;
}
app[name=main] > header.safari .item.super .menu.current > a:hover {
	text-decoration-color: var(--sys-header-text-clr-4) !important;
}
app[name=main] > header.safari .item.super .menu:hover .dropdown, app[name=main] > header.safari .item.super .menu > a:hover + .dropdown {
	opacity: 1;
	filter: opacity(1);
	visibility: visible;
	pointer-events: auto;
}
@media only screen and (max-width: 768px) {
	app[name=main] > header.safari .item.super .menu:hover .dropdown, app[name=main] > header.safari .item.super .menu > a:hover + .dropdown {
		transform: translate(-50%, var(--isolate-size));
	}
}
app[name=main] > header.glass {
	backdrop-filter: blur(15px);
	background-color: rgba(255, 255, 255, 0.4666666667);
}
app[name=main] > header .section {
	height: var(--top-height);
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
}
app[name=main] > header .section.reverse {
	flex-direction: row-reverse;
}
app[name=main] > header .item {
	--top-padding: 3.125px;
	min-width: var(--top-height);
	height: var(--top-height);
	max-height: var(--top-height);
	display: flex;
	transition: var(--time-tst-xfast);
	flex-shrink: 0;
}
app[name=main] > header .item > *, app[name=main] > header .item > a > * {
	display: block;
}
app[name=main] > header .item.super .menu a, app[name=main] > header .item > a {
	padding: var(--top-padding) calc(var(--top-padding) * 1.5);
	min-width: calc(var(--top-height) - var(--top-padding) * 2);
	height: calc(var(--top-height) - var(--top-padding) * 2);
	max-height: calc(var(--top-height) - var(--top-padding) * 2);
	display: flex !important;
	align-items: center;
	transition: var(--time-tst-xfast);
}
app[name=main] > header .item > a:hover {
	background-color: var(--sys-header-hov-1);
}
app[name=main] > header .item > a.current {
	background-color: var(--sys-header-act-bg-1);
	pointer-events: none;
}
app[name=main] > header .item > a * {
	overflow: hidden;
}
app[name=main] > header .item:where(.text > a.current, .super a.current, .super div.menu.current > a) > span:not(.material-symbols-rounded) {
	color: var(--sys-header-text-clr-4) !important;
	font-size: var(--sys-header-text-size-4) !important;
}
app[name=main] > header .item:where(.image, .icon, .super:where(.image, .icon) .menu) > a :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	--icon-size: 36px;
	min-width: calc(var(--top-height) - var(--top-padding) * 2);
	height: 100%;
	font-size: var(--icon-size);
	color: var(--sys-header-icon-1) !important;
	line-height: calc(var(--top-height) - var(--top-padding) * 2);
	text-align: center;
	text-decoration: none;
	transition: var(--time-tst-xfast);
	object-fit: contain;
}
app[name=main] > header .item.image > a, app[name=main] > header .item.image .menu > a, app[name=main] > header .item .image > a, app[name=main] > header .item .image .menu > a {
	text-align: center;
	text-decoration: none;
	justify-content: center;
	align-items: center;
}
app[name=main] > header .item.image > a :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item.image .menu > a :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .image > a :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .image .menu > a :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	color: var(--sys-header-icon-1);
}
app[name=main] > header .item.image > a:hover img, app[name=main] > header .item.image > a:hover :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item.image .menu > a:hover img, app[name=main] > header .item.image .menu > a:hover :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .image > a:hover img, app[name=main] > header .item .image > a:hover :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .image .menu > a:hover img, app[name=main] > header .item .image .menu > a:hover :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	color: var(--sys-header-text-clr-2) !important;
	text-decoration-color: var(--sys-header-text-clr-2);
}
app[name=main] > header .item.image > a:active img, app[name=main] > header .item.image > a:active :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item.image .menu > a:active img, app[name=main] > header .item.image .menu > a:active :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .image > a:active img, app[name=main] > header .item .image > a:active :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .image .menu > a:active img, app[name=main] > header .item .image .menu > a:active :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	transform: scale(0.95);
	color: var(--sys-header-text-clr-3) !important;
	text-decoration-color: var(--sys-header-text-clr-3);
}
app[name=main] > header .item.image > a img, app[name=main] > header .item.image .menu > a img, app[name=main] > header .item .image > a img, app[name=main] > header .item .image .menu > a img {
	min-width: calc(var(--top-height) - var(--top-padding) * 2);
	height: 100%;
	transition: var(--time-tst-xfast);
	object-fit: contain;
}
app[name=main] > header .item.image :where(a.current, .menu.current > a) :where(img, :where(i.material-icons, span.material-symbols-rounded, i.fa)), app[name=main] > header .item .image :where(a.current, .menu.current > a) :where(img, :where(i.material-icons, span.material-symbols-rounded, i.fa)) {
	color: var(--sys-header-text-clr-4) !important;
}
app[name=main] > header .item.icon > a, app[name=main] > header .item.icon.super .menu > a, app[name=main] > header .item .icon > a, app[name=main] > header .item .icon.super .menu > a {
	justify-content: center;
	align-items: center;
}
app[name=main] > header .item.icon > a :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item.icon.super .menu > a :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .icon > a :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .icon.super .menu > a :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	--icon-size: 18px;
	color: var(--sys-header-icon-1);
}
app[name=main] > header .item.icon > a.current :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item.icon.super .menu.current > a :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .icon > a.current :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .icon.super .menu.current > a :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	color: var(--sys-header-text-clr-4) !important;
	text-decoration: none;
}
app[name=main] > header .item.icon a:active :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .icon a:active :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	transform: scale(0.95);
	color: var(--sys-header-text-clr-3) !important;
	text-decoration-color: var(--sys-header-text-clr-3);
}
app[name=main] > header .item.text:where(.image, .icon, :where(.super, .super .dropdown li):where(.image, .icon) .menu) > a, app[name=main] > header .item .text:where(.image, .icon, :where(.super, .super .dropdown li):where(.image, .icon) .menu) > a {
	padding-right: calc(var(--top-padding) * 3);
}
app[name=main] > header .item.text:where(.image, .icon, :where(.super, .super .dropdown li):where(.image, .icon) .menu) > a:where(:link, :visited) :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item .text:where(.image, .icon, :where(.super, .super .dropdown li):where(.image, .icon) .menu) > a:where(:link, :visited) :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	padding: 0 2.5px;
	min-width: calc(var(--top-height) / 2 - var(--top-padding));
	text-align: right;
}
@media only screen and (max-width: 768px) {
	app[name=main] > header .item.text:where(.image, .icon, :where(.super, .super .dropdown li):where(.image, .icon) .menu) > a, app[name=main] > header .item .text:where(.image, .icon, :where(.super, .super .dropdown li):where(.image, .icon) .menu) > a {
		padding-right: calc(var(--top-padding) * 2);
	}
}
app[name=main] > header .item.text a span:not(.material-symbols-rounded), app[name=main] > header .item .text a span:not(.material-symbols-rounded) {
	padding: 0 5px;
	font-size: var(--sys-header-text-size-1);
	font-family: var(--sys-header-text-font);
	color: var(--sys-header-text-clr-1);
	text-decoration: none;
	white-space: nowrap;
	text-decoration-color: var(--sys-header-text-clr-1);
	transition: calc(var(--time-tst-fast) * 3 / 10);
}
@media only screen and (max-width: 768px) {
	app[name=main] > header .item.text a span:not(.material-symbols-rounded), app[name=main] > header .item .text a span:not(.material-symbols-rounded) {
		font-size: 12.5px;
	}
}
app[name=main] > header .item.text > a:hover span:not(.material-symbols-rounded), app[name=main] > header .item.text .dropdown a:hover span:not(.material-symbols-rounded), app[name=main] > header .item .text > a:hover span:not(.material-symbols-rounded), app[name=main] > header .item .text .dropdown a:hover span:not(.material-symbols-rounded) {
	color: var(--sys-header-text-clr-2);
	font-size: var(--sys-header-text-size-2);
	text-decoration-color: var(--sys-header-text-clr-2);
}
app[name=main] > header .item.text > a:active span:not(.material-symbols-rounded), app[name=main] > header .item.text .dropdown a:active span:not(.material-symbols-rounded), app[name=main] > header .item .text > a:active span:not(.material-symbols-rounded), app[name=main] > header .item .text .dropdown a:active span:not(.material-symbols-rounded) {
	color: var(--sys-header-text-clr-3) !important;
	font-size: var(--sys-header-text-size-3);
	text-decoration-color: var(--sys-header-text-clr-3);
}
app[name=main] > header .item.super {
	--border-rad: 5px;
}
app[name=main] > header .item.super.icon .dropdown a :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	line-height: calc((var(--top-height) - var(--top-padding) * 2) * 0.75);
}
app[name=main] > header .item.super .menu {
	--isolate-size: 10px;
}
app[name=main] > header .item.super .menu:where(:focus-within, :active) > a {
	text-decoration-color: var(--sys-header-text-clr-1);
}
app[name=main] > header .item.super .menu:focus-within .dropdown, app[name=main] > header .item.super .menu:active .dropdown, app[name=main] > header .item.super .menu > a:focus + .dropdown {
	opacity: 1;
	filter: opacity(1);
	visibility: visible;
	pointer-events: auto;
}
@media only screen and (max-width: 768px) {
	app[name=main] > header .item.super .menu:focus-within .dropdown, app[name=main] > header .item.super .menu:active .dropdown, app[name=main] > header .item.super .menu > a:focus + .dropdown {
		transform: translate(-50%, var(--isolate-size));
	}
}
app[name=main] > header .item.super .menu.current > a:where(:focus, :active) :where(i.material-icons, span.material-symbols-rounded, i.fa), app[name=main] > header .item.super .menu.current:focus-within > a :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	text-decoration-color: var(--sys-header-text-clr-4) !important;
}
app[name=main] > header .item.super .menu > a {
	text-decoration: underline;
	text-decoration-color: transparent;
}
app[name=main] > header .item.super .menu > a:focus {
	text-decoration-color: var(--sys-header-text-clr-1);
}
app[name=main] > header .item.super .menu > a:active {
	text-decoration-color: var(--sys-header-text-clr-3);
}
app[name=main] > header .item.super .menu > a:has(+ .dropdown:hover) {
	background-color: var(--fade-black-8);
}
app[name=main] > header .item.super .menu:where(.right, .corner) .dropdown {
	right: 0;
	border-radius: 0 0 0 var(--border-rad);
}
@media only screen and (max-width: 768px) {
	app[name=main] > header .item.super .menu:where(.right, .corner) .dropdown {
		border-radius: var(--border-rad);
	}
}
app[name=main] > header .item.super .menu a:hover {
	background-color: var(--sys-header-hov-1);
}
app[name=main] > header .item.super .dropdown {
	opacity: 0;
	filter: opacity(0);
	visibility: hidden;
	margin: 0;
	padding: 0;
	position: absolute;
	min-width: calc(var(--top-height) - var(--top-padding) * 2);
	max-width: calc(100vw - var(--isolate-size) * 2);
	background-color: var(--sys-header-bg-1);
	box-shadow: 0 0 var(--sys-header-shadow-1);
	border-radius: 0 0 var(--border-rad) var(--border-rad);
	list-style-type: none;
	transition: var(--time-tst-fast);
	pointer-events: none;
}
app[name=main] > header .item.super .dropdown.form {
	padding: 10px;
	min-width: unset;
}
app[name=main] > header .item.super .dropdown li {
	--menu-height: calc((var(--top-height) - var(--top-padding) * 2) * .8);
	height: var(--menu-height);
	max-height: var(--top-height);
}
app[name=main] > header .item.super .dropdown li > a {
	width: calc(100% - var(--top-padding) * 3);
	height: calc(100% - var(--top-padding) * 2);
	text-decoration: none;
	display: block;
}
app[name=main] > header .item.super .dropdown li > a.current {
	background-color: var(--sys-header-act-bg-1);
	pointer-events: none;
}
app[name=main] > header .item.super .dropdown li > a.title {
	padding: var(--top-padding) calc(var(--top-padding) * 2);
	font-weight: 500;
	justify-content: center;
	pointer-events: none;
}
app[name=main] > header .item.super .dropdown li > a.title:before, app[name=main] > header .item.super .dropdown li > a.title:after {
	content: "—";
	display: inline-flex;
	align-items: center;
}
app[name=main] > header .item.super .dropdown li > a span:not(.material-symbols-rounded) {
	color: var(--sys-header-text-clr-1);
	line-height: calc(var(--menu-height) - var(--top-padding));
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
app[name=main] > header .item.super .dropdown li > a :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	color: var(--sys-header-icon-1);
}
@media only screen and (max-width: 768px) {
	app[name=main] > header .item.super .dropdown li > a {
		justify-content: center;
	}
}
app[name=main] > header .item.super .dropdown > hr {
	margin: 2.5px 5px;
	border: 1px solid var(--sys-header-dd-sep);
	border-bottom: none;
}
@media only screen and (max-width: 768px) {
	app[name=main] > header .item.super .dropdown {
		left: 50%;
		right: initial;
		transform: translateX(-50%);
		box-shadow: 0 1.25px var(--sys-header-shadow-2);
		border-radius: 5px;
	}
	app[name=main] > header .item.super .dropdown:not(.form) {
		min-width: 30vw;
	}
}
@media only screen and (max-width: 768px) {
	app[name=main] > header .item a > .minimizable {
		display: none;
	}
}
app[name=main] > header .item [name=menu] {
	--top-padding: 6.25px;
}
app[name=main] > header .item [name=menu] .hamburger {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	transition: var(--time-tst-fast) var(--time-tst-medium);
}
app[name=main] > header .item [name=menu] .hamburger[open] {
	transform: rotate(-90deg);
}
app[name=main] > header .item [name=menu] .hamburger[open] .bar:nth-child(1) {
	transform: translate(-50%, 180%) rotate(45deg);
}
app[name=main] > header .item [name=menu] .hamburger[open] .bar:nth-child(2) {
	opacity: 0;
	filter: opacity(0);
	visibility: hidden;
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
	border: none;
}
app[name=main] > header .item [name=menu] .hamburger[open] .bar:nth-child(3) {
	transform: translate(-50%, -180%) rotate(-405deg);
}
app[name=main] > header .item [name=menu] .hamburger .bar {
	--top-menubar-height: calc((var(--top-height) - var(--top-padding) * 2) / 7);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: calc(var(--top-height) - var(--top-padding) * 3);
	height: var(--top-menubar-height);
	border-radius: calc(var(--top-menubar-height) / 2);
	background: var(--sys-navtab-btn-bg-1);
	display: block;
	transition: var(--time-tst-medium) ease-in-out;
}
@media only screen and (max-width: 768px) {
	app[name=main] > header .item [name=menu] .hamburger {
		transform: rotate(180deg);
	}
	app[name=main] > header .item [name=menu] .hamburger.open, app[name=main] > header .item [name=menu] .hamburger[open] {
		transform: rotate(270deg);
	}
	app[name=main] > header .item [name=menu] .hamburger.open .bar:nth-child(1), app[name=main] > header .item [name=menu] .hamburger[open] .bar:nth-child(1) {
		transform: translate(-50%, 180%) rotate(405deg);
	}
	app[name=main] > header .item [name=menu] .hamburger.open .bar:nth-child(3), app[name=main] > header .item [name=menu] .hamburger[open] .bar:nth-child(3) {
		transform: translate(-50%, -180%) rotate(-45deg);
	}
}
app[name=main] > header .item [name=menu]:hover .hamburger .bar {
	background: var(--sys-navtab-btn-bg-2);
}
app[name=main] > header .item [name=logo] {
	text-decoration: none !important;
}
app[name=main] > header .item [name=settings] > a {
	text-decoration: none !important;
}
app[name=main] > header .item [name=settings] > a > :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	transition: all var(--time-tst-xfast), transform var(--time-tst-fast) ease;
}
app[name=main] > header .item [name=settings]:focus-within > a > :where(i.material-icons, span.material-symbols-rounded, i.fa) {
	transform: rotate(90deg);
}
app[name=main] > footer {
	position: relative;
	z-index: 30;
	width: 100%;
	min-height: 50px;
	background-color: var(--sys-footer-bg-1);
	transition: var(--time-tst-medium) ease;
}
app[name=main] > header.scrolled ~ footer {
	box-shadow: 0 0 var(--shd-large) var(--fade-black-7);
}
app[name=main] > .modal {
	--bh: 30px;
	padding: 15px;
	position: fixed;
	left: 50%;
	z-index: 40;
	min-width: 270px;
	max-width: 90vw;
	max-height: 80vh;
	box-shadow: 0 0 var(--shd-big) var(--fade-black-7);
	background-color: rgba(224, 224, 224, 0.6666666667);
	backdrop-filter: blur(10px);
	display: none;
}
app[name=main] > .modal.stressed-1 {
	box-shadow: 0 0 var(--shd-pan) var(--fade-black-5);
}
app[name=main] > .modal.stressed-2 {
	box-shadow: 0 0 var(--shd-pan) var(--fade-black-5), 0 0 var(--shd-small) var(--clr-gg-red-100);
}
app[name=main] > .modal.stressed-3 {
	box-shadow: 0 0 250px 100px var(--fade-black-4);
}
app[name=main] > .modal.stressed-4 {
	box-shadow: 0 0 var(--shd-pan) var(--fade-black-5), 0 0 300px var(--clr-gg-red-500);
}
app[name=main] > .modal.top {
	top: 0;
	transform: translate(-50%, calc(-100% - 25px));
	border-radius: 0 0 25px 25px;
}
app[name=main] > .modal.bottom {
	bottom: 0;
	transform: translate(-50%, calc(100% + 25px));
	border-radius: 25px 25px 0 0;
}
app[name=main] > .modal[open] {
	transform: translate(-50%, 0);
	display: block;
}
app[name=main] > .modal[open].top {
	animation: display_modal_top var(--time-tst-slow) linear;
}
app[name=main] > .modal[open].bottom {
	animation: display_modal_bottom var(--time-tst-slow) linear;
}
app[name=main] > .modal > .head button {
	position: relative;
	left: calc(100% - 20px);
}
app[name=main] > .modal > .body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
app[name=main] > .modal > .body .action {
	min-height: calc(var(--bh) + 7.5px);
	display: flex;
	justify-content: space-between;
}
app[name=main] > .modal > .body .action-group {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}
app[name=main] > .modal > .body .text {
	margin: 0;
	font-size: 15px;
	font-family: "Sarabun", sans-serif;
	font-weight: bold;
}
app[name=main] > .modal > .body .form input {
	margin: 0 6.25px;
	padding: 2.5px 5px;
	width: calc(100% - 10px - 12.5px - 2.5px);
	height: 20px;
	border-radius: 2.5px;
	border: 1.25px solid var(--clr-gg-blue-700);
	font-size: 15px;
	font-family: "Sarabun", sans-serif;
	transition: var(--time-tst-medium);
}
app[name=main] > .modal > .body .form input:focus {
	box-shadow: 0 0 var(--shd-big) var(--clr-gg-blue-100);
}
@keyframes display_modal_top {
	from {
		transform: translate(-50%, calc(-100% - 25px));
	}
	to {
		transform: translate(-50%, 0);
	}
}
@keyframes display_modal_bottom {
	from {
		transform: translate(-50%, calc(100% + 25px));
	}
	to {
		transform: translate(-50%, 0);
	}
}
app[name=main] > .back-to-top {
	position: fixed;
	bottom: 25px;
	right: 25px;
	z-index: 50;
	width: 35px;
	height: 35px;
	background-color: rgba(245, 245, 245, 0.6);
	backdrop-filter: blur(7.5px);
	border-radius: 50%;
	border: 0.25px solid var(--clr-gg-grey-300);
	box-shadow: 0 0 var(--shd-little) var(--fade-black-7);
	overflow: hidden;
	display: none;
}
app[name=main] > .back-to-top.over {
	display: flex !important;
}
app[name=main] > .lightbox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 60;
	width: 100vw;
	height: 100vh;
	display: flex;
	pointer-events: none;
}
app[name=main] > .lightbox[open] {
	pointer-events: auto;
}
app[name=main] > .lightbox[open] > .lb-box {
	opacity: 1;
	filter: opacity(1);
	visibility: visible;
}
app[name=main] > .lightbox[open].pos-top > .lb-box {
	top: 25px;
	animation: fly_in_top var(--time-tst-medium) 1 linear;
}
app[name=main] > .lightbox[open].pos-center > .lb-box {
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	animation: fly_in_mid var(--time-tst-medium) 1 linear;
}
app[name=main] > .lightbox[open].pos-bottom > .lb-box {
	bottom: 25px;
	animation: fly_in_btm var(--time-tst-medium) 1 linear;
}
app[name=main] > .lightbox[open] .bg-fade-dark {
	opacity: 1;
	filter: opacity(1);
	visibility: visible;
}
app[name=main] > .lightbox.close.pos-top > .lb-box {
	top: 0;
	animation: fly_out_top var(--time-tst-fast) 1 linear;
}
app[name=main] > .lightbox.close.pos-center > .lb-box {
	top: 50%;
	transform: translate(-50%, -50%) scale(0);
	animation: fly_out_mid var(--time-tst-fast) 1 linear;
}
app[name=main] > .lightbox.close.pos-bottom > .lb-box {
	bottom: 0;
	animation: fly_out_btm var(--time-tst-fast) 1 linear;
}
app[name=main] > .lightbox .bg-fade-dark {
	opacity: 0;
	filter: opacity(0);
	visibility: hidden;
	position: absolute;
	place-self: normal;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(7.5px);
	transition: var(--time-tst-slow);
}
app[name=main] > .lightbox .lb-box {
	opacity: 0;
	filter: opacity(0);
	visibility: hidden;
	padding: 0 5px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	min-width: 300px;
	min-height: 100px;
	max-width: 97.5%;
	max-height: calc(var(--window-height) - var(--top-height) - 50px);
	background-color: var(--clr-gg-grey-100);
	border-radius: 5px;
	border: 2.5px solid var(--clr-gg-grey-300);
	overflow: hidden;
	animation-delay: var(--time-tst-xfast);
}
app[name=main] > .lightbox .lb-box:has(.page-frame:has(iframe)) {
	background-color: var(--sys-main-bg-1);
}
app[name=main] > .lightbox .lb-box > .head {
	height: 35px;
	border-bottom: 1px solid #555;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
app[name=main] > .lightbox .lb-box > .head .text {
	margin: 0;
	padding-left: 5px;
	max-width: calc(100% - 26px);
	vertical-align: top;
	font-size: 18.75px;
	line-height: 25px;
	font-family: "Sarabun";
	font-weight: bold;
	white-space: nowrap;
}
app[name=main] > .lightbox .lb-box > .head button {
	line-height: 0.1;
}
app[name=main] > .lightbox .lb-box > .body {
	margin: 5px 0;
	max-height: calc(var(--window-height) - 100px - 31px - 10px);
}
app[name=main] > .lightbox .lb-box > .body > .page-frame {
	width: 90vw;
	max-width: 100%;
	height: 80vh;
	max-height: 100%;
	overflow: hidden;
}
app[name=main] > .lightbox .lb-box > .body > .page-frame > iframe {
	width: 100%;
	height: 100%;
	border: none;
}
@keyframes fly_in_top {
	from {
		top: 0;
	}
	to {
		top: 25px;
	}
}
@keyframes fly_in_mid {
	from {
		top: 50%;
		transform: translate(-50%, -50%) scale(0);
	}
	to {
		top: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
}
@keyframes fly_in_btm {
	from {
		bottom: 0;
	}
	to {
		bottom: 25px;
	}
}
@keyframes fly_out_top {
	from {
		top: 25px;
	}
	to {
		top: 0;
	}
}
@keyframes fly_out_mid {
	from {
		top: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	to {
		top: 50%;
		transform: translate(-50%, -50%) scale(0);
	}
}
@keyframes fly_out_btm {
	from {
		bottom: 25px;
	}
	to {
		bottom: 0;
	}
}
app[name=main] > .notifications {
	padding: 2.5px 0;
	position: fixed;
	top: calc(var(--top-height) + 4.375px);
	right: 5px;
	z-index: 70;
	width: 30%;
	max-height: calc(100vh - var(--top-height) - 20px);
	overflow: visible;
	overflow-y: auto;
	transition: var(--time-tst-xslow);
}
app[name=main] > .notifications:empty {
	pointer-events: none;
}
app[name=main] > .notifications .msg {
	margin: 7.5px 0;
	padding: 5px;
	position: relative;
	left: 50%;
	transform: translateY(0%);
	width: calc(100% - 25px);
	min-height: 60px;
	border-radius: 5px;
	border: 0.25px solid var(--clr-gg-grey-500);
	box-shadow: 0 0 var(--shd-little) var(--fade-black-7);
	backdrop-filter: blur(2.5px);
	display: flex;
	gap: 5px;
	overflow: hidden;
	animation: new_notification calc(var(--time-tst-fast) / 0.75) ease-in-out 1;
	animation-fill-mode: forwards;
}
app[name=main] > .notifications .msg.closed {
	animation: old_notification var(--time-tst-medium) linear 1;
	animation-fill-mode: forwards;
	pointer-events: none;
}
app[name=main] > .notifications .msg.done {
	background-color: rgba(99, 235, 40, 0.7490196078);
	--contrast-color: #257602BF;
}
app[name=main] > .notifications .msg.info {
	background-color: rgba(84, 219, 249, 0.7490196078);
	--contrast-color: #067791BF;
}
app[name=main] > .notifications .msg.warn {
	background-color: rgba(253, 235, 69, 0.7019607843);
	--contrast-color: #786D05BF;
}
app[name=main] > .notifications .msg.error {
	background-color: rgba(225, 150, 150, 0.8);
	--contrast-color: #8C0909BF;
}
app[name=main] > .notifications .msg .overlay {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 5px;
}
app[name=main] > .notifications .msg .overlay img {
	width: 25px;
	height: 25px;
	object-fit: fill;
}
app[name=main] > .notifications .msg .content {
	font-family: var(--font-sarabun), sans-serif;
	font-size: 22.5px;
	line-height: 25px;
	word-wrap: normal;
}
app[name=main] > .notifications .msg .time-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2.5px;
}
app[name=main] > .notifications .msg .time-left {
	position: absolute;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: var(--contrast-color);
	display: block;
}
@keyframes new_notification {
	from {
		transform: translateX(calc(100% + 25px));
	}
	to {
		transform: translateX(-50%);
	}
}
@keyframes old_notification {
	from {
		transform: translateX(-50%);
		opacity: 1;
	}
	to {
		transform: translateX(calc(50% + 25px));
		opacity: 0;
	}
}
@media only screen and (max-width: 768px) {
	app[name=main] > .notifications {
		width: 225px;
	}
}
app[name=main] > .lightbox[open] ~ .notifications {
	top: 1.875px;
	max-height: calc(100vh - 30px);
}
app[name=main] > .helping-tools {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 80;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
}
app[name=main] > .context-menu {
	position: fixed;
	z-index: 90;
	width: 250px;
	max-width: calc(100vw - 7px);
	height: 0;
	max-height: calc(100vh - 7px);
	background-color: var(--fade-white-4);
	backdrop-filter: blur(15px);
	border: 0 solid var(--fade-black-5);
	border-radius: 5px;
	overflow: hidden;
}
app[name=main] > .context-menu[open] {
	box-shadow: 1.25px 1.25px 10px 2.5px var(--fade-black-7);
}
app[name=main] > .context-menu ul {
	margin: 0;
	padding: 0;
}
app[name=main] > .context-menu ul:not(:last-child) {
	margin-bottom: 2.5px;
}
app[name=main] > .context-menu ul:not(:last-child)::after {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0.5px);
	width: 97.5%;
	height: 1px;
	box-shadow: 0 0 2.5px var(--fade-black-2) inset;
	content: "";
}
app[name=main] > .context-menu li {
	padding: 1.25px 5px;
	width: calc(100% - 10px);
	height: 25px;
	list-style-type: none;
	transition: var(--time-tst-ffast);
}
app[name=main] > .context-menu li:hover {
	background-color: var(--fade-black-7);
}
app[name=main] > .context-menu li i {
	width: 25px;
	height: 25px;
	font-size: 21px;
	line-height: 25px;
	text-align: center;
	color: var(--clr-main-black-absolute);
	text-decoration: none;
}
app[name=main] > .context-menu li span {
	position: absolute;
	left: 35px;
	max-width: calc(100% - 25px - 5px);
	font-size: 15px;
	line-height: 25px;
	font-family: "Kanit", sans-serif;
	cursor: context-menu;
}
app[name=main].embedded {
	--top-height: 0;
}
app[name=main].embedded > header, app[name=main].embedded > aside.navigator-tab {
	display: none;
}
app[name=main].embedded > main {
	margin-top: 0;
	min-height: var(--window-height);
}
app[name=main].embedded > .notifications, app[name=main].embedded > .lightbox[open] ~ .notifications {
	top: 1.875px;
	max-height: calc(100vh - 30px);
}
@media only print {
	app[name=main] > header {
		position: absolute;
	}
	app[name=main] > main {
		background: transparent;
	}
	app[name=main] > .context-menu, app[name=main] > .back-to-top, app[name=main] > footer {
		display: none !important;
	}
}

/*# sourceMappingURL=map/appstyle.css.map */
