@import url("../material/font/fa-brands-400.ttf");
@import url("../material/font/fa-brands-400.woff2");
@import url("../material/font/fa-regular-400.ttf");
@import url("../material/font/fa-regular-400.woff2");
@import url("../material/font/fa-solid-900.ttf");
@import url("../material/font/fa-solid-900.woff2");
@import url("../material/font/fa-v4compatibility.ttf");
@import url("../material/font/fa-v4compatibility.woff2");
@import url("icon.css");
@import url("flag.css");

body{
	font-family: "Consolas";
	width: 100vw;
	height: 100vh;
	padding: 0px;
	margin: 0px;
	overflow: hidden auto;
}

h1,h2,h3,h4,h5,h6{
	margin: 0px;
	color: white;
}

hr{
	border-top: 1px var(--stgray-400) solid;
	width: 100%;
	margin: 10px 0px;
}

table{
	border-collapse: collapse;
	width: 100%;
	color: white;
}

.grid{
	display: grid;
	grid-template-columns: repeat(100,1fr);
	grid-template-rows: repeat(20,1fr);
	grid-auto-rows: 5%;
}

.logo{
	height: 60px;
}

.maintitle{
	color: var(--stgray-900);
	font-size: 40px;
	font-weight: bold;
	text-align: center;
}

.navigationbar{
	border: 1px var(--navbar-border-color) solid;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 75px;
	color: var(--navbar-color);
	background: var(--navbar-background);
	backdrop-filter: blur(30px);
	box-shadow: 0 8px 32px 0 var(--navbar-boxshadow-color);
	z-index: 600;
}

.navigationbar2{
	position: fixed;
	top: 75px;
	left: 0px;
	width: 100%;
	height: 50px;
	color: var(--navbar-color);
	background: var(--navbar-background);
	backdrop-filter: blur(20px);
	box-shadow: 0 8px 32px 0 var(--navbar-boxshadow-color);
	z-index: 600;
}

.navigationbarleft{
	max-width: 90%;
	margin: 0px 10px;
	display: flex;
	align-items: center;
	justify-content: left;
}

.navigationbar:has(>.navigationbarleft){
	display: flex;
	align-items: center;
	justify-content: left;
}

.navigationbar:has(>.navigationbarright){
	display: flex;
	align-items: center;
	justify-content: right;
}

.navigationbar:has(>.navigationbarleft):has(>.navigationbarright){
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navigationbarright{
	max-width: 90%;
	margin: 0px 10px;
	display: flex;
	align-items: center;
	justify-content: right;
}

.navigationbartitle{
	font-size: 45px;
	font-weight: bold;
	margin-top: 5px;
}

.navigationbarbutton{
	border: 1px var(--navbar-color) solid;
	background: none;
	width: 150px;
	height: 50px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: var(--navbar-color);
	padding: 10px;
	margin: 0px 10px;
	transition-duration: 0.5s;

	&:hover{
		background: var(--stgray-300);
		color: var(--navbar-color);
	}

	&:active{
		box-shadow: 0px 10px 30px 0 rgba(77,77,77,0.68);
	}
}

.navigationbarselect{
	background: var(--navbar-reverse-color);
	color: var(--navbar-color);
}

.center{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.xcenter{
	position: relative;
	top: 0px;
	left: 50%;
	transform: translate(-50%,0%);
}

.ycenter{
	position: relative;
	top: 50%;
	left: 0px;
	transform: translate(0%,-50%);
}

.inputhint{
	width: 23%;
	display: inline-block;
	word-break: normal;
	word-wrap: break-word;
}

.checkbox{
    user-select: none;
    cursor: pointer;
}

.checkbox checkbox{
	width: 20px;
	height: 20px;
}

.bluebutton{
	box-shadow: inset 1px -3px 7px 0px #29bbff;
	background: #2dabf9 linear-gradient(to bottom,#2dabf9 5%,#0688fa 100%);
	border-radius: 5px;
	border: 1px solid #0b0e07;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	margin: 5px 0px;
	padding: 10px 20px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #263666;

	&:hover{
		background: #0688fa linear-gradient(to bottom,#0688fa 5%,#2dabf9 100%);
	}

	&:active{
		position: relative;
		top: 1px;
	}
}


.reflashbutton{
	margin-top: 20px;
	padding: 5px;
	background: rgb(215,164,61);
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	width: 100%;
	height: 40px;
	font-size: 20px;
	font-weight: bold;
	transition-duration: 0.5s;
}

.reflashbutton:hover{
	background: rgb(255,213,128);
	color: black;
}

.selectbutton{
	background: rgba(35,35,35,0.75);
	color: white;
}

/* .footer{
	position: relative;
	top: 10px;
	width: 100%;
	background: rgb(25,25,25);
	padding: 5px 10px;
} */

.a{
	text-decoration: none;
	color: var(--stgray-700);
	font-weight: bold;
	cursor: pointer;
}

.a:hover{
	text-decoration: underline;
}

.disabled:hover{
	background: revert;
	color: revert;
}

.primarytext{
	font-size: 40px;
	color: transparent;
	font-weight: bold;
}

.secondarytext{
	font-size: 30px;
	color: white;
}

.text{
	font-size: 20px;
}

.highlight{
	font-weight: bold;
	color: yellow;
	display: inline-block;
}

.iconinputdiv{
	border-bottom: 1px black solid;
	padding: 0px 5px;
	margin: 20px 0px;
	display: flex;
	align-items: end;
	justify-content: center;
}

.iconinputtext{
	width: 15%;
	font-size: 25px;
	text-align: left;
	margin-bottom: 5px;
}

.iconiinputinput{
	border: none;
	font-size: 25px;
	width: 75%;
}

.iconinputicondiv{
	width: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iconinputicon{
	width: 90%;
	margin-bottom: 5px;
}

.cursor-pointer{
	cursor: pointer;
}

/* ================================================================================================================================================================== */

html{
    --stwhite: #fff;
    --stblack: #333;

    --staccent-color: unset;
    --staccent-foreground-color: var(--stwhite);

    --stbreakpoint-mobile-min: 0px;
    --stbreakpoint-mobile-max: 767.98px;
    --stbreakpoint-tablet-min: 768px;
    --stbreakpoint-tablet-max: 1023.98px;
    --stbreakpoint-desktop-min: 1024px;
    --stbreakpoint-desktop-max: 1279.98px;
    --stbreakpoint-widescreen-min: 1280px;
    --stbreakpoint-widescreen-max: 9999px;

	--stlight-gray-50: rgb(255,255,255);
	--stlight-gray-75: rgb(250,250,250);
	--stlight-gray-100: rgb(242,242,242);
	--stlight-gray-200: rgb(238,238,238);
	--stlight-gray-300: rgb(225,225,225);
	--stlight-gray-400: rgb(215,215,215);
	--stlight-gray-450: rgb(145,145,145);
	--stlight-gray-500: rgb(118,118,118);
	--stlight-gray-600: rgb(90,90,90);
	--stlight-gray-700: rgb(70,70,70);
	--stlight-gray-800: rgb(55,55,55);
	--stlight-gray-900: rgb(35,35,35);

	--stdark-gray-50: rgb(15,15,17);
	--stdark-gray-75: rgb(35,35,35);
	--stdark-gray-100: rgb(42,42,42);
	--stdark-gray-200: rgb(47,47,47);
	--stdark-gray-300: rgb(62,62,62);
	--stdark-gray-400: rgb(80,80,80);
	--stdark-gray-450: rgb(110,110,110);
	--stdark-gray-500: rgb(180,180,180);
	--stdark-gray-600: rgb(220,220,220);
	--stdark-gray-700: rgb(245,245,245);
	--stdark-gray-800: rgb(250,250,250);
	--stdark-gray-900: rgb(255,255,255);

    --ststatic-gray-50: var(--stlight-gray-50);
    --ststatic-gray-75: var(--stlight-gray-75);
    --ststatic-gray-100: var(--stlight-gray-100);
    --ststatic-gray-200: var(--stlight-gray-200);
    --ststatic-gray-300: var(--stlight-gray-300);
    --ststatic-gray-400: var(--stlight-gray-400);
    --ststatic-gray-500: var(--stlight-gray-500);
    --ststatic-gray-600: var(--stlight-gray-600);
    --ststatic-gray-700: var(--stlight-gray-700);
    --ststatic-gray-800: var(--stlight-gray-800);
    --ststatic-gray-900: var(--stlight-gray-900);

    --ststatic-primary-400: #40a9ff;
    --ststatic-primary-500: #1890ff;
    --ststatic-primary-600: #096dd9;
    --ststatic-primary-700: #0050b3;
    --ststatic-primary-800: #003a8c;
    --ststatic-primary-900: #002766;

    --ststatic-warn-400: #ffec3d;
    --ststatic-warn-500: #fadb14;
    --ststatic-warn-600: #d4b106;
    --ststatic-warn-700: #ad8b00;
    --ststatic-warn-800: #876800;
    --ststatic-warn-900: #614700;

    --ststatic-success-400: #73d13d;
    --ststatic-success-500: #52c41a;
    --ststatic-success-600: #389e0d;
    --ststatic-success-700: #237804;
    --ststatic-success-800: #135200;
    --ststatic-success-900: #092b00;

    --ststatic-error-400: #ff4d4f;
    --ststatic-error-500: #f5222d;
    --ststatic-error-600: #cf1322;
    --ststatic-error-700: #a8071a;
    --ststatic-error-800: #820014;
    --ststatic-error-900: #5c0011;

    --stprimary-400: #40a9ff;
    --stprimary-500: #1890ff;
    --stprimary-600: #096dd9;
    --stprimary-700: #0050b3;
    --stprimary-800: #003a8c;
    --stprimary-900: #002766;

    --stlink-700: #0050b3;

    --stwarn-400: #ffec3d;
    --stwarn-500: #fadb14;
    --stwarn-600: #d4b106;
    --stwarn-700: #ad8b00;
    --stwarn-800: #876800;
    --stwarn-900: #614700;

    --stsuccess-400: #73d13d;
    --stsuccess-500: #52c41a;
    --stsuccess-600: #389e0d;
    --stsuccess-700: #237804;
    --stsuccess-800: #135200;
    --stsuccess-900: #092b00;

    --sterror-400: #ff4d4f;
    --sterror-500: #f5222d;
    --sterror-600: #cf1322;
    --sterror-700: #a8071a;
    --sterror-800: #820014;
    --sterror-900: #5c0011;

    --stz-drawer: 102;
    --stz-dropdown: 103;
    --stz-mask: 101;
    --stz-modal: 102;
    --stz-tooltip: 104;

    --stborder-radius-container: 0.4rem;
    --stborder-radius-element: 0.4rem;
    --stborder-radius-secondary: 0.3rem;

    --stpage-background-default: var(--stgray-50);
    --stpage-background-secondary: var(--stgray-75);
    --stpage-background-tertiary: var(--stgray-100);

    --stelevated-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    --stelevated-shadow-modal: 0 0 20px rgba(0, 0, 0, 0.1);
    --stelevated-shadow-drawer: 0 0 20px rgba(0, 0, 0, 0.1);

	--staccent-color: #5c79ff;

	--navbar-border-color-light: white;
	--navbar-border-color-dark: rgb(49,53,53);
	--navbar-color-light: black;
	--navbar-color-dark: white;
	--navbar-background-light: rgba(238,238,238,0.95);
	--navbar-background-dark: rgba(50, 50, 50, 0.95);
	--navbar-boxshadow-color-light: rgba(70,70,70,0.1);
	--navbar-boxshadow-color-dark: rgba(70,70,70,0.1);

	--rangeslider-color-light: rgb(51,51,51);
	--rangeslider-border-color-light: black;
	--rangeslider-color-dark: rgb(235,235,235);
	--rangeslider-border-color-dark: white;

    --stinput-height-large: 42px;
    --stinput-height-large-dense: 37px;
    --stinput-height-medium: 37px;
    --stinput-height-medium-dense: 32px;
    --stinput-height-small: 32px;
    --stinput-height-small-dense: 32px;

    --stfont-size-mini: calc(12 / 15 * 1rem);
    --stfont-size-tiny: calc(13 / 15 * 1rem);
    --stfont-size-small: calc(14 / 15 * 1rem);
    --stfont-size-medium: calc(15 / 15 * 1rem);
    --stfont-size-large: calc(18 / 15 * 1rem);
    --stfont-size-big: calc(20 / 15 * 1rem);
    --stfont-size-huge: calc(24 / 15 * 1rem);
    --stfont-size-massive: calc(30 / 15 * 1rem);

    --stfont-size-12px: calc(12 / 15 * 1rem);
    --stfont-size-13px: calc(13 / 15 * 1rem);
    --stfont-size-14px: calc(14 / 15 * 1rem);
    --stfont-size-15px: calc(15 / 15 * 1rem);
    --stfont-size-16px: calc(16 / 15 * 1rem);
    --stfont-size-17px: calc(17 / 15 * 1rem);
    --stfont-size-18px: calc(18 / 15 * 1rem);
    --stfont-size-20px: calc(20 / 15 * 1rem);
    --stfont-size-24px: calc(24 / 15 * 1rem);
    --stfont-size-25px: calc(25 / 15 * 1rem);
    --stfont-size-30px: calc(30 / 15 * 1rem);
    --stfont-size-33px: calc(33 / 15 * 1rem);
    --stfont-size-35px: calc(35 / 15 * 1rem);
    --stfont-size-38px: calc(38 / 15 * 1rem);
    --stfont-size-45px: calc(45 / 15 * 1rem);
    --stfont-size-55px: calc(55 / 15 * 1rem);
    --stfont-size-65px: calc(65 / 15 * 1rem);
    --stfont-size-75px: calc(75 / 15 * 1rem);

    --stabsolute-mini: calc(12 / 15 * 1rem);
    --stabsolute-tiny: calc(13 / 15 * 1rem);
    --stabsolute-small: calc(14 / 15 * 1rem);
    --stabsolute-medium: calc(15 / 15 * 1rem);
    --stabsolute-large: calc(18 / 15 * 1rem);
    --stabsolute-big: calc(20 / 15 * 1rem);
    --stabsolute-huge: calc(24 / 15 * 1rem);
    --stabsolute-massive: calc(30 / 15 * 1rem);

    --strelative-mini: calc(12 / 15 * 1em);
    --strelative-tiny: calc(13 / 15 * 1em);
    --strelative-small: calc(14 / 15 * 1em);
    --strelative-medium: calc(15 / 15 * 1em);
    --strelative-large: calc(18 / 15 * 1em);
    --strelative-big: calc(20 / 15 * 1em);
    --strelative-huge: calc(24 / 15 * 1em);
    --strelative-massive: calc(30 / 15 * 1em);

    --stspace-gap: 1rem;
    --stspace-gap-small: 0.5rem;
    --stspace-gap-large: 1.5rem;
    --stspace-gap-big: 3rem;
    --stspace-gap-huge: 4.5rem;
}

/* ========================================================================== Color Schemes ========================================================================== */

@media (prefers-color-scheme: light){
	html:not(.maindark) .lighthidden{
		display: none !important;
	}
	html:not(.dark) .light-hidden{
		display: none !important;
	}
}

@media (prefers-color-scheme: dark){
	html:not(.mainlight) .darkhidden{
		display: none !important;
	}

	.u-inverted{
		color-scheme: light;

		--rangeslider-color: var(--rangeslider-color-light);
		--rangeslider-border-color: var(--rangeslider-border-color-light);
		--navbar-color: var(--navbar-color-light);
		--navbar-reverse-color: var(--navbar-color-dark);
		--navbar-border-color: var(--navbar-border-color-light);
		--navbar-background: var(--navbar-background-light);
		--navbar-boxshadow-color: var(--navbar-boxshadow-color-light);
		--stgray-50: var(--stlight-gray-50);
		--stgray-75: var(--stlight-gray-75);
		--stgray-100: var(--stlight-gray-100);
		--stgray-200: var(--stlight-gray-200);
		--stgray-300: var(--stlight-gray-300);
		--stgray-400: var(--stlight-gray-400);
		--stgray-450: var(--stlight-gray-450);
		--stgray-500: var(--stlight-gray-500);
		--stgray-600: var(--stlight-gray-600);
		--stgray-700: var(--stlight-gray-700);
		--stgray-800: var(--stlight-gray-800);
		--stgray-900: var(--stlight-gray-900);

		--sttonal-positive-400: #cdffbe;
		--sttonal-positive-800: #357016;

		--sttonal-negative-400: #ffbebe;
		--sttonal-negative-800: #701616;

		--sttonal-primary-400: #d9edff;
		--sttonal-primary-800: #005cde;

		--sttonal-warning-400: #fff7ae;
		--sttonal-warning-800: #866800;
	}
	html:not(.light) .dark-hidden{
		display: none !important;
	}
	html:not(.light){
		color-scheme: dark;

		--rangeslider-color: var(--rangeslider-color-dark);
		--rangeslider-border-color: var(--rangeslider-border-color-dark);
		--navbar-color: var(--navbar-color-dark);
		--navbar-reverse-color: var(--navbar-color-light);
		--navbar-border-color: var(--navbar-border-color-dark);
		--navbar-background: var(--navbar-background-dark);
		--navbar-boxshadow-color: var(--navbar-boxshadow-color-dark);
		--stgray-50: var(--stdark-gray-50);
		--stgray-75: var(--stdark-gray-75);
		--stgray-100: var(--stdark-gray-100);
		--stgray-200: var(--stdark-gray-200);
		--stgray-300: var(--stdark-gray-300);
		--stgray-400: var(--stdark-gray-400);
		--stgray-450: var(--stdark-gray-450);
		--stgray-500: var(--stdark-gray-500);
		--stgray-600: var(--stdark-gray-600);
		--stgray-700: var(--stdark-gray-700);
		--stgray-800: var(--stdark-gray-800);
		--stgray-900: var(--stdark-gray-900);

		--stprimary-400: #40a9ff;
		--stprimary-500: #2492f7;
		--stprimary-600: #2282e9;
		--stprimary-700: #0e52a5;
		--stprimary-800: #003a8c;
		--stprimary-900: #002766;

		--stlink-700: #8887ff;

		--sttonal-positive-400: #92d34f;
		--sttonal-positive-800: #0e4600;

		--sttonal-negative-400: #d60000;
		--sttonal-negative-800: #fff;

		--sttonal-primary-400: #0a6ffd;
		--sttonal-primary-800: #ffffff;

		--sttonal-warning-400: #edff00;
		--sttonal-warning-800: #463f00;
	}

	html:not(.light) .inverted{
		color-scheme: light;

		--rangeslider-color: var(--rangeslider-color-light);
		--rangeslider-border-color: var(--rangeslider-border-color-light);
		--navbar-color: var(--navbar-color-light);
		--navbar-reverse-color: var(--navbar-color-dark);
		--navbar-border-color: var(--navbar-border-color-light);
		--navbar-background: var(--navbar-background-light);
		--navbar-boxshadow-color: var(--navbar-boxshadow-color-light);
		--stgray-50: var(--stlight-gray-50);
		--stgray-75: var(--stlight-gray-75);
		--stgray-100: var(--stlight-gray-100);
		--stgray-200: var(--stlight-gray-200);
		--stgray-300: var(--stlight-gray-300);
		--stgray-400: var(--stlight-gray-400);
		--stgray-500: var(--stlight-gray-500);
		--stgray-600: var(--stlight-gray-600);
		--stgray-700: var(--stlight-gray-700);
		--stgray-800: var(--stlight-gray-800);
		--stgray-900: var(--stlight-gray-900);

		--sttonal-positive-400: #cdffbe;
		--sttonal-positive-800: #357016;

		--sttonal-negative-400: #ffbebe;
		--sttonal-negative-800: #701616;

		--sttonal-primary-400: #d9edff;
		--sttonal-primary-800: #005cde;

		--sttonal-warning-400: #fff7ae;
		--sttonal-warning-800: #866800;
	}
}

/* Content */

.stcontent.u-dark{
	background: var(--stgray-50);
	color: var(--stgray-800);
}

/* ========================================================================== Center ========================================================================== */

.stcenter{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	margin: 0;
	flex-direction: column;
	color: inherit;
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */
.ststash{
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - var(--ststash-offset,5px));
	visibility: hidden;
	pointer-events: none;
	flex-wrap: nowrap;
	overflow: hidden;
	white-space: nowrap;
}

/* ==========================================================================Color Schemes========================================================================== */

/* Hidden */
html.mainlight .lighthidden,html.maindark .darkhidden{
	display: none !important;
}

/* Light */
html,html.mainlight,.u-light{
	color-scheme: light;

	--rangeslider-color: var(--rangeslider-color-light);
	--rangeslider-border-color: var(--rangeslider-border-color-light);
	--navbar-color: var(--navbar-color-light);
	--navbar-reverse-color: var(--navbar-color-dark);
	--navbar-border-color: var(--navbar-border-color-light);
	--navbar-background: var(--navbar-background-light);
	--navbar-boxshadow-color: var(--navbar-boxshadow-color-light);
	--stgray-50: var(--stlight-gray-50);
	--stgray-75: var(--stlight-gray-75);
	--stgray-100: var(--stlight-gray-100);
	--stgray-200: var(--stlight-gray-200);
	--stgray-300: var(--stlight-gray-300);
	--stgray-400: var(--stlight-gray-400);
	--stgray-500: var(--stlight-gray-500);
	--stgray-600: var(--stlight-gray-600);
	--stgray-700: var(--stlight-gray-700);
	--stgray-800: var(--stlight-gray-800);
	--stgray-900: var(--stlight-gray-900);

	--sttonal-positive-400: #cdffbe;
	--sttonal-positive-800: #357016;

	--sttonal-negative-400: #ffbebe;
	--sttonal-negative-800: #701616;

	--sttonal-primary-400: #d9edff;
	--sttonal-primary-800: #005cde;

	--sttonal-warning-400: #fff7ae;
	--sttonal-warning-800: #866800;
}

html,html.maindark,.u-dark{
	color-scheme: dark;

	--rangeslider-color: var(--rangeslider-color-dark);
	--rangeslider-border-color: var(--rangeslider-border-color-dark);
	--navbar-color: var(--navbar-color-dark);
	--navbar-reverse-color: var(--navbar-color-light);
	--navbar-border-color: var(--navbar-border-color-dark);
	--navbar-background: var(--navbar-background-dark);
	--navbar-boxshadow-color: var(--navbar-boxshadow-color-dark);
	--stgray-50: var(--stdark-gray-50);
	--stgray-75: var(--stdark-gray-75);
	--stgray-100: var(--stdark-gray-100);
	--stgray-200: var(--stdark-gray-200);
	--stgray-300: var(--stdark-gray-300);
	--stgray-400: var(--stdark-gray-400);
	--stgray-500: var(--stdark-gray-500);
	--stgray-600: var(--stdark-gray-600);
	--stgray-700: var(--stdark-gray-700);
	--stgray-800: var(--stdark-gray-800);
	--stgray-900: var(--stdark-gray-900);

	--stlink-700: #8887ff;

	--sttonal-positive-400: #92d34f;
	--sttonal-positive-800: #0e4600;

	--sttonal-negative-400: #d60000;
	--sttonal-negative-800: #fff;

	--sttonal-primary-400: #0a6ffd;
	--sttonal-primary-800: #ffffff;

	--sttonal-warning-400: #edff00;
	--sttonal-warning-800: #463f00;
}

/* Light */
html,html.mainlight,.light{
	color-scheme: light;

	--rangeslider-color: var(--rangeslider-color-light);
	--rangeslider-border-color: var(--rangeslider-border-color-light);
	--navbar-color: var(--navbar-color-light);
	--navbar-reverse-color: var(--navbar-color-dark);
	--navbar-border-color: var(--navbar-border-color-light);
	--navbar-background: var(--navbar-background-light);
	--navbar-boxshadow-color: var(--navbar-boxshadow-color-light);
	--stgray-50: var(--stlight-gray-50);
	--stgray-75: var(--stlight-gray-75);
	--stgray-100: var(--stlight-gray-100);
	--stgray-200: var(--stlight-gray-200);
	--stgray-300: var(--stlight-gray-300);
	--stgray-400: var(--stlight-gray-400);
	--stgray-500: var(--stlight-gray-500);
	--stgray-600: var(--stlight-gray-600);
	--stgray-700: var(--stlight-gray-700);
	--stgray-800: var(--stlight-gray-800);
	--stgray-900: var(--stlight-gray-900);

	--sttonal-positive-400: #cdffbe;
	--sttonal-positive-800: #357016;

	--sttonal-negative-400: #ffbebe;
	--sttonal-negative-800: #701616;

	--sttonal-primary-400: #d9edff;
	--sttonal-primary-800: #005cde;

	--sttonal-warning-400: #fff7ae;
	--sttonal-warning-800: #866800;
}

/* dark */
html.maindark,.dark{
	color-scheme: dark;

	--rangeslider-color: var(--rangeslider-color-dark);
	--rangeslider-border-color: var(--rangeslider-border-color-dark);
	--navbar-color: var(--navbar-color-dark);
	--navbar-reverse-color: var(--navbar-color-light);
	--navbar-border-color: var(--navbar-border-color-dark);
	--navbar-background: var(--navbar-background-dark);
	--navbar-boxshadow-color: var(--navbar-boxshadow-color-dark);
	--stgray-50: var(--stdark-gray-50);
	--stgray-75: var(--stdark-gray-75);
	--stgray-100: var(--stdark-gray-100);
	--stgray-200: var(--stdark-gray-200);
	--stgray-300: var(--stdark-gray-300);
	--stgray-400: var(--stdark-gray-400);
	--stgray-500: var(--stdark-gray-500);
	--stgray-600: var(--stdark-gray-600);
	--stgray-700: var(--stdark-gray-700);
	--stgray-800: var(--stdark-gray-800);
	--stgray-900: var(--stdark-gray-900);

	--stlink-700: #8887ff;

	--sttonal-positive-400: #92d34f;
	--sttonal-positive-800: #0e4600;

	--sttonal-negative-400: #d60000;
	--sttonal-negative-800: #fff;

	--sttonal-primary-400: #0a6ffd;
	--sttonal-primary-800: #ffffff;

	--sttonal-warning-400: #edff00;
	--sttonal-warning-800: #463f00;
}

/* Hidden */
html.mainlight .light-hidden,html.maindark .dark-hidden{
	display: none !important;
}

/* ========================================================================== Scales ========================================================================== */

html.small,html.small body{
	font-size: 14px;
}

html.medium,html.medium body{
	font-size: 15px;
}

html.large,html.large body{
	font-size: 16px;
}

/* ========================================================================== Background Color ========================================================================== */

html.secondary,html.secondary body{
	background: var(--stgray-75);
}

/* ========================================================================== Rounded ========================================================================== */

/* ========================================================================== Reset ========================================================================== */

/*
Document
1. 讓所有的元素不會因為內距而更改其 `width` 寬度。
2. 讓元素預設都以相對位置呈現，這樣裡面的 `absolute` 元素才能有父依據。
*/
*,*::before,*::after{
	box-sizing: border-box;
	position: relative;
}

/*
HTML
1. 指定預設的動態背景與文字顏色，這樣才可以支援亮與暗色主題。
2. 預設要讓網頁能夠填滿整個螢幕才能讓某些元素運用整個高度。
*/
html{
	background: var(--stgray-50);
	color: var(--stgray-800);
	width: 100%;
	height: 100%;
	font-size: 15px;
}

/*
Body
1. 移除所有瀏覽器上的外距。
2. 避免元素過寬而出現不好捲動的水平捲軸。
3. 避免 iOS 在轉向之後變更字體縮放大小。
4. 改為透明來移除 Webkit 瀏覽器上的點擊高光。
*/
body{
	padding: 0px;
	margin: 0px;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);

	font-family: "Noto Sans TC","SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial","Microsoft JhengHei",wf_SegoeUI,"Segoe UI",Segoe,"Segoe WP",Tahoma,Verdana,Ubuntu,"Bitstream Vera Sans","DejaVu Sans",微軟正黑體,"LiHei Pro","WenQuanYi Micro Hei","Droid Sans Fallback","AR PL UMing TW",Roboto,"Hiragino Maru Gothic ProN",メイリオ,"ヒラギノ丸ゴ ProN W4",Meiryo,"Droid Sans",sans-serif;
}

/*
Input for iOS date input
https://github.com/teacat/tocas/issues/804
https://github.com/twbs/bootstrap/pull/31993
https://github.com/twbs/bootstrap/blob/80621d6431acd964690f89352b4f1bf8be9cfaf3/scss/forms/_form-control.scss#L47
*/

input::-webkit-date-and-time-value{
	min-height: calc(1rem * 1.5);
}

/* ======================================================================== Button ======================================================================== */

button{
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	appearance: none;
	cursor: pointer;
	user-select: none;

	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	-webkit-appearance: none;
}

/* ======================================================================== Paragraphy ======================================================================== */

/* [class*="st"]:where(p){
	margin-block-start: 1em;
	margin-block-end: 1em;
}

[class*="st"]:where(:first-child){
	margin-block-start: 0;
}

[class*="st"] .stheader+p{
	margin-block-start: 0.5em;
}

[class*="st"]:where(:last-child){
	margin-block-end: 0;
}

[class*="st"]:where(a){
	color: inherit;
} */

/* ========================================================================== Variables ========================================================================== */

@keyframes stbuttonloading{
	from{
		transform: translate(-50%,-50%) rotate(0deg);
	}
	to{
		transform: translate(-50%,-50%) rotate(360deg);
	}
}

/* ========================================================================== Base ========================================================================== */

.stbutton{
	--horizontal-padding: 1.25em;
	--height: var(--stinput-height-medium);
	--accent-color: initial;
	--accent-foreground-color: initial;

	margin: 5px;
	width: auto;
	font: inherit;
	outline: none;
	box-sizing: border-box;
	user-select: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	height: var(--height);

	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	appearance: none;
	-webkit-appearance: none;

	border: 2px solid var(--accent-color,var(--stgray-800));
	font-size: var(--stfont-size-14px);
	line-height: 1.5;
	font-weight: 500;
	color: var(--accent-foreground-color,var(--stgray-50));
	background: var(--accent-color,var(--stgray-800));
	text-decoration: none;
	display: inline-flex;
	vertical-align: middle;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 var(--horizontal-padding);
	border-radius: 0.4rem;
	transition: 0.2s linear;
}

.stbutton:hover{
	cursor: pointer;
	opacity: 0.75;
}

.stbutton:focus{
	outline: 0;
}

.button{
	--horizontal-padding: 1.25em;
	--height: var(--stinput-height-medium);
	--accent-color: initial;
	--accent-foreground-color: initial;


	border: 2px var(--accent-color,var(--stgray-800)) solid;
	outline: none;
	box-sizing: border-box;
	white-space: nowrap;
	width: auto;
	height: var(--height);
	border-radius: 0.4rem;
	background: var(--accent-color,var(--stgray-800));
	font: inherit;
	font-size: var(--stfont-size-14px);
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	text-overflow: ellipsis;
	color: var(--accent-foreground-color,var(--stgray-50));
	line-height: 1.5;
	padding: 0px var(--horizontal-padding);
	margin: 2px;
	display: inline-flex;
	vertical-align: middle;
	justify-content: center;
	align-items: center;
	transition: 0.2s linear;
	appearance: none;
	overflow: hidden;
	user-select: none;

	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	-webkit-appearance: none;

	&:hover{
		cursor: pointer;
		opacity: 0.75;
	}

	&:focus{
		outline: 0;
	}

	&.secondary{
		color: var(--accent-color,var(--stgray-800));
		border-color: var(--stgray-100);
		background: var(--stgray-100);
	}

	&.outline{
		background: transparent;
		border: 2px solid var(--stgray-450);
		color: var(--accent-color,var(--stgray-800));

		&:hover{
			border: 2px var(--stgray-900) solid;
			font-weight: bold;
		}
	}

	&.is-tertiary{
		color: var(--stgray-800);
		background: var(--stgray-300);
		border-color: var(--stgray-300);
	}

	&.error{
		color: var(--stwhite);
		border-color: var(--sterror-500);
		background: var(--sterror-500);

		&:hover{
			color: var(--stwhite);
			border-color: var(--sterror-500);
			background: var(--sterror-500);
		}
	}

	&.ghost{
		background: transparent;
		color: var(--stgray-800);
		border: 2px solid transparent;
		cursor: pointer;

		&:hover{
			color: var(--stgray-600);
		}

		&.error{
			color: var(--sterror-500);
		}
	}

	&.load{
		color: transparent;
		pointer-events: none;
		opacity: 0.5;

		& .icon{
			visibility: hidden;
		}

		&::after{
			font-family: "Icons";
			font-weight: normal;
			font-style: normal;
			display: inline;
			text-decoration: inherit;
			text-align: center;
			-webkit-font-smoothing: antialiased;
			backface-visibility: hidden;
			display: inline-block;
			animation: stbuttonloading 2s linear infinite;
			color: var(--stgray-50);
			font-size: var(--stfont-size-18px);
			content: "\f110";
			position: absolute;
			top: 50%;
			left: 50%;
		}

		&:is(.outline,.secondary,.is-tertiary,.ghost)::after{
			color: var(--stgray-800);
		}
	}

	/* Sizes */
	&.small{
		--height: var(--stinput-height-small);

		font-size: var(--stfont-size-13px);
	}

	&.big{
		--height: var(--stinput-height-large);
		font-size: var(--stfont-size-20px);
	}

	/* Disabled */

	&.disabled,&[disabled]{
		opacity: 0.5;
		user-select: none;
		cursor: not-allowed;
	}

	/* fill */

	&.fill{
		width: 100%;
	}

	&.round{
		border-radius: 100rem;
	}

	&.fullicon{
		padding: 0;
		min-width: 0;
		width: calc(var(--height) * 1.1);

		& .icon{
			font-size: 1.2em;
		}

		&.small .icon{
			font-size: 1.15em;
		}
	}

	/* Side Icon */

	&:where(.starticon,.endicon) .icon{
		font-size: 1.2em;
	}

	&:is(.starticon,.endicon) .icon::before{
		display: inline-block;
		margin-top: 1px;
	}

	&.starticon .icon{
		margin-right: 0.5em;
	}

	&.endicon .icon{
		margin-left: 0.5em;
	}

	/* Labeled Icon */
	&:is(.start-labeled-icon,.end-labeled-icon) .icon{
		position: absolute;
		top: -2px;
		bottom: -2px;
		background: var(--stgray-900);
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(2.75rem + 2px);
	}

	&:where(.start-labeled-icon,.end-labeled-icon) .icon{
		font-size: 1.2em;
	}

	&.start-labeled-icon{
		padding-left: calc(var(--horizontal-padding) + 2.75em);

		& .icon{
			left: -2px;
			border-radius: 0.4rem 0 0 0.4rem;
		}
	}


	&.end-labeled-icon{
		padding-right: calc(var(--horizontal-padding) + 2.75em);

		& .icon{
			right: -2px;
			border-radius: 0 0.4rem 0.4rem 0;
		}
	}


	&.error:is(.start-labeled-icon,.end-labeled-icon) .icon{
		background: var(--sterror-400);
	}

	&.outline:is(.start-labeled-icon,.end-labeled-icon) .icon{
		/*background: var(--stgray-300);*/
		background: transparent;
		border: 2px solid var(--stgray-300);
	}

	&.secondary:is(.start-labeled-icon,.end-labeled-icon) .icon{
		background: var(--stgray-200);
	}

	&.tertiary:is(.start-labeled-icon,.end-labeled-icon) .icon{
		background: var(--stgray-400);
	}

	/* Dense */

	&.dense{
		--height: var(--stinput-height-medium-dense);

		&.small{
			--height: var(--stinput-height-small-dense);
		}

		&.large{
			--height: var(--stinput-height-large-dense);
		}
	}

	/* Wide */
	&.short{
		--horizontal-padding: 0.75em;

		min-width: 65px;
	}

	&.long{
		--horizontal-padding: 2em;
	}

	/* Ghost */
	&.ghost{
		background: transparent;
		color: var(--stgray-800);
		border: 2px solid transparent;
		cursor: pointer;

		&:hover{
			color: var(--stgray-600);
		}

		&.warn{
			color: var(--sterror-500);
		}
	}

	&.shadow{
		--tw-shadow: 0 10px 20px -10px;
		--tw-shadow-colored: 0 10px 20px -10px var(--tw-shadow-color);

		border-radius: .375rem;
		border-width: 1px;
		background: none;
		padding: .5rem 1.25rem;
		font-size: .875rem;
		line-height: 1.25rem;
		font-weight: 600;
		outline: 2px solid #0000;
		outline-offset: 2px;
		transition-property: color,background,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
		transition-property: color,background,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
		transition-property: color,background,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
		transition-timing-function: cubic-bezier(.4,0,.2,1);
		transition-duration: .3s;
		box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);;
		cursor: pointer;

		&:hover{
			--tw-shadow: 0 0 #0000;
			--tw-shadow-colored: 0 0 #0000

			box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);;
		}

		&.small{
			padding: .375rem .625rem;
			font-size: .75rem;
			line-height: 1rem
		}

		&.big{
			padding: .625rem 1.75rem;
			font-size: 1rem;
			line-height: 1.5rem
		}

		&.primary{
			--tw-border-opacity: 1;
			--tw-bg-opacity: 1;
			--tw-text-opacity: 1;
			--tw-shadow-color: #4361ee99;
			--tw-shadow: var(--tw-shadow-colored);

			border: 1px rgb(67 97 238/var(--tw-border-opacity)) solid;
			background: rgb(67 97 238/var(--tw-bg-opacity));
			color: rgb(255 255 255/var(--tw-text-opacity));

			&.outline{
				--tw-border-opacity: 1;
				--tw-text-opacity: 1;
				--tw-shadow: 0 0 #0000;
				--tw-shadow-colored: 0 0 #0000;

				background: none;
				border: 1px rgb(67 97 238/var(--tw-border-opacity)) solid;
				color: rgb(67 97 238/var(--tw-text-opacity));
				box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);;

				&:hover{
					--tw-bg-opacity: 1;
					--tw-text-opacity: 1;

					background: rgb(67 97 238/var(--tw-bg-opacity));
					color: rgb(255 255 255/var(--tw-text-opacity));
				}
			}
		}

		&.secondary{
			--tw-border-opacity: 1;
			--tw-bg-opacity: 1;
			--tw-text-opacity: 1;
			--tw-shadow-color: #805dca99;
			--tw-shadow: var(--tw-shadow-colored);

			border: 1px rgb(128 93 202/var(--tw-border-opacity)) solid;
			background: rgb(128 93 202/var(--tw-bg-opacity));
			color: rgb(255 255 255/var(--tw-text-opacity));

			&.outline{
				--tw-border-opacity: 1;
				--tw-text-opacity: 1;
				--tw-shadow: 0 0 #0000;
				--tw-shadow-colored: 0 0 #0000;

				background: none;
				border: 1px rgb(128 93 202/var(--tw-border-opacity)) solid;
				color: rgb(128 93 202/var(--tw-text-opacity));
				box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);;

				&:hover{
					--tw-bg-opacity: 1;
					--tw-text-opacity: 1;

					background: rgb(128 93 202/var(--tw-bg-opacity));
					color: rgb(255 255 255/var(--tw-text-opacity));
				}
			}
		}

		&.success{
			--tw-border-opacity: 1;
			--tw-bg-opacity: 1;
			--tw-text-opacity: 1;
			--tw-shadow-color: #00ab5599;
			--tw-shadow: var(--tw-shadow-colored);

			border: 1px rgb(0 171 85/var(--tw-border-opacity)) solid;
			background: rgb(0 171 85/var(--tw-bg-opacity));
			color: rgb(255 255 255/var(--tw-text-opacity));

			&.outline{
				--tw-border-opacity: 1;
				--tw-text-opacity: 1;
				--tw-shadow: 0 0 #0000;
				--tw-shadow-colored: 0 0 #0000;

				background: none;
				border: 1px rgb(0 171 85/var(--tw-border-opacity)) solid;
				color: rgb(0 171 85/var(--tw-text-opacity));
				box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);;

				&:hover{
					--tw-bg-opacity: 1;
					--tw-text-opacity: 1;

					background: rgb(0 171 85/var(--tw-bg-opacity));
					color: rgb(255 255 255/var(--tw-text-opacity));
				}
			}
		}

		&.error{
			--tw-border-opacity: 1;
			--tw-bg-opacity: 1;
			--tw-text-opacity: 1;
			--tw-shadow-color: #e7515a99;
			--tw-shadow: var(--tw-shadow-colored);

			border: 1px rgb(231 81 90/var(--tw-border-opacity)) solid;
			background: rgb(231 81 90/var(--tw-bg-opacity));
			color: rgb(255 255 255/var(--tw-text-opacity));

			&.outline{
				--tw-border-opacity: 1;
				--tw-text-opacity: 1;
				--tw-shadow: 0 0 #0000;
				--tw-shadow-colored: 0 0 #0000;

				background: none;
				border: 1px rgb(231 81 90/var(--tw-border-opacity)) solid;
				color: rgb(231 81 90/var(--tw-text-opacity));
				box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);

				&:hover{
					--tw-bg-opacity: 1;
					--tw-text-opacity: 1;

					background: rgb(231 81 90/var(--tw-bg-opacity));
					color: rgb(255 255 255/var(--tw-text-opacity));
				}
			}
		}

		&.warn{
			--tw-border-opacity: 1;
			--tw-bg-opacity: 1;
			--tw-text-opacity: 1;
			--tw-shadow-color: #e2a03f99;
			--tw-shadow: var(--tw-shadow-colored);

			border: 1px rgb(226 160 63/var(--tw-border-opacity)) solid;
			background: rgb(226 160 63/var(--tw-bg-opacity));
			color: rgb(255 255 255/var(--tw-text-opacity));

			&.outline{
				--tw-border-opacity: 1;
				--tw-text-opacity: 1;
				--tw-shadow: 0 0 #0000;
				--tw-shadow-colored: 0 0 #0000;

				background: none;
				border: 1px rgb(226 160 63/var(--tw-border-opacity)) solid;
				color: rgb(226 160 63/var(--tw-text-opacity));
				box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);

				&:hover{
					--tw-bg-opacity: 1;
					--tw-text-opacity: 1;

					background: rgb(226 160 63/var(--tw-bg-opacity));
					color: rgb(255 255 255/var(--tw-text-opacity));
				}
			}
		}

		&.info{
			--tw-border-opacity: 1;
			--tw-bg-opacity: 1;
			--tw-text-opacity: 1;
			--tw-shadow-color: #2196f399;
			--tw-shadow: var(--tw-shadow-colored);

			border: 1px rgb(33 150 243/var(--tw-border-opacity)) solid;
			background: rgb(33 150 243/var(--tw-bg-opacity));
			color: rgb(255 255 255/var(--tw-text-opacity));

			&.outline{
				--tw-border-opacity: 1;
				--tw-text-opacity: 1;
				--tw-shadow: 0 0 #0000;
				--tw-shadow-colored: 0 0 #0000;

				background: none;
				color: rgb(33 150 243/var(--tw-text-opacity));
				border: 1px rgb(33 150 243/var(--tw-border-opacity)) solid;
				box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);

				&:hover{
					--tw-bg-opacity: 1;
					--tw-text-opacity: 1;

					background: rgb(33 150 243/var(--tw-bg-opacity));
					color: rgb(255 255 255/var(--tw-text-opacity));
				}
			}
		}

		&.dark{
			--tw-border-opacity: 1;
			--tw-bg-opacity: 1;
			--tw-text-opacity: 1;
			--tw-shadow-color: #3b3f5c99;
			--tw-shadow: var(--tw-shadow-colored);

			background: rgb(59 63 92/var(--tw-bg-opacity));
			color: rgb(255 255 255/var(--tw-text-opacity));
			border: 1px rgb(59 63 92/var(--tw-border-opacity)) solid;

			&.outline{
				--tw-border-opacity: 1;
				--tw-text-opacity: 1;
				--tw-shadow: 0 0 #0000;
				--tw-shadow-colored: 0 0 #0000;

				background: none;
				box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
				border: 1px rgb(59 63 92/var(--tw-border-opacity)) solid;
				color: rgb(59 63 92/var(--tw-text-opacity));

				&:hover{
					--tw-bg-opacity: 1;
					--tw-text-opacity: 1;

					background: rgb(59 63 92/var(--tw-bg-opacity));
					color: rgb(255 255 255/var(--tw-text-opacity));
				}
			}
		}

		&.gradient{
			--tw-gradient-from: #ef1262 var(--tw-gradient-from-position);
			--tw-gradient-to: #ef126200 var(--tw-gradient-to-position);
			--tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
			--tw-gradient-to: #4361ee var(--tw-gradient-to-position);
			--tw-text-opacity: 1;

			background: none;
			background-image: linear-gradient(to right,var(--tw-gradient-stops));
			color: rgb(255 255 255/var(--tw-text-opacity));

			&:hover{
				--tw-gradient-from: #4361ee var(--tw-gradient-from-position);
				--tw-gradient-to: #4361ee00 var(--tw-gradient-to-position);
				--tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
				--tw-gradient-to: #ef1262 var(--tw-gradient-to-position);
			}
		}

		&.round{
			border-radius: 9999px;
		}
	}
}

/* Ghost */
.buttonghost{
	background: transparent;
	color: var(--stgray-800);
	border: 2px solid transparent;
	cursor: pointer;

	&:hover{
		color: var(--stgray-600);
	}

	&.warn{
		color: var(--sterror-500);
	}
}

.buttongroup{
	position: relative;
	display: inline-flex;
	vertical-align: middle;

	& button,& input[type="button"]{
		margin: 0px;
	}

	& button:nth-child(1),& input[type="button"]:nth-child(1){
		border-radius: 10px 0px 0px 10px;
	}

	& button:nth-child(n+2),& input[type="button"]:nth-child(n+2){
		border-radius: 0px;
	}

	& button:nth-last-child(1),& input[type="button"]:nth-last-child(1){
		border-radius: 0px 10px 10px 0px;
	}
}

/* Start & End */

.staddon{
	display: flex;
	gap: 2px;
}

.staddon>*:first-child,.staddon>.input:first-child:where(input,textarea){
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.staddon>*:last-child,.staddon>.input:last-child:where(input,textarea){
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Buttons */

.buttondiv{
	display: flex;

	& .button{
		&:first-child{
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		&:not(:first-child):not(:last-child){
			border-radius: 0;
		}

		&:not(:first-child)::before{
			content: "";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			height: 70%;
			background: var(--stgray-600);
			width: 1px;
		}

		&.outline::before{
			display: none;
		}

		&.error::before{
			background: var(--sterror-400);
		}

		&.secondary::before{
			background: var(--stgray-400);
		}

		&:last-child{
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
		}

		&.outline+.button.outline{
			border-left-color: transparent;
		}
	}
}




/* old */
/* ========================================================================== Variations ========================================================================== */

/* Secondary */
.stbutton.secondary{
	color: var(--accent-color,var(--stgray-800));
	border-color: var(--stgray-100);
	background: var(--stgray-100);
}

/* Tertiary */
.stbutton.is-tertiary{
	color: var(--stgray-800);
	background: var(--stgray-300);
	border-color: var(--stgray-300);
}

/* outline */
.stbutton.outline{
	background: transparent;
	border: 2px solid var(--stgray-450);
	color: var(--accent-color,var(--stgray-800));
}

/* hover */
.stbutton.outline:hover{
	border: 2px var(--stgray-900) solid;
	font-weight: bold;
}

/* Secondary */
.stbutton.secondary{
	color: var(--accent-color,var(--stgray-800));
	border-color: var(--stgray-100);
	background: var(--stgray-100);
}

/* Tertiary */
.stbutton.is-tertiary{
	color: var(--stgray-800);
	background: var(--stgray-300);
	border-color: var(--stgray-300);
}

/* outline */
.stbutton.outline{
	background: transparent;
	border: 2px solid var(--stgray-450);
	color: var(--accent-color,var(--stgray-800));
}

/* hover */
.stbutton.outline:hover{
	border: 2px var(--stgray-900) solid;
	font-weight: bold;
}

/* error */
.stbutton.error{
	color: var(--stwhite);
	border-color: var(--sterror-500);
	background: var(--sterror-500);
}

.stbutton.error:hover{
	border: 2px var(--sterror-700) solid;
	background: var(--sterror-700);
	font-weight: bold;
}

/* Ghost */
.stbutton.ghost{
	background: transparent;
	color: var(--stgray-800);
	border: 2px solid transparent;
}

.stbutton.ghost{
	background: transparent;
	color: var(--stgray-800);
	border: 2px solid transparent;
}

.stbutton.ghost:hover{
	background: var(--stgray-100);
}

.stbutton.ghost.warn{
	color: var(--sterror-500);
}

/* Loading */
.stbutton.loading,.stbutton.loading.error{
	color: transparent;
	pointer-events: none;
	opacity: 0.5;
}

.stbutton.loading .icon{
	visibility: hidden;
}

.stbutton.loading::after{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	display: inline;
	text-decoration: inherit;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	display: inline-block;
	animation: stbuttonloading 2s linear infinite;
	color: var(--stgray-50);
	font-size: var(--stfont-size-18px);
	content: "\f110";
	position: absolute;
	top: 50%;
	left: 50%;
}

.stbutton.loading:is(.outline,.secondary,.is-tertiary,.ghost)::after{
	color: var(--stgray-800);
}


/* Tertiary */
/*.stbutton.is-tertiary:hover{
	 background: var(--stgray-100);
	 opacity: 1;
 }*/

/* Sizes */
.stbutton.small{
	--height: var(--stinput-height-small);

	font-size: var(--stfont-size-13px);
}

.stbutton.large{
	--height: var(--stinput-height-large);

	font-size: var(--stfont-size-16px);
}

/* Disabled */

.stbutton.disabled{
	opacity: 0.5;
	user-select: none;
	cursor: not-allowed;
}

/* fill */

.stbutton.fill{
	width: 100%;
}

/* Circular */

.stbuttonround{
	border-radius: 100rem;
}

/* Icon */

.stbutton.fullicon{
	padding: 0;
	min-width: 0;
	width: calc(var(--height) * 1.1);
}

.stbutton.fullicon .icon{
	font-size: 1.2em;
}

.stbutton.fullicon.small .icon{
	font-size: 1.15em;
}

/* Side Icon */

.stbutton:where(.starticon,.endicon) .icon{
	font-size: 1.2em;
}

.stbutton:is(.starticon,.endicon) .icon::before{
	display: inline-block;
	margin-top: 1px;
}

.stbutton.starticon .icon{
	margin-right: 0.5em;
}

.stbutton.endicon .icon{
	margin-left: 0.5em;
}

/* Labeled Icon */

.stbutton:is(.is-start-labeled-icon,.is-end-labeled-icon) .icon{
	position: absolute;
	top: -2px;
	bottom: -2px;
	background: var(--stgray-900);
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(2.75rem + 2px);
}

.stbutton:where(.is-start-labeled-icon,.is-end-labeled-icon) .icon{
	font-size: 1.2em;
}

.stbutton.is-start-labeled-icon{
	padding-left: calc(var(--horizontal-padding) + 2.75em);
}

.stbutton.is-start-labeled-icon .icon{
	left: -2px;
	border-radius: 0.4rem 0 0 0.4rem;
}

.stbutton.is-end-labeled-icon{
	padding-right: calc(var(--horizontal-padding) + 2.75em);
}

.stbutton.is-end-labeled-icon .icon{
	right: -2px;
	border-radius: 0 0.4rem 0.4rem 0;
}

.stbutton.error:is(.is-start-labeled-icon,.is-end-labeled-icon) .icon{
	background: var(--sterror-400);
}

.stbutton.outline:is(.is-start-labeled-icon,.is-end-labeled-icon) .icon{
	/*background: var(--stgray-300);*/
	background: transparent;
	border: 2px solid var(--stgray-300);
}

.stbutton.secondary:is(.is-start-labeled-icon,.is-end-labeled-icon) .icon{
	background: var(--stgray-200);
}

.stbutton.is-tertiary:is(.is-start-labeled-icon,.is-end-labeled-icon) .icon{
	background: var(--stgray-400);
}

/* Dense */

.stbutton.is-dense{
	--height: var(--stinput-height-medium-dense);
}

.stbutton.is-dense.small{
	--height: var(--stinput-height-small-dense);
}

.stbutton.is-dense.large{
	--height: var(--stinput-height-large-dense);
}

/* Wide */

.stbutton.is-short{
	--horizontal-padding: 0.75em;

	min-width: 65px;
}

.stbutton.is-wide{
	--horizontal-padding: 2em;
}

/* Start & End */

.staddon{
	display: flex;
	gap: 2px;
}

.staddon>*:first-child,.staddon>.input:first-child:where(input,textarea){
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.staddon>*:last-child,.staddon>.input:last-child:where(input,textarea){
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Buttons */

.stbuttons{
	display: flex;
}

.stbuttons .stbutton:first-child{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.stbuttons .stbutton:not(:first-child):not(:last-child){
	border-radius: 0;
}

.stbuttons .stbutton:not(:first-child)::before{
	position: absolute;
	content: "";
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	height: 70%;
	background: var(--stgray-600);
	width: 1px;
}

.stbuttons .stbutton.outline::before{
	display: none;
}

.stbuttons .stbutton.error::before{
	background: var(--sterror-400);
}

.stbuttons .stbutton.secondary::before{
	background: var(--stgray-400);
}

.stbuttons .stbutton:last-child{
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

.stbuttons .stbutton.outline+.stbutton.outline{
	border-left-color: transparent;
}


/* ========================================================================== Variables ========================================================================== */

/* @font-face{
	font-family: "Icons";
	src: url("fonts/icons/fa-solid-900.woff2") format("woff2"),url("fonts/icons/fa-solid-900.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-decoration: inherit;
	text-transform: none;
}

@font-face{
	font-family: "IconsBrands";
	src: url("fonts/icons/fa-brands-400.woff2") format("woff2"),url("fonts/icons/fa-brands-400.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-decoration: inherit;
	text-transform: none;
}

@font-face{
	font-family: "IconsRegular";
	src: url("fonts/icons/fa-regular-400.woff2") format("woff2"),url("fonts/icons/fa-regular-400.ttf") format("truetype");
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-decoration: inherit;
	text-transform: none;
} */

@keyframes sticon-spin{
	from{ transform: rotate(0deg); }
	to{ transform: rotate(360deg); }
}

/* ========================================================================== Base ========================================================================== */

.icon{
	--accent-color: initial;
	--accent-foreground-color: initial;

	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	display: inline;
	text-decoration: none;
	text-align: center;
	width: 1.75em;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	color: var(--accent-color,inherit);

	/* ========================================================================== Variations ========================================================================== */

	/* Regular */

	&.regular{
		font-family: "IconsRegular";
	}

	/* Circular */
	.iconround,&.rounded{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 500em !important;
		line-height: 1 !important;
		box-sizing: border-box;
		padding: 0.5em 0.5em !important;
		box-shadow: 0em 0em 0em 0.1em var(--stgray-300) inset;
		width: 2em !important;
		height: 2em !important;
	}

	&.rounded{
		border-radius: 0.4rem !important;
	}

	/* Spinning */

	&.load{
		display: inline-block;
		animation: sticon-spin 2s linear infinite;
	}

	/* error */

	&.error{
		color: var(--sterror-500);
	}

	/* Disabled */

	&.disabled{
		opacity: 0.25;
		pointer-events: none;
	}

	/*  Squared */

	&.square{
		background: var(--stgray-100);
		border-radius: 0.4rem;
		font-size: 1.3em;
		width: 3rem;
		height: 3rem;
		align-items: center;
		justify-content: center;
		display: inline-flex;
	}

	/* Secondary */

	&.secondary{
		color: var(--stgray-500);
	}

	/* Sizes */

	&.tiny{
		font-size: var(--stfont-size-10px);
	}

	&.small{
		font-size: var(--stfont-size-15px);
	}

	&.big{
		font-size: var(--stfont-size-25px);
	}

	&.large{
		font-size: var(--stfont-size-30px);
	}

	/* Heading */

	&.head{
		line-height: 1;
		font-size: var(--stfont-size-75px);
	}

	/* Spaced */
	&.space{
		margin-left: 0.45rem;
		margin-right: 0.45rem;
	}

	&.startspace{
		margin-left: 0.45rem;
	}

	&.endspace{
		margin-right: 0.45rem;
	}
}


/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */
.divider{
	border-top: 2px solid var(--stgray-300);
	margin: 10px 0px;
	/* ========================================================================== Variations ========================================================================== */

	/* Vertical */
	&.vertical{
		border-top: 0px;
		border-left: 1px solid var(--stgray-300);
	}

	/* Section */

	&.section{
		margin: 1rem 0;
	}

	/* Text */

	&:is(.centertext,.starttext,.endtext){
		display: flex;
		align-items: center;
		border-top: 0;
		gap: 1rem;
		color: var(--stgray-800);
	}

	&:is(.centertext,.starttext,.endtext)::before,&:is(.centertext,.starttext,.endtext)::after{
		content: "";
		height: 1px;
		background: var(--stgray-300);
		flex-grow: 1;
	}

	&.starttext::before{
		display: none;
	}

	&.endtext::after{
		display: none;
	}
}


/* ========================================================================== Variables ========================================================================== */

.input{
	--border-radius: 0.4rem;
	--height: var(--stinput-height-medium);

	display: flex;
	width: 100%;

	/* ========================================================================== Structure ========================================================================== */
	& input{
		margin: 0;
		width: 100%;
		overflow: visible;
		font: inherit;
		outline: none;
		box-sizing: border-box;
		resize: none;
		font-size: var(--stfont-size-14px);
		line-height: 1.5;
		color: var(--stgray-800);
		background: var(--stgray-50);
		border-radius: var(--border-radius);
		border: 1px solid var(--stgray-300);

		-webkit-font-smoothing: inherit;
		-moz-osx-font-smoothing: inherit;
		appearance: none;
		-webkit-appearance: none;
		padding: 0 1rem;
		height: var(--height);

		&:focus{
			outline: 0;
			border-color: var(--stprimary-600);
		}

		&::-webkit-inner-spin-button,&::-webkit-calendar-picker-indicator{
			opacity: 0.4;
			line-height: 1;
		}
	}

	& textarea{
		margin: 0;
		width: 100%;
		overflow: visible;
		/* font: inherit; */
		outline: none;
		box-sizing: border-box;
		resize: none;
		font-size: var(--stfont-size-15px);
		line-height: 1.5;
		color: var(--stgray-800);
		background: var(--stgray-50);
		padding: 0.467rem 1rem;
		border-radius: var(--border-radius);
		border: 1px solid var(--stgray-300);
		/* text-shadow: initial !important; */
		/* transform: initial !important; */
		/* font-smooth: initial; */

		/* -webkit-font-smoothing: inherit; */
		/* -moz-osx-font-smoothing: inherit; */
		appearance: none;
		-webkit-appearance: none;
		&:focus{
			outline: 0;
			border-color: var(--stprimary-600);
		}
	}

	/* Color */
	& input[type="color"]{
		padding: 0;
		aspect-ratio: 1 / 1;
		overflow: hidden;
		cursor: pointer;
		width: auto;

		&::-webkit-color-swatch{
			padding: 0;
			position: absolute;
			top: 4px;
			left: 4px;
			right: 4px;
			bottom: 4px;
			border: 0;
			border-radius: 0.4rem;
			width: auto;
			height: auto;
		}

		&::-moz-color-swatch{
			padding: 0;
			position: absolute;
			top: 4px;
			left: 4px;
			right: 4px;
			bottom: 4px;
			border: 0;
			border-radius: 0.4rem;
			width: auto;
			height: auto;
		}
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Solid */

	&.solid input,&.solid textarea{
		border-radius: var(--border-radius);
		border: 1px solid transparent;
		background: var(--stgray-100);
	}

	&.solid input:focus,&.solid textarea:focus{
		background: var(--stgray-50);
		border: 1px solid var(--stgray-300);
	}

	/* Underlined */

	&.underline input,&.underline textarea{
		border-radius: var(--border-radius) var(--border-radius) 0 0;
		border: 2px solid transparent;
		background: var(--stgray-100);
		border-bottom: 2px solid var(--stgray-400);
	}

	&.underline input:focus,&.underline textarea:focus{
		border-bottom-color: var(--stprimary-600);
	}

	/* Basic */

	&.basic input{
		padding: 0;
		border: 0;
		background: transparent;
	}

	/* Labeled */

	&:is(.startlabel,.endlabel,.fulllabel):is(&,.label){
		border-radius: var(--border-radius);
		display: flex;
		align-items: center;
		justify-content: start;
	}

	&:is(.startlabel,.endlabel,.fulllabel) .label{
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--stgray-100);
		padding: 0 0.75rem;
		font-size: var(--stfont-size-14px);
		color: var(--stgray-700);
		border: 1px solid var(--stgray-300);
		height: var(--height);
	}

	&:is(.startlabel,.fulllabel) .label{
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-right-width: 0;
	}

	&:is(.startlabel,.fulllabel) input{
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	&:is(.endlabel,.fulllabel) .label{
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-left-width: 0;
	}

	&:is(.endlabel,.fulllabel) input{
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	&.fulllabel .label:first-child{
		border-left-width: 1px;
		border-top-left-radius: var(--border-radius);
		border-bottom-left-radius: var(--border-radius);
	}

	&.fulllabel .label:last-child{
		border-right-width: 1px;
		border-top-right-radius: var(--border-radius);
		border-bottom-right-radius: var(--border-radius);
	}

	/* Underlined */
	&:is(.startlabel,.fulllabel,.endlabel).underline .label{
		border: 0;
		border-bottom: 2px solid var(--stgray-400);
		background: var(--stgray-200);
	}

	&:is(.startlabel,.fulllabel).underline .label{
		border-bottom-left-radius: 0;
	}

	&:is(.endlabel,.fulllabel).underline .label{
		border-bottom-right-radius: 0;
	}

	&:is(.startlabel,.fulllabel).underline input{
		border-left: 0;
	}

	&:is(.endlabel,.fulllabel).underline input{
		border-right: 0;
	}

	/* Solid */
	&:is(.startlabel,.fulllabel,.endlabel).is-solid .label{
		border-color: transparent;
		background: var(--stgray-200);
	}

	&:is(.startlabel,.fulllabel,.endlabel).is-solid:focus-within .label{
		border-color: var(--stgray-300);
	}

	&.round{
		--border-radius: 100rem;
	}

	/* Action Icon */
	&.is-end-action-icon{
		&:where(a,button).icon{
			position: absolute;
			top: 0;
			bottom: 0;
			display: flex !important;
			align-items: center;
			justify-content: center;
			color: var(--stgray-700);
			z-index: 1;
			padding: 0 1.5rem;
			border-radius: 0.4rem;
			background: var(--stgray-100);
			top: 50%;
			transform: translateY(-50%);
			right: 0.35rem;
			padding: 0;
			aspect-ratio: 1.1 / 1;
			height: 75%;
			width: auto;
			font-size: 1em;

			&:hover{
				opacity: 0.9;
			}
		}


		& input{
			padding-right: 3rem;
			box-sizing: border-box;
		}
	}

	/* Icon */
	&.starticon{
		& .icon{
			&:not(a):not(button){
				position: absolute;
				top: 0px;
				bottom: 0px;
				display: flex !important;
				align-items: center;
				justify-content: center;
				color: var(--stgray-700);
				z-index: 1;

				&:first-child{
					left: 0.5rem;
				}
			}
		}

		& input{
			padding-left: 2.5rem;
			box-sizing: border-box;
		}
	}

	&.endicon {
		& .icon{
			&:not(a):not(button){
				position: absolute;
				top: 0px;
				bottom: 0px;
				display: flex !important;
				align-items: center;
				justify-content: center;
				color: var(--stgray-700);
				z-index: 1;

				&:last-child{
					right: 0.5rem;
				}
			}
		}

		& input{
			padding-right: 2.5rem;
			box-sizing: border-box;
		}
	}

	&.fullicon{
		& .icon{
			&:not(a):not(button){
				position: absolute;
				top: 0px;
				bottom: 0px;
				display: flex !important;
				align-items: center;
				justify-content: center;
				color: var(--stgray-700);
				z-index: 1;

				&:first-child{
					left: 0.5rem;
				}

				&:last-child{
					right: 0.5rem;
				}
			}
		}

		& input{
			padding: 0px 2.5rem;
			box-sizing: border-box;
		}
	}

	/* Disabled */
	&.disable{
		& input,& textarea{
			cursor: not-allowed;
			pointer-events: none;
			opacity: 0.5;
		}

		&.underline{
			border-bottom-color: var(--stgray-300);
		}
	}

	/* fill */
	&.fill{
		display: flex;
		width: 100%;

		& input,& textarea{
			width: 100%;
		}
	}

	/* Dense */
	&.dense{
		& input{
			--height: var(--stinput-height-medium-dense);
		}

		&.small input{
			--height: var(--stinput-height-small-dense);
		}

		&.big input{
			--height: var(--stinput-height-large-dense);
		}
	}

	/* Relaxed */
	&.relax input{
		--height: var(--stinput-height-large);
	}

	/* Sizes */
	&.small input{
		--height: var(--stinput-height-small);
	}

	&.big input{
		--height: var(--stinput-height-large);
	}

	&.small:is(input,textarea,.icon){
		font-size: var(--stfont-size-13px);
	}

	&.big:is(input,textarea,.icon){
		font-size: var(--stfont-size-17px);
	}

	&[data-tocas="input-chips"]{
		border: 1px solid var(--stgray-300);
		border-radius: var(--border-radius);
		min-height: var(--height);
		padding: 0.25rem 1rem;

		background: var(--stgray-50);
		box-sizing: border-box;
		color: var(--stgray-800);
		font: inherit;
		font-size: var(--stfont-size-14px);
		outline: none;
		overflow: visible;
		resize: none;
		width: 100%;
		cursor: text;

		& input:not(.append){
			display: none;
		}

		& .content{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.5rem;

			& .stchip{
				cursor: default;
				user-select: none;
			}
		}


		& input.append{
			border: 0;
			height: auto;
			line-height: 1.7;
			padding: 0;
			border-radius: 0;
			width: 1px;
		}
	}


	/* error */
	&.inputerror input{
		color: var(--sterror-600);
		border-color: var(--sterror-400);
		font-weight: 500;
	}

	&.inputerror textarea{
		color: var(--sterror-600);
		border-color: var(--sterror-400);
		font-weight: 500;
	}

	&.inputerror .label{
		border-color: var(--sterror-400);
	}

	/* Solid */
	&.inputerror.solid:is(.startlabel,.label,.endlabel) .label{
		border-color: var(--sterror-400);
	}

	&.inputerror.solid input:focus,&.inputerror.solid textarea:focus{
		background: var(--stgray-100);
		border: 1px solid var(--sterror-400);
	}

	/* Underlined */
	&.inputerror.underline .label{
		border-color: transparent;
		border-bottom-color: var(--sterror-400);
	}
	&.inputerror.underline input{
		border-color: transparent;
		border-bottom-color: var(--sterror-400);
	}
	&.inputerror.underline textarea{
		border-color: transparent;
		border-bottom-color: var(--sterror-400);
	}

	/* error */

	&.error input{
		color: var(--sterror-600);
		border-color: var(--sterror-400);
		font-weight: 500;
	}

	&.error textarea{
		color: var(--sterror-600);
		border-color: var(--sterror-400);
		font-weight: 500;
	}

	&.error .label{
		border-color: var(--sterror-400);
	}

	/* Solid */
	&.error.is-solid:is(.is-start-labeled,.islabel,.is-end-labeled) .label{
		border-color: var(--sterror-400);
	}

	&.error.is-solid input:focus,&.error.is-solid textarea:focus{
		background: var(--stgray-100);
		border: 1px solid var(--sterror-400);
	}

	/* Underlined */
	&.error.underline .label{
		border-color: transparent;
		border-bottom-color: var(--sterror-400);
	}
	&.error.underline input{
		border-color: transparent;
		border-bottom-color: var(--sterror-400);
	}
	&.error.underline textarea{
		border-color: transparent;
		border-bottom-color: var(--sterror-400);
	}
}

/* Resizable */

.resize{
	min-height: 5rem !important;
	resize: vertical !important;
}

/* Circular */

.inputround{
	--border-radius: 100rem;
}

/* ========================================================================== Data Input ========================================================================== */
.inputtag{
	--border-radius: 0.4rem;
	--height: var(--stinput-height-medium);

	padding: 0.25rem 1rem;
	min-height: var(--height);
	border-radius: var(--border-radius);
	border: 1px solid var(--stgray-300);
	align-items: center;
	display: flex;
	cursor: text;

	&.focused{
		border-color: var(--stprimary-600);
	}

	& .content{
		align-items: center;
		display: flex;
	}

	& .append{
		margin: 0;
		overflow: visible;
		font: inherit;
		outline: none;
		/* border: none;*/
		box-sizing: border-box;
		resize: none;
		font-size: var(--stfont-size-14px);
		line-height: 1.5;
		color: var(--stgray-800);
		background: var(--stgray-50);
		-webkit-font-smoothing: inherit;
		-moz-osx-font-smoothing: inherit;
		appearance: none;
		-webkit-appearance: none;
		width: 10px;
	}

	& input:not(.append){
		display: none;
	}
}


/* old */

/* ========================================================================== Variables ========================================================================== */

.stinput{
	--border-radius: 0.4rem;
	--height: var(--stinput-height-medium);
}

/* ========================================================================== Base ========================================================================== */

.stinput{
	display: flex;
	width: 100%;
}

/* ========================================================================== Structure ========================================================================== */

.stinput input{
	padding: 0 1rem;
	height: var(--height);
}

.stinput input,.stinput textarea{
	margin: 0;
	width: 100%;
	overflow: visible;
	font: inherit;
	outline: none;
	box-sizing: border-box;
	resize: none;
	font-size: var(--stfont-size-14px);
	line-height: 1.5;
	color: var(--stgray-800);
	background: var(--stgray-50);

	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.stinput textarea{
	padding: 0.467rem 1rem;
}

.stinput input:focus,.stinput textarea:focus{
	outline: 0;
}

/* Input */

.stinput input,.stinput textarea{
	border-radius: var(--border-radius);
	border: 1px solid var(--stgray-300);
}

.stinput input:focus,.stinput textarea:focus{
	border-color: var(--stprimary-600);
}

.stinput input::-webkit-inner-spin-button,.stinput input::-webkit-calendar-picker-indicator{
	opacity: 0.4;
	line-height: 1;
}

/* Color */

.stinput input[type="color"]{
	padding: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	cursor: pointer;
	width: auto;
}

.stinput input[type="color"]::-webkit-color-swatch{
	padding: 0;
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border: 0;
	border-radius: 0.4rem;
	width: auto;
	height: auto;
}

.stinput input[type="color"]::-moz-color-swatch{
	padding: 0;
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border: 0;
	border-radius: 0.4rem;
	width: auto;
	height: auto;
}

/* ========================================================================== Variations ========================================================================== */

/* Solid */

.stinput.is-solid input,.stinput.is-solid textarea{
	border-radius: var(--border-radius);
	border: 1px solid transparent;
	background: var(--stgray-100);
}

.stinput.is-solid input:focus,.stinput.is-solid textarea:focus{
	background: var(--stgray-50);
	border: 1px solid var(--stgray-300);
}

/* Underlined */

.stinput.underline input,.stinput.underline textarea{
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	border: 2px solid transparent;
	background: var(--stgray-100);
	border-bottom: 2px solid var(--stgray-400);
}

.stinput.underline input:focus,.stinput.underline textarea:focus{
	border-bottom-color: var(--stprimary-600);
}

/* Resizable */

.resizeable{
	min-height: 5rem !important;
	resize: vertical !important;
}

/* Circular */

.stinputround{
	--border-radius: 100rem;
}

/* Basic */

.stinput.basic input{
	padding: 0;
	border: 0;
	background: transparent;
}

/* Labeled */

.stinput:is(.is-start-labeled,.is-end-labeled,.islabel):is(.input,.label){
	border-radius: var(--border-radius);
}

.stinput:is(.is-start-labeled,.is-end-labeled,.islabel) .label{
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--stgray-100);
	padding: 0 0.6rem;
	font-size: var(--stfont-size-14px);
	color: var(--stgray-700);
	border: 1px solid var(--stgray-300);
}

.stinput:is(.is-start-labeled,.islabel) .label{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right-width: 0;
}

.stinput:is(.is-start-labeled,.islabel) input{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.stinput:is(.is-end-labeled,.islabel) .label{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left-width: 0;
}

.stinput:is(.is-end-labeled,.islabel) input{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.stinput.islabel .label:first-child{
	border-left-width: 1px;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

.stinput.islabel .label:last-child{
	border-right-width: 1px;
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

/* Underlined */
.stinput:is(.is-start-labeled,.islabel,.is-end-labeled).underline .label{
	border: 0;
	border-bottom: 2px solid var(--stgray-400);
	background: var(--stgray-200);
}

.stinput:is(.is-start-labeled,.islabel).underline .label{
	border-bottom-left-radius: 0;
}

.stinput:is(.is-end-labeled,.islabel).underline .label{
	border-bottom-right-radius: 0;
}

.stinput:is(.is-start-labeled,.islabel).underline input{
	border-left: 0;
}

.stinput:is(.is-end-labeled,.islabel).underline input{
	border-right: 0;
}

/* Solid */
.stinput:is(.is-start-labeled,.islabel,.is-end-labeled).is-solid .label{
	border-color: transparent;
	background: var(--stgray-200);
}

.stinput:is(.is-start-labeled,.islabel,.is-end-labeled).is-solid:focus-within .label{
	border-color: var(--stgray-300);
}

.stinput.round{
	--border-radius: 100rem;
}

/* Action Icon */

.stinput.is-end-action-icon:where(a,button).icon{
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: var(--stgray-700);
	z-index: 1;
}

.stinput.is-end-action-icon:where(a,button).icon{
	padding: 0 1.5rem;
	border-radius: 0.4rem;
	background: var(--stgray-100);
	top: 50%;
	transform: translateY(-50%);
	right: 0.35rem;
	padding: 0;
	aspect-ratio: 1.1 / 1;
	height: 75%;
	width: auto;
	font-size: 1em;
}

.stinput.is-end-action-icon:where(a,button).icon:hover{
	opacity: 0.9;
}

.stinput.is-end-action-icon input{
	padding-right: 3rem;
	box-sizing: border-box;
}

/* Icon */

.stinput.starticon .icon:not(a):not(button),.stinput.endicon .icon:not(a):not(button),.stinput.fullicon .icon:not(a):not(button){
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: var(--stgray-700);
	z-index: 1;
}

.stinput.starticon .icon:not(a):not(button),.stinput.fullicon .icon:not(a):not(button):first-child{
	left: 1rem;
}

.stinput.starticon input,.stinput.fullicon input{
	padding-left: 2.8rem;
	box-sizing: border-box;
}

.stinput.endicon .icon:not(a):not(button),.stinput.fullicon .icon:not(a):not(button):last-child{
	right: 1rem;
}

.stinput.endicon input,.stinput.fullicon input{
	padding-right: 2.8rem;
	box-sizing: border-box;
}
/* Disabled */

.stinput.disabled input,.stinput.disabled textarea{
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.5;
}

.stinput.disabled.underline{
	border-bottom-color: var(--stgray-300);
}

/* fill */

.stinput.fill{
	display: flex;
	width: 100%;
}

.stinput.fill input,.stinput.fill textarea{
	width: 100%;
}

/* Dense */

.stinput.dense input{
	--height: var(--stinput-height-medium-dense);
}

.stinput.dense.small input{
	--height: var(--stinput-height-small-dense);
}

.stinput.dense.large input{
	--height: var(--stinput-height-large-dense);
}

/* Relaxed */

.stinput.relaxed input{
	--height: var(--stinput-height-large);
}

/* Sizes */

.stinput.small input{
	--height: var(--stinput-height-small);
}

.stinput.large input{
	--height: var(--stinput-height-large);
}

.stinput.small:is(input,textarea,.icon){
	font-size: var(--stfont-size-13px);
}

.stinput.large:is(input,textarea,.icon){
	font-size: var(--stfont-size-17px);
}

/* ========================================================================== Data Input ========================================================================== */

.sttaginput{
	--border-radius: 0.4rem;
	--height: var(--stinput-height-medium);
}

.sttaginput{
	padding: 0.25rem 1rem;
	min-height: var(--height);
	border-radius: var(--border-radius);
	border: 1px solid var(--stgray-300);
	align-items: center;
	display: flex;
	cursor: text;
}

.sttaginput.focused{
	border-color: var(--stprimary-600);
}

.sttaginput .content{
	align-items: center;
	display: flex;
}

.sttaginput .append{
	margin: 0;
	overflow: visible;
	font: inherit;
	outline: none;
	/* border: none;*/
	box-sizing: border-box;
	resize: none;
	font-size: var(--stfont-size-14px);
	line-height: 1.5;
	color: var(--stgray-800);
	background: var(--stgray-50);
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	appearance: none;
	-webkit-appearance: none;
	width: 10px;
}

.sttaginput input:not(.append){
	display: none;
}

.stinput[data-tocas="input-chips"]{
	border: 1px solid var(--stgray-300);
	border-radius: var(--border-radius);
	min-height: var(--height);
	padding: 0.25rem 1rem;

	background: var(--stgray-50);
	box-sizing: border-box;
	color: var(--stgray-800);
	font: inherit;
	font-size: var(--stfont-size-14px);
	outline: none;
	overflow: visible;
	resize: none;
	width: 100%;
	cursor: text;
}

.stinput[data-tocas="input-chips"] input:not(.append){
	display: none;
}

.stinput[data-tocas="input-chips"] .content{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.stinput[data-tocas="input-chips"] .content .stchip{
	cursor: default;
	user-select: none;
}

.stinput[data-tocas="input-chips"] input.append{
	border: 0;
	height: auto;
	line-height: 1.7;
	padding: 0;
	border-radius: 0;
	width: 1px;
}



















/* ========================================================================== Variables ========================================================================== */

.file{
	--height: var(--stinput-height-medium);
	--accent-color: initial;
	--accent-foreground-color: initial;

	display: flex;
	width: 100%;
	/* ========================================================================== Structure ========================================================================== */

	& input{
		height: var(--height);
		line-height: calc(var(--height) - 1px);
		font-size: var(--stfont-size-14px);
		color: var(--stgray-800);
		padding: 0 1rem;
		padding-left: 0.6rem;
		background: var(--stgray-50);
		border: 1px solid var(--stgray-300);
		border-radius: 0.4rem;
		width: 100%;
	}

	& input::file-selector-button,& input::-webkit-file-upload-button{
		border: 0;
		min-width: 75px;
		/* Firefox */
		font-family: "Noto Sans TC","SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial","Microsoft JhengHei",wf_SegoeUI,"Segoe UI",       Segoe,"Segoe WP",Tahoma,Verdana,Ubuntu,"Bitstream Vera Sans","DejaVu Sans",微軟正黑體,"LiHei Pro","WenQuanYi Micro Hei","Droid Sans Fallback",       "AR PL UMing TW",Roboto,"Hiragino Maru Gothic ProN",メイリオ,"ヒラギノ丸ゴ ProN W4",Meiryo,"Droid Sans",sans-serif;
		font-size: var(--strelative-small);
		line-height: 1.5;
		font-weight: 500;
		text-decoration: none;
		display: inline-block;
		text-align: center;

		padding: 0.2em 0.5rem;
		border-radius: 0.4rem;
		margin-right: 0.5rem;

		color: var(--accent-foreground-color,var(--stgray-800));
		background: var(--accent-color,var(--stgray-200));
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Underlined */

	&.underline input{
		border-radius: 0.4rem 0.4rem 0 0;
		border: 2px solid transparent;
		background: var(--stgray-100);
		border-bottom: 2px solid var(--stgray-400);
	}

	/* Solid */

	&.is-solid input{
		background: var(--stgray-100);
		border-color: transparent;
	}

	&:is(.is-solid,.underline) input::file-selector-button,&:is(.is-solid,.underline) input::-webkit-file-upload-button{
		background: var(--accent-color,var(--stgray-300));
	}

	/* Disabled */

	&.disabled{
		cursor: not-allowed;
		pointer-events: none;
		opacity: 0.5;
		user-select: none;
	}

	/* error */

	&.error input{
		border-color: var(--sterror-400);
		color: var(--sterror-600);
		font-weight: 500;
	}

	&.error.underline input{
		border-color: transparent;
		border-bottom-color: var(--sterror-400);
	}

	/* Sizes */

	&.small input{
		--height: var(--stinput-height-small);
	}

	&.large input{
		--height: var(--stinput-height-large);
	}

	&.small:is(input,input::file-selector-button,input::-webkit-file-upload-button){
		font-size: var(--stfont-size-13px);
	}

	&.large:is(input,input::file-selector-button,input::-webkit-file-upload-button){
		font-size: var(--stfont-size-17px);
	}

	/* Dense */

	&.is-dense input{
		--height: var(--stinput-height-medium-dense);
	}

	&.is-dense input::file-selector-button,&.is-dense input::-webkit-file-upload-button{
		padding-top: 0.15rem;
		padding-bottom: 0.15rem;
	}

	&.small.is-dense input{
		--height: var(--stinput-height-small-dense);
	}

	&.large.is-dense input{
		--height: var(--stinput-height-large-dense);
	}
}

/* ========================================================================== Variables ========================================================================== */

.stnotice{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stnotice{
	background: var(--accent-color,var(--stgray-800));
	border: 1px solid transparent;
	color: var(--accent-foreground-color,var(--stgray-50));
	display: block;
	padding: 0.45rem 1rem;
	font-size: var(--stfont-size-14px);
	border-radius: 0.4rem;
}

/* ========================================================================== Structure ========================================================================== */

.stnotice .title{
	background: var(--accent-foreground-color,var(--stgray-50));
	color: var(--accent-color,var(--stgray-800));
	border-radius: 0.4rem;
	padding: 0.3rem 0.5rem;
	margin-right: 0.6rem;
	margin-top: 0.05rem;
	font-size: var(--stfont-size-14px);
	text-align: justify;
	line-height: 1;
	white-space: nowrap;
	display: inline-block;
}

.stnotice .content{
	display: inline;
}

.stnotice a{
	text-decoration: underline;
}

/* ========================================================================== Variations ========================================================================== */

/* error */

.stnotice.error{
	background: var(--sterror-500);
	color: var(--stwhite);
}

.stnotice.error .title{
	background: var(--stwhite);
	color: var(--sterror-600);
}

/* Outlined */

.stnotice.outline{
	background: transparent;
	border-color: var(--stgray-300);
	color: var(--accent-color,var(--stgray-800));
}

.stnotice.outline .title{
	background: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
}

.stnotice.outline.error .title{
	background: var(--sterror-500);
	color: var(--stgray-50);
}

/* Sizes */

.stnotice.small,.stnotice.small .title{
	font-size: var(--stfont-size-13px);
}

.stnotice.large,.stnotice.large .title{
	font-size: var(--stfont-size-17px);
}

/* Dense */

.stnotice.is-dense{
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.stnotice.is-dense .title{
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

/* ========================================================================== Variables ========================================================================== */

.stcheckbox{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stcheckbox{
	display: inline-flex;
	align-items: flex-start;
	cursor: pointer;
	user-select: none;
	color: inherit;
	vertical-align: middle;
	margin-top: -3px;
}

/* ========================================================================== Structure ========================================================================== */

.stcheckbox input{
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	border-radius: 0;
	outline: none;
	box-sizing: border-box;
	user-select: none;

	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.stcheckbox input{
	min-height: 1.15rem;
	min-width: 1.15rem;
	margin-top: 5px;
	border-radius: 0.2rem;
	border: 1px solid var(--stgray-200);
	background: var(--stgray-200);
	margin-right: 0.5rem;
	cursor: pointer;
}

.stcheckbox input:checked{
	background: var(--accent-color,var(--stprimary-700));
	border-color: var(--accent-color,var(--stprimary-700));
}

.stcheckbox input:focus{
	outline: 0;
}

.stcheckbox input::after{
	position: absolute;
	display: none;
	content: "✔";
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	text-decoration: inherit;
	text-align: center;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	transform: scale(0.8);
	z-index: 1;

	align-items: center;
	justify-content: center;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	font-size: 1rem;
	color: var(--accent-foreground-color,var(--stwhite));
}

.stcheckbox input:checked::after{
	display: flex;
}

/* ========================================================================== Variations ========================================================================== */

/* Disabled */

.stcheckbox.disabled{
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.5;
	user-select: none;
}

.stcheckbox.disabled input{
	background: var(--stgray-200);
	border-color: var(--stgray-200);
}

/* Solo */

.stcheckbox.is-solo input{
	margin-right: 0;
	margin-top: 0;
}

/* error */

.stcheckbox.error input{
	border-color: var(--sterror-600);
	border-width: 2px;
}

/* Indeterminate */

.stcheckbox.is-indeterminate input::after{
	content: "\f068";
}

/* Sizes */

.stcheckbox.small input{
	min-height: 0.95rem;
	min-width: 0.95rem;
}

.stcheckbox.small input::after{
	font-size: var(--stfont-size-12px);
}

.stcheckbox.small{
	font-size: var(--stfont-size-14px);
}

.stcheckbox.large input{
	min-height: 1.3rem;
	min-width: 1.3rem;
}

.stcheckbox.large{
	font-size: var(--stfont-size-17px);
}

.stcheckbox.large input::after{
	font-size: var(--stfont-size-16px);
}

/* ========================================================================== Variables ========================================================================== */

.radio{
	--accent-color: initial;
	--accent-foreground-color: initial;

	/* ========================================================================== Base ========================================================================== */

	display: inline-flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
	color: inherit;
	vertical-align: middle;
	margin-top: -3px;

	/* ========================================================================== Structure ========================================================================== */

	& input{
		border: none;
		margin: 0;
		padding: 0;
		width: auto;
		overflow: visible;
		background: transparent;
		color: inherit;
		font: inherit;
		line-height: normal;
		border-radius: 0;
		outline: none;
		box-sizing: border-box;
		user-select: none;
		appearance: none;
		min-height: 1.15rem;
		min-width: 1.15rem;
		border-radius: 100rem;
		border: 1px solid var(--stgray-200);
		background: var(--stgray-200);
		margin-right: 5px;
		cursor: pointer;

		-webkit-font-smoothing: inherit;
		-moz-osx-font-smoothing: inherit;
		-webkit-appearance: none;

		&:checked{
			background: var(--accent-color,var(--stprimary-700));
			background: var(--accent-color,var(--stprimary-700));
		}

		&:focus{
			outline: 0;
		}

		&::after{
			content: "●";
			position: absolute;
			display: none;
			font-weight: normal;
			font-style: normal;
			text-decoration: inherit;
			text-align: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			transform: scale(0.5);
			z-index: 1;

			align-items: center;
			justify-content: center;
			-webkit-font-smoothing: antialiased;
			backface-visibility: hidden;
			font-size: 25px;
			color: var(--accent-foreground-color,var(--stwhite));
		}

		&:checked::after{
			display: flex;
		}

	}

	/* ========================================================================== Variations ========================================================================== */

	/* Disabled */

	&.disabled{
		cursor: not-allowed;
		pointer-events: none;
		opacity: 0.5;
		user-select: none;
	}

	&.disabled input{
		background: var(--stgray-200);
		border-color: var(--stgray-200);
	}

	/* Solo */

	&.solo input{
		margin-right: 0;
		margin-top: 0;
	}

	/* error */

	&.error input{
		border-color: var(--sterror-600);
		border-width: 2px;
	}

	/* Sizes */

	&.small{
		font-size: var(--stfont-size-14px);
		& input{
			min-height: 0.95rem;
			min-width: 0.95rem;

			&::after{
				font-size: var(--stfont-size-14px);
			}
		}
	}
	&.large{
		font-size: var(--stfont-size-17px);

		& input{
			min-height: 1.3rem;
			min-width: 1.3rem;

			&::after{
				font-size: var(--stfont-size-18px);
			}
		}
	}

}


/* ========================================================================== Variables ========================================================================== */

@keyframes stprogress-active{
	from{
		opacity: 0.8;
		width: 0%;
	}

	to{
		opacity: 0;
		width: 100%;
	}
}

@keyframes stprogress-animation{
	from{
		background-position: 0px;
	}

	to{
		background-position: 40px;
	}
}

@keyframes stprogress-indeterminate{
	0%{
		margin-left: -10%;
		margin-right: 100%;
	}

	40%{
		margin-left: 25%;
		margin-right: 0%;
	}

	100%{
		margin-left: 100%;
		margin-right: 0;
	}
}

.process{
	--accent-color: initial;
	--accent-foreground-color: initial;

	/* ========================================================================== Base ========================================================================== */

	display: flex;
	border-radius: 0.4rem;
	background: var(--stgray-300);
	overflow: hidden;
	min-height: 1.6rem;
	line-height: 1;

	& .bar{
		--value: 0;
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		background: var(--accent-color,var(--stgray-800));
		color: var(--accent-foreground-color,var(--stgray-50));
		padding: 0rem 0.5rem;
		font-size: var(--stfont-size-14px);
		border-radius: 0.4rem;
		min-width: fit-content;
		text-align: right;
		transition: width 1s ease-out;
		width: calc(var(--value) * 1%);
		z-index: 1;
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Active */

	&.active .bar::after{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		content: "";
		background: #5a5a5a;
		border-radius: 0.4rem;
		animation: stprogress-active 2s cubic-bezier(0.4,0,0.2,1) infinite;
	}

	/* Empty */

	&.empty .bar{
		background: transparent;
		color: var(--stgray-800);
	}

	/* Processing */

	&.processing{
		background-size: 40px 40px;
		background-image: linear-gradient(135deg,#9e9e9e 25%,#949494 25%,#949494 50%,#9e9e9e 50%,#9e9e9e 75%,#949494 75%,#949494 100%);
		animation: stprogress-animation 2s linear 0s infinite;
	}

	/* Indeterminate */

	&.indeterminate .bar{
		animation: stprogress-indeterminate 2s cubic-bezier(0.4,0,0.2,1) 0s infinite;
		width: 100% !important;
		min-width: 0;
	}

	&.indeterminate .bar .text{
		visibility: hidden;
	}

	/* Queried */

	&.query .bar{
		animation: stprogress-indeterminate 2s cubic-bezier(0.4,0,0.2,1) 0s infinite;
		animation-direction: reverse;
		width: 100% !important;
		min-width: 0;
	}

	&.query .bar .text{
		visibility: hidden;
	}

	/* Secondary */

	& .bar.secondary{
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 0;
		background: var(--stgray-400);
		color: var(--stgray-800);
	}

	/* Sizes */

	&.tiny{
		min-height: 0.7rem;
	}

	&.tiny .bar .text{
		font-size: 0.8em;
	}

	&.small{
		min-height: 1.2rem;
	}

	&.small .bar .text{
		font-size: 0.85em;
	}

	&.large .bar{
		min-height: calc(1.75rem + 1.75rem / 4);
	}
}


/* ========================================================================== Variables ========================================================================== */

.stbadge{
	--accent-color: initial;
	--accent-foreground-color: initial;

	/* ========================================================================== Base ========================================================================== */

	font-size: var(--stfont-size-14px);
	border-radius: 100rem;
	padding: 0.225rem 0.5rem;
	line-height: 1;
	border: 1px solid transparent;
	background: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
	font-weight: 400;
	display: inline-block;
	white-space: nowrap;
	text-decoration: none;
	vertical-align: middle;
	align-self: center;

	/* ========================================================================== Variations ========================================================================== */

	/* Secondary */

	&.secondary{
		background: var(--stgray-200);
		color: var(--accent-color,var(--stgray-800));
	}

	/* Outlined */

	&.outline{
		background: transparent;
		border-color: var(--stgray-300);
		color: var(--accent-color,var(--stgray-800));
	}

	/* error */

	&.error{
		background: var(--sterror-500);
		color: var(--stwhite);
	}

	&.error.outline{
		background: transparent;
		border-color: var(--sterror-500);
		color: var(--sterror-700);
	}

	/* Sizes */
	&.small{
		font-size: var(--stfont-size-12px);
	}

	&.big{
		font-size: var(--stfont-size-16px);
	}

	/* Dense */
	&.dense{
		padding-top: 0.125rem;
		padding-bottom: 0.125rem;
	}

	/* Spaced */

	&.space{
		margin-left: 0.45rem;
		margin-right: 0.45rem;
	}

	&.startspace{
		margin-left: 0.45rem;
	}

	&.endspace{
		margin-right: 0.45rem;
	}
}

/* ========================================================================== Variables ========================================================================== */

.stpagination{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stpagination{
	background: var(--stgray-200);
	display: inline-flex;
	padding: 0.25rem 0.5rem;
	border-radius: 100rem;
	color: var(--stgray-800);
	border: 1px solid var(--stgray-200);
}

/* ========================================================================== Structure ========================================================================== */

.stpagination .item{
	border-radius: 100rem;
	padding: 0.5rem 0.8rem;
	line-height: 1;
	margin: 0 0.15rem;
	color: var(--stgray-800);
	cursor: pointer;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

/* ========================================================================== Variations ========================================================================== */

/* Active */

.stpagination .item.is-active{
	background: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
	pointer-events: none;
}

/* Skipped */

.stpagination .item.is-skipped{
	padding: 0.5rem 0rem;
	color: var(--stgray-600);
	pointer-events: none;

}

.stpagination .item.is-skipped::after{
	display: inline-block;
	content: "...";
}

/* fill */

.stpagination.fill{
	display: flex;
}

/* Disabled */

.stpagination .item.disabled{
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

/* Aligns */

/*.stpagination.right{
	 margin-left: auto;
 }*/

/* Next & Back */

.stpagination .item.is-back,.stpagination .item.is-next,.stpagination .item.is-first,.stpagination .item.is-last{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	text-decoration: inherit;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.stpagination .item.is-back::before,.stpagination .item.is-next::after,.stpagination .item.is-first::before,.stpagination .item.is-last::after{
	font-size: 13px;
}

.stpagination .item.is-back::before{
	content: "\f053";
}

.stpagination .item.is-next{
	margin-left: auto;
}

.stpagination .item.is-next::after{
	content: "\f054";
}

.stpagination .item.is-first::before{
	content: "\f048";
}

.stpagination .item.is-last::after{
	content: "\f051";
}

/* Secondary */

.stpagination.secondary{
	padding: 0;
	background: transparent;
	border-color: transparent;
}

/* Sizes */

.stpagination.small{
	font-size: var(--stfont-size-13px);
}

.stpagination.large{
	font-size: var(--stfont-size-17px);
}

/* Dense */

.stpagination.is-dense{
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
}

.stpagination.is-dense .item{
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}

/* ========================================================================== Variables ========================================================================== */

.select{
	--object-distance-vertical: 0.4rem;
	--object-distance-horizontal: 0.8rem;

	--height: var(--stinput-height-medium);
	/* ========================================================================== Base ========================================================================== */
	display: inline-flex;
	background: var(--stgray-50);
	border: 1px solid var(--stgray-300);
	border-radius: 0.4rem;
	cursor: pointer;
	height: var(--height);

	/* ========================================================================== Structure ========================================================================== */

	& select{
		border: none;
		margin: 0;
		background: inherit;
		font: inherit;
		outline: none;
		box-sizing: border-box;
		user-select: none;
		border-radius: 0.4rem;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;

		-webkit-font-smoothing: inherit;
		-moz-osx-font-smoothing: inherit;
		appearance: none;
		-webkit-appearance: none;
	}

	& select:focus{
		outline: 0;
	}

	& select,& .content{
		/* line-height: 1.5; */
		font-size: var(--stfont-size-14px);
		color: var(--stgray-800);

		padding: 0 1rem;
		padding-right: 2.5rem;

		width: 100%;
		cursor: pointer;
	}

	& .content{
		user-select: none;
		display: flex;
		gap: var(--object-distance-vertical) var(--object-distance-horizontal);
		align-items: center;
		width: calc(100% - 2.5rem);
		overflow: hidden;
	}

	& .content,& .content *{
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		flex-shrink: 0;
	}

	& .content .icon{
		font-size: 1.1em;
	}

	& select option{
		background: inherit;
	}

	&::after{
		pointer-events: none;
		position: absolute;
		top: 0;
		right: 1rem;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--stgray-700);

		font-family: "Icons";
		font-weight: normal;
		font-style: normal;

		text-decoration: inherit;
		text-align: center;
		width: 1.18em;
		-webkit-font-smoothing: antialiased;
		backface-visibility: hidden;
		content: "▼";
		font-size: 13px;
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Relaxed */

	&.relaxe{
		--height: var(--stinput-height-large);
	}

	/* Multiple */

	&.multiple{
		height: auto;
	}

	&.multiple::after{
		content: none;
	}

	& select[multiple]{
		padding: 0.5rem 0.5rem;
		overflow-y: auto;
	}

	& select[multiple] option{
		border-radius: 0.4rem;
		padding: 0.3rem 0.5rem;
		margin: 0.1rem 0;
	}

	& select[multiple] option:checked{
		background: var(--stprimary-700);
		color: var(--stwhite);
	}

	/* Solid */

	&.solid{
		background: var(--stgray-100);
		border-color: transparent;
	}

	/* Focus */
	&:focus-within{
		border-color: var(--stprimary-600);
	}

	/* Underlined */

	&.underline{
		border-radius: 0.4rem 0.4rem 0 0;
		border: 2px solid transparent;
		background: var(--stgray-100);
		border-bottom: 2px solid var(--stgray-400);
	}

	&.underline select option{
		background: var(--stgray-50);
	}

	&.underline:focus-within{
		border-bottom-color: var(--stprimary-600);
	}

	/* Active */

	&.active{
		border-color: var(--stprimary-600);
	}

	/* If select is-active then open child .stdropdown also */
	&.active .stdropdown{
		display: inline-flex;
	}

	&.underline.active{
		border-color: transparent;
		border-bottom-color: var(--stprimary-600);
	}

	/* Basic */

	&.basic{
		padding: 0;
		background: transparent;
		border-color: transparent;
		min-height: initial;
	}

	&.basic select{
		line-height: 1;
		padding: 0 1.4rem 0 0;
	}

	&.basic::after{
		right: 0;
		font-size: 12px;
		padding-top: 2px;
	}

	/* Disabled */

	&.disabled{
		pointer-events: none;
		opacity: 0.5;
		user-select: none;
	}

	/* fill */

	&.fill{
		width: 100%;
	}

	/* error */

	&.error{
		border-color: var(--sterror-400);
	}

	&.error select{
		color: var(--sterror-600);
		font-weight: 500;
	}

	&.error.underline{
		border-color: transparent;
		border-bottom-color: var(--sterror-400);
	}

	/* Sizes */

	&.small{
		--height: var(--stinput-height-small);
	}

	&.big{
		--height: var(--stinput-height-large);
	}

	&.small select{
		font-size: var(--stfont-size-13px);
	}

	&.big select{
		font-size: var(--stfont-size-17px);
	}

	/* Dense */

	&.dense{
		--height: var(--stinput-height-medium-dense);
	}

	&.dense.small{
		--height: var(--stinput-height-small-dense);
	}

	&.dense.big{
		--height: var(--stinput-height-large-dense);
	}

	/* Wrappable */

	&.wrappable{
		min-height: var(--height);
		height: auto;
		padding: 0.184em 0;
	}

	&.wrappable .content{
		flex-wrap: wrap;
	}

	&.wrappable::after{
		top: 0.5em;
		bottom: initial;
	}

	/* ========================================================================== Enhanced ========================================================================== */

	&[data-tocas="input-select"] select{
		display: none;
	}

	&[data-tocas="input-combo"]{
		cursor: text;
	}

	&[data-tocas="input-combo"] select{
		display: none;
	}

	&[data-tocas="input-combo"] input.append{
		border: 0;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		color: var(--stgray-800);
		cursor: pointer;
		font-size: var(--stfont-size-14px);
		padding: 0 2.5rem 0 0.9rem;
		width: 100%;
		z-index: 1;
		background: transparent;
	}

	&[data-tocas="input-combo"] .content.ghosting{
		opacity: 0.5;
	}

	&[data-tocas="input-combo"] .content.is-hidden{
		visibility: hidden;
	}
}

/* ========================================================================== Variables ========================================================================== */

.fieldset{
	--accent-color: initial;
	--accent-foreground-color: initial;
	/* ========================================================================== Base ========================================================================== */

	border: 1px solid var(--accent-color,var(--stgray-300));
	border-radius: 0.4rem;
	padding: 1rem;
	padding-top: 0.5rem;
	color: inherit;

	/* ========================================================================== Structure ========================================================================== */

	& legend{
		color: var(--accent-color,var(--stgray-600));
		padding: 0 0.7em;
		margin-left: -0.7em;
		font-weight: normal;
		pointer-events: none;
		user-select: none;
	}

	/* Dense */

	&.dense{
		padding-bottom: 0.5rem;
		padding-top: 0.25rem;
	}
}


/* ========================================================================== Variables ========================================================================== */

.sttext{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.sttext{
	color: var(--accent-color,inherit);
}

/* ========================================================================== Variations ========================================================================== */

/* Editable */

.sttext.is-editable{
	text-decoration-style: dotted;
	text-decoration-line: underline;
	text-decoration-color: var(--stgray-400);
	cursor: pointer;
}

/* Line Clamps */

.sttext:is(.is-1-lines,.is-2-lines,.is-3-lines,.is-4-lines,.is-5-lines){
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-all;
}

.sttext.is-1-lines{
	-webkit-line-clamp: 1;
}

.sttext.is-2-lines{
	-webkit-line-clamp: 2;
}

.sttext.is-3-lines{
	-webkit-line-clamp: 3;
}

.sttext.is-4-lines{
	-webkit-line-clamp: 4;
}

.sttext.is-5-lines{
	-webkit-line-clamp: 5;
}

/* Secondary */

.sttext.secondary{
	color: var(--stgray-500);
}

/* Bold */

.bold{
	font-weight: bold !important;
}

/* Italic */

.sttext.is-italic{
	font-style: italic !important;
}

/* Deleted */

.sttext.is-deleted{
	text-decoration: line-through !important;
}

/* Underlined */

.sttext.underline{
	text-decoration: underline !important;
}

/* Link */

.sttext.is-link.is-link.is-link{
	color: var(--accent-color,var(--stlink-700));
}

.sttext.is-link{
	text-decoration: underline;
}

.sttext.is-link:hover{
	color: inherit;
}

.sttext.is-link:active{
	color: inherit;
}

.sttext.is-link:visited{
	color: inherit;
}

/* Undecorated */

.sttext.is-undecorated{
	text-decoration: none;
}

.sttext.is-undecorated:hover{
	text-decoration: underline;
}

/* External Link */

.sttext.is-external-link::after{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	display: inline;
	text-decoration: inherit;
	text-align: center;
	width: 1.18em;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	content: "\f35d";
	font-size: 0.8em;
	margin-left: 0.25rem;
}

/* Code */

.sttext.is-code{
	border-radius: 0.4rem;
	background: var(--stgray-200);
	padding: 0 0.2rem;
	font-size: var(--stfont-size-14px);
	color: var(--stgray-800);
}

/* Mark */

.mark{
	border-radius: 0;
	background: var(--stwarn-500);
	padding: 0 0.25rem;
	color: var(--stblack);
	font-size: var(--stfont-size-14px);
}

/* Key */

.sttext.is-key{
	border-radius: 0.4rem;
	background: var(--stgray-100);
	padding: 0 0.35rem;
	color: var(--stgray-800);
	border-bottom: 3px solid var(--stgray-300);
	font-size: var(--stfont-size-14px);
}

/* Sup */

.sttext.is-sup{
	font-size: 12px;
	vertical-align: top;
	opacity: 0.8;
}

/* Sub */

.sttext.is-sub{
	font-size: 12px;
	vertical-align: bottom;
	opacity: 0.8;
}

/* Truncated */

.sttext.is-truncated{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

/* Aligns */

.textcenter{
	text-align: center;
}

.textleft{
	text-align: left;
}

.textright{
	text-align: right;
}

.sttext.is-justify-aligned{
	text-align: justify;
}

/* Label */

.sttextlabel{
	font-weight: 500;
	color: var(--stgray-800);
	font-size: var(--stfont-size-14px);
	margin: 2px 0px;
	line-height: 1;
}

.textlabel{
	font-weight: 500;
	color: var(--stgray-800);
	font-size: var(--stfont-size-14px);
	margin: 2px 0px;
	line-height: 1;
}

.label{
	font-weight: 500;
	color: var(--stgray-800);
	font-size: var(--stfont-size-14px);
	margin: 2px 0px;
	line-height: 1;
}

/* Description */

.sttext.is-description{
	color: var(--stgray-500);
	font-size: var(--stfont-size-14px);
}

/* Disabled */

.sttext.disabled{
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

/* Required */

.rightrequire::after{
	content: " *";
	font-weight: bold;
	color: var(--sterror-600);
}

.leftrequire::before{
	content: " *";
	font-weight: bold;
	color: var(--sterror-600);
}

.require::after{
	content: " *";
	font-weight: bold;
	color: var(--sterror-600);
}


/* Sizes */
.sttext.verytiny{
	font-size: var(--stfont-size-10px);
}

.sttext.tiny{
	font-size: var(--stfont-size-13px);
}

.sttext.small{
	font-size: var(--stfont-size-15px);
}

.sttext.medium{
	font-size: var(--stfont-size-17px);
}

.sttext.big{
	font-size: var(--stfont-size-20px);
}

.sttext.large{
	font-size: var(--stfont-size-24px);
}

.sttext.huge{
	font-size: var(--stfont-size-30px);
}

.sttext.veryhuge{
	font-size: var(--stfont-size-35px);
}

.sttext.max{
	font-size: var(--stfont-size-45px);
}

/* error */

.sttext.error{
	color: var(--sterror-600);
}

.sttext.error.secondary{
	color: var(--sterror-500);
}

/* ========================================================================== Variables ========================================================================== */

.text{
	--accent-color: initial;
	--accent-foreground-color: initial;

	/* ========================================================================== Base ========================================================================== */
	color: var(--accent-color,inherit);
	font-size: var(--stfont-size-20px);

	/* ========================================================================== Variations ========================================================================== */

	/* Editable */

	&.editable{
		text-decoration-style: dotted;
		text-decoration-line: underline;
		text-decoration-color: var(--stgray-400);
		cursor: pointer;
	}

	/* Line Clamps */

	&:is(.is-1-lines,.is-2-lines,.is-3-lines,.is-4-lines,.is-5-lines){
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		word-break: break-all;
	}

	&.is-1-lines{
		-webkit-line-clamp: 1;
	}

	&.is-2-lines{
		-webkit-line-clamp: 2;
	}

	&.is-3-lines{
		-webkit-line-clamp: 3;
	}

	&.is-4-lines{
		-webkit-line-clamp: 4;
	}

	&.is-5-lines{
		-webkit-line-clamp: 5;
	}

	/* Secondary */

	&.secondary{
		color: var(--stgray-500);
	}

	/* Bold */

	.bold{
		font-weight: bold !important;
	}

	/* Italic */

	&.italic{
		font-style: italic !important;
	}

	/* Deleted */

	&.delete{
		text-decoration: line-through !important;
	}

	/* Underlined */

	&.underline{
		text-decoration: underline !important;
	}

	/* Link */

	&.link.link.link{
		color: var(--accent-color,var(--stlink-700));
	}

	&.link{
		text-decoration: underline;
	}

	&.link:hover{
		color: inherit;
	}

	&.link:active{
		color: inherit;
	}

	&.link:visited{
		color: inherit;
	}

	/* Undecorated */

	&.undecorated{
		text-decoration: none;
	}

	&.undecorated:hover{
		text-decoration: underline;
	}

	/* External Link */

	&.externallink::after{
		font-family: "Icons";
		font-weight: normal;
		font-style: normal;
		display: inline;
		text-decoration: inherit;
		text-align: center;
		width: 1.18em;
		-webkit-font-smoothing: antialiased;
		backface-visibility: hidden;
		content: "\f35d";
		font-size: 0.8em;
		margin-left: 0.25rem;
	}

	/* Code */
	&.code{
		border-radius: 0.4rem;
		background: var(--stgray-200);
		padding: 0 0.2rem;
		font-size: var(--stfont-size-14px);
		color: var(--stgray-800);
	}

	/* Mark */
	&.mark{
		border-radius: 0;
		background: var(--stwarn-500);
		padding: 0 0.25rem;
		color: var(--stblack);
		font-size: var(--stfont-size-14px);
	}

	/* Key */

	&.key{
		border-radius: 0.4rem;
		background: var(--stgray-100);
		padding: 0 0.35rem;
		color: var(--stgray-800);
		border-bottom: 3px solid var(--stgray-300);
		font-size: var(--stfont-size-14px);
	}

	/* Sup */

	&.sup{
		font-size: 12px;
		vertical-align: top;
		opacity: 0.8;
	}

	/* Sub */

	&.sub{
		font-size: 12px;
		vertical-align: bottom;
		opacity: 0.8;
	}

	/* Truncated */

	&.truncated{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: block;
	}

	/* Description */

	&.description{
		color: var(--stgray-500);
		font-size: var(--stfont-size-14px);
	}

	/* Disabled */

	&.disabled{
		opacity: 0.5;
		pointer-events: none;
		user-select: none;
	}

	/* Required */

	&.require::after{
		content: " *";
		font-weight: bold;
		color: var(--sterror-600);
	}

	/* Sizes */
	&.verytiny{
		font-size: var(--stfont-size-10px);
	}

	&.tiny{
		font-size: var(--stfont-size-12px);
	}

	&.small{
		font-size: var(--stfont-size-13px);
	}

	&.little{
		font-size: var(--stfont-size-15px);
	}

	&.normal{
		font-size: var(--stfont-size-20px);
	}

	&.big{
		font-size: var(--stfont-size-25px);
	}

	&.large{
		font-size: var(--stfont-size-30px);
	}

	&.huge{
		font-size: var(--stfont-size-35px);
	}

	&.max{
		font-size: var(--stfont-size-45px);
	}

	/* error */

	&.error{
		color: var(--sterror-600);
	}

	&.error.secondary{
		color: var(--sterror-500);
	}
}

/* Aligns */
.textcenter{
	text-align: center !important;
}

.textleft{
	text-align: left !important;
}

.textright{
	text-align: right !important;
}

/* ========================================================================== Variables ========================================================================== */

.sttab{
	--horizontal-padding-multiplier: 1;
	--vertical-padding-multiplier: 1;
	--accent-color: initial;
	--accent-foreground-color: initial;

	/* ========================================================================== Base ========================================================================== */
	margin-bottom: -1px;
	user-select: none;
	display: flex;
	flex-wrap: wrap;
	z-index: 1;

	/* ========================================================================== Structure ========================================================================== */

	& .item{
		text-decoration: none;
		color: var(--stgray-800);
		padding: calc(0.5rem * var(--vertical-padding-multiplier)) calc(1rem * var(--horizontal-padding-multiplier));
		display: inline-flex;
		border-bottom: 3px solid transparent;
		text-align: center;
		justify-content: center;
		cursor: pointer;
		gap: 0.5rem;
		line-height: 1.8;
		align-items: center;
	}

	& .icon{
		font-size: 1.1em;
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Active */
	& .item.active{
		border-bottom-color: var(--accent-color,var(--stgray-800));
		cursor: default;
	}

	/* Disabled */
	& .item.disabled{
		opacity: 0.5;
		pointer-events: none;
		user-select: none;
	}

	/* Pilled */
	&.pilled .item{
		border-radius: 100rem;
		padding: calc(0.25rem * var(--vertical-padding-multiplier)) calc(1rem * var(--horizontal-padding-multiplier));
		border-bottom: 0;

		&.active{
			background: var(--accent-color,var(--stgray-800));
			color: var(--accent-foreground-color,var(--stgray-50));
		}
	}


	&.pilled.secondary .item.active{
		background: var(--stgray-200);
		color: var(--accent-color,var(--stgray-800));
	}

	/* Aligns */
	&.left{
		justify-content: flex-start;
	}

	&.center{
		justify-content: center;
	}

	&.right{
		justify-content: flex-end;
	}

	/* Indicated */
	&.indicate{
		gap: calc(1.6rem * var(--horizontal-padding-multiplier));
		cursor: pointer;

		& .item{
			padding-left: 0;
			padding-right: 0;

			&.active{
				border-bottom-color: transparent;

				&::after{
					content: "";
					position: absolute;
					background: var(--accent-color,var(--stgray-800));
					bottom: -2px;
					height: 4px;
					left: 50%;
					transform: translateX(-50%);
					width: 16px;
					border-radius: 1rem;
				}
			}
		}
	}

	/* Segmented */
	&.segmente{
		--height: var(--stinput-height-medium);

		color: var(--stgray-700);
		border: 1px solid var(--stgray-300);
		border-radius: 0.4rem;
		display: inline-flex;
		align-items: center;
		padding: 0 0.25rem;
		height: var(--height);

		& .item{
			padding: 0.45rem calc(0.9rem * var(--horizontal-padding-multiplier));
			border-radius: 0.3rem;
			user-select: none;
			line-height: 1;
			border-bottom: 0;

			&.active{
				background: var(--accent-color,var(--stgray-800));
				color: var(--accent-foreground-color,var(--stgray-50));
			}
		}

	}


	/* fill */

	&.fill{
		display: flex;

		& .item{
			flex: 1;
		}
	}


	/* Tall */

	&.tall{
		--vertical-padding-multiplier: 1.6;
	}

	/* Sizes */

	&.small .item{
		font-size: var(--stfont-size-14px);
	}

	&.big .item{
		font-size: var(--stfont-size-17px);
	}

	&.small.segmente{
		--height: var(--stinput-height-small);
	}

	&.big.segmente{
		--height: var(--stinput-height-large);
	}

	/* Dense */

	&.dense .item{
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	&.dense.segmente .item{
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	&.dense.pilled .item{
		padding-top: 0.05rem;
		padding-bottom: 0.05rem;
	}

	&.segmente.dense{
		--height: var(--stinput-height-medium-dense);
	}

	&.segmente.small.dense{
		--height: var(--stinput-height-small-dense);
	}

	&.segmente.big.dense{
		--height: var(--stinput-height-large-dense);
	}

	/* Relaxed */

	&.relaxe{
		--horizontal-padding-multiplier: 1.6;
	}
}


/* ========================================================================== Variables ========================================================================== */

.box{
	--accent-color: initial;
	--accent-foreground-color: initial;
	--stindicator-color: var(--accent-color,var(--stgray-900));

	/* ========================================================================== Base ========================================================================== */
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--stgray-300);
	border-radius: 0.4rem;
	overflow: hidden;
	background: var(--stgray-50);
	padding: 10px;
	display: block;

	a&:hover{
		border-color: var(--stgray-400);
	}

	/* ========================================================================== Structure ========================================================================== */

	& .symbol .icon{
		position: absolute;
		right: 0;
		bottom: 0;
		overflow: hidden;
		width: 0.8em;
		height: 0.8em;
		margin-left: 0;
		margin-right: 0;
		pointer-events: none;
		font-size: 8em;
		line-height: 1.1em;
		opacity: 0.1;
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Horizontal */

	&.horizontal{
		display: flex;
		flex-direction: row;
	}

	/* Collapsed */

	&.smallest{
		width: fit-content;
	}

	/* Indicated */

	&.bordertop{
		border-top: 3px solid var(--stindicator-color) !important;
	}

	&.borderbottom{
		border-bottom: 3px solid var(--stindicator-color) !important;
	}

	&.borderleft{
		border-left: 3px solid var(--stindicator-color) !important;
	}

	&.borderright{
		border-right: 3px solid var(--stindicator-color) !important;
	}

	&.border{
		border: 3px solid var(--stindicator-color) !important;
	}

	/* Emphasises */

	&.error{
		--stindicator-color: var(--sterror-500) !important;
	}

	&.success{
		--stindicator-color: var(--stsuccess-500) !important;
	}

	&.warn{
		--stindicator-color: var(--stwarn-500) !important;
	}

	/* Elevated */

	&.elevate{
		box-shadow: 0px 1px 5px 0 #00000024;
	}

	&.verelevate{
		box-shadow: rgb(0 0 0 / 20%) 0px 3px 3px -2px,rgb(0 0 0 / 14%) 0px 3px 4px 0px,rgb(0 0 0 / 12%) 0px 1px 8px 0px;
	}

	/* Hollowed */
	&.hollow{
		border: 4px dashed var(--stgray-300);
		background: transparent;
	}
}


/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stcontent{
	padding: 1rem 1rem;
	color: inherit;
	display: block;
	text-decoration: none;
	box-sizing: border-box;
}

/* ========================================================================== Variations ========================================================================== */

/* Fitted */

.stcontent.is-fitted{
	padding: 0;
}

.stcontent.vertically-fitted{
	padding-top: 0;
	padding-bottom: 0;
}

.stcontent.is-horizontally-fitted{
	padding-left: 0;
	padding-right: 0;
}

/* Dark */

.stcontent.dark{
	background: var(--stgray-50);
	color: var(--stgray-800);
}

/* Secondary */

.stcontent.secondary{
	background: var(--stgray-75);
}

/* Tertiary */

.stcontent.is-tertiary{
	background: var(--stgray-100);
}

/* Aligns */

/* .stcontent.left{
	text-align: left;
}

.stcontent.right{
	text-align: right;
}

.stcontent.center{
	text-align: center;
} */

/* Interactive */

.stcontent.is-interactive{
	display: block;
	text-decoration: none;
}

.stcontent.is-interactive:hover{
	cursor: pointer;
}

.stcontent.is-interactive:hover:not(.is-active){
	background: var(--stgray-75);
}

/* Active */

.stcontent.is-active{
	background: var(--stgray-200);
}

/* Disabled */

.stcontent.disabled{
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

/* Rounded */

.stcontent.is-rounded{
	border-radius: 0.4rem;
}

/* Padded */

.stcontent.is-padded{
	padding: 1.5rem;
}

.stcontent.is-horizontally-padded{
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.stcontent.vertically-padded{
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.stcontent.is-very-padded{
	padding: 3.5rem;
}

.stcontent.is-horizontally-very-padded{
	padding-left: 3.5rem;
	padding-right: 3.5rem;
}

.stcontent.vertically-very-padded{
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

/* Compact */

.stcontent.is-compact{
	padding: 0.5rem;
}

/* Dense */

.stcontent.is-dense{
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stimage{
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
	text-decoration: none;
}

/* ========================================================================== Structure ========================================================================== */

.stimage img{
	width: 100%;
	vertical-align: top;
}

/* ========================================================================== Variations ========================================================================== */

/* Circular */

.stimageround img{
	border-radius: 100rem !important;
}

/* Disabled */

.stimage.disabled img{
	opacity: 0.5;
	pointer-events: none;
}

/* Rounded */

.stimage.is-rounded img{
	border-radius: 0.4rem !important;
}

/* Bordered */

.stimage.is-bordered img{
	border: 1px solid var(--stgray-300);
}

/* Covered */

.stimage.is-covered img{
	object-fit: cover;
}

/* Full */

.stimage.is-full-width,.stimage.is-full-width img{
	width: 100%;
}

.stimage.is-full-height,.stimage.is-full-height img{
	height: 100%;
}

/* Centered */

.stimage.is-centered{
	display: block;
}

.stimage.is-centered img{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Sizes */

.stimage.is-mini img{
	width: 35px;
}

.stimage.tiny img{
	width: 80px;
}

.stimage.small img{
	width: 150px;
}

.stimage.medium img{
	width: 300px;
}

.stimage.large img{
	width: 450px;
}

.stimage.big img{
	width: 600px;
}

.stimage.huge img{
	width: 800px;
}

.stimage.massive img{
	width: 960px;
}

/* Spaced */

.stimage.is-spaced{
	margin-left: 0.45rem;
	margin-right: 0.45rem;
}

.stimage.is-start-spaced{
	margin-left: 0.45rem;
}

.stimage.is-end-spaced{
	margin-right: 0.45rem;
}

/* Aspect Ratio */

.stimage.is-1-by-1 img{
	aspect-ratio: 1 / 1;
}

.stimage.is-4-by-3 img{
	aspect-ratio: 4 / 3;
}

.stimage.is-16-by-9 img{
	aspect-ratio: 16 / 9;
}

label:has(.switch){
	display: flex;
	align-items: center;
	user-select: none;
	cursor: pointer;
}

.switch{
	--accent-color: initial;
	--accent-foreground-color: initial;

	color: inherit;
	appearance: none;
    margin: 0px 2.5px;
    position: relative;
    top: 5px;
	user-select: none;
	cursor: pointer;

	-webkit-appearance: none;

	&::after{
		content: "";
		height: 22px;
		width: 38px;
		background: var(--stgray-300);
		border-radius: 100rem;
		display: block;
		transition: background 0.1s ease;
	}

	&::before{
		content: "";
		position: absolute;
		top: 3.5px;
		left: 4px;
		height: 15px;
		width: 15px;
		background: var(--stwhite);
		border-radius: 100rem;
		display: block;
		transition: left 0.1s ease;
		z-index: 1;
	}

	&:checked::after{
		background: var(--accent-color,var(--stprimary-700));
	}

	&:checked::before{
		background: var(--accent-foreground-color,var(--stwhite));
		left: 19px;
	}

	/* ========================================================================== Variations ========================================================================== */
	/* Disabled */
	&.disabled{
		opacity: 0.5;
		pointer-events: none;
		user-select: none;
	}

	/* Solo */
	&.solo{
		margin-right: 0;
		margin-top: 0;
	}

	/* error */
	&.error{
		border-radius: 100rem;
		border: 2px solid var(--stnegative-600);
	}

	/* Sizes */
	&.small{
		font-size: var(--stfont-size-14px);

		&::after{
			height: 19px;
			width: 31px;
		}

		&::before{
			top: 3.5px;
			height: 12px;
			width: 12px;
		}

		&:checked::before{
			left: 15px;
		}
	}


	&.big{
		font-size: var(--stfont-size-18px);

		&::after{
			height: 25px;
			width: 46px;
		}

		&::before{
			top: 3.5px;
			height: 18px;
			width: 18px;
		}

		&:checked::before{
			left: 24px;
		}
	}
}


/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stmeta{
	display: inline-flex;
	flex-wrap: wrap;
}

/* ========================================================================== Structure ========================================================================== */

.stmeta .item{
	color: inherit;
	text-decoration: none;
}

.stmeta .item:not(:last-child)::after{
	margin: 0 0;
	content: "．";
	color: var(--stgray-500);
	text-decoration: none;
	pointer-events: none;
	user-select: none;
	display: inline-block;
}

.stmeta a.item:hover{
	text-decoration: underline;
}

/* ========================================================================== Variations ========================================================================== */

/* Aligns */

.stmeta:is(.left,.center,.right){
	display: flex;
}

.stmeta.left{
	justify-content: flex-start;
}

.stmeta.center{
	justify-content: center;
}

.stmeta.right{
	justify-content: flex-end;
}

/* Secondary */

.stmeta.secondary .item{
	color: var(--stgray-500);
}

/* Sizes */

.stmeta.small{
	font-size: var(--stfont-size-14px);
}

.stmeta.large{
	font-size: var(--stfont-size-17px);
}

/* ========================================================================== Variables ========================================================================== */

.selection{
	--height: var(--stinput-height-medium);
	--accent-color: initial;
	--accent-foreground-color: initial;

	/* ========================================================================== Base ========================================================================== */

	border: 1px solid var(--stgray-100);
	border-radius: 0.4rem;
	padding: 0 0.35rem;
	display: inline-flex;
	background: var(--stgray-100);
	box-sizing: border-box;
	height: var(--height);
	align-items: center;

	/* ========================================================================== Structure ========================================================================== */

	& .item{
		display: flex;

		& .text{
			display: inline-flex;
			padding: 0.25rem 1rem;
			border-radius: 0.3rem;
			font-size: var(--stabsolute-small);
			color: var(--stgray-800);
			border-color: var(--stgray-100);
			user-select: none;
			cursor: pointer;
			align-items: center;
			justify-content: center;
			text-align: center;
			line-height: 1.5;
		}
	}


	& .item input{
		display: none;
	}

	& input:checked+.text{
		background: var(--accent-color,var(--stprimary-700));
		border-color: var(--accent-color,var(--stprimary-700));
		color: var(--accent-foreground-color,var(--stwhite));
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Disabled */

	&.disabled{
		pointer-events: none;
		opacity: 0.5;
		user-select: none;
	}

	& .item.disabled{
		pointer-events: none;
		opacity: 0.5;
		user-select: none;
	}

	/* Circular */

	&.round{
		border-radius: 100rem;
	}

	&.round .item .text{
		border-radius: 100rem;
	}

	/* fill */

	&.fill{
		width: 100%;

		& .item{
			flex: 1;

			& .text{
				width: 100%;
			}
		}

	}


	/* Sizes */

	&.small{
		--height: var(--stinput-height-small);

		& .item .text{
			font-size: var(--stfont-size-13px);
		}
	}

	&.big{
		--height: var(--stinput-height-large);

		& .item .text{
			font-size: var(--stfont-size-17px);
		}
	}

	/* Dense */
	&.dense{
		--height: var(--stinput-height-medium-dense);

		&.small{
			--height: var(--stinput-height-small-dense);
		}

		&.big{
			--height: var(--stinput-height-large-dense);
		}

		& .item .text{
			padding-top: 0.1rem;
			padding-bottom: 0.1rem;
		}
	}

}


/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.table,.table:is(thead,tbody,tfoot,tr,th,td){
	width: auto;
	height: auto;
	margin: 0;
	padding: 5px;
	border-collapse: collapse;
	border-spacing: 0;
	border-color: inherit;
	vertical-align: inherit;
	font-weight: inherit;
	font-size: 14px;

	-webkit-border-horizontal-spacing: 0;
	-webkit-border-vertical-spacing: 0;
	width: 100%;
	color: inherit;

	/* ========================================================================== Structure ========================================================================== */

	& tr:has(th){
		border-bottom: 1px var(--stgray-450) solid;
	}

	& tr th{
		background: var(--stgray-100);
	}

	&:is(thead,tfoot) tr th{
		padding: 0.5rem 1rem;
		color: var(--stgray-600);
		font-weight: 500;
	}

	& tbody tr{
		border-top: 1px var(--stgray-450) solid;
	}

	& tbody tr+tr{
		border-top: 1px var(--stgray-450) solid;
	}

	& tbody tr td{
		padding: 5px;
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Sizes */

	&.small,&.small:is(thead,tbody,tfoot,tr,th,td){
		font-size: var(--stfont-size-13px);
	}

	&.large,&.large:is(thead,tbody,tfoot,tr,th,td){
		font-size: var(--stfont-size-16px);
	}

	/* Collapsed */

	&.is-collapsed{
		width: auto;
	}

	&:is(th,td).is-collapsed{
		width: 1px;
		white-space: nowrap;
	}

	/* Truncated */

	&.is-truncated{
		table-layout: fixed;
	}

	&.is-truncated td{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Basic */

	&:is(.basic,.verybasic) tr th{
		background: transparent;
	}

	&.verybasic tbody:is(th,td,tr){
		border-color: transparent;
	}

	/* Definition */

	&.is-definition tr th:not(:first-child){
		background: var(--stgray-100);
	}

	&.is-definition tr th:first-child{
		background: transparent;
	}

	&.is-definition tr td:first-child{
		background: var(--stgray-100);
	}

	/* Celled */

	&.cell tr:is(td,th):not(:last-child){
		border-right: 1px solid var(--stgray-300);
	}

	/* Insetted */

	& td.is-insetted{
		box-shadow: inset 0px 0px 10px 0px rgb(0 0 0 / 5%);
	}

	/* Aligns */

	&:is(tr,th,td).left{
		text-align: left;
	}

	&:is(th,td).center{
		text-align: center;
	}

	&:is(th,td).right{
		text-align: right;
	}

	&.is-top-aligned:is(th,td){
		vertical-align: top;
	}

	&:is(th,td).is-top-aligned{
		vertical-align: top;
	}

	&:is(th,td).is-middle-aligned{
		vertical-align: middle;
	}

	& tr.is-middle-aligned td{
		vertical-align: middle;
	}

	&:is(th,td).is-bottom-aligned{
		vertical-align: bottom;
	}

	/* Secondary */

	&:is(tr,tr th,tr td).secondary{
		background: var(--stgray-75);
	}

	/* Tertiary */

	&:is(tr,tr th,tr td).is-tertiary{
		background: var(--stgray-100);
	}

	/* Active */

	&:is(tr,tr th,tr td).is-active{
		background: var(--stgray-300);
	}

	/* Disabled */

	&:is(tr,tr th,tr td).disabled{
		opacity: 0.5;
		user-select: none;
		pointer-events: none;
	}

	/* Single Line */

	&.is-single-line:is(tr,tr th,tr td),&:is(tr,tr th,tr td).is-single-line{
		white-space: nowrap;
	}

	/* Indicated */

	&:is(tr,tr th,tr td).is-indicated{
		box-shadow: 2px 0 0 var(--stgray-900) inset;
	}

	&:is(tr,tr th,tr td).is-indicated.error{
		box-shadow: 2px 0 0 var(--sterror-600) inset;
	}

	&:is(tr,tr th,tr td).is-indicated.is-positive{
		box-shadow: 2px 0 0 var(--stsuccess-600) inset;
	}

	&:is(tr,tr th,tr td).is-indicated.warning{
		box-shadow: 2px 0 0 var(--stwarn-600) inset;
	}

	/* Sticked */

	&.is-sticked tr *:is(td,th):first-child{
		padding-left: 0;
	}

	&.is-sticked tr *:is(td,th):last-child{
		padding-right: 0;
	}

	/* Density */

	&.is-relaxed:is(thead,tfoot) tr th{
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
	}

	&.is-relaxed tbody tr td{
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
	}

	&.is-dense:is(thead,tfoot) tr th{
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	&.is-dense tbody tr td{
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}

	/* Compact */

	&:is(thead,tfoot) tr th.is-compact{
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	&.is-compact:is(thead,tfoot) tr th{
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	&.is-compact tbody tr td{
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	& tbody tr td.is-compact{
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}

	/* Padded */

	&.is-padded tbody tr td{
		padding: 1rem 1.5rem;
	}

	&.is-padded:is(thead,tfoot) tr th{
		padding: 1rem 1.5rem;
	}

	&.is-horizontally-padded tbody tr td{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	&.is-horizontally-padded:is(thead,tfoot) tr th{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	& tbody tr td.vertically-padded{
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	& tbody tr td.is-padded{
		padding: 1rem 1.5rem;
	}

	& tbody tr td.vertically-padded{
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	& tbody tr td.is-horizontally-padded{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/* Fitted */

	&.is-fitted:is(thead,tfoot) tr th{
		padding: 0;
	}

	&.is-fitted tbody tr td{
		padding: 0;
	}

	& tbody tr td.is-fitted{
		padding: 0;
	}

	&.stripe>tbody>tr:nth-child(even){
		background: var(--stgray-100);
	}

	&.stripe>tbody:nth-child(even){
		background: var(--stgray-100);
	}

	&.stripe{
		background: var(--stgray-50);
	}
}

/* stripe */


/* Empty */

.tdempty{
	color: var(--stgray-300);
	font-weight: 500;
}

.tdempty::after{
	content: "—";
}

/* ========================================================================== Variables ========================================================================== */

.stprocedure{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stprocedure{
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ========================================================================== Structure ========================================================================== */

.stprocedure .item{
	text-decoration: none;
	display: flex;
	align-items: center;
	flex: 1 0 auto;
	color: var(--stgray-800);
	counter-increment: ordered;
}

.stprocedure .item:last-child{
	flex: 0 0 auto;
}

.stprocedure .item .indicator{
	border-radius: 100rem;

	border: 2px solid var(--stgray-300);
	color: var(--stgray-800);
	height: 2rem;
	width: 2rem;
	display: inline-flex;
	line-height: 1;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	margin-right: 1rem;
	background: transparent;
}

.stprocedure:not(.is-compact) .item .indicator:empty::after{
	content: counter(ordered,decimal);
}

.stprocedure .item .content{
	display: flex;
	align-items: center;
}

.stprocedure .item .label{
	color: var(--stgray-800);
	font-weight: 500;
}

.stprocedure .item .label .description{
	color: var(--stgray-600);
	font-size: var(--stfont-size-14px);
	font-weight: normal;
}

.stprocedure .item::after{
	height: 2px;
	content: "";
	flex: 1 1 0%;
	background: var(--stgray-300);
	margin: 0 1rem;
	pointer-events: none;
}

.stprocedure .item:last-child::after{
	display: none;
}

.stprocedure .item .indicator .icon{
	font-size: var(--stfont-size-14px);
}

/* ========================================================================== Variations ========================================================================== */

/* Active */

.stprocedure .item.is-active .indicator{
	background: var(--accent-color,var(--stgray-800));
	border-color: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
}

/* Stacked */

.stprocedure.is-stacked .item .content{
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
}

.stprocedure.is-stacked .item .indicator{
	margin-right: 0;
}

.stprocedure.is-stacked .item::after{
	margin-bottom: 2rem;
}

/* Processing */

.stprocedure .item.is-processing .indicator{
	background: transparent;
	border-color: var(--accent-color,var(--stgray-800));
	color: var(--stgray-800);
}

/* Completed */

.stprocedure .item.is-completed::after{
	background: var(--accent-color,var(--stgray-800));
}

.stprocedure .item.is-completed .indicator{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	text-decoration: inherit;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	background: var(--accent-color,var(--stgray-800));
	border-color: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
}

.stprocedure .item.is-completed .indicator::after,.stprocedure .item.is-completed .indicator *{
	display: none;
}

.stprocedure .item.is-completed .indicator::before{
	content: "\f00c";
}

/* Completed Half Line */

.stprocedure .item.is-completed .line.is-half::before{
	content: ' ';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	background: var(--stgray-300);
}

/* Disabled */

.stprocedure .item.disabled{
	pointer-events: none;
	opacity: 0.5;
	user-select: none;
}

.stprocedure .item.disabled .indicator{
	background: transparent;
	border-color: var(--stgray-300);
}

/* error */

.stprocedure .item.error .indicator{
	background: var(--sterror-500);
	color: var(--stwhite);
	border-color: var(--sterror-500);
}

.stprocedure .item.error .label{
	color: var(--sterror-500);
}

/* Compact */

.stprocedure.is-compact .item .indicator{
	height: 1rem;
	width: 1rem;
	padding: 0;
}

.stprocedure.is-compact .item.is-completed .indicator::after,.stprocedure.is-compact .item.is-completed .indicator::before,.stprocedure.is-compact .item.is-completed .indicator *{
	display: none;
}

/* Unordered */

.stprocedure.is-unordered .item .indicator{
	background: var(--stgray-200);
	border-color: var(--stgray-200);
}

.stprocedure.is-unordered .item.is-completed::after{
	background: var(--stgray-300);
}

.stprocedure.is-unordered .item.is-active .indicator{
	background: var(--accent-color,var(--stgray-800));
	border-color: var(--accent-color,var(--stgray-800));
}

.stprocedure.is-unordered .item.is-completed .indicator{
	background: var(--stgray-200);
	border-color: var(--stgray-200);
	color: var(--stgray-800);
}

/* Compact */

.stprocedure.is-compact .item.is-completed .indicator{
	background: var(--accent-color,var(--stgray-800));
	border-color: var(--accent-color,var(--stgray-800));
}

.stprocedure.is-compact .item.is-active .indicator{
	background: transparent;
	border-color: var(--accent-color,var(--stgray-800));
}

.stprocedure.is-compact .item.is-active .indicator::after{
	content: "";
	background: var(--accent-color,var(--stgray-800));
	position: absolute;
	top: 2px;
	left: 2px;
	right: 2px;
	bottom: 2px;
	border-radius: 100rem;
	display: block;
}

/* Vertical */

.stprocedure.vertical{
	flex-direction: column;
}

.stprocedure.vertical .item{
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 auto;
	-webkit-box-pack: start;
	justify-content: flex-start;
	display: flex;
	width: 100%;
}

.stprocedure.vertical .item::after{
	height: auto;
	min-height: 1.5rem;
	width: 2px;
	margin: 0.5rem 0 0.5rem 0.9rem;
}

.stprocedure.vertical.is-compact .item::after{
	margin: 0rem 0 0rem 0.4rem;
}

/* Sizes */

.stprocedure.small{
	font-size: var(--stfont-size-14px);
}

.stprocedure.large{
	font-size: var(--stfont-size-17px);
}

/* ========================================================================== Variables ========================================================================== */

.stgrid{
	--gap: 1rem;

	--1-wide: calc((100% / (16 / 1)) - var(--gap) + (var(--gap) / (16 / 1)));
	--2-wide: calc((100% / (16 / 2)) - var(--gap) + (var(--gap) / (16 / 2)));
	--3-wide: calc((100% / (16 / 3)) - var(--gap) + (var(--gap) / (16 / 3)));
	--4-wide: calc((100% / (16 / 4)) - var(--gap) + (var(--gap) / (16 / 4)));
	--5-wide: calc((100% / (16 / 5)) - var(--gap) + (var(--gap) / (16 / 5)));
	--6-wide: calc((100% / (16 / 6)) - var(--gap) + (var(--gap) / (16 / 6)));
	--7-wide: calc((100% / (16 / 7)) - var(--gap) + (var(--gap) / (16 / 7)));
	--8-wide: calc((100% / (16 / 8)) - var(--gap) + (var(--gap) / (16 / 8)));
	--9-wide: calc((100% / (16 / 9)) - var(--gap) + (var(--gap) / (16 / 9)));
	--10-wide: calc((100% / (16 / 10)) - var(--gap) + (var(--gap) / (16 / 10)));
	--11-wide: calc((100% / (16 / 11)) - var(--gap) + (var(--gap) / (16 / 11)));
	--12-wide: calc((100% / (16 / 12)) - var(--gap) + (var(--gap) / (16 / 12)));
	--13-wide: calc((100% / (16 / 13)) - var(--gap) + (var(--gap) / (16 / 13)));
	--14-wide: calc((100% / (16 / 14)) - var(--gap) + (var(--gap) / (16 / 14)));
	--15-wide: calc((100% / (16 / 15)) - var(--gap) + (var(--gap) / (16 / 15)));
	--16-wide: calc((100% / (16 / 16)) - var(--gap) + (var(--gap) / (16 / 16)));

	--1-columns: calc((100% / 1) - var(--gap) + (var(--gap) / 1));
	--2-columns: calc((100% / 2) - var(--gap) + (var(--gap) / 2));
	--3-columns: calc((100% / 3) - var(--gap) + (var(--gap) / 3));
	--4-columns: calc((100% / 4) - var(--gap) + (var(--gap) / 4));
	--5-columns: calc((100% / 5) - var(--gap) + (var(--gap) / 5));
	--6-columns: calc((100% / 6) - var(--gap) + (var(--gap) / 6));
	--7-columns: calc((100% / 7) - var(--gap) + (var(--gap) / 7));
	--8-columns: calc((100% / 8) - var(--gap) + (var(--gap) / 8));
	--9-columns: calc((100% / 9) - var(--gap) + (var(--gap) / 9));
	--10-columns: calc((100% / 10) - var(--gap) + (var(--gap) / 10));
}

/* ========================================================================== Base ========================================================================== */

/* ========================================================================== Structure ========================================================================== */

.stgrid{
	display: flex;
	flex-wrap: wrap;
	color: inherit;
	gap: var(--gap);
}

/* ========================================================================== Variations ========================================================================== */

/* Columns */

.stgrid.is-1-columns>.column{
	flex: var(--1-columns);
	max-width: var(--1-columns);
}

.stgrid.is-2-columns>.column{
	flex: var(--2-columns);
	max-width: var(--2-columns);
}

.stgrid.is-3-columns>.column{
	flex: var(--3-columns);
	max-width: var(--3-columns);
}

.stgrid.is-4-columns>.column{
	flex: var(--4-columns);
	max-width: var(--4-columns);
}

.stgrid.is-5-columns>.column{
	flex: var(--5-columns);
	max-width: var(--5-columns);
}

.stgrid.is-6-columns>.column{
	flex: var(--6-columns);
	max-width: var(--6-columns);
}

.stgrid.is-7-columns>.column{
	flex: var(--7-columns);
	max-width: var(--7-columns);
}

.stgrid.is-8-columns>.column{
	flex: var(--8-columns);
	max-width: var(--8-columns);
}

.stgrid.is-9-columns>.column{
	flex: var(--9-columns);
	max-width: var(--9-columns);
}

.stgrid.is-10-columns>.column{
	flex: var(--10-columns);
	max-width: var(--10-columns);
}

/* Relaxed */

.stgrid.is-relaxed{
	--gap: 2rem;
}

.stgrid.is-compact{
	--gap: 0.5rem;
}

/* Divided */

.stgrid.is-divided>.column:not(:last-child)::after{
	position: absolute;
	content: "";
	top: 0;
	bottom: 0;
	right: calc(var(--gap) / 2 * -1);
	border-right: 1px solid var(--stgray-300);
}

/* Evenly Divided */

.stgrid.is-evenly-divided>.column{
	flex: var(--1-wide);
	width: var(--1-wide);
}

/* Truncated */

.stgrid .column.is-truncated{
	overflow: hidden;
}

/* Stretched */

.stgrid.is-stretched>.column{
	display: inline-flex !important;
	align-self: stretch;
	flex-direction: column;
}

.stgrid.is-stretched>.column>*{
	flex-grow: 1;
}

/* Space Around */

.stgrid.is-spaced-between{
	justify-content: space-between;
}

.stgrid.is-spaced-around{
	justify-content: space-around;
}

/* Reverse */

.stgrid.is-reversed{
	flex-direction: row-reverse;
	flex-wrap: wrap-reverse;
}

/* Aligns */

.stgrid.left{
	justify-content: flex-start;
}

.stgrid.center{
	justify-content: center;
}

.stgrid.right{
	justify-content: flex-end;
}

.stgrid.is-top-aligned{
	align-items: flex-start;
}

.stgrid.is-middle-aligned{
	align-items: center;
}

.stgrid.is-bottom-aligned{
	align-items: flex-end;
}

.stgrid .column.left{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.stgrid .column.center{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stgrid .column.right{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Ordering */

.stgrid .column.is-first{
	order: -1;
}

.stgrid .column.is-last{
	order: 1;
}

.stgrid .column.is-order-1{
	order: 1;
}

.stgrid .column.is-order-2{
	order: 2;
}

.stgrid .column.is-order-3{
	order: 3;
}

.stgrid .column.is-order-4{
	order: 4;
}

.stgrid .column.is-order-5{
	order: 5;
}

.stgrid .column.is-order-6{
	order: 6;
}

.stgrid .column.is-order-7{
	order: 7;
}

.stgrid .column.is-order-8{
	order: 8;
}

.stgrid .column.is-order-9{
	order: 9;
}

.stgrid .column.is-order-10{
	order: 10;
}

/* Wides */

/*.stgrid .column{

 }*/
.stgrid .column.is-1-wide{
	width: var(--1-wide);
	max-width: var(--1-wide);
}

.stgrid .column.is-2-wide{
	width: var(--2-wide);
	max-width: var(--2-wide);
}

.stgrid .column.is-3-wide{
	width: var(--3-wide);
	max-width: var(--3-wide);
}

.stgrid .column.is-4-wide{
	width: var(--4-wide);
	max-width: var(--4-wide);
}

.stgrid .column.is-5-wide{
	width: var(--5-wide);
	max-width: var(--5-wide);
}

.stgrid .column.is-6-wide{
	width: var(--6-wide);
	max-width: var(--6-wide);
}

.stgrid .column.is-7-wide{
	width: var(--7-wide);
	max-width: var(--7-wide);
}

.stgrid .column.is-8-wide{
	width: var(--8-wide);
	max-width: var(--8-wide);
}

.stgrid .column.is-9-wide{
	width: var(--9-wide);
	max-width: var(--9-wide);
}

.stgrid .column.is-10-wide{
	width: var(--10-wide);
	max-width: var(--10-wide);
}

.stgrid .column.is-11-wide{
	width: var(--11-wide);
	max-width: var(--11-wide);
}

.stgrid .column.is-12-wide{
	width: var(--12-wide);
	max-width: var(--12-wide);
}

.stgrid .column.is-13-wide{
	width: var(--13-wide);
	max-width: var(--13-wide);
}

.stgrid .column.is-14-wide{
	width: var(--14-wide);
	max-width: var(--14-wide);
}

.stgrid .column.is-15-wide{
	width: var(--15-wide);
	max-width: var(--15-wide);
}

.stgrid .column.is-16-wide{
	width: var(--16-wide);
	max-width: var(--16-wide);
}

/* fill */

.stgrid .column.fill{
	flex: 1;
	min-width: 0;
	flex-grow: 1;
}

/* Stacked */

.stgrid.is-stacked>.column{
	flex: var(--16-wide);
	max-width: var(--16-wide);
}

/* ========================================================================== Variables ========================================================================== */

.strating{
	--accent-color: initial;
	--accent-foreground-color: initial;
	--color: var(--accent-color,inherit);
}

/* ========================================================================== Base ========================================================================== */

.strating{
	display: inline-flex;
	gap: 0.2rem;
	user-select: none;
}

/* ========================================================================== Structure ========================================================================== */

.strating:is(.star,.heart){
	color: var(--stgray-200);
	text-decoration: none;
}

.strating:is(.star,.heart).is-active,.strating.is-input:is(.star,.heart):checked,.strating.is-input:is(.star,.heart):hover{
	color: var(--color);
}

/* Issue #924 */
.strating.is-input:is(.star,.heart):has(~:is(.star,.heart):hover),.strating.is-input:is(.star,.heart):has(~:is(.star,.heart):checked){
	color: var(--color);
}

.strating.is-yellow{
	--color: #e3c81b;
}

.strating.is-red{
	--color: #ff1100;
}

.strating:is(.star,.heart)::after,.strating:is(.star,.heart)::before{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	display: inline;
	text-decoration: inherit;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
}

.strating .star::after{
	content: "\f005";
	z-index: 0;
}

.strating .heart::after{
	content: "\f004";
}

/* ========================================================================== Variations ========================================================================== */

/* Half */

.strating .star.is-active.is-half::after{
	color: var(--stgray-200);
}

.strating .star.is-active.is-half::before{
	color: var(--color);
}

.strating .star.is-active.is-half::before{
	content: "\f089";

	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

/* Disabled */

.strating.disabled{
	pointer-events: none;
}

/* Input */

.strating.is-input input{
	appearance: none;
	margin: 0;
	cursor: pointer;
	font-size: 1rem;
	transition: color 0.1s ease,opacity 0.1s ease;
}

.strating.is-input input:hover:not(:focus)~input,.strating.is-input input:hover:focus~input{
	opacity: 0.7;
}

.strating.is-input input:hover:not(:focus){
	transform: scale(1.1);
}

/* Sizes */

.strating.small{
	font-size: var(--stfont-size-13px);
}

.strating.large{
	font-size: var(--stfont-size-18px);
}

/* ========================================================================== Variables ========================================================================== */

.stchip{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stchip{
	vertical-align: middle;
	text-decoration: none;
}

.stchip,.stchip.is-input .content,.stchip.is-toggle .content{
	background: var(--stgray-200);
	padding: 0.1rem 0.6rem;
	border: 1px solid var(--stgray-200);
	border-radius: 0.4rem;
	font-size: var(--stfont-size-14px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	line-height: 1.75;
	min-height: 22px;
	/*min-width: 55px;*/
	color: var(--accent-color,var(--stgray-800));
}

.stchip.is-input,.stchip.is-toggle{
	background: initial;
	padding: initial;
	border: initial;

	font-size: initial;
	display: initial;
	gap: initial;
	line-height: initial;
	min-height: initial;
	min-width: initial;
}

/* ========================================================================== Structure ========================================================================== */

.stchip img{
	width: 24px;
	height: 24px;
	border-radius: 0.4rem;
	margin-left: -5px;
}

.stchip input{
	display: none;
}

/* ========================================================================== Variations ========================================================================== */

/* Outlined */

.stchip.outline,.stchip.outline .content{
	background: transparent;
	border-color: var(--stgray-300);
}

/* Circular */

.stchipround,.stchipround .content{
	border-radius: 100rem;
}

/* Input */

.stchip.is-input,.stchip.is-toggle{
	cursor: pointer;
	user-select: none;
}

/* Toggle */

.stchip.is-toggle input:checked+.content{
	background: var(--accent-color,var(--stgray-800));
	border-color: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
}

.stchip.is-toggle.secondary input:checked+.content{
	color: var(--accent-color,var(--stgray-800));
	background: var(--stgray-200);
	border-color: var(--accent-color,var(--stgray-600));
}

/* Input */

.stchip.is-input input:checked+.content{
	background: var(--accent-color,var(--stprimary-700));
	border-color: var(--accent-color,var(--stprimary-700));
	color: var(--accent-foreground-color,var(--stwhite));
}

.stchip.is-input.secondary input:checked+.content{
	color: var(--accent-color,var(--stprimary-600));
	background: var(--stgray-100);
	border-color: var(--accent-color,var(--stprimary-600));
}

.stchip.is-input input:checked+.content::before{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	display: inline;
	text-decoration: inherit;
	text-align: center;
	width: 1.18em;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	content: "\f00c";
	font-size: 12px;
}

.stchip.is-input.starticon input:checked+.content::before,.stchip.is-input.endicon input:checked+.content::before{
	display: none;
}

.stchip.is-input.starticon input:checked+.content .icon::before,.stchip.is-input.endicon input:checked+.content .icon::before{
	content: "\f00c";
}

/* Disabled */

.stchip.disabled{
	pointer-events: none;
	opacity: 0.5;
	user-select: none;
}

/* fill */

.stchip.fill{
	display: flex;
}

.stchip.fill .content{
	width: 100%;
}

/* Sizes */

.stchip.small,.stchip.small .content{
	font-size: var(--stfont-size-12px);
}

.stchip.large,.stchip.large .content{
	font-size: var(--stfont-size-16px);
}

/* Dense */

.stchip.is-dense{
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
}

.stchip.is-dense:is(.is-input,.is-toggle) .content{
	min-height: 20px;
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
}

/* Spaced */

.stchip.is-start-spaced{
	margin-left: 0.45rem;
}

.stchip.is-end-spaced{
	margin-right: 0.45rem;
}

/* ========================================================================== Variables ========================================================================== */

.close{
	--accent-color: initial;
	--accent-foreground-color: initial;
	/* ========================================================================== Base ========================================================================== */

	border: none;
	margin: 0;
	padding: 1px;
	width: auto;
	overflow: visible;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	border-radius: 0;
	outline: none;
	box-sizing: border-box;
	user-select: none;

	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	appearance: none;
	-webkit-appearance: none;

	font-weight: normal;
	font-style: normal;
	text-decoration: inherit;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;

	cursor: pointer;
	height: 20px;
	width: 20px;
	font-size: var(--stfont-size-12px);
	line-height: 1;
	background: var(--accent-color,var(--stgray-600));
	color: var(--accent-foreground-color,var(--stgray-100));
	border-radius: 100rem;

	&::before{
		content: "X";
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Secondary */
	&.secondary{
		background: var(--stgray-300);
		color: var(--stgray-800);
	}

	/* Tertiary */
	&.tertiary{
		background: var(--stgray-300);
		color: var(--stgray-50);
	}

	/* Rounded */
	&.round{
		border-radius: 0.4rem;
	}

	/* Sizes */
	&.small{
		height: 15px;
		width: 15px;
	}

	&.big{
		height: 25px;
		width: 25px;
		font-size: var(--stfont-size-18px);
	}

	/* Spaced */
	&.space{
		margin-left: 0.45rem;
		margin-right: 0.45rem;
	}

	&.startspace{
		margin-left: 0.45rem;
	}

	&.endspace{
		margin-right: 0.45rem;
	}
}


/* ========================================================================== Variables ========================================================================== */

@keyframes stloading-spin{
	from{
		transform: rotate(0deg);
	}

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

.stloading{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stloading{
	display: inline-block;
	text-align: center;
	color: var(--accent-color,var(--stgray-600));
}

.stloading::after{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	text-decoration: inherit;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	animation: stloading-spin 2s linear infinite;
	font-size: 2rem;
}

/* ========================================================================== Structure ========================================================================== */

.stloading::after{
	content: "\f110";
}

/* ========================================================================== Variations ========================================================================== */

/* Notched */

.stloading.is-notched::after{
	content: "\f1ce";
}

/* Centered */

.stloading.is-centered{
	display: flex;
	justify-content: center;
}

/* Sizes */

.stloading.small::after{
	font-size: 1rem;
}

.stloading.large::after{
	font-size: 2.8rem;
}

/* ========================================================================== Variables ========================================================================== */

.breadcrumb{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.breadcrumb{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	color: var(--stgray-800);
	line-height: 1;
}

/* ========================================================================== Structure ========================================================================== */

.breadcrumb .link{
	text-decoration: none;
	color: var(--stgray-800);
	padding-right: 1.1rem;
	cursor: pointer;
	user-select: none;
}

.breadcrumb .link:last-child{
	padding-right: 0;
}

.breadcrumb .link .icon{
	display: inline-block;
	text-decoration: none;
}

.breadcrumb a.link:hover{
	text-decoration: underline;
}

.breadcrumb .link::after{
	position: absolute;
	user-select: none;
	margin-left: 0.7rem;
	display: inline-block;
	pointer-events: none;
	content: "/";
	color: var(--stgray-500);
}

.breadcrumb .link:last-child::after{
	display: none;
}

.breadcrumb .divider .icon{
	font-size: 12px;
	color: var(--stgray-500);
}

/* ========================================================================== Variations ========================================================================== */

/* Stepped */

.breadcrumb.step .link{
	color: var(--stgray-500);
}

/* Active */

.breadcrumb .link.active{
	color: var(--accent-color,var(--stgray-800));
	font-weight: bold;
}

/* Customized */

.breadcrumb.customize .link::after{
	content: "";
}

.breadcrumb.customize .link{
	padding-right: 0;
}

/* Chevroned */

.breadcrumb.arrow .link::after{
	content: "\f054";
	font-size: var(--stfont-size-12px);
	line-height: 1.4;
}

/* Hyphenated */

.breadcrumb.hyphenate .link::after{
	content: "-";
}

.breadcrumb:is(.arrow,.hyphenate) .link::after{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
}

/* Sizes */

.breadcrumb.small{
	font-size: var(--stfont-size-15px);
}

.breadcrumb.big{
	font-size: var(--stfont-size-20px);
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stlist{
	color: inherit;
	display: flex;
	flex-direction: column;
}

/* ========================================================================== Structure ========================================================================== */

.stlist .item{
	display: inline-block;
}

/* ========================================================================== Variations ========================================================================== */

.stlist:is(.is-ordered,.is-unordered){
	margin-left: 1.2rem;
}

.stlist:is(.is-unordered,.is-ordered) .item{
	display: list-item;
}

/* Unordered */

.stlist.is-unordered>.item,.stlist.is-unordered>*:not(.stlist)>.item{
	list-style-type: disc;
}

/* Ordered */

.stlist.is-ordered>.item,.stlist.is-ordered>*:not(.stlist)>.item{
	list-style-type: decimal;
}

/* Sizes */

.stlist.small{
	font-size: var(--stfont-size-14px);
}

.stlist.large{
	font-size: var(--stfont-size-17px);
}

/* ========================================================================== Variables ========================================================================== */

.ststatistic{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.ststatistic{
	display: flex;
	color: inherit;
	gap: 0.5rem;
	align-items: center;
}

/* ========================================================================== Structure ========================================================================== */

.ststatistic .value{
	display: inline-flex;
	font-size: var(--strelative-massive);
	font-weight: 500;
	line-height: 1.4;
	align-items: center;
	color: var(--accent-color,inherit);
}

.ststatistic .unit{
	font-size: var(--strelative-medium);
	color: var(--stgray-600);
}

.ststatistic .comparison{
	font-size: var(--strelative-medium);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--stgray-600);
}

.ststatistic .comparison::before{
	font-family: "Icons";
	margin-right: 0.35rem;
	margin-top: 2px;
	font-size: 1rem;
}

.ststatistic .icon{
	font-size: var(--strelative-massive);
	margin-right: 0.5rem;
}

/* ========================================================================== Variations ========================================================================== */

/* Aligns */

.ststatistic.left>.value{
	justify-content: flex-start;
}

.ststatistic.center>.value{
	justify-content: center;
}

/* Centered */

.ststatistic.is-centered{
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Text */

.ststatistic>.value.is-text{
	font-size: 1em;
	min-height: calc(2.125rem + 0.3rem);
}

/* Comparisons */

.ststatistic .comparison.is-increased::before{
	content: "\f0d8";
}

.ststatistic .comparison.is-decreased::before{
	content: "\f0d7";
}

.ststatistic.is-increased .value::before,.ststatistic.is-decreased .value::before{
	font-family: "Icons";
	margin-right: 0.5rem;
}

.ststatistic.is-increased .value::before{
	content: "\f0d8";
}

.ststatistic.is-decreased .value::before{
	content: "\f0d7";
}

/* fill */

.ststatistic.fill{
	width: 100%;
}

/* Sizes */

.ststatistic.is-mini.is-mini.is-mini{
	font-size: 0.8125rem;
}

.ststatistic.tiny.tiny.tiny{
	font-size: 0.875rem;
}

.ststatistic.small.small.small{
	font-size: 0.9375rem;
}

.ststatistic.large.large.large{
	font-size: 1.125rem;
}

.ststatistic.big.big.big{
	font-size: 1.375rem;
}

.ststatistic.huge.huge.huge{
	font-size: 1.75rem;
}

.ststatistic.massive.massive.massive{
	font-size: 2rem;
}

/* ========================================================================== Variables ========================================================================== */

.stapp-sidebar{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stapp-sidebar{
	margin-right: 1.5rem;
}

/* ========================================================================== Structure ========================================================================== */

.stapp-sidebar .item{
	padding: 0.7rem 1.5rem;
	display: flex;
	font-weight: 500;
	color: var(--stgray-800);
	text-decoration: none;
}

.stapp-sidebar .header{
	font-weight: bold;
	padding: 0.75rem 1.5rem;
	font-size: var(--stfont-size-15px);
	color: var(--stgray-500);
}

.stapp-sidebar .item+.header{
	margin-top: 1.5rem;
}

.stapp-sidebar .item .icon{
	margin-right: 1rem;
	font-size: 1.1em;
}

/* ========================================================================== Variations ========================================================================== */

/* Active */

.stapp-sidebar .item.is-active{
	background: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
	border-radius: 0px 100rem 100rem 0;
}

/* Disabled */

.stapp-sidebar .item.disabled{
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

/* Dense */

.stapp-sidebar.is-dense .item{
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

.stapp-sidebar.is-dense .item+.header{
	margin-top: 0.5rem;
}

.stapp-sidebar.is-dense .header{
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

/* ========================================================================== Variables ========================================================================== */

.stapp-navbar{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stapp-navbar{
	display: inline-flex;
	align-items: center;
}

/* ========================================================================== Structure ========================================================================== */

.stapp-navbar .item{
	color: var(--stgray-500);
	text-decoration: none;
	text-align: center;
	display: inline-flex;
	gap: 0.3rem;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 0.4rem;

	margin: 0 0;
	padding-left: 1rem;
	padding-right: 1rem;
	font-weight: 500;
	font-size: 14px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
}

.stapp-navbar .item .icon{
	line-height: 1.2;
	font-size: 1.2rem;
}

.stapp-navbar .item .label{
	line-height: 1;
}

/* ========================================================================== Variations ========================================================================== */

/* fill */

.stapp-navbar.fill{
	display: flex;
}

.stapp-navbar.fill .item{
	flex: 1;
}

/* Unlabeled */

.stapp-navbar.is-unlabeled .item:not(.is-active) .label{
	display: none;
}

/* Active */

.stapp-navbar .item.is-active{
	color: var(--accent-color,var(--stgray-800));
}

.stapp-navbar .item.is-active .icon{
	--accent-color: inherit;
	--accent-foreground-color: inherit;
}

/* Disabled */

.stapp-navbar .item.disabled{
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

/* Vertical */

.stapp-navbar.vertical{
	flex-direction: column;
}

.stapp-navbar.vertical .item{
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
	padding-left: 0;
	padding-right: 0;
}

.stapp-navbar.vertical .item:first-child{
	padding-top: 0;
}

/* Indicated */

.stapp-navbar.is-indicated .item{
	color: var(--stgray-800);
}

.stapp-navbar.is-indicated .item .icon{
	padding: 0.25rem 1rem;
	line-height: 1.2;
	font-size: 1.2rem;
	display: flex;
	min-height: 26px;
	align-items: center;
	justify-content: center;
	width: auto;
	border-radius: 100rem;
}

.stapp-navbar.is-indicated .item.is-active .icon{
	background: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
}

/* Dense */

.stapp-navbar.is-dense .item{
	gap: 0.25rem;
}

.stapp-navbar.is-dense.is-indicated .item .icon{
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
	min-height: 25px;
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stsnackbar{
	background: var(--ststatic-gray-800);
	color: var(--stwhite);
	display: inline-flex;
	padding: 0.35rem 1rem;
	border-radius: 0.4rem;
	font-size: var(--stabsolute-small);
}

/* ========================================================================== Structure ========================================================================== */

.stsnackbar .content{
	margin: 0.25rem 0;
}

.stsnackbar .action{
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: normal;
	border-radius: 0;
	outline: none;
	box-sizing: border-box;
	user-select: none;

	margin-right: -0.5rem;

	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	appearance: none;
	-webkit-appearance: none;

	margin-left: 2rem;

	align-self: flex-start;
	padding: 0.65em 1em;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--stprimary-400);
	border-radius: 0.4rem;
	font-size: var(--stabsolute-small);
	cursor: pointer;
}

/* ========================================================================== Variations ========================================================================== */

/* error */

.stsnackbar .action.error{
	color: var(--sterror-500);
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

details.staccordion{
	color: inherit;
	box-sizing: border-box;
}

/* ========================================================================== Structure ========================================================================== */

details.staccordion summary{
	list-style-type: none;
}

details.staccordion summary::-webkit-details-marker{
	display: none;
}

details.staccordion summary::marker{
	display: none;
}

details.staccordion summary{
	display: flex;
	align-items: center;
	user-select: none;
	cursor: pointer;
}

details.staccordion summary::before{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	display: inline;
	text-decoration: inherit;
	text-align: center;
	width: 1.18em;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	display: block;
	margin-right: 0.7rem;
	color: var(--stgray-600);
	transform: rotate(270deg);
	content: "\f078";
	line-height: 1;
	font-size: 14px;
}

/* ========================================================================== Variations ========================================================================== */

/* Open */

details.staccordion[open] summary::before{
	transform: rotate(0deg);
}

details.staccordion[open] summary{
	margin-bottom: 0.5rem;
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

/* ========================================================================== Structure ========================================================================== */

.stmask{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgb(0 0 0 / 50%);
	color: var(--stgray-50);
	z-index: 101;
}

/* ========================================================================== Variations ========================================================================== */

/* Vertical Aligns */

.stmask.is-top{
	top: 0;
	bottom: initial;
}

.stmask.is-middle{
	top: 50%;
	transform: translateY(-50%);
	bottom: initial;
}

.stmask.is-bottom{
	bottom: 0;
	top: initial;
}

/* Blurring */

.stmask.is-blurring{
	backdrop-filter: blur(3px);
}

/* Secondary */

.stmask.secondary{
	background: transparent;
	color: var(--stgray-800);
}

/* Faded */

.stmask.is-faded.is-top{
	background: linear-gradient(to bottom,rgb(0 0 0 / 50%) 0%,rgba(0,0,0,0) 100%);
}

.stmask.is-faded.is-bottom{
	background: linear-gradient(to top,rgb(0 0 0 / 50%) 0%,rgba(0,0,0,0) 100%);
}

/* ========================================================================== Variables ========================================================================== */

@keyframes stplaceholder-shimmer{
	0%{
		background-position: -1000px 0;
	}

	100%{
		background-position: 1000px 0;
	}
}

@keyframes stplaceholder-blink{
	30%{
		opacity: 0;
	}
}

/* ========================================================================== Base ========================================================================== */

/* ========================================================================== Structure ========================================================================== */

.stplaceholder .text,.stplaceholder .image.is-header::after,.stplaceholder .image.is-header::before,.stplaceholder .image{
	background: var(--stgray-200);
	height: 0.8em;
	width: 45%;
	margin: 0.8em 0;
}

.stplaceholder:first-child>*:first-child{
	margin-top: 0;
}

.stplaceholder:last-child>*:last-child{
	margin-bottom: 0;
}

.stplaceholder .image{
	height: 150px;
	width: 100%;
}

.stplaceholder .text:nth-child(1){
	width: 43%;
}

.stplaceholder .text:nth-child(2){
	width: 78%;
}

.stplaceholder .text:nth-child(3){
	width: 70%;
}

.stplaceholder .text:nth-child(4){
	width: 80%;
}

.stplaceholder .text:nth-child(5){
	width: 60%;
}

.stplaceholder .text:nth-child(6){
	width: 44%;
}

.stplaceholder .text:nth-child(7){
	width: 63%;
}

.stplaceholder .text:nth-child(8){
	width: 49%;
}

.stplaceholder .text:nth-child(9){
	width: 72%;
}

.stplaceholder .text:nth-child(10){
	width: 61%;
}

.stplaceholder .text:nth-child(11){
	width: 45%;
}

.stplaceholder .text:nth-child(12){
	width: 55%;
}

.stplaceholder .text:nth-child(13){
	width: 56%;
}

.stplaceholder .text:nth-child(14){
	width: 57%;
}

.stplaceholder .text:nth-child(15){
	width: 73%;
}

.stplaceholder .text:nth-child(16){
	width: 59%;
}

.stplaceholder .text:nth-child(17){
	width: 47%;
}

.stplaceholder .text:nth-child(18){
	width: 77%;
}

/* ========================================================================== Variations ========================================================================== */

/* Header */

.stplaceholder .text.is-header{
	background: var(--stgray-300);
}

.stplaceholder .image.is-header{
	width: 36px;
	height: 36px;
	position: static;
}

.stplaceholder .image.is-header::after,.stplaceholder .image.is-header::before{
	position: absolute;
	content: "";
	margin: 0;
}

.stplaceholder .image.is-header::after{
	top: 0;
	left: calc(36px + 1rem);
	width: 65%;
	background: var(--stgray-300);
}

.stplaceholder .image.is-header::before{
	top: 25px;
	left: calc(36px + 1rem);
	width: 55%;
}

/* Preparing */

.stplaceholder.is-preparing .text,.stplaceholder.is-preparing .text.is-header,.stplaceholder.is-preparing .image.is-header::after,.stplaceholder.is-preparing .image.is-header::before,.stplaceholder.is-preparing .image{
	animation-duration: 1.8s;
	animation-fill-mode: alternate;
	animation-iteration-count: infinite;
	animation-name: stplaceholder-blink;
	animation-timing-function: linear;
}

/* Loading */

.stplaceholder.loading .text,.stplaceholder.loading .text.is-header,.stplaceholder.loading .image.is-header::after,.stplaceholder.loading .image.is-header::before,.stplaceholder.loading .image{
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: stplaceholder-shimmer;
	animation-timing-function: linear;

	background: linear-gradient(to right,var(--stgray-200) 8%,var(--stgray-300) 18%,var(--stgray-200) 33%);
	background-size: 1000px 200px;
}

.stplaceholder.loading .text.is-header{
	background: linear-gradient(to right,var(--stgray-300) 8%,var(--stgray-400) 18%,var(--stgray-300) 33%);
	background-size: 1000px 200px;
}

/* Rounded */

.stplaceholder.is-rounded *{
	border-radius: 0.4rem;
}

/* Widthes */

.stplaceholder .text.is-short{
	width: 30%;
}

.stplaceholder .text.is-very-short{
	width: 30%;
}

.stplaceholder .text.is-extra-short{
	width: 20%;
}

.stplaceholder .text.is-long{
	width: 70%;
}

.stplaceholder .text.is-very-long{
	width: 80%;
}

.stplaceholder .text.is-extra-long{
	width: 90%;
}

/* ========================================================================== Variables ========================================================================== */

.stheader{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stheader{
	font-weight: 500;
	font-size: var(--stfont-size-17px);
	color: var(--accent-color,inherit);
	line-height: 1.5;
	display: flex;
	align-items: center;
}

/* ========================================================================== Structure ========================================================================== */

a.stheader{
	text-decoration: none;
}

a.stheader:hover{
	text-decoration: underline;
}

/* ========================================================================== Variations ========================================================================== */

/* Truncated */

.stheader.is-truncated{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

/* error */

.stheader.error{
	color: var(--sterror-600);
}

/* Heavy */

.stheader.is-heavy{
	font-weight: bold !important;
}

/* Aligns */

.stheader.center{
	text-align: center;
	justify-content: center;
}

.stheader.left{
	text-align: left;
	justify-content: flex-start;
}

.stheader.right{
	text-align: right;
	justify-content: flex-end;
}

/* Uppercased */

.stheader.is-uppercased{
	text-transform: uppercase;
}

/* Lowercased */

.stheader.is-lowercased{
	text-transform: lowercase;
}

/* Icon */

.stheader.fullicon{
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.stheader.fullicon .icon{
	font-size: 3em;
	width: auto;
	line-height: 1;
	margin-bottom: 0.5rem;
}

/* Side Icon */

.stheader:is(.starticon,.endicon) .icon{
	font-size: 1.25em;
}

.stheader.starticon .icon{
	margin-right: 0.6rem;
}

.stheader.endicon .icon{
	margin-left: 0.6rem;
}

/* Secondary */

.stheader.secondary{
	color: var(--stgray-500);
}

/* Sizes */

.stheader.large{
	font-size: var(--stfont-size-20px);
}

.stheader.big{
	font-size: var(--stfont-size-24px);
}

.stheader.huge{
	font-size: var(--stfont-size-30px);
}

.stheader.massive{
	font-size: var(--stfont-size-33px);
}

/* Tight */

.stheader.is-tight{
	line-height: 1.3;
}

/* ========================================================================== Variables ========================================================================== */

.main{
	--accent-color: initial;
	--accent-foreground-color: initial;
	--stindicator-color: var(--accent-color,var(--stgray-900));
}

/* ========================================================================== Base ========================================================================== */

.main{
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--stgray-300);
	border-radius: 15px;
	overflow: hidden;
	padding: 1rem;
	box-sizing: border-box;
	background: var(--stgray-75);
}

a.main:hover{
	border-color: var(--stgray-400);
}

/* ========================================================================== Variations ========================================================================== */

/* Collapsed */

.main.is-collapsed{
	width: fit-content;
}

/* Indicated */

.main.is-top-indicated{
	border-top: 3px solid var(--stindicator-color);
}

.main.is-bottom-indicated{
	border-bottom: 3px solid var(--stindicator-color);
}

.main.is-left-indicated{
	border-left: 3px solid var(--stindicator-color);
}

.main.is-right-indicated{
	border-right: 3px solid var(--stindicator-color);
}

/* Secondary */

.main.secondary{
	background: var(--stgray-75);
}

/* Tertiary */

.main.is-tertiary{
	background: var(--stgray-100);
}

/* Emphasises */

.main[class*="-indicated"].error{
	--stindicator-color: var(--sterror-500);
}

.main[class*="-indicated"].is-positive{
	--stindicator-color: var(--stsuccess-500);
}

.main[class*="-indicated"].warning{
	--stindicator-color: var(--stwarn-500);
}

/* Elevated */

.main.is-elevated{
	box-shadow: 0px 1px 5px 0 #00000024;
}

.main.is-very-elevated{
	box-shadow: rgb(0 0 0 / 20%) 0px 3px 3px -2px,rgb(0 0 0 / 14%) 0px 3px 4px 0px,rgb(0 0 0 / 12%) 0px 1px 8px 0px;
}

/* Padded */

.main.is-padded{
	padding: 1.5rem;
}

.main.is-horizontally-padded{
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.main.vertically-padded{
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.main.is-very-padded{
	padding: 3.5rem;
}

.main.is-horizontally-very-padded{
	padding-left: 3.5rem;
	padding-right: 3.5rem;
}

.main.vertically-very-padded{
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

/* Dense */

.main.is-dense{
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.main.square{
	border-radius: 0px;
}

/* ========================================================================== Variables ========================================================================== */

.stquote{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stquote{
	padding-left: 3rem;
	padding-top: 1rem;
	color: inherit;
}

.stquote::before{
	content: "“";
	position: absolute;
	top: 0em;
	left: 0px;
	font-size: 5rem;
	font-family: Georgia,"Times New Roman",Times;
	color: var(--accent-color,var(--stgray-300));
	line-height: 1;
}

/* ========================================================================== Structure ========================================================================== */

.stquote .cite{
	font-style: normal;
	color: var(--stgray-600);
	margin-top: 1rem;
}

/* ========================================================================== Variations ========================================================================== */

/* Heading */

.stquote.is-heading{
	font-size: var(--stfont-size-20px);
	font-weight: 500;
	color: var(--stgray-800);
	padding: 0;
	text-align: center;
}

.stquote.is-heading::before{
	background: var(--accent-color,var(--stgray-100));
	color: var(--accent-foreground-color,var(--stgray-800));
	border-radius: 50%;
	content: "”";
	display: block;
	font-size: 3.3rem;
	font-weight: bold;
	line-height: 1.2;
	margin: 0 auto .5rem auto;
	text-align: center;
	height: 2.6rem;
	width: 2.6rem;
	position: relative;
}

.stquote.is-heading .cite{
	font-size: 15px;
	font-weight: normal;
	margin-top: 0;
}

/* Secondary */

.stquote.secondary{
	border-left: 5px solid var(--accent-color,var(--stgray-300));
	padding: 0 0 0 2rem;
}

.stquote.secondary::before{
	display: none;
}

/* Sizes */

.stquote.small{
	font-size: var(--stfont-size-14px);
}

.stquote.large{
	font-size: var(--stfont-size-17px);
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stapp-layout{
	display: flex;
	flex-direction: row;
	color: inherit;
	height: 100%;
	width: 100%;
}

/* ========================================================================== Structure ========================================================================== */

.stapp-layout .cell{
	flex-shrink: 0;
	background: var(--stgray-50);
}

/* ========================================================================== Variations ========================================================================== */

/* Full */

.stapp-layout.is-full{
	height: 100vh;
	width: 100vw;
}

/* Horizontal */

.stapp-layout.is-horizontal{
	display: flex;
	flex-direction: row;
}

.stapp-layout.is-horizontal>.cell:not(:last-child){
	border-right: 1px solid var(--stgray-300);
}

.stapp-layout .cell.is-horizontal{
	display: flex;
	flex-direction: row;
}

.stapp-layout .cell.is-horizontal>.cell:not(:last-child){
	border-right: 1px solid var(--stgray-300);
}

/* Vertical */

.stapp-layout.vertical{
	display: flex;
	flex-direction: column;
}

.stapp-layout.vertical>.cell:not(:last-child){
	border-bottom: 1px solid var(--stgray-300);
}

.stapp-layout .cell.vertical{
	display: flex;
	flex-direction: column;
}

.stapp-layout .cell.vertical>.cell:not(:last-child){
	border-bottom: 1px solid var(--stgray-300);
}

/* Scrollable */

.stapp-layout .cell.is-scrollable{
	overflow-y: auto;
}

/* fill */

.stapp-layout .cell.fill{
	flex: 1;
	flex-shrink: 1;
}

/* Secondary */

.stapp-layout .cell.secondary{
	background: var(--stgray-75);
}

/* Tertiary */

.stapp-layout .cell.is-tertiary{
	background: var(--stgray-100);
}

/* ========================================================================== Variables ========================================================================== */

.stavatar{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stavatar{
	display: inline-flex;
	width: 32px;
	height: 32px;
	border-radius: 0.4rem;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	border: 1px solid transparent;
	white-space: nowrap;
	overflow: hidden;
}

/* ========================================================================== Structure ========================================================================== */

.stavatar img{
	width: 100%;
}

/* ========================================================================== Variations ========================================================================== */

/* Circular */

.stavatarround,.stavatarround img{
	border-radius: 100rem;
}

/* Text */

.stavatar.is-text{
	background: var(--accent-color,var(--stgray-200));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-foreground-color,var(--stgray-600));
	font-weight: 500;
	font-size: 1.1rem;
}

/* Bordered */

.stavatar.is-bordered{
	border-color: var(--stgray-300);
}

/* Group */

.stavatar.is-group{
	height: initial;
	width: initial;
	justify-content: flex-end;
	flex-direction: row-reverse;
}

.stavatar.is-group .stavatar:not(:last-child){
	margin-inline-start: -0.6rem;
}

/* Sizes */

.stavatar.small{
	width: 24px;
	height: 24px;
}

.stavatar.large{
	width: 48px;
	height: 48px;
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stwrap{
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* ========================================================================== Variations ========================================================================== */

/* Vertical */

.stwrap.vertical{
	flex-direction: column;
}

/* Aligns */

.stwrap.is-top-aligned{
	align-items: flex-start;
}

.stwrap.is-middle-aligned{
	align-items: center;
}

.stwrap.is-bottom-aligned{
	align-items: flex-end;
}

.stwrap.left{
	justify-content: flex-start;
}

.stwrap.center{
	justify-content: center;
}

.stwrap.right{
	justify-content: flex-end;
}

.stwrap.left.vertical{
	align-items: flex-start;
}

.stwrap.center.vertical{
	align-items: center;
}

.stwrap.right.vertical{
	align-items: flex-end;
}

/* Relaxed */

.stwrap.is-relaxed{
	gap: 2rem;
}

/* Compact */

.stwrap.is-compact{
	gap: 0.5rem;
}

/* ========================================================================== Variables ========================================================================== */

.stcontainer{
	--stcontainer-gap: 1rem;
}

/* ========================================================================== Base ========================================================================== */

.stcontainer{
	margin: 0 auto;
	padding: 0 var(--stcontainer-gap);
	max-width: 1180px;
	width: 100%;
	color: inherit;
	box-sizing: border-box;
}

/* ========================================================================== Variations ========================================================================== */

/* fill */

.stcontainer.is-padded{
	--stcontainer-gap: 2rem;
}

.stcontainer.is-fitted{
	--stcontainer-gap: 0;
}

/* Narrow */

.stcontainer.is-narrow{
	max-width: 910px;
}

.stcontainer.is-very-narrow{
	max-width: 720px;
}

/* fill */

.stcontainer.fill{
	max-width: 100%;
}

/* ========================================================================== Variables ========================================================================== */

.stcontrol{
	--label-width: 220px;
}

/* ========================================================================== Base ========================================================================== */

.stcontrol{
	color: inherit;
	display: grid;
	grid-template-columns: var(--label-width) 1fr;
	gap: 2rem;
}

/* ========================================================================== Structure ========================================================================== */

.stcontrol .label{
	word-break: break-all;
	color: var(--stgray-800);
	font-weight: 500;
	text-align: right;
	line-height: 2.4;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.stcontrol .content{
	max-width: 75%;
}

/* ========================================================================== Variations ========================================================================== */

/* Padded */

.stcontrol .content.is-padded{
	padding-top: 0.45rem;
}

/* Padded */

.stcontrol.is-stacked{
	grid-template-columns: 1fr;
	gap: 1rem;
}

.stcontrol.is-stacked .label{
	text-align: left;
	line-height: 1.4;
}

.stcontrol.is-stacked .content{
	width: 100%;
	max-width: 100%;
}

/* fill */

.stcontrol .content.fill{
	max-width: initial;
}

/* Aligns */

.stcontrol .label.left{
	text-align: left;
}

/* Wide */

.stcontrol.is-wide{
	--label-width: 150px;
}

.stcontrol.is-wide .content{
	max-width: 90%;
}

/* ========================================================================== Variables ========================================================================== */

.stmenu{
	--object-distance: 0.8rem;
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stmenu{
	color: inherit;
	display: flex;
	flex-direction: column;
}

.stmenu .item{
	font-family: inherit;
	appearance: none;
	border: unset;
	font-size: inherit;
	text-align: inherit;
	background: transparent;
	color: inherit;
	line-height: 1;
	text-decoration: none;
	display: flex;
	align-items: center;
	padding: 0.8rem 1rem;
	gap: var(--object-distance);
}

.stmenu .item .icon{
	font-size: 1.1em;
}

.stmenu .item .stbadge{
	margin-left: auto;
	margin-top: -1px;
}

.stmenu .item .stavatar{
	margin-top: -0.4rem;
	margin-bottom: -0.4rem;
}

.stmenu .item .description{
	font-size: var(--strelative-small);
	color: var(--stgray-500);

	text-align: right;
	margin-left: auto;
	float: right;
}

.stmenu .item:hover{
	cursor: pointer;
	background: var(--stgray-75);
}

.stmenu .item:where(.strow,.stgrid){
	flex: 1;
}

/* ========================================================================== Variations ========================================================================== */

/* Active */

.stmenu .item.is-active{
	background: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
}

/* Disabled */

.stmenu .item.disabled{
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

/* Selected */

.stmenu .item.is-selected{
	background: var(--accent-color,var(--stprimary-700));
	color: var(--accent-foreground-color,var(--stwhite));
}

/* Separated */

.stmenu.is-separated{
	gap: 0.25rem;
}

.stmenu.is-separated .item{
	border-radius: 0.4rem;
}

/* Icon */

.stmenu.starticon .item .icon{
	min-width: 1rem;
	text-align: center;
	display: inline-block;
	margin-top: 2px;
}

.stmenu.endicon .item .icon{
	margin-left: auto;
	min-width: 1rem;
	text-align: center;
	display: inline-block;
	margin-top: 2px;
}

/* Collapsed */

.stmenu.is-collapsed{
	width: fit-content;
}

/* Density */

.stmenu.is-relaxed .item{
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}

.stmenu.is-dense .item{
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}

/* Sizes */

.stmenu.small{
	font-size: var(--stfont-size-14px);
}

.stmenu.large{
	font-size: var(--stfont-size-16px);
}

/* Horizontally Padded */

.stmenu.is-horizontally-padded .item{
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.stmenu.is-horizontally-very-padded .item{
	padding-left: 3.5rem;
	padding-right: 3.5rem;
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stchecklist{
	margin-right: 1.5rem;
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
}

/* ========================================================================== Structure ========================================================================== */

.stchecklist .item{
	color: var(--stgray-800);
	text-decoration: none;
	padding-left: 28px;
}

.stchecklist .item::before{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	text-decoration: inherit;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	font-size: var(--stfont-size-12px);
	border-radius: 100rem;
	line-height: 1;
	height: 20px;
	width: 20px;
	padding: 0.25rem;
	display: inline-block;
	transform: scale(0.9);
	padding-top: 0.3rem;
	padding-bottom: 0.1rem;
	vertical-align: middle;
	position: absolute;
	left: 0;
	top: 3px;
}

/* ========================================================================== Variations ========================================================================== */

/* Positive */

.stchecklist .item.is-positive::before{
	content: "\f00c";
	background: var(--sttonal-positive-400);
	color: var(--sttonal-positive-800);
}

/* error */

.stchecklist .item.error::before{
	content: "\f00d";
	background: var(--sttonal-negative-400);
	color: var(--sttonal-negative-800);
}

/* Added */

.stchecklist .item.is-added::before{
	content: "\f067";
	background: var(--sttonal-positive-400);
	color: var(--sttonal-positive-800);
}

/* Removed */

.stchecklist .item.is-removed::before{
	content: "\f068";
	background: var(--sttonal-negative-400);
	color: var(--sttonal-negative-800);
}

/* Info */

.stchecklist .item.is-info::before{
	content: "\f129";
	background: var(--sttonal-primary-400);
	color: var(--sttonal-primary-800);
}

/* Info */

.stchecklist .item.warning::before{
	content: "\21";
	background: var(--sttonal-warning-400);
	color: var(--sttonal-warning-800);
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stimageset{
	display: grid;
	gap: 1rem;
}

/* ========================================================================== Structure ========================================================================== */

.stimageset .item{
	min-height: min-content;
}

.stimageset .item img{
	width: 100%;
	height: 100%;
	vertical-align: top;
	object-fit: cover;
}

/* ========================================================================== Variations ========================================================================== */

/* Images */

/* 2 */
.stimageset.is-2-images{
	grid-template-columns: repeat(1,1fr);
}

/* 3 */
.stimageset.is-3-images{
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: 1.777fr 1fr;
}

.stimageset.stimageset.is-3-images .item:first-child{
	grid-column: 1 / 3;
}

/* 4 */
.stimageset.is-4-images{
	grid-template-columns: repeat(3,1fr);
	grid-template-rows: 1.777fr 1fr;
}

.stimageset.stimageset.is-4-images .item:first-child{
	grid-column: 1 / 4;
}

/* Portrait */

.stimageset.is-portrait .item img{
	object-position: top;
}

/* 2 */
.stimageset.is-portrait.is-2-images{
	grid-template-columns: repeat(2,1fr);
}

/* 3 */
.stimageset.is-portrait.is-3-images{
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: repeat(2,1fr);
}

.stimageset.is-portrait.is-3-images .item:first-child{
	grid-row: 1 / 3;
	grid-column: initial;
}

/* 4 */
.stimageset.is-portrait.is-4-images{
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: repeat(3,1fr);
}

.stimageset.is-portrait.is-4-images .item:first-child{
	grid-row: 1 / 4;
	grid-column: initial;
}

/* Rounded */

.stimageset.is-rounded .item img{
	border-radius: 0.4rem;
}

/* Circular */

.stimagesetround.is-portrait .item:first-child img{
	border-top-left-radius: 0.4rem;
	border-bottom-left-radius: 0.4rem;
}

.stimagesetround.is-portrait .item:nth-child(2) img{
	border-top-right-radius: 0.4rem;
}

.stimagesetround.is-portrait .item:last-child img{
	border-bottom-right-radius: 0.4rem;
}

.stimagesetround:not(.is-portrait) .item:first-child img{
	border-top-right-radius: 0.4rem;
	border-top-left-radius: 0.4rem;
}

.stimagesetround:not(.is-portrait) .item:nth-child(2) img{
	border-bottom-left-radius: 0.4rem;
}

.stimagesetround:not(.is-portrait) .item:last-child img{
	border-bottom-right-radius: 0.4rem;
}

/* Relaxed */

.stimageset.is-relaxed{
	gap: 1.5rem;
}

/* Compact */

.stimageset.is-compact{
	gap: 0.5rem;
}

/* ========================================================================== Variables ========================================================================== */

.iconset{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.iconset{
	display: flex;
	gap: 1rem;
	line-height: 1.7;
}

/* ========================================================================== Structure ========================================================================== */

.iconset .icon{
	width: 3rem;
	min-width: 3rem;
	height: 3rem;
	background: var(--accent-color,var(--stgray-100));
	color: var(--accent-foreground-color,inherit);
	justify-content: center;
	align-items: center;
	font-size: 1.4rem;
	display: flex;
	border-radius: 0.4rem;
}

.iconset .content .title{
	font-weight: 500;
	line-height: 1.4;
}

/* ========================================================================== Variations ========================================================================== */

/* Circular */

.iconsetround .icon{
	border-radius: 100rem;
}

/* Outlined */

.iconset.outline .icon{
	background: transparent;
	color: var(--accent-color,inherit);
	border: 2px solid var(--stgray-300);
	box-sizing: border-box;
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stconversation{
	display: flex;
	gap: 1rem;
	--brand-color: var(--stprimary-600);
}

/* Avatar */

.stconversation .avatar img{
	width: 40px;
	border-radius: 0.4rem;
}

/* Bubble */

.stconversation .bubble{
	background: var(--stgray-100);
	border-radius: 0.4rem;
	line-height: 1.5;
	padding: 0.5rem 0.8rem;
	font-size: var(--stfont-size-14px);
	overflow: hidden;
}

/* Clearfix for meta */
.stconversation .bubble::after{
	content: "";
	display: block;
	clear: both;
}

/* Author */

.stconversation .bubble .author{
	font-weight: 500;
	color: var(--brand-color);
}

/* Meta */

.stconversation .bubble .meta{
	float: right;
	line-height: 1.5;
	bottom: -3px;
	margin-left: 0.6rem;
	display: inline-flex;
	gap: 0.65rem;
	align-items: center;
	justify-content: flex-end;
	font-size: var(--stfont-size-14px);
	color: var(--stgray-500);
}

.stconversation .bubble .meta.is-floated{
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	background: rgba(0,0,0,0.2);
	border-radius: 0.4rem;
	padding: 0.1rem 0.4rem;
	color: var(--stwhite);
}

/* Text */

.stconversation .bubble .text{
	display: inline;
}

.stconversation .bubble .text a{
	color: var(--stlink-700);
}

/* Actions */

/* Meta */

/* Quote */

.stconversation .bubble .quote{
	--brand-color: var(--stsuccess-600);
	border-left: 2px solid var(--brand-color);
	margin: 0.5rem 0;
	padding-left: 0.8rem;
}

.stconversation .bubble .quote .author{
	font-weight: 500;
	color: var(--brand-color);
}

/* Preview */

.stconversation .bubble .preview{
	padding-left: 0.8rem;
	border-left: 2px solid var(--brand-color);
	margin: 0.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;

	--brand-color: #1074c5;
}

.stconversation .bubble .site{
	font-weight: 500;
	color: var(--brand-color);
}

.stconversation .bubble .title{
	font-weight: 500;
}

.stconversation .bubble .embed{
	overflow: hidden;
	border-radius: 0.4rem;
}

.stconversation .bubble .embed>*{
	width: 100%;
	object-fit: cover;
	vertical-align: top;
}

/* Object */

.stconversation .bubble .object{
	margin: 0.4rem -0.8rem;
}

/* ========================================================================== Variations ========================================================================== */

/*
  *
  */

.stconversation:is(.is-sent,.is-sending,.error,.is-read,.warning) .bubble .meta::after{
	color: var(--stgray-500);

	font-family: "Icons";
	font-weight: normal;
	font-style: normal;

	text-decoration: inherit;
	text-align: center;
	width: 1.18em;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;

	font-size: var(--stfont-size-13px);
}

.stconversation.is-sent .bubble .meta::after{
	content: "\f00c";
}

.stconversation.is-sending .bubble .meta::after{
	content: "\f017";
}

.stconversation.is-read .bubble .meta::after{
	content: "\f560";
}

.stconversation.error .bubble .meta::after{
	content: "\f071";
	color: var(--sterror-400);
}

/* Self */

.stconversation.is-self{
	flex-direction: row-reverse;
}

.stconversation.is-self .bubble{
	background: #e8fbd1;
	color: var(--stblack);
}

.stconversation.is-self .bubble .author{
	color: #538e0b;
}

.stconversation.is-self .bubble .meta,.stconversation.is-self .bubble .meta::after{
	color: #538e0b;
}

/* Object Only */

.stconversation.is-object-only .bubble{
	padding: 0;
}

.stconversation.is-object-only .bubble .object{
	margin: 0;
}

.stconversation.is-object-only .bubble .meta{
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
	background: rgba(0,0,0,0.2);
	border-radius: 0.4rem;
	padding: 0.1rem 0.4rem;
	color: var(--stwhite);
}

.stconversation.is-object-only .bubble .meta::after{
	color: var(--stwhite);
}

/* ========================================================================== Variables ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.modal{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgb(0 0 0 / 50%);
	padding: 2rem 1rem;
	display: none;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	z-index: 102;

	/* ========================================================================== Structure ========================================================================== */

	&>.content{
		background: var(--stgray-50);
		border-radius: 0.4rem;
		box-shadow: 0 0 20px rgb(0 0 0 / 10%);
		width: 380px;
		margin: auto;
		overflow: hidden;
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Active */

	&.is-visible{
		display: flex;
	}

	/* Sizes */

	&.small>.content{
		width: 280px;
	}

	&.large>.content{
		width: 580px;
	}

	&.big>.content{
		width: 780px;
	}
}


/* ========================================================================== Variables ========================================================================== */

.gauge{
	--length: 0.8;
	--value: 0;
	--size: 5rem;
	--thickness: calc(var(--size) / 10);
	--accent-color: initial;
	--accent-foreground-color: initial;

	/* ========================================================================== Base ========================================================================== */

	&,& .bar{
		position: relative;
		display: inline-grid;
		height: var(--size);
		width: var(--size);

		place-content: center;
		border-radius: 9999px;
		background: transparent;
		vertical-align: middle;
		box-sizing: content-box;
	}

	&{
		--value: 100;

		transform: rotate(216deg);
	}

	/* ========================================================================== Structure ========================================================================== */

	& .bar::before{
		content: "";
		position: absolute;
		border-radius: 9999px;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		background: conic-gradient(var(--accent-color,currentColor) calc(var(--value) * 1% * var(--length)),#0000 0);
		-webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--thickness)),rgb(0 0 0 / 85%) calc(100% - var(--thickness)));
		mask: radial-gradient(farthest-side,#0000 calc(99% - var(--thickness)),rgb(0 0 0 / 85%) calc(100% - var(--thickness)));
	}

	&::before{
		content: "";
		position: absolute;
		border-radius: 9999px;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		-webkit-mask: radial-gradient(farthest-side,#f000 calc(99% - var(--thickness)),#0000001a calc(100% - var(--thickness)));
		mask: radial-gradient(farthest-side,#f000 calc(99% - var(--thickness)),#0000001a calc(100% - var(--thickness)));
		background: conic-gradient(currentColor calc(var(--value) * var(--length) * 1%),#0000 0);
	}

	& .bar .text{
		transform: rotate(-216deg);
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Circular */

	&.round{
		transform: initial;
		--length: 1;
	}

	&.round .bar .text{
		transform: initial;
	}

	/* Uplifted */

	&.uplift{
		transform: rotate(180deg);
		--length: 0.7;
	}

	&.uplift .bar .text{
		transform: rotate(-180deg);
	}

	/* Centered */

	&.center{
		margin: 0 auto;
		display: grid;
	}

	/* Sizes */

	&.small{
		--size: 4rem;
	}

	&.big{
		--size: 6rem;
	}
}


/* ========================================================================== Variables ========================================================================== */

.tooltip{
	--sttooltip-x: 0;

	/* ========================================================================== Base ========================================================================== */

	position: fixed;
	background: var(--stgray-600);
	padding: 0.1rem 0.35rem;
	font-size: var(--stfont-size-13px);
	border-radius: 0.2rem;
	color: var(--stgray-50);
	visibility: hidden;
	font-weight: normal;
	z-index: 99;
	max-width: min(300px,calc(100vw - 2rem));
	pointer-events: none;

	&.visible{
		visibility: visible;
	}

	& .arrow{
		position: absolute;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		pointer-events: none;
	}

	&[class*="bottom"] .arrow{
		top: -4px;
		border-width: 0 5px 5px;
		border-bottom-color: var(--stgray-600);
	}

	&[class*="top"] .arrow{
		bottom: -4px;
		border-width: 5px 5px 0;
		border-top-color: var(--stgray-600);
	}

	&[class$="start"] .arrow{
		left: 10px;
	}

	&[class$="end"] .arrow{
		right: 10px;
	}

	&:not([class$="start"]):not([class$="end"]) .arrow{
		left: calc(var(--sttooltip-x) - 2.5px);
	}
}

/* ========================================================================== Variables ========================================================================== */

.dropdown{
	--object-distance: 0.8rem;
	--stdropdown-min-width: initial;
	--stdropdown-position: absolute;
	--accent-color: initial;
	--accent-foreground-color: initial;

	/* ========================================================================== Base ========================================================================== */

	position: var(--stdropdown-position);
	display: none;
	color: inherit;
	flex-direction: column;
	z-index: 100;
	border: 1px solid var(--stgray-300);
	border-radius: 0.4rem;
	background: var(--stgray-50);
	box-shadow: 0 0 10px 0px rgba(0,0,0,0.1);
	font-size: var(--stfont-size-14px);
	padding: 0.2rem 0;
	white-space: nowrap;
	min-width: var(--stdropdown-min-width);

	&>.item{
		font-family: inherit;
		appearance: none;
		border: unset;
		font-size: inherit;
		text-align: inherit;
		background: transparent;
		color: inherit;
		line-height: 1;
		text-decoration: none;
		display: flex;
		align-items: center;
		padding: 0.8rem 1rem;
		gap: var(--object-distance);
		padding-top: 0.65rem;
		padding-bottom: 0.65rem;
		min-width: 0;
	}

	& .item .icon{
		font-size: 1.1em;
	}

	& .item .stavatar{
		margin-top: -0.4rem;
		margin-bottom: -0.4rem;
		margin-left: -0.2rem;
	}

	& .item .description{
		font-size: var(--strelative-small);
		color: var(--stgray-500);

		text-align: right;
		margin-left: auto;
		float: right;
	}

	& .item:hover{
		cursor: pointer;
		background: var(--stgray-75);
	}

	& .item:where(.strow,.stgrid){
		flex: 1;
	}

	/* ========================================================================== Variations ========================================================================== */

	/* Active */

	& .item.is-active{
		background: var(--accent-color,var(--stgray-800));
		color: var(--accent-foreground-color,var(--stgray-50));
	}

	/* Header */

	& .item.is-header{
		padding: 0.5rem 0.6rem;
		background: var(--stgray-200);
		font-size: var(--stfont-size-13px);
		font-weight: 500;
		border-bottom: 1px solid var(--stgray-300);
		border-top: 1px solid var(--stgray-300);
	}

	& .item.is-header:hover{
		cursor: default;
		background: var(--stgray-200);
	}

	/* Disabled */

	& .item.disabled{
		opacity: 0.5;
		pointer-events: none;
		user-select: none;
	}

	/* Selected */

	& .item.is-selected{
		background: var(--accent-color,var(--stprimary-700));
		color: var(--accent-foreground-color,var(--stwhite));
	}

	& .item.is-selected .description{
		color: inherit;
		opacity: 0.8;
	}

	/* Separated */

	&.is-separated{
		gap: 0.25rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	&.is-separated .item{
		border-radius: 0.4rem;
	}

	/* Icon */

	&.starticon .item .icon{
		min-width: 1rem;
		text-align: center;
		display: inline-block;
		margin-top: 1px;
	}

	&.endicon .item .icon{
		margin-left: auto;
		min-width: 1rem;
		text-align: center;
		display: inline-block;
		margin-top: 1px;
	}

	/* Density */

	&.is-relaxed .item{
		padding-top: 0.8rem;
		padding-bottom: 0.8rem;
	}

	&.is-dense .item{
		padding-top: 0.55rem;
		padding-bottom: 0.55rem;
	}

	/* Sizes */

	&.small{
		font-size: var(--stfont-size-13px);
	}

	&.large{
		font-size: var(--stfont-size-15px);
	}

	/* Visible */

	&.is-visible{
		display: inline-flex;
	}

	/* Scrollable */

	&.is-scrollable{
		overflow: auto;
		overflow-x: hidden;
	}

	/* Positions */

	&.is-top-left{
		bottom: calc(100% + 0.5rem);
		left: 0;
	}

	&.is-bottom-left{
		top: calc(100% + 0.5rem);
		left: 0;
	}

	&.is-bottom-center{
		left: 50%;
		transform: translateX(-50%);
		top: calc(100% + 0.5rem);
	}

	&.is-top-center{
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(100% + 0.5rem);
	}

	&.is-top-right{
		bottom: calc(100% + 0.5rem);
		right: 0;
	}

	&.is-bottom-right{
		top: calc(100% + 0.5rem);
		right: 0;
	}

	&.is-top{
		bottom: calc(100% + 0.5rem);
		left: 0;
		right: 0;
		min-width: min-content;
	}

	&.is-bottom{
		top: calc(100% + 0.5rem);
		left: 0;
		right: 0;
		min-width: min-content;
	}

	/* Checkbox */

	& .item.is-checked{
		color: var(--accent-color,var(--stprimary-700));
	}

	& .item .checkbox{
		background: var(--stgray-200);
		border: 1px solid var(--stgray-200);
		border-radius: 0.2rem;
		box-sizing: border-box;
		color: inherit;
		cursor: pointer;
		font: inherit;
		line-height: normal;
		min-height: 1.15rem;
		min-width: 1.15rem;
		overflow: visible;
		padding: 0;
		user-select: none;
		width: auto;
	}

	& .item .checkbox::after{
		display: none;
		font-family: Icons;
		font-size: 1rem;
		font-style: normal;
		font-weight: 400;
		justify-content: center;
		left: 0;
		position: absolute;
		right: 0;
		text-align: center;
		text-decoration: inherit;
		top: 0;
		transform: scale(0.8);
		z-index: 1;
		-webkit-font-smoothing: antialiased;
		align-items: center;
		backface-visibility: hidden;
		bottom: 0;
		color: var(--accent-foreground-color,var(--stwhite));
		content: "\f00c";
	}

	& .item.checked .checkbox{
		background: var(--accent-color,var(--stprimary-700));
		border-color: var(--accent-color,var(--stprimary-700));
	}

	& .item.checked .checkbox::after{
		display: flex;
	}
}

/* (Below 766px) */
@media screen and (max-width: 766px){
	.dropdown.is-scrollable{
		max-height: 10rem;
	}
}

/* (Above 766px) */
@media screen and (min-width: 766px){
	.dropdown.is-scrollable{
		max-height: 15rem;
	}
}

/* (Above 993px) */
@media screen and (min-width: 993px){
	.dropdown.is-scrollable{
		max-height: 19rem;
	}
}


/* ========================================================================== Color Schemes ========================================================================== */

html[data-scheme="light"],.light,html[data-scheme="dark"] .is-inverted{
	color-scheme: light;

	--stgray-50: var(--stlight-gray-50);
	--stgray-75: var(--stlight-gray-75);
	--stgray-100: var(--stlight-gray-100);
	--stgray-200: var(--stlight-gray-200);
	--stgray-300: var(--stlight-gray-300);

	--stgray-500: var(--stlight-gray-500);
	--stgray-600: var(--stlight-gray-600);
	--stgray-700: var(--stlight-gray-700);
	--stgray-800: var(--stlight-gray-800);
	--stgray-900: var(--stlight-gray-900);

	--sttonal-positive-400: #cdffbe;
	--sttonal-positive-800: #357016;

	--sttonal-negative-400: #ffbebe;
	--sttonal-negative-800: #701616;

	--sttonal-primary-400: #d9edff;
	--sttonal-primary-800: #005cde;

	--sttonal-warning-400: #fff7ae;
	--sttonal-warning-800: #866800;
}

html[data-scheme="light"] .is-inverted,.is-inverted,html[data-scheme="dark"],.dark{
	color-scheme: dark;

	--stgray-50: var(--stdark-gray-50);
	--stgray-75: var(--stdark-gray-75);
	--stgray-100: var(--stdark-gray-100);
	--stgray-200: var(--stdark-gray-200);
	--stgray-300: var(--stdark-gray-300);
	--stgray-400: var(--stdark-gray-400);
	--stgray-500: var(--stdark-gray-500);
	--stgray-600: var(--stdark-gray-600);
	--stgray-700: var(--stdark-gray-700);
	--stgray-800: var(--stdark-gray-800);
	--stgray-900: var(--stdark-gray-900);

	--stlink-700: #8887ff;

	--sttonal-positive-400: #92d34f;
	--sttonal-positive-800: #0e4600;

	--sttonal-negative-400: #d60000;
	--sttonal-negative-800: #fff;

	--sttonal-primary-400: #0a6ffd;
	--sttonal-primary-800: #ffffff;

	--sttonal-warning-400: #edff00;
	--sttonal-warning-800: #463f00;
}

html[data-scheme="light"] .dark-only,html[data-scheme="dark"] .light-only{
	display: none;
}

@media (prefers-color-scheme: light){
	html:not([data-scheme="dark"]) .dark-only{
		display: none;
	}
}

/* Dark */

@media (prefers-color-scheme: dark){
	html:not([data-scheme="light"]) .light-only{
		display: none;
	}

	.is-inverted{
		color-scheme: light;

		--stgray-50: var(--stlight-gray-50);
		--stgray-75: var(--stlight-gray-75);
		--stgray-100: var(--stlight-gray-100);
		--stgray-200: var(--stlight-gray-200);
		--stgray-300: var(--stlight-gray-300);
		--stgray-400: var(--stlight-gray-400);
		--stgray-500: var(--stlight-gray-500);
		--stgray-600: var(--stlight-gray-600);
		--stgray-700: var(--stlight-gray-700);
		--stgray-800: var(--stlight-gray-800);
		--stgray-900: var(--stlight-gray-900);

		--sttonal-positive-400: #cdffbe;
		--sttonal-positive-800: #357016;

		--sttonal-negative-400: #ffbebe;
		--sttonal-negative-800: #701616;

		--sttonal-primary-400: #d9edff;
		--sttonal-primary-800: #005cde;

		--sttonal-warning-400: #fff7ae;
		--sttonal-warning-800: #866800;
	}
}

/* ========================================================================== Scales ========================================================================== */

html[data-scale="small"],html[data-scale="small"] body{
	font-size: 14px;
}

html[data-scale="large"],html[data-scale="large"] body{
	font-size: 16px;
}

/* ========================================================================== Background Color ========================================================================== */

html[data-background="secondary"],html[data-background="secondary"] body{
	background: var(--stgray-75);
}

/* ========================================================================== Responsive ========================================================================== */
@media screen and (max-width: 766px){

	.is-standard-only,   .is-maximal-only{
		display: none !important;
	}

	.is-not-minimal{
		display: none !important;
	}
}

@media screen and (min-width: 766px){
	.is-minimal-only{
		display: none !important;
	}
}

@media screen and (max-width: 993px){
	.is-maximal-only{
		display: none !important;
	}
}

@media screen and (min-width: 766px) and (max-width: 993px){
	.is-not-standard{
		display: none !important;
	}
}

@media screen and (min-width: 993px){

	.is-minimal-only,   .is-standard-only{
		display: none !important;
	}

	.is-not-maximal{
		display: none !important;
	}
}

/* ========================================================================== Grid ========================================================================== */

/* Wides */

.stgrid .column.is-1-minimal{
	width: var(--stgrid-1-wide);
	max-width: var(--stgrid-1-wide);
}

.stgrid .column.is-2-minimal{
	width: var(--stgrid-2-wide);
	max-width: var(--stgrid-2-wide);
}

.stgrid .column.is-3-minimal{
	width: var(--stgrid-3-wide);
	max-width: var(--stgrid-3-wide);
}

.stgrid .column.is-4-minimal{
	width: var(--stgrid-4-wide);
	max-width: var(--stgrid-4-wide);
}

.stgrid .column.is-5-minimal{
	width: var(--stgrid-5-wide);
	max-width: var(--stgrid-5-wide);
}

.stgrid .column.is-6-minimal{
	width: var(--stgrid-6-wide);
	max-width: var(--stgrid-6-wide);
}

.stgrid .column.is-7-minimal{
	width: var(--stgrid-7-wide);
	max-width: var(--stgrid-7-wide);
}

.stgrid .column.is-8-minimal{
	width: var(--stgrid-8-wide);
	max-width: var(--stgrid-8-wide);
}

.stgrid .column.is-9-minimal{
	width: var(--stgrid-9-wide);
	max-width: var(--stgrid-9-wide);
}

.stgrid .column.is-10-minimal{
	width: var(--stgrid-10-wide);
	max-width: var(--stgrid-10-wide);
}

.stgrid .column.is-11-minimal{
	width: var(--stgrid-11-wide);
	max-width: var(--stgrid-11-wide);
}

.stgrid .column.is-12-minimal{
	width: var(--stgrid-12-wide);
	max-width: var(--stgrid-12-wide);
}

.stgrid .column.is-13-minimal{
	width: var(--stgrid-13-wide);
	max-width: var(--stgrid-13-wide);
}

.stgrid .column.is-14-minimal{
	width: var(--stgrid-14-wide);
	max-width: var(--stgrid-14-wide);
}

.stgrid .column.is-15-minimal{
	width: var(--stgrid-15-wide);
	max-width: var(--stgrid-15-wide);
}

.stgrid .column.is-16-minimal{
	width: var(--stgrid-16-wide);
	max-width: var(--stgrid-16-wide);
}

/* Doubling */

.stgrid.is-2-columns.is-doubling>.column{
	flex: var(--stgrid-1-columns);
	max-width: var(--stgrid-1-columns);
}

.stgrid.is-3-columns.is-doubling>.column{
	flex: var(--stgrid-2-columns);
	max-width: var(--stgrid-2-columns);
}

.stgrid.is-4-columns.is-doubling>.column{
	flex: var(--stgrid-2-columns);
	max-width: var(--stgrid-2-columns);
}

.stgrid.is-5-columns.is-doubling>.column{
	flex: var(--stgrid-2-columns);
	max-width: var(--stgrid-2-columns);
}

.stgrid.is-6-columns.is-doubling>.column{
	flex: var(--stgrid-2-columns);
	max-width: var(--stgrid-2-columns);
}

.stgrid.is-7-columns.is-doubling>.column{
	flex: var(--stgrid-2-columns);
	max-width: var(--stgrid-2-columns);
}

.stgrid.is-8-columns.is-doubling>.column{
	flex: var(--stgrid-2-columns);
	max-width: var(--stgrid-2-columns);
}

.stgrid.is-9-columns.is-doubling>.column{
	flex: var(--stgrid-2-columns);
	max-width: var(--stgrid-2-columns);
}

.stgrid.is-10-columns.is-doubling>.column{
	flex: var(--stgrid-2-columns);
	max-width: var(--stgrid-2-columns);
}

/*
  * Minimal
  * (Below 766px)
  */

@media screen and (max-width: 766px){
	.stgrid.is-stackable .column{
		width: var(--stgrid-16-wide);
		max-width: var(--stgrid-16-wide);
	}
}

/*
  * Not Minimal
  * (Above 766px)
  */

@media screen and (min-width: 766px){
	/*
	  * Doubling
	  */

	.stgrid.is-2-columns.is-doubling>.column{
		flex: var(--stgrid-1-columns);
		max-width: var(--stgrid-1-columns);
	}

	.stgrid.is-3-columns.is-doubling>.column{
		flex: var(--stgrid-2-columns);
		max-width: var(--stgrid-2-columns);
	}

	.stgrid.is-4-columns.is-doubling>.column{
		flex: var(--stgrid-2-columns);
		max-width: var(--stgrid-2-columns);
	}

	.stgrid.is-5-columns.is-doubling>.column{
		flex: var(--stgrid-3-columns);
		max-width: var(--stgrid-3-columns);
	}

	.stgrid.is-6-columns.is-doubling>.column{
		flex: var(--stgrid-3-columns);
		max-width: var(--stgrid-3-columns);
	}

	.stgrid.is-7-columns.is-doubling>.column{
		flex: var(--stgrid-3-columns);
		max-width: var(--stgrid-3-columns);
	}

	.stgrid.is-8-columns.is-doubling>.column{
		flex: var(--stgrid-4-columns);
		max-width: var(--stgrid-4-columns);
	}

	.stgrid.is-9-columns.is-doubling>.column{
		flex: var(--stgrid-4-columns);
		max-width: var(--stgrid-4-columns);
	}

	.stgrid.is-10-columns.is-doubling>.column{
		flex: var(--stgrid-5-columns);
		max-width: var(--stgrid-5-columns);
	}

	/*
	  * Wides
	  */

	.stgrid .column.is-1-standard{
		width: var(--stgrid-1-wide);
		max-width: var(--stgrid-1-wide);
	}

	.stgrid .column.is-2-standard{
		width: var(--stgrid-2-wide);
		max-width: var(--stgrid-2-wide);
	}

	.stgrid .column.is-3-standard{
		width: var(--stgrid-3-wide);
		max-width: var(--stgrid-3-wide);
	}

	.stgrid .column.is-4-standard{
		width: var(--stgrid-4-wide);
		max-width: var(--stgrid-4-wide);
	}

	.stgrid .column.is-5-standard{
		width: var(--stgrid-5-wide);
		max-width: var(--stgrid-5-wide);
	}

	.stgrid .column.is-6-standard{
		width: var(--stgrid-6-wide);
		max-width: var(--stgrid-6-wide);
	}

	.stgrid .column.is-7-standard{
		width: var(--stgrid-7-wide);
		max-width: var(--stgrid-7-wide);
	}

	.stgrid .column.is-8-standard{
		width: var(--stgrid-8-wide);
		max-width: var(--stgrid-8-wide);
	}

	.stgrid .column.is-9-standard{
		width: var(--stgrid-9-wide);
		max-width: var(--stgrid-9-wide);
	}

	.stgrid .column.is-10-standard{
		width: var(--stgrid-10-wide);
		max-width: var(--stgrid-10-wide);
	}

	.stgrid .column.is-11-standard{
		width: var(--stgrid-11-wide);
		max-width: var(--stgrid-11-wide);
	}

	.stgrid .column.is-12-standard{
		width: var(--stgrid-12-wide);
		max-width: var(--stgrid-12-wide);
	}

	.stgrid .column.is-13-standard{
		width: var(--stgrid-13-wide);
		max-width: var(--stgrid-13-wide);
	}

	.stgrid .column.is-14-standard{
		width: var(--stgrid-14-wide);
		max-width: var(--stgrid-14-wide);
	}

	.stgrid .column.is-15-standard{
		width: var(--stgrid-15-wide);
		max-width: var(--stgrid-15-wide);
	}

	.stgrid .column.is-16-standard{
		width: var(--stgrid-16-wide);
		max-width: var(--stgrid-16-wide);
	}
}

/*
  * Maximal
  * (Above 993px)
  */

@media screen and (min-width: 993px){
	/*
	  * Doubling
	  */

	.stgrid.is-2-columns.is-doubling>.column{
		flex: var(--stgrid-2-columns);
		max-width: var(--stgrid-2-columns);
	}

	.stgrid.is-3-columns.is-doubling>.column{
		flex: var(--stgrid-3-columns);
		max-width: var(--stgrid-3-columns);
	}

	.stgrid.is-4-columns.is-doubling>.column{
		flex: var(--stgrid-4-columns);
		max-width: var(--stgrid-4-columns);
	}

	.stgrid.is-5-columns.is-doubling>.column{
		flex: var(--stgrid-5-columns);
		max-width: var(--stgrid-5-columns);
	}

	.stgrid.is-6-columns.is-doubling>.column{
		flex: var(--stgrid-6-columns);
		max-width: var(--stgrid-6-columns);
	}

	.stgrid.is-7-columns.is-doubling>.column{
		flex: var(--stgrid-7-columns);
		max-width: var(--stgrid-7-columns);
	}

	.stgrid.is-8-columns.is-doubling>.column{
		flex: var(--stgrid-8-columns);
		max-width: var(--stgrid-8-columns);
	}

	.stgrid.is-9-columns.is-doubling>.column{
		flex: var(--stgrid-9-columns);
		max-width: var(--stgrid-9-columns);
	}

	.stgrid.is-10-columns.is-doubling>.column{
		flex: var(--stgrid-10-columns);
		max-width: var(--stgrid-10-columns);
	}

	/*
	  * Wides
	  */

	.stgrid .column.is-1-maximal{
		width: var(--stgrid-1-wide);
		max-width: var(--stgrid-1-wide);
	}

	.stgrid .column.is-2-maximal{
		width: var(--stgrid-2-wide);
		max-width: var(--stgrid-2-wide);
	}

	.stgrid .column.is-3-maximal{
		width: var(--stgrid-3-wide);
		max-width: var(--stgrid-3-wide);
	}

	.stgrid .column.is-4-maximal{
		width: var(--stgrid-4-wide);
		max-width: var(--stgrid-4-wide);
	}

	.stgrid .column.is-5-maximal{
		width: var(--stgrid-5-wide);
		max-width: var(--stgrid-5-wide);
	}

	.stgrid .column.is-6-maximal{
		width: var(--stgrid-6-wide);
		max-width: var(--stgrid-6-wide);
	}

	.stgrid .column.is-7-maximal{
		width: var(--stgrid-7-wide);
		max-width: var(--stgrid-7-wide);
	}

	.stgrid .column.is-8-maximal{
		width: var(--stgrid-8-wide);
		max-width: var(--stgrid-8-wide);
	}

	.stgrid .column.is-9-maximal{
		width: var(--stgrid-9-wide);
		max-width: var(--stgrid-9-wide);
	}

	.stgrid .column.is-10-maximal{
		width: var(--stgrid-10-wide);
		max-width: var(--stgrid-10-wide);
	}

	.stgrid .column.is-11-maximal{
		width: var(--stgrid-11-wide);
		max-width: var(--stgrid-11-wide);
	}

	.stgrid .column.is-12-maximal{
		width: var(--stgrid-12-wide);
		max-width: var(--stgrid-12-wide);
	}

	.stgrid .column.is-13-maximal{
		width: var(--stgrid-13-wide);
		max-width: var(--stgrid-13-wide);
	}

	.stgrid .column.is-14-maximal{
		width: var(--stgrid-14-wide);
		max-width: var(--stgrid-14-wide);
	}

	.stgrid .column.is-15-maximal{
		width: var(--stgrid-15-wide);
		max-width: var(--stgrid-15-wide);
	}

	.stgrid .column.is-16-maximal{
		width: var(--stgrid-16-wide);
		max-width: var(--stgrid-16-wide);
	}
}

/* ========================================================================== Accordion ========================================================================== */

*:not(details).staccordion{
	color: inherit;
	box-sizing: border-box;
}

*:not(details).staccordion .title{
	display: flex;
	align-items: center;
	user-select: none;
	cursor: pointer;
}

*:not(details).staccordion .title::before{
	font-family: "Icons";
	font-weight: normal;
	font-style: normal;
	display: inline;
	text-decoration: inherit;
	text-align: center;
	width: 1.18em;
	-webkit-font-smoothing: antialiased;
	backface-visibility: hidden;
	display: block;
	margin-right: 0.7rem;
	color: var(--stgray-600);
	transform: rotate(270deg);
	content: "\f078";
	line-height: 1;
	font-size: 14px;
}

*:not(details).staccordion .content{
	display: none;
	margin: 1rem 0 0;
}

*:not(details).staccordion.is-active .content{
	display: block;
}

*:not(details).staccordion.is-active .title::before{
	transform: rotate(0deg);
}

/* ========================================================================== Variables ========================================================================== */

.stapp-topbar{
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.stapp-topbar{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	padding: 0.5rem 1rem;
	line-height: 1;
	background: var(--accent-color,var(--ststatic-gray-900));
	color: var(--accent-foreground-color,var(--stwhite));
	min-height: 50px;
	align-items: center;
	gap: 0.5rem;
}

.stapp-topbar:is(.start,.end,.center)>.item{
	border-radius: 100em;
	text-decoration: none;
	width: 38px;
	height: 38px;
	display: flex;
	font-size: var(--stfont-size-17px);
	align-items: center;
	justify-content: center;
	margin-top: -0.1rem;
	margin-bottom: -0.1rem;
}

.stapp-topbar:is(.start,.end,.center) .item.is-text{
	font-size: var(--stfont-size-16px);
	font-weight: 500;
	width: auto;
	height: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-radius: 0;
	margin: 0;
	display: block;
}

.stapp-topbar:is(.start,.end){
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.stapp-topbar .start{
	justify-content: flex-start;
	grid-column: 1 / 2;
}

.stapp-topbar .start>.item:not(.is-text):first-child{
	margin-left: -0.75rem;
}

.stapp-topbar .center{
	justify-content: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	grid-column: 2 / 3;
}

.stapp-topbar .end{
	justify-content: flex-end;
	grid-column: 3 / 3;
}

.stapp-topbar .end>.item:not(.is-text):last-child{
	margin-right: -0.75rem;
}

.stapp-topbar .content{
	grid-column: 1 / 4;
}

/* ========================================================================== Variations ========================================================================== */

/* ========================================================================== Variables ========================================================================== */

.stapp-drawer{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgb(0 0 0 / 50%);
	display: none;
	overflow-y: auto;
	z-index: 102;
}

/* ========================================================================== Base ========================================================================== */

/* ========================================================================== Structure ========================================================================== */

.stapp-drawer>.content{
	background: var(--stgray-50);
	box-shadow: 0 0 20px rgb(0 0 0 / 10%);
	width: 380px;
	overflow: hidden;
}

/* ========================================================================== Variations ========================================================================== */

/* Visible */

.stapp-drawer.is-visible{
	display: flex;
}

/* Positions */

.stapp-drawer.is-bottom{
	align-items: flex-end;
	justify-content: center;
}

.stapp-drawer.is-bottom .content{
	width: 100%;
}

.stapp-drawer.is-right{
	justify-content: flex-end;
}

.stapp-drawer.is-left{
	justify-content: flex-start;
}

/* Sizes */

.stapp-drawer.small>.content{
	width: 280px;
}

.stapp-drawer.large>.content{
	width: 580px;
}

/* ========================================================================== Variables ========================================================================== */

.sttimeline{
	--sttimeline-top-line-height: 14px;
	--sttimeline-top-distance: calc(var(--sttimeline-top-line-height) + 2px);
	--sttimeline-content-distance: 1rem;
	--accent-color: initial;
	--accent-foreground-color: initial;
}

/* ========================================================================== Base ========================================================================== */

.sttimeline{
	display: grid;
	grid-template-columns: min-content min-content auto;
	gap: 0rem 1rem;
}

/* ========================================================================== Structure ========================================================================== */

/* Item */

.sttimeline>.item{
	display: contents;
}

.sttimeline>.item.secondary{
	--sttimeline-top-line-height: 2px;
	--sttimeline-top-distance: calc(var(--sttimeline-top-line-height) - 4px);
}

.sttimeline>.item:first-child,.sttimeline>.item.is-break+.item{
	--sttimeline-top-distance: 0;
}

/* Aside */

.sttimeline>.item .aside{
	margin-top: var(--sttimeline-top-distance);
	margin-bottom: 0.5rem;
	white-space: nowrap;
	text-align: right;
}

/* Indicator */

.sttimeline>.item .indicator{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	grid-column: 1 / 3;
}

.sttimeline>.item .aside+.indicator{
	grid-column: 2 / 3;
}

.sttimeline>.item.is-break+.item.secondary .indicator,.sttimeline>.item.secondary:first-child .indicator{
	margin-top: 6px;
}

.sttimeline>.item .indicator::before{
	display: block;
	content: "";
	background: var(--stgray-300);
	pointer-events: none;
	min-height: var(--sttimeline-top-line-height);
	width: 2px;
}

.sttimeline>.item .indicator::after{
	display: block;
	flex: 1;
	content: "";
	background: var(--stgray-300);
	pointer-events: none;
	min-height: 0;
	height: 100%;
	width: 2px;
}

.sttimeline>.item:last-child .indicator::after{
	display: none;
}

.sttimeline>.item:first-child .indicator::before,.sttimeline>.item.is-break+.item .indicator::before{
	display: none;
}

.sttimeline>.item:last-child .content,.sttimeline>.item.is-break+.item .content{
	margin-bottom: 0;
}

/* Content */

.sttimeline>.item .content{
	flex: 1;
	margin-top: var(--sttimeline-top-distance);
	margin-bottom: var(--sttimeline-content-distance);
}

/* Break */

.sttimeline>.item.is-break{
	display: flex;
	grid-column: 1 / 4;
	height: 4px;
	background: var(--stgray-300);
}

.sttimeline>.item.is-break:not(:last-child){
	margin-bottom: var(--sttimeline-content-distance);
}


/* ========================================================================== Variations ========================================================================== */

/* Icon Indicator */

.sttimeline>.item .indicator .icon{
	aspect-ratio: 1/1;
	width: 30px;
	height: 30px;
	font-size: var(--stfont-size-14px);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	background: var(--stgray-100);
	border-radius: 100rem;
	color: var(--stgray-600);
}

.sttimeline>.item.secondary .indicator .icon{
	aspect-ratio: 1/1;
	width: 16px;
	height: 16px;
	background: initial;
}

.sttimeline>.item .indicator.fullicon~.content::after{
	width: 3px;
	left: -45px;
}

/* error */

.sttimeline>.item.error .indicator .icon{
	background: var(--sterror-500);
	color: var(--stwhite);
}

.sttimeline>.item.error.secondary .indicator .icon{
	background: initial;
	color: var(--sterror-500);
}

/* Active */

.sttimeline>.item.is-active .indicator .icon{
	background: var(--accent-color,var(--stgray-800));
	color: var(--accent-foreground-color,var(--stgray-50));
}

.sttimeline>.item.is-active.secondary .indicator .icon{
	background: initial;
	color: var(--stgray-800);
}

/* Disabled */

.sttimeline>.item.disabled:is(.aside,.content,.indicator){
	pointer-events: none;
	opacity: 0.5;
	user-select: none;
}

/* Compact */

.sttimeline.is-compact{
	--sttimeline-content-distance: 0.5rem;
}

/* Padded */

.u-very-padded{
	padding: 1.5rem;
}

.u-horizontally-very-padded{
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.u-vertically-very-padded{
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* Spaced */

.u-very-spaced{
	margin: 1.5rem;
}

.u-horizontally-very-spaced{
	margin-left: 1.5rem;
	margin-right: 1.5rem;
}

.u-vertically-very-spaced{
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

/* ========================================================================== Variables ========================================================================== */

.stblankslate{
	--accent-color: initial;
	--accent-foreground-color: initial;

	--padding: 3.5rem;
	--icon-size: var(--stfont-size-55px);
	--header-font-size: var(--stfont-size-17px);
	--description-font-size: var(--stfont-size-15px);
	--header-distance: var(--stspace-gap);
	--description-distance: 0.25rem;
	--icon-description-distance: var(--stspace-gap);
}

/* ========================================================================== Base ========================================================================== */

.stblankslate{
	padding-bottom: var(--padding);
	padding-top: var(--padding);
	padding-left: 1rem;
	padding-right: 1rem;
	text-align: center;
}

/* ========================================================================== Structure ========================================================================== */

.stblankslate>.icon{
	font-size: var(--icon-size);
	color: var(--accent-color,var(--stgray-800));
	margin-top: 0.25rem;
	display: inline-block;
	line-height: 1;
}

.stblankslate .header{
	color: var(--accent-color,var(--stgray-800));
	font-size: var(--header-font-size);
	font-weight: 500;
	line-height: 1.6;
}

.stblankslate>.icon+.header{
	margin-top: var(--header-distance);
}

.stblankslate>.icon+.description{
	margin-top: var(--icon-description-distance);
}

.stblankslate .description{
	color: var(--stgray-500);
	font-size: var(--description-font-size);
	margin-top: var(--description-distance);
}

.stblankslate .action{
	margin-top: var(--stspace-gap-large);
}

.stblankslate .action+.action{
	margin-top: var(--stspace-gap);
}

/* ========================================================================== Variations ========================================================================== */

/* Narrow */

.stblankslate.is-narrow{
	margin: 0 auto;
	max-width: 430px;
}

/* Spacious */

.stblankslate.is-spacious{
	--padding: 3.5rem;
}

/* Interactive */

.stblankslate.is-interactive{
	display: block;
	text-decoration: none;
}

.stblankslate.is-interactive:hover{
	cursor: pointer;
	background: var(--stgray-75);
}

/* Secondary */

.stblankslate.secondary>.icon{
	color: var(--stgray-500);
}

.stblankslate.secondary .header{
	color: var(--stgray-500);
}

/* Sizes */

.stblankslate.small{
	--padding: 1.5rem;
	--icon-size: var(--stfont-size-45px);
	--header-font-size: var(--stfont-size-16px);
	--description-font-size: var(--stfont-size-14px);
	--header-distance: var(--stspace-gap-small);
	--description-distance: 0;
	--icon-description-distance: var(--stspace-gap-small);
}

.stblankslate.large{
	--icon-size: var(--stfont-size-65px);
	--header-font-size: var(--stfont-size-18px);
	--header-distance: var(--stspace-gap);
}

/* Padded */

.has-padded{
	padding: var(--stspace-gap) !important;
}

.has-padded-small{
	padding: var(--stspace-gap-small) !important;
}

.has-padded-large{
	padding: var(--stspace-gap-large) !important;
}

.has-padded-big{
	padding: var(--stspace-gap-big) !important;
}

.has-padded-huge{
	padding: var(--stspace-gap-huge) !important;
}

/* Horizontally */
.has-horizontally-padded{
	padding-left: var(--stspace-gap) !important;
	padding-right: var(--stspace-gap) !important;
}

.has-horizontally-padded-small{
	padding-left: var(--stspace-gap-small) !important;
	padding-right: var(--stspace-gap-small) !important;
}

.has-horizontally-padded-large{
	padding-left: var(--stspace-gap-large) !important;
	padding-right: var(--stspace-gap-large) !important;
}

.has-horizontally-padded-big{
	padding-left: var(--stspace-gap-big) !important;
	padding-right: var(--stspace-gap-big) !important;
}

.has-horizontally-padded-huge{
	padding-left: var(--stspace-gap-huge) !important;
	padding-right: var(--stspace-gap-huge) !important;
}

/* Vertically */
.has-vertically-padded{
	padding-top: var(--stspace-gap) !important;
	padding-bottom: var(--stspace-gap) !important;
}

.has-vertically-padded-small{
	padding-top: var(--stspace-gap-small) !important;
	padding-bottom: var(--stspace-gap-small) !important;
}

.has-vertically-padded-large{
	padding-top: var(--stspace-gap-large) !important;
	padding-bottom: var(--stspace-gap-large) !important;
}

.has-vertically-padded-big{
	padding-top: var(--stspace-gap-big) !important;
	padding-bottom: var(--stspace-gap-big) !important;
}

.has-vertically-padded-huge{
	padding-top: var(--stspace-gap-huge) !important;
	padding-bottom: var(--stspace-gap-huge) !important;
}

/* Bottom */
.has-bottom-padded{
	padding-bottom: var(--stspace-gap) !important;
}

.has-bottom-padded-small{
	padding-bottom: var(--stspace-gap-small) !important;
}

.has-bottom-padded-large{
	padding-bottom: var(--stspace-gap-large) !important;
}

.has-bottom-padded-big{
	padding-bottom: var(--stspace-gap-big) !important;
}

.has-bottom-padded-huge{
	padding-bottom: var(--stspace-gap-huge) !important;
}

/* Top */
.has-top-padded{
	padding-top: var(--stspace-gap) !important;
}

.has-top-padded-small{
	padding-top: var(--stspace-gap-small) !important;
}

.has-top-padded-large{
	padding-top: var(--stspace-gap-large) !important;
}

.has-top-padded-big{
	padding-top: var(--stspace-gap-big) !important;
}

.has-top-padded-huge{
	padding-top: var(--stspace-gap-huge) !important;
}

/* Start */
.has-start-padded{
	padding-left: var(--stspace-gap) !important;
}

.has-start-padded-small{
	padding-left: var(--stspace-gap-small) !important;
}

.has-start-padded-large{
	padding-left: var(--stspace-gap-large) !important;
}

.has-start-padded-big{
	padding-left: var(--stspace-gap-big) !important;
}

.has-start-padded-huge{
	padding-left: var(--stspace-gap-huge) !important;
}

/* End */
.has-end-padded{
	padding-right: var(--stspace-gap) !important;
}

.has-end-padded-small{
	padding-right: var(--stspace-gap-small) !important;
}

.has-end-padded-large{
	padding-right: var(--stspace-gap-large) !important;
}

.has-end-padded-big{
	padding-right: var(--stspace-gap-big) !important;
}

.has-end-padded-huge{
	padding-right: var(--stspace-gap-huge) !important;
}

/* Fitted */

.has-fitted{
	padding: 0 !important;
}

.has-vertically-fitted{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.has-horizontally-fitted{
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.has-start-fitted{
	padding-right: 0 !important;
}

.has-end-fitted{
	padding-left: 0 !important;
}

.has-top-fitted{
	padding-top: 0 !important;
}

.has-bottom-fitted{
	padding-bottom: 0 !important;
}

/* Spaced */

.has-spaced{
	margin: 1rem !important;
}

.has-spaced-small{
	margin: var(--stspace-gap-small) !important;
}

.has-spaced-large{
	margin: var(--stspace-gap-large) !important;
}

.has-spaced-big{
	margin: var(--stspace-gap-big) !important;
}

.has-spaced-huge{
	margin: var(--stspace-gap-huge) !important;
}

/* Horizontally */
.has-horizontally-spaced{
	margin-left: var(--stspace-gap) !important;
	margin-right: var(--stspace-gap) !important;
}

.has-horizontally-spaced-small{
	margin-left: var(--stspace-gap-small) !important;
	margin-right: var(--stspace-gap-small) !important;
}

.has-horizontally-spaced-large{
	margin-left: var(--stspace-gap-large) !important;
	margin-right: var(--stspace-gap-large) !important;
}

.has-horizontally-spaced-big{
	margin-left: var(--stspace-gap-big) !important;
	margin-right: var(--stspace-gap-big) !important;
}

.has-horizontally-spaced-huge{
	margin-left: var(--stspace-gap-huge) !important;
	margin-right: var(--stspace-gap-huge) !important;
}

/* Vertically */
.has-vertically-spaced{
	margin-top: var(--stspace-gap) !important;
	margin-bottom: var(--stspace-gap) !important;
}

.has-vertically-spaced-small{
	margin-top: var(--stspace-gap-small) !important;
	margin-bottom: var(--stspace-gap-small) !important;
}

.has-vertically-spaced-large{
	margin-top: var(--stspace-gap-large) !important;
	margin-bottom: var(--stspace-gap-large) !important;
}

.has-vertically-spaced-big{
	margin-top: var(--stspace-gap-big) !important;
	margin-bottom: var(--stspace-gap-big) !important;
}

.has-vertically-spaced-huge{
	margin-top: var(--stspace-gap-huge) !important;
	margin-bottom: var(--stspace-gap-huge) !important;
}

/* Bottom */
.has-bottom-spaced{
	margin-bottom: var(--stspace-gap) !important;
}

.has-bottom-spaced-small{
	margin-bottom: var(--stspace-gap-small) !important;
}

.has-bottom-spaced-large{
	margin-bottom: var(--stspace-gap-large) !important;
}

.has-bottom-spaced-big{
	margin-bottom: var(--stspace-gap-big) !important;
}

.has-bottom-spaced-huge{
	margin-bottom: var(--stspace-gap-huge) !important;
}

/* Top */
.has-top-spaced{
	margin-top: var(--stspace-gap) !important;
}

.has-top-spaced-small{
	margin-top: var(--stspace-gap-small) !important;
}

.has-top-spaced-large{
	margin-top: var(--stspace-gap-large) !important;
}

.has-top-spaced-big{
	margin-top: var(--stspace-gap-big) !important;
}

.has-top-spaced-huge{
	margin-top: var(--stspace-gap-huge) !important;
}

/* Start */
.has-start-spaced{
	margin-left: var(--stspace-gap) !important;
}

.has-start-spaced-small{
	margin-left: var(--stspace-gap-small) !important;
}

.has-start-spaced-large{
	margin-left: var(--stspace-gap-large) !important;
}

.has-start-spaced-big{
	margin-left: var(--stspace-gap-big) !important;
}

.has-start-spaced-huge{
	margin-left: var(--stspace-gap-huge) !important;
}

/* End */
.has-end-spaced{
	margin-right: var(--stspace-gap) !important;
}

.has-end-spaced-small{
	margin-right: var(--stspace-gap-small) !important;
}

.has-end-spaced-large{
	margin-right: var(--stspace-gap-large) !important;
}

.has-end-spaced-big{
	margin-right: var(--stspace-gap-big) !important;
}

.has-end-spaced-huge{
	margin-right: var(--stspace-gap-huge) !important;
}

/* Auto */
.has-top-spaced-auto{
	margin-top: auto !important;
}

.has-bottom-spaced-auto{
	margin-bottom: auto !important;
}

.has-start-spaced-auto{
	margin-left: auto !important;
}

.has-end-spaced-auto{
	margin-right: auto !important;
}

.has-vertically-spaced-auto{
	margin-top: auto !important;
	margin-bottom: auto !important;
}

.has-horizontally-spaced-auto{
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Hidden */

.has-hidden{
	display: none !important;
}

.has-invisible{
	visibility: hidden !important;
}

/* Edged */

.has-edged{
	border-left: 0 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
}

/*.has-topleft-borderless{
	 border: 0 !important;
 }
 .has-borderless{
	 border: 0 !important;
 }
 .has-borderless-x{ or horizontal
	 border-left: 0 !important;
	 border-right: 0 !important;
 }
 .has-radiusless{
	 border-radius: 0 !important;
 }*/

/* Line Height */

.has-leading-small{
	line-height: 1.4 !important;
}

.has-leading-none{
	line-height: 1 !important;
}

.has-leading-large{
	line-height: 1.9 !important;
}

/* Flex */

.has-flex-center{
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-direction: column !important;
}

/* Font Size */

.has-text-14px{
	font-size: var(--stfont-size-14px) !important;
}

.has-text-15px{
	font-size: var(--stfont-size-15px) !important;
}

.has-text-16px{
	font-size: var(--stfont-size-16px) !important;
}

/* Text Color */

.has-text-white{
	color: var(--stwhite) !important;
}

.has-text-black{
	color: var(--stblack) !important;
}

/* Cursor */

.has-cursor-auto{
	cursor: auto !important;
}

.has-cursor-default{
	cursor: default !important;
}

.has-cursor-pointer{
	cursor: pointer !important;
}

.has-cursor-not-allowed{
	cursor: not-allowed !important;
}

/* User Select */

.has-select-none{
	user-select: none !important;
}

.has-select-all{
	user-select: all !important;
}

/* Pointer Events */

.has-pointer-evenstnone{
	pointer-events: none !important;
}

/* Hover */

.has-hover-fade-in{
	opacity: 0.7;
}

.has-hover-fade-in:hover{
	opacity: 1;
}

.has-hover-fade-out{
	opacity: 1;
}

.has-hover-fade-out:hover{
	opacity: 0.7;
}

.has-hover-target{
	text-decoration: none;
	color: inherit;
}

.has-hover-target:hover .has-target-link{
	color: var(--stlink-700);
}

.has-hover-target:hover .has-target-underline{
	text-decoration: underline;
}

/* Word Break */

.has-break-all{
	word-break: break-all !important;
}

.has-break-words{
	overflow-wrap: break-word !important;
}

.has-break-keep{
	word-break: keep-all !important;
}

/* Overflow */

.has-overflow-hidden{
	overflow: hidden !important;
}

/* Sizes */

.has-full-size{
	width: 100%;
	height: 100%;
}

.has-full-width{
	width: 100%;
}

.has-full-height{
	height: 100%;
}

/* Accent */

.is-accent{
	--accent-color: var(--staccent-color);
	--accent-foreground-color: var(--staccent-foreground-color);
}

/* ========================================================================== Grid ========================================================================== */

.stgrid{
	--stgrid-gap: 1rem;

	--stgrid-1-wide: calc((100% / (16 / 1)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 1)));
	--stgrid-2-wide: calc((100% / (16 / 2)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 2)));
	--stgrid-3-wide: calc((100% / (16 / 3)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 3)));
	--stgrid-4-wide: calc((100% / (16 / 4)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 4)));
	--stgrid-5-wide: calc((100% / (16 / 5)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 5)));
	--stgrid-6-wide: calc((100% / (16 / 6)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 6)));
	--stgrid-7-wide: calc((100% / (16 / 7)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 7)));
	--stgrid-8-wide: calc((100% / (16 / 8)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 8)));
	--stgrid-9-wide: calc((100% / (16 / 9)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 9)));
	--stgrid-10-wide: calc((100% / (16 / 10)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 10)));
	--stgrid-11-wide: calc((100% / (16 / 11)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 11)));
	--stgrid-12-wide: calc((100% / (16 / 12)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 12)));
	--stgrid-13-wide: calc((100% / (16 / 13)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 13)));
	--stgrid-14-wide: calc((100% / (16 / 14)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 14)));
	--stgrid-15-wide: calc((100% / (16 / 15)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 15)));
	--stgrid-16-wide: calc((100% / (16 / 16)) - var(--stgrid-gap) + (var(--stgrid-gap) / (16 / 16)));

	--stgrid-1-columns: calc((100% / 1) - var(--stgrid-gap) + (var(--stgrid-gap) / 1));
	--stgrid-2-columns: calc((100% / 2) - var(--stgrid-gap) + (var(--stgrid-gap) / 2));
	--stgrid-3-columns: calc((100% / 3) - var(--stgrid-gap) + (var(--stgrid-gap) / 3));
	--stgrid-4-columns: calc((100% / 4) - var(--stgrid-gap) + (var(--stgrid-gap) / 4));
	--stgrid-5-columns: calc((100% / 5) - var(--stgrid-gap) + (var(--stgrid-gap) / 5));
	--stgrid-6-columns: calc((100% / 6) - var(--stgrid-gap) + (var(--stgrid-gap) / 6));
	--stgrid-7-columns: calc((100% / 7) - var(--stgrid-gap) + (var(--stgrid-gap) / 7));
	--stgrid-8-columns: calc((100% / 8) - var(--stgrid-gap) + (var(--stgrid-gap) / 8));
	--stgrid-9-columns: calc((100% / 9) - var(--stgrid-gap) + (var(--stgrid-gap) / 9));
	--stgrid-10-columns: calc((100% / 10) - var(--stgrid-gap) + (var(--stgrid-gap) / 10));
}

/* ========================================================================== Row ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.strow{
	display: flex;
	gap: 1rem;
	color: inherit;
	min-width: 0;
}

/* ========================================================================== Variations ========================================================================== */

/* Aligns */

.strow.left{
	justify-content: flex-start;
}

.strow.center{
	justify-content: center;
}

.strow.right{
	justify-content: flex-end;
}

.strow.is-top-aligned{
	align-items: flex-start;
}

.strow.is-middle-aligned{
	align-items: center;
}

.strow.is-bottom-aligned{
	align-items: flex-end;
}

.strow .column.is-middle-aligned{
	align-items: center;
	display: flex;
}

.strow .column.center{
	justify-content: center;
	display: flex;
}

.strow .column.is-bottom-aligned{
	align-items: flex-end;
	display: flex;
}

.strow .column.left{
	text-align: left;
}

.strow .column.right{
	text-align: right;
}

/* Truncated */

.strow .column.is-truncated,.strow .column.is-truncated *{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Evenly Divided */

.strow.is-evenly-divided .column{
	flex: 1;
}

/* fill */

.strow .column.fill{
	flex: 1;
	min-width: 0;
	flex-grow: 1;
	/*flex-shrink: 1;*/
}

/* Gapless */

.strow.is-compact{
	gap: 0.5rem;
}

.strow.is-relaxed{
	gap: 2rem;
}

/* ========================================================================== Space ========================================================================== */

/* ========================================================================== Base ========================================================================== */

.stspace{
	height: var(--stspace-gap);
}

/* ========================================================================== Structure ========================================================================== */

.stspace::before{
	content: " ";
}

/* ========================================================================== Variations ========================================================================== */

/* Sizes */

.stspace.small{
	height: var(--stspace-gap-small);
}

.stspace.large{
	height: var(--stspace-gap-large);
}

.stspace.big{
	height: var(--stspace-gap-big);
}

.stspace.huge{
	height: var(--stspace-gap-huge);
}

/* Padded */

.u-padded{
	padding: var(--stspace-gap);
}

.u-padded-small{
	padding: var(--stspace-gap-small);
}

.u-padded-large{
	padding: var(--stspace-gap-large);
}

.u-padded-big{
	padding: var(--stspace-gap-big);
}

.u-padded-huge{
	padding: var(--stspace-gap-huge);
}

/* Horizontally */
.u-horizontally-padded{
	padding-left: var(--stspace-gap);
	padding-right: var(--stspace-gap);
}

.u-horizontally-padded-small{
	padding-left: var(--stspace-gap-small);
	padding-right: var(--stspace-gap-small);
}

.u-horizontally-padded-large{
	padding-left: var(--stspace-gap-large);
	padding-right: var(--stspace-gap-large);
}

.u-horizontally-padded-big{
	padding-left: var(--stspace-gap-big);
	padding-right: var(--stspace-gap-big);
}

.u-horizontally-padded-huge{
	padding-left: var(--stspace-gap-huge);
	padding-right: var(--stspace-gap-huge);
}

/* Vertically */
.u-vertically-padded{
	padding-top: var(--stspace-gap);
	padding-bottom: var(--stspace-gap);
}

.u-vertically-padded-small{
	padding-top: var(--stspace-gap-small);
	padding-bottom: var(--stspace-gap-small);
}

.u-vertically-padded-large{
	padding-top: var(--stspace-gap-large);
	padding-bottom: var(--stspace-gap-large);
}

.u-vertically-padded-big{
	padding-top: var(--stspace-gap-big);
	padding-bottom: var(--stspace-gap-big);
}

.u-vertically-padded-huge{
	padding-top: var(--stspace-gap-huge);
	padding-bottom: var(--stspace-gap-huge);
}

/* Bottom */
.u-bottom-padded{
	padding-bottom: var(--stspace-gap);
}

.u-bottom-padded-small{
	padding-bottom: var(--stspace-gap-small);
}

.u-bottom-padded-large{
	padding-bottom: var(--stspace-gap-large);
}

.u-bottom-padded-big{
	padding-bottom: var(--stspace-gap-big);
}

.u-bottom-padded-huge{
	padding-bottom: var(--stspace-gap-huge);
}

/* Top */
.u-top-padded{
	padding-top: var(--stspace-gap);
}

.u-top-padded-small{
	padding-top: var(--stspace-gap-small);
}

.u-top-padded-large{
	padding-top: var(--stspace-gap-large);
}

.u-top-padded-big{
	padding-top: var(--stspace-gap-big);
}

.u-top-padded-huge{
	padding-top: var(--stspace-gap-huge);
}

/* Start */
.u-start-padded{
	padding-left: var(--stspace-gap);
}

.u-start-padded-small{
	padding-left: var(--stspace-gap-small);
}

.u-start-padded-large{
	padding-left: var(--stspace-gap-large);
}

.u-start-padded-big{
	padding-left: var(--stspace-gap-big);
}

.u-start-padded-huge{
	padding-left: var(--stspace-gap-huge);
}

/* End */
.u-end-padded{
	padding-right: var(--stspace-gap);
}

.u-end-padded-small{
	padding-right: var(--stspace-gap-small);
}

.u-end-padded-large{
	padding-right: var(--stspace-gap-large);
}

.u-end-padded-big{
	padding-right: var(--stspace-gap-big);
}

.u-end-padded-huge{
	padding-right: var(--stspace-gap-huge);
}

/* Spaced */

.u-spaced{
	margin: 1rem;
}

.u-spaced-small{
	margin: var(--stspace-gap-small);
}

.u-spaced-large{
	margin: var(--stspace-gap-large);
}

.u-spaced-big{
	margin: var(--stspace-gap-big);
}

.u-spaced-huge{
	margin: var(--stspace-gap-huge);
}

/* Horizontally */
.u-horizontally-spaced{
	margin-left: var(--stspace-gap);
	margin-right: var(--stspace-gap);
}

.u-horizontally-spaced-small{
	margin-left: var(--stspace-gap-small);
	margin-right: var(--stspace-gap-small);
}

.u-horizontally-spaced-large{
	margin-left: var(--stspace-gap-large);
	margin-right: var(--stspace-gap-large);
}

.u-horizontally-spaced-big{
	margin-left: var(--stspace-gap-big);
	margin-right: var(--stspace-gap-big);
}

.u-horizontally-spaced-huge{
	margin-left: var(--stspace-gap-huge);
	margin-right: var(--stspace-gap-huge);
}

/* Vertically */
.u-vertically-spaced{
	margin-top: var(--stspace-gap);
	margin-bottom: var(--stspace-gap);
}

.u-vertically-spaced-small{
	margin-top: var(--stspace-gap-small);
	margin-bottom: var(--stspace-gap-small);
}

.u-vertically-spaced-large{
	margin-top: var(--stspace-gap-large);
	margin-bottom: var(--stspace-gap-large);
}

.u-vertically-spaced-big{
	margin-top: var(--stspace-gap-big);
	margin-bottom: var(--stspace-gap-big);
}

.u-vertically-spaced-huge{
	margin-top: var(--stspace-gap-huge);
	margin-bottom: var(--stspace-gap-huge);
}

/* Bottom */
.u-bottom-spaced{
	margin-bottom: var(--stspace-gap);
}

.u-bottom-spaced-small{
	margin-bottom: var(--stspace-gap-small);
}

.u-bottom-spaced-large{
	margin-bottom: var(--stspace-gap-large);
}

.u-bottom-spaced-big{
	margin-bottom: var(--stspace-gap-big);
}

.u-bottom-spaced-huge{
	margin-bottom: var(--stspace-gap-huge);
}

/* Top */
.u-top-spaced{
	margin-top: var(--stspace-gap);
}

.u-top-spaced-small{
	margin-top: var(--stspace-gap-small);
}

.u-top-spaced-large{
	margin-top: var(--stspace-gap-large);
}

.u-top-spaced-big{
	margin-top: var(--stspace-gap-big);
}

.u-top-spaced-huge{
	margin-top: var(--stspace-gap-huge);
}

/* Start */
.u-start-spaced{
	margin-left: var(--stspace-gap);
}

.u-start-spaced-small{
	margin-left: var(--stspace-gap-small);
}

.u-start-spaced-large{
	margin-left: var(--stspace-gap-large);
}

.u-start-spaced-big{
	margin-left: var(--stspace-gap-big);
}

.u-start-spaced-huge{
	margin-left: var(--stspace-gap-huge);
}

/* End */
.u-end-spaced{
	margin-right: var(--stspace-gap);
}

.u-end-spaced-small{
	margin-right: var(--stspace-gap-small);
}

.u-end-spaced-large{
	margin-right: var(--stspace-gap-large);
}

.u-end-spaced-big{
	margin-right: var(--stspace-gap-big);
}

.u-end-spaced-huge{
	margin-right: var(--stspace-gap-huge);
}

.u-hidden{
	display: none !important;
}

.u-invisible{
	visibility: hidden !important;
}

.u-edged{
	border-left: 0 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
}

.inline{
	display: inline-block;
}

.badge{
	position: relative;
	border-radius: .25rem;
	border-width: 1px;
	border-color: #0000;
	font-size: .75rem;
	line-height: 1rem;
	font-weight: 600;
	color: rgb(255 255 255);
	padding: .125rem .5rem;
	margin: .25rem 0px .25rem 0px;

	&.primary{
		background: rgb(67 97 238);

		&.outline{
			--badge-outline-bordercolor: rgb(67 97 238);
			--badge-outline-color: rgb(67 97 238);

			&:hover{
				--badge-outline-hover-backgorund: rgb(67 97 238);
			}
		}
	}

	&.secondary{
		background: rgb(128 93 202);

		&.outline{
			--badge-outline-bordercolor: rgb(128 93 202);
			--badge-outline-color: rgb(128 93 202);

			&:hover{
				--badge-outline-hover-backgorund: rgb(128 93 202);
			}
		}
	}

	&.success{
		background: rgb(0 171 85);

		&.outline{
			--badge-outline-bordercolor: rgb(0 171 85);
			--badge-outline-color: rgb(0 171 85);

			&:hover{
				--badge-outline-hover-backgorund: rgb(0 171 85);
			}
		}
	}

	&.error{
		background: rgb(231 81 90);

		&.outline{
			--badge-outline-bordercolor: rgb(231 81 90);
			--badge-outline-color: rgb(231 81 90);

			&:hover{
				--badge-outline-hover-backgorund: rgb(231 81 90);
			}
		}
	}

	&.warn{
		background: rgb(226 160 63);

		&.outline{
			--badge-outline-bordercolor: rgb(226 160 63);
			--badge-outline-color: rgb(226 160 63);

			&:hover{
				--badge-outline-hover-backgorund: rgb(226 160 63);
			}
		}
	}

	&.info{
		background: rgb(33 150 243);

		&.outline{
			--badge-outline-bordercolor: rgb(33 150 243);
			--badge-outline-color: rgb(33 150 243);

			&:hover{
				--badge-outline-hover-backgorund: rgb(33 150 243);
			}
		}
	}

	&.dark{
		background: rgb(59 63 92);

		&.outline{
			--badge-outline-bordercolor: rgb(59 63 92);
			--badge-outline-color: rgb(59 63 92);

			&:hover{
				--badge-outline-hover-backgorund: rgb(59 63 92);
			}
		}
	}

	&.outline{
		border: 1px var(--badge-outline-bordercolor) solid;
		background: none;
		color: var(--badge-outline-color);

		&:hover{
			background: var(--badge-outline-hover-backgorund);
			color: rgb(224 230 237);
		}
	}
}


/* ---自訂 */

.noborder{
	border: none !important;
}

.noborder>tbody>tr{
	border: none !important;
}

.noborder>tbody>tr>td{
	border: none !important;
}

.outborder{
	border: 1px var(--stgray-400) solid !important;
}

.inborder>tbody>tr>td{
	border-left: 1px var(--stgray-400) solid !important;
	border-right: 1px var(--stgray-400) solid !important;
}

.allborder{
	border: 1px var(--stgray-400) solid !important;
}

.allborder>tbody>tr>td{
	border-left: 1px var(--stgray-400) solid !important;
	border-right: 1px var(--stgray-400) solid !important;
}

.fill{
	width: 100% !important;
}

.noselect{
	user-select: none;
	-webkit-user-select: none;
}

.round-0px{ border-radius: 0px; }
.roundnone{ border-radius: 0px; }
.round-none{ border-radius: 0px; }
.round{ border-radius: 50%; }

.boximage{
	position: absolute;
	top: 0px;
	left: 0px;
	max-width: 100%;
	max-height: 100%;
}

.textfail{
	color: var(--sterror-500);
}

.textsuccess{
	color: var(--stsuccess-500);
}

.textwarn{
	color: var(--stwarn-500);
}

.flexcenter{
	display: flex;
	align-items: center;
	justify-content: center;
}

.flexxcenter{
	display: flex;
	align-items: start;
	justify-content: center;
}

.flexycenter{
	display: flex;
	align-items: center;
	justify-content: start;
}

.inputdiv{
	margin: 10px 0px;
}

.margin-0px{ margin: 0px !important; }
.padding-0px{ padding: 0px !important; }

.border{
	border: 1px white solid;
}

.flex{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.checkbox.big{
	width: 20px;
	height: 20px;
}

/* END */


/* program START */

/* .dot{
    width: 8px;
    height: 8px;
    position: absolute;
    left: -10px;
    top: -10px;
    background: white;
    border-radius: 50%;
}

.ghost{
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(5, 1fr);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 72px;
    transition: 0.3s linear;
}

.body{
    grid-row: 1/5;
    grid-column: 1/6;
    background: white;
    border-radius: 50% 50% 0 0;
}

.eye1{
    grid-row: 2/3;
    grid-column: 2/3;
    background: black;
    border-radius: 50%;
}

.eye2{
    grid-row: 2/3;
    grid-column: 4/5;
    border-radius: 50%;
    background: black;
}

.mouth{
    grid-row: 3/4;
    grid-column: 3/4;
    background: black;
    width: 50%;
    height: 50%;
    justify-self: center;
    align-self: center;
    border-radius: 50%;
}

.foot1{
    grid-row: 5/7;
    grid-column: 1/2;
    width: 80%;
    border-radius: 0 0 5px 5px;
    background: white;
}

.foot2{
    grid-row: 5/6;
    grid-column: 3/4;
    width: 80%;
    border-radius: 0 0 5px 5px;
    background: white;
}

.foot3{
    grid-row: 5/6;
    grid-column: 5/6;
    width: 80%;
    justify-self: end;
    border-radius: 0 0 5px 5px;
    background: white;
} */