/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { font-size: 100%; margin: 0px; padding: 0px; vertical-align: baseline; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
html, body { width: 100%; height: 100%; } html, body { font-family: var(--font-family); font-size: var(--font-size); color: var(--font-color); background-color: var(--background-color); }
div, span, form, button, input, select, option { font-family: inherit; font-size: inherit; } span { color: inherit; }
header, main, menu, nav, section, article, figure, footer { font-family: inherit; font-size: inherit; color: inherit; background-color: inherit; display: block; }
button, select, input, textarea { font-family: inherit; font-size: inherit; color: inherit; outline: none; vertical-align: sub; }
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type="number"] { -moz-appearance: textfield; }
input[type="checkbox"], input[type="radio"] { vertical-align: middle; }
input[type="text"] {} input[type="date"] {} input[type="email"] {}
input { background-color: var(--background-color); }
ul.no-style { list-style-type: none; } ul.no-style li { list-style: none; list-style-type: none; }
img { display: block; vertical-align: middle; }
template { display: none; }
pre { font-family: var(--font-family-code); }
iframe:focus { outline: none; } iframe[seamless] { display: block; }

:root {
	--no-pixel: 0px;
	--pixel: 1px;
	--px: 10px;
	--px-tiny: 3px;
	--px-small: 5px;
	--px-size: 15px;
	--px-medium: 20px;
	--px-large: 25px;
	--px-big: 30px;
	}

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx
 */

:root {
	--font-light-ultra: 100;
	--font-light-medium: 200;
	--font-light: 300;
	--font-regular: 400;
	--font-bold-pop: 500;
	--font-bold-medium: 600;
	--font-bold: 700;
	--font-bold-ultra: 800;
	--font-weight: 900;
	}

[class*="font:normal"] { font-style: normal; }
[class*="font:italic"] { font-style: italic; }
[class*="font-light:ultra"] { font-weight: var(--font-light-ultra); }
[class*="font-light:pop"] { font-weight: var(--font-light-pop); }
[class*="font:light"], [class*="font-weight:light"] { font-weight: var(--font-light); }
[class*="font:regular"] { font-weight: var(--font-regular); }
[class*="font-bold:pop"] { font-weight: var(--font-bold-pop); }
[class*="font-bold:medium"] { font-weight: var(--font-bold-medium); }
[class*="font:bold"], [class*="font-weight:bold"], .font-bold { font-weight: var(--font-bold); }
[class*="font-bold:ultra"] { font-weight: var(--font-bold-ultra); }
[class*="font:weight"] { font-weight: var(--font-weight); }

[class*="font:size"], .font-size { font-size: var(--font-size); }
[class*="font:tiny"], [class*="font-size:tiny"] { font-size: var(--font-tiny); }
[class*="font:small"], [class*="font-size:small"] { font-size: var(--font-small); }
[class*="font:intermediate"], [class*="font-size:intermediate"] { font-size: var(--font-intermediate); }
[class*="font:medium"], [class*="font-size:medium"] { font-size: var(--font-medium); }
[class*="font:large"], [class*="font-size:large"] { font-size: var(--font-large); }
[class*="font:big"], [class*="font-size:big"] { font-size: var(--font-big); }

a { color: var(--font-anchor-color); text-decoration: none; cursor: pointer; }
a:hover { color: var(--font-anchor-color-hover); }
a:active { color: var(--font-anchor-color-active); }
a:visited { color: var(--font-anchor-color-visited); }

[class*="a:static"], [class*="a:static"]:hover, [class*="a:static"]:active, [class*="a:static"]:visited { color: var(--font-color); }
[class*="a:opacity"] { opacity: 0.75; } [class*="a:opacity"]:hover { opacity: 1; }

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx
 */

[class*="line:spacing"], .line-spacing { line-height: 22px; }
[class*="line-spacing:small"] { line-height: 16px; }
[class*="line-spacing:medium"] { line-height: 24px; }
[class*="line-spacing:large"] { line-height: 32px; }

[class*="text:spacing"], .text-spacing { letter-spacing: 1px; }
[class*="text-spacing:small"] { letter-spacing: 2px; }
[class*="text-spacing:medium"] { letter-spacing: 3px; }
[class*="text-spacing:large"] { letter-spacing: 5px; }

[class*="text:align"], .text-align { text-align: center; } [class*="text-align:left"] { text-align: left; } [class*="text-align:right"] { text-align: right; } [class*="text:small"] { text-transform: lowercase; } [class*="text:big"] { text-transform: uppercase; }
[class*="align:item"], .align-item { align-items: center; } [class*="align:start"], .align-start { align-items: start; } [class*="align:end"], .align-end { align-items: end; }
[class*="justify:item"], .justify-item { justify-content: center; } [class*="justify:start"], .justify-start { justify-content: start; } [class*="justify:end"], .justify-end { justify-content: end; } [class*="justify:content"], .justify-content { text-align: justify; }

.in-dex { z-index: -1; }
.index { z-index: 1; }
[class*="index:regular"] { z-index: 100; }
[class*="index:small"] { z-index: 10; }
[class*="index:size"] { z-index: 1000; }
[class*="index:medium"] { z-index: 10000; }
[class*="index:large"] { z-index: 100000; }
[class*="index:big"] { z-index: 1000000; }

.gap { gap: var(--px); }
[class*="gap:tiny"] { gap: var(--px-tiny); }
[class*="gap:small"] { gap: var(--px-small); }
[class*="gap:size"] { gap: var(--px-size); }
[class*="gap:medium"] { gap: var(--px-medium); }
[class*="gap:large"] { gap: var(--px-large); }
[class*="gap:big"] { gap: var(--px-big); }

.margin { margin: var(--px); } [class*="margin:tiny"] { margin: var(--px-tiny); } [class*="margin:small"] { margin: var(--px-small); } [class*="margin:size"] { margin: var(--px-size); } [class*="margin:medium"] { margin: var(--px-medium); } [class*="margin:large"] { margin: var(--px-large); } [class*="margin:big"] { margin: var(--px-big); }
[class*="margin:top"], .margin-top { margin-top: var(--px); } [class*="margin-top:tiny"] { margin-top: var(--px-tiny); } [class*="margin-top:small"] { margin-top: var(--px-small); } [class*="margin-top:size"] { margin-top: var(--px-size); } [class*="margin-top:medium"] { margin-top: var(--px-medium); } [class*="margin-top:large"] { margin-top: var(--px-large); } [class*="margin-top:big"] { margin-top: var(--px-big); }
[class*="margin:bottom"], .margin-bottom { margin-bottom: var(--px); } [class*="margin-bottom:tiny"] { margin-bottom: var(--px-tiny); } [class*="margin-bottom:small"] { margin-bottom: var(--px-small); } [class*="margin-bottom:size"] { margin-bottom: var(--px-size); } [class*="margin-bottom:medium"] { margin-bottom: var(--px-medium); } [class*="margin-bottom:large"] { margin-bottom: var(--px-large); } [class*="margin-bottom:big"] { margin-bottom: var(--px-big); }
[class*="margin:left"], .margin-left { margin-left: var(--px); } [class*="margin-left:tiny"] { margin-left: var(--px-tiny); } [class*="margin-left:small"] { margin-left: var(--px-small); } [class*="margin-left:size"] { margin-left: var(--px-size); } [class*="margin-left:medium"] { margin-left: var(--px-medium); } [class*="margin-left:large"] { margin-left: var(--px-large); } [class*="margin-left:big"] { margin-left: var(--px-big); }
[class*="margin:right"], .margin-right { margin-right: var(--px); } [class*="margin-right:tiny"] { margin-right: var(--px-tiny); } [class*="margin-right:small"] { margin-right: var(--px-small); } [class*="margin-right:size"] { margin-right: var(--px-size); } [class*="margin-right:medium"] { margin-right: var(--px-medium); } [class*="margin-right:large"] { margin-right: var(--px-large); } [class*="margin-right:big"] { margin-right: var(--px-big); }
[class*="margin:vertical"], .margin-vertical { margin-top: var(--px); margin-bottom: var(--px); } [class*="margin-vertical:tiny"] { margin-top: var(--px-tiny); margin-bottom: var(--px-tiny); } [class*="margin-vertical:small"] { margin-top: var(--px-small); margin-bottom: var(--px-small); } [class*="margin-vertical:size"] { margin-top: var(--px-size); margin-bottom: var(--px-size); } [class*="margin-vertical:medium"] { margin-top: var(--px-medium); margin-bottom: var(--px-medium); } [class*="margin-vertical:large"] { margin-top: var(--px-large); margin-bottom: var(--px-large); } [class*="margin-vertical:big"] { margin-top: var(--px-big); margin-bottom: var(--px-big); }
[class*="margin:horizontal"], .margin-horizontal { margin-left: var(--px); margin-right: var(--px); } [class*="margin-horizontal:tiny"] { margin-left: var(--px-tiny); margin-right: var(--px-tiny); } [class*="margin-horizontal:small"] { margin-left: var(--px-small); margin-right: var(--px-small); } [class*="margin-horizontal:size"] { margin-left: var(--px-size); margin-right: var(--px-size); } [class*="margin-horizontal:medium"] { margin-left: var(--px-medium); margin-right: var(--px-medium); } [class*="margin-horizontal:large"] { margin-left: var(--px-large); margin-right: var(--px-large); } [class*="margin-horizontal:big"] { margin-left: var(--px-big); margin-right: var(--px-big); }

.padding { padding: var(--px); } [class*="padding:tiny"] { padding: var(--px-tiny); } [class*="padding:small"] { padding: var(--px-small); } [class*="padding:size"] { padding: var(--px-size); } [class*="padding:medium"] { padding: var(--px-medium); } [class*="padding:large"] { padding: var(--px-large); } [class*="padding:big"] { padding: var(--px-big); }
[class*="padding:top"], .padding-top { padding-top: var(--px); } [class*="padding-top:tiny"] { padding-top: var(--px-tiny); } [class*="padding-top:small"] { padding-top: var(--px-small); } [class*="padding-top:size"] { padding-top: var(--px-size); } [class*="padding-top:medium"] { padding-top: var(--px-medium); } [class*="padding-top:large"] { padding-top: var(--px-large); } [class*="padding-top:big"] { padding-top: var(--px-big); }
[class*="padding:bottom"], .padding-bottom { padding-bottom: var(--px); } [class*="padding-bottom:tiny"] { padding-bottom: var(--px-tiny); } [class*="padding-bottom:small"] { padding-bottom: var(--px-small); } [class*="padding-bottom:size"] { padding-bottom: var(--px-size); } [class*="padding-bottom:medium"] { padding-bottom: var(--px-medium); } [class*="padding-bottom:large"] { padding-bottom: var(--px-large); } [class*="padding-bottom:big"] { padding-bottom: var(--px-big); }
[class*="padding:left"], .padding-left { padding-left: var(--px); } [class*="padding-left:tiny"] { padding-left: var(--px-tiny); } [class*="padding-left:small"] { padding-left: var(--px-small); } [class*="padding-left:size"] { padding-left: var(--px-size); } [class*="padding-left:medium"] { padding-left: var(--px-medium); } [class*="padding-left:large"] { padding-left: var(--px-large); } [class*="padding-left:big"] { padding-left: var(--px-big); }
[class*="padding:right"], .padding-right { padding-right: var(--px); } [class*="padding-right:tiny"] { padding-right: var(--px-tiny); } [class*="padding-right:small"] { padding-right: var(--px-small); } [class*="padding-right:size"] { padding-right: var(--px-size); } [class*="padding-right:medium"] { padding-right: var(--px-medium); } [class*="padding-right:large"] { padding-right: var(--px-large); } [class*="padding-right:big"] { padding-right: var(--px-big); }
[class*="padding:vertical"], .padding-vertical { padding-top: var(--px); padding-bottom: var(--px); } [class*="padding-vertical:tiny"] { padding-top: var(--px-tiny); padding-bottom: var(--px-tiny); } [class*="padding-vertical:small"] { padding-top: var(--px-small); padding-bottom: var(--px-small); } [class*="padding-vertical:size"] { padding-top: var(--px-size); padding-bottom: var(--px-size); } [class*="padding-vertical:medium"] { padding-top: var(--px-medium); padding-bottom: var(--px-medium); } [class*="padding-vertical:large"] { padding-top: var(--px-large); padding-bottom: var(--px-large); } [class*="padding-vertical:big"] { padding-top: var(--px-big); padding-bottom: var(--px-big); }
[class*="padding:horizontal"], .padding-horizontal { padding-left: var(--px); padding-right: var(--px); } [class*="padding-horizontal:tiny"] { padding-left: var(--px-tiny); padding-right: var(--px-tiny); } [class*="padding-horizontal:small"] { padding-left: var(--px-small); padding-right: var(--px-small); } [class*="padding-horizontal:size"] { padding-left: var(--px-size); padding-right: var(--px-size); } [class*="padding-horizontal:medium"] { padding-left: var(--px-medium); padding-right: var(--px-medium); } [class*="padding-horizontal:large"] { padding-left: var(--px-large); padding-right: var(--px-large); } [class*="padding-horizontal:big"] { padding-left: var(--px-big); padding-right: var(--px-big); }

[class*="pointer:event"], .pointer-event { pointer-events: all; }
[class*="pointer-event:none"], .no-pointer-event { pointer-events: none; }

[class*="cursor:default"] { cursor: default; }
[class*="cursor:pointer"] { cursor: pointer; }
[class*="cursor:progress"] { cursor: progress; }

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx
 */

:root {
	--border-radius: 10px;
	--border-radius-regular: 2px;
	--border-radius-pop: 4px;
	--border-radius-round: 100px;
	--border-radius-circle: 100%;
	}

.no-border, [class*="border:none"] { border: none; }
[class*="border-top:none"] { border-top: none; }
[class*="border-bottom:none"] { border-bottom: none; }
[class*="border-left:none"] { border-left: none; }
[class*="border-right:none"] { border-right: none; }

.border { border-width: 1px; border-style: solid; border-color: rgb(var(--color)); }
.border-size, [class*="border:size"] { border-width: 1px; }
[class*="border:bold"] { border-width: 2px; }
[class*="border-style:solid"], [class*="border:solid"] { border-style: solid; }
[class*="border-style:dash"], [class*="border:dash"] { border-style: dashed; }
[class*="border-style:dot"], [class*="border:dot"] { border-style: dotted; }

.border-radius, [class*="border:radius"] { border-radius: var(--border-radius); }
[class*="border-radius:regular"] { border-radius: var(--border-radius-regular); }
[class*="border-radius:pop"] { border-radius: var(--border-radius-pop); }
[class*="border-radius-pop:top"] { border-top-left-radius: var(--border-radius-pop); border-top-right-radius: var(--border-radius-pop); } [class*="border-radius-pop:top-left"] { border-top-left-radius: var(--border-radius-pop); } [class*="border-radius-pop:top-right"] { border-top-right-radius: var(--border-radius-pop); }
[class*="border-radius-pop:bottom"] { border-bottom-left-radius: var(--border-radius-pop); border-bottom-right-radius: var(--border-radius-pop); } [class*="border-radius-pop:bottom-left"] { border-bottom-left-radius: var(--border-radius-pop); } [class*="border-radius-pop:bottom-right"] { border-bottom-right-radius: var(--border-radius-pop); }
[class*="border-radius:round"] { border-radius: var(--border-radius-round); }
[class*="border-radius:circle"] { border-radius: var(--border-radius-circle); }

[class*="border:transparent"] { border-color: transparent; }
[class*="border:color"] { border-color: rgb(var(--color)); }
[class*="border-color:mono"] { border-color: rgb(var(--mono)); } [class*="border-color:mono-pop"] { border-color: rgb(var(--mono-pop)); } [class*="border-color:mono-extra"] { border-color: rgb(var(--mono-extra)); }
[class*="border-color:red"] { border-color: rgb(var(--red)); } [class*="border-color:red-pop"] { border-color: rgb(var(--red-pop)); }
[class*="border-color:green"] { border-color: rgb(var(--green)); } [class*="border-color:green-pop"] { border-color: rgb(var(--green-pop)); }
[class*="border-color:blue"] { border-color: rgb(var(--blue)); } [class*="border-color:blue-pop"] { border-color: rgb(var(--blue-pop)); }

.box-shadow { box-shadow: 0px 1px 2px 0px rgba(var(--box-shadow), 0.3), 0px 1px 3px 1px rgba(var(--box-shadow), 0.15); }
[class*="box-shadow:pop"] { box-shadow: 0px 2px 5px 0px rgba(var(--box-shadow-pop), 0.26), 0px 2px 10px 0px rgba(var(--box-shadow-pop), 0.16); }

/**
 * xxx
 *
 * title
 * description
 * sub description
 *
 * xxx://xxx.xxx.xxx/xxx
 */

.block { display: block; } .inline { display: inline; } .inline-block, [class*="block:inline"] { display: inline-block; }
.table { display: table; } [class*="table:row"] { display: table-row; } [class*="table:cell"], [class*="table:column"] { display: table-cell; }
.grid { display: grid; }
.flex { display: flex; } .inline-flex, [class*="flex:inline"] { display: inline-flex; }
.flex-box, [class*="flex:box"] { align-items: center; justify-content: center; }
.flex-column, [class*="flex:column"] { flex-direction: column; }
.flex-wrap, [class*="flex:wrap"] { flex-wrap: wrap; } .flex-grow, [class*="flex:grow"] { flex-grow: 1; }

.absolute { position: absolute; } .relative { position: relative; } .fixed { position: fixed; }
.visible { visibility: visible; } .hidden { visibility: hidden; } .hide { display: none; visibility: hidden; width: 0; height: 0; } .none { display: none; }
.opacity { opacity: 1; } .no-opacity, .transparent { opacity: 0; }
.overflow { overflow: auto; } .no-overflow { overflow: hidden; }
.scroll { overflow: scroll; } .x-scroll { overflow-x: scroll; } [class*="x-scroll:auto"] { overflow-x: auto; } .v-scroll { overflow-y: scroll; } [class*="v-scroll:auto"] { overflow-y: auto; }
.underline { text-decoration: underline; }
.wrap { white-space: wrap; } .no-wrap { white-space: nowrap; }
.uc_first { display: inline-block; }
.uc_first:first-letter { text-transform: uppercase; }

.x { width: 100%; } .x-port { width: 100vw; } .x-half { width: 50%; }
.v { height: 100%; } .v-port { height: 100vh; } .v-half { height: 50%; }
.view, .match_parent { width: 100%; height: 100%; } .viewport { width: 100vw; height: 100vh; }
.width { width: 1px; } [class*="width:bold"] { width: 2px; }
.height { height: 1px; } [class*="height:bold"] { height: 2px; }

.top { top: 0px; } .top-port, [class*="top:port"] { top: 100%; } .top-left { bottom: 100%; left: 0px; } .top-right { bottom: 100%; right: 0px; } [position="top"] { top: 0px; } [position="top:port"] { top: 100%; } [position="top left"] { bottom: 100%; left: 0px; } [position="top right"] { bottom: 100%; right: 0px; }
.bottom { bottom: 0px; } .bottom-port { bottom: 100%; } .bottom-left { left: 0px; } .bottom-right { right: 0px; } [position="bottom"] { bottom: 0px; } [position="bottom:port"] { bottom: 100%; } [position="bottom left"] { left: 0px; } [position="bottom right"] { right: 0px; }
.left { left: 0px; } .left-port { left: 100%; } [position="left"] { left: 0px; } [position="left:port"] { left: 100%; }
.right { right: 0px; } .right-port { right: 100%; } [position="right"] { right: 0px; } [position="right:port"] { right: 100%; }

/**
 * the end
 *
 * xxx://xxx.xxx.xxx/xxx
 */

/**
 * ::state(webkit-scrollbar) { width: 3px; }
 * ::state(webkit-scrollbar-track) { background-color: rgba(var(--white), 0); }
 * ::state(webkit-scrollbar-thumb) { background-color: rgba(var(--black), 0.2); }
 * ::state(webkit-scrollbar-thumb):hover { background-color: rgba(var(--black), 0.3); }
 */

/**
 * ::--webkit-scrollbar { width: 3px; }
 * ::--webkit-scrollbar-track { background-color: rgba(var(--white), 0); }
 * ::--webkit-scrollbar-thumb { background-color: rgba(var(--black), 0.2); }
 * ::--webkit-scrollbar-thumb:hover { background-color: rgba(var(--black), 0.3); }
 */

:disabled { opacity: 0.55; }
::placeholder { color: darkgray; }

[class*="img:tiny"] img { height: 16px; }
[class*="img:small"] img { height: 32px; }
[class*="img:medium"] img { height: 48px; }
[class*="img:large"] img { height: 64px; }

button > section { display: none; position: absolute; }
button > section:hover { display: flex; }
button:focus > section { display: flex; }

[class*="transition:opacity"] { overflow: hidden; opacity: 0; transition: opacity 0.2s; }
[class*="transition:opacity"][class*="transition-opacity:alpha"] { opacity: 1; }

[class*="icon:container"] { display: flex; align-items: center; }
[class*="icon:material"] { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: inherit; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
[class*="icon-material:line"] { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: inherit; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
[class*="icon:material"][class*="icon-face:sharp"], [class*="icon-material:line"][class*="icon-face:sharp"] { font-family: "Material Symbols Sharp"; }
[class*="icon:material"][class*="icon-face:round"], [class*="icon-material:line"][class*="icon-face:round"] { font-family: "Material Symbols Rounded"; }
[class*="icon-variant:fill"] { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
[class*="icon-variant:line"] { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

/**
 * the end
 *
 * xxx://xxx.xxx.xxx/xxx
 */