@import url('https://fonts.googleapis.com/css2?family=Joti+One&display=swap');

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

[_string] { margin-top: 0.5px; }
[_icon] { margin-top: -0.5px; }
[margin] { margin-top: -1px; }

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

:root
{
--font-family: "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-title: "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-description: "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-article: "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-quote: "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-code: "Courier New", "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-print: "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-error: "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-warning: "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-notice: "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-logo: "Joti One", "Google Sans Flex", "Roboto", "Segoe UI", sans-serif;
--font-family-extra: "";
}

:root
{
--font-size: 13px;
--font-size-pop: 11px;
--font-tiny: 8px;
--font-small: 10px;
--font-intermediate: 16px;
--font-medium: 18px;
--font-large: 24px;
--font-big: 32px;
}

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

:root
{
--size-tiny: 8px;
--size-atom: 11px;
--size-small: 16px;
--size-pop: 24px;
--size-regular: 32px;
--size-medium: 48px;
--size-large: 64px;
--size-big: 128px;
}

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

:root
{
--header-size: 60px;
--nav-size: 250px;
--navigation-size: 200px;
--menu-size: 250px;
--side-size: 250px;
--float-size: 250px;
--float-medium: 280px;
--float-large: 350px;
--wrap-size: 1100px;
--main-size: 1100px;
}

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

:root
{
--color: 68, 68, 68; /* #444444 */
--background-color: 255, 255, 255; /* #FFFFFF */
--mono: 241, 241, 241; /* #F1F1F1 */
--mono-chrome: 102, 102, 102; /* #666666 */
--mono-pop: 250, 250, 250; /* #FAFAFA */
--mono-extra: 254, 254, 254; /* #FEFEFE */
--mono-sky: 204, 204, 204; /* #CCCCCC */
--black: 17, 17, 17; /* #111111 */
--white: 255, 255, 255;
--gray: 128, 128, 128;
--red: 224, 108, 117; --red-pop: 234, 67, 53; --red-light: 252, 232, 230;
--green: 152, 195, 121; --green-pop: 52, 168, 83;
--blue: 66, 133, 244; --blue-pop: 66, 133, 244;
--yellow: 229, 192, 123; --yellow-pop: 251, 188, 5;
--orange: 210, 132, 69;
--purple: 198, 120, 221;
--pink: 255, 192, 203;
--cyan: 117, 181, 170;
}

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

[theme="night"]
{
--color: 255, 255, 255;
--background-color: 0, 0, 0;
}

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

:root
{
--font-color: var(--color);
--font-color-mono: var(--gray);
--font-anchor-color: var(--blue);
--font-anchor-color-focus: var(--blue);
--font-anchor-color-active: var(--blue);
--font-anchor-color-visited: var(--blue);
--font-anchor-color-hover: var(--blue);
}

:root
{
--header-color: var(--white);
--border-color: var(--mono-chrome);
--border-color-mono: var(--mono-sky);
--box-shadow: 60, 64, 67;
--box-shadow-pop: 11, 20, 26;
}

/**
 * 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: rgb(var(--color)); background-color: rgb(var(--background-color)); }
div, p, span, form, button, input, select, option { font-family: inherit; font-size: inherit; } span { color: inherit; } div, p, span, form, button, input, select, option { margin: 0px; padding: 0px; }
header, main, menu, nav, section, article, figure, footer { font-family: inherit; font-size: inherit; color: inherit; background-color: inherit; display: block; } header, main, menu, nav, section, article, figure, footer { margin: 0px; padding: 0px; }
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"] { appearance: textfield; -moz-appearance: textfield; }
input[type="checkbox"], input[type="radio"] { vertical-align: middle; }
input[type="text"] {} input[type="date"] {} input[type="email"] {}
input { background-color: rgb(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; }
iframe { border: none; }

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

.font\:normal { font-style: normal; }
.font\:italic { font-style: italic; }
.font-light\:ultra { font-weight: 100; }
.font-light\:pop { font-weight: 200; }
.font\:light, .font-weight\:light { font-weight: 300; }
.font\:regular { font-weight: 400; }
.font-bold\:pop { font-weight: 500; }
.font-bold\:medium { font-weight: 600; }
.font\:bold, .font-weight\:bold { font-weight: 700; }
.font-bold\:ultra { font-weight: 800; }
.font\:weight { font-weight: 900; }

.font\:size { font-size: var(--font-size); }
.font-size\:pop { font-size: var(--font-size-pop); }
.font\:tiny, .font-size\:tiny { font-size: var(--font-tiny); }
.font\:small, .font-size\:small { font-size: var(--font-small); }
.font\:intermediate, .font-size\:intermediate { font-size: var(--font-intermediate); }
.font\:medium, .font-size\:medium { font-size: var(--font-medium); }
.font\:large, .font-size\:large { font-size: var(--font-large); }
.font\:big, .font-size\:big { font-size: var(--font-big); }

.font-family\:logo { font-family: var(--font-family-logo); }
.font-family\:code { font-family: var(--font-family-code); }

.font-color, .font\:color { color: rgb(var(--font-color)); }
.font-color\:mono { color: rgb(var(--font-color-mono)); }
.font-color\:white { color: rgb(var(--white)); }
.font-color\:red { color: rgb(var(--red)); } .font-color\:red-pop { color: rgb(var(--red-pop)); }
.font-color\:green { color: rgb(var(--green)); } .font-color\:green-pop { color: rgb(var(--green-pop)); }
.font-color\:blue { color: rgb(var(--blue)); } .font-color\:blue-pop { color: rgb(var(--blue-pop)); }
.font-color\:yellow { color: rgb(var(--yellow)); } .font-color\:yellow-pop { color: rgb(var(--yellow-pop)); }
.font-hover\:mono:hover { color: rgb(var(--font-color-mono)); }
.font-hover\:red:hover { color: rgb(var(--red)); } .font-hover\:red-pop:hover { color: rgb(var(--red-pop)); }
.font-hover\:green:hover { color: rgb(var(--green)); } .font-hover\:green-pop:hover { color: rgb(var(--green-pop)); }
.font-hover\:blue:hover { color: rgb(var(--blue)); } .font-hover\:blue-pop:hover { color: rgb(var(--blue-pop)); }
.font-hover\:yellow:hover { color: rgb(var(--yellow)); } .font-hover\:yellow-pop:hover { color: rgb(var(--yellow-pop)); }

.font\:static, .font\:static:hover, .font\:static:focus, .font\:static:active, .font\:static:visited { color: rgb(var(--font-color)); }
.font\:flex [primary] { flex-grow: 1; font-weight: 500; }

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

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

.block { display: block; } .inline { display: inline; } .inline-block, .block\:inline { display: inline-block; }
.table { display: table; } .table\:column { display: table-row; } .table\:cell { display: table-cell; }
.grid { display: grid; }
.flex { display: flex; } .inline-flex, .flex\:inline { display: inline-flex; }
.flex-box, .flex\:box { display: flex; align-items: center; justify-content: center; }
.flex-column, .flex\:column { flex-direction: column; }
.flex-wrap, .flex\:wrap { flex-wrap: wrap; }
.flex-grow, .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; } .transparent { opacity: 0; } .opacity\:pop { opacity: 0.75; } .opacity\:pop:hover { opacity: 1; } .opacity\:small { opacity: 0.9; } .opacity\:small:hover { opacity: 1; } .opacity\:medium { opacity: 0.75; } .opacity\:medium:hover { opacity: 1; }
.overflow { overflow: auto; } .no-overflow { overflow: hidden; }
.scroll { overflow: scroll; } .scroll\:horizontal { overflow-x: scroll; } .scroll-horizontal\:auto { overflow-x: auto; } .scroll\:vertical { overflow-y: scroll; } .scroll-vertical\:auto { overflow-y: auto; }
.wrap { white-space: wrap; } .no-wrap { white-space: nowrap; }
.uc_first { display: inline-block; }
.uc_first:first-letter { text-transform: uppercase; }

.pointer-event, .pointer\:event { pointer-events: all; }
.no-pointer-event, .pointer-event\:none { pointer-events: none; }

.cursor\:default { cursor: default; }
.cursor\:pointer { cursor: pointer; }
.cursor\:progress { cursor: progress; }

.line-spacing, .line\:spacing { line-height: 22px; }
.line-spacing\:small { line-height: 16px; }
.line-spacing\:medium { line-height: 24px; }
.line-spacing\:large { line-height: 32px; }

.text-spacing, .text\:spacing { letter-spacing: 1px; }
.text-spacing\:small { letter-spacing: 2px; }
.text-spacing\:medium { letter-spacing: 3px; }
.text-spacing\:large { letter-spacing: 5px; }

.text-small, .text\:small { text-transform: lowercase; } .text-big, .text\:big { text-transform: uppercase; } .underline { text-decoration: underline; }
.text-align, .text\:align { text-align: center; } .text-align\:left { text-align: left; } .text-align\:right { text-align: right; }
.align-item, .align\:item { align-items: center; } .align\:start { align-items: start; } .align\:end { align-items: end; }
.justify-item, .justify\:item { justify-content: center; } .justify\:start { justify-content: start; } .justify\:end { justify-content: end; }
.justify-content, .justify\:content { text-align: justify; }

.top { top: 0px; } .top\:port { top: 100%; } .top\:left { bottom: 100%; left: 0px; } .top\:right { bottom: 100%; right: 0px; }
.bottom { bottom: 0px; } .bottom\:port { bottom: 100%; } .bottom\:left { left: 0px; } .bottom\:right { right: 0px; }
.left { left: 0px; } .left\:port { left: 100%; }
.right { right: 0px; } .right\:port { right: 100%; }
.middle {}

.in-dex, .in\:dex { z-index: -1; }
.index { z-index: 1; }
.index\:small { z-index: 10; }
.index\:medium { z-index: 100; }
.index\:large { z-index: 1000; }
.index\:big { z-index: 10000; }

.width { width: 1px; } .width\:bold { width: 2px; }
.width\:size { width: 100%; } .width\:port { width: 100vw; } .width\:half { width: 50%; } .width\:max { max-width: 100%; }
.width\:tiny { width: var(--size-tiny); }
.width\:small { width: var(--size-small); }
.width\:pop { width: var(--size-pop); }
.width\:regular { width: var(--size-regular); }
.width\:medium { width: var(--size-medium); }
.width\:large { width: var(--size-large); }
.width\:big { width: var(--size-big); }
.height { height: 1px; } .height\:bold { height: 2px; }
.height\:size { height: 100%; } .height\:port { height: 100vh; } .height\:half { height: 50%; }
.height\:tiny { height: var(--size-tiny); }
.height\:small { height: var(--size-small); }
.height\:pop { height: var(--size-pop); }
.height\:regular { height: var(--size-regular); }
.height\:medium { height: var(--size-medium); }
.height\:large { height: var(--size-large); }
.height\:big { height: var(--size-big); }
.view, .width\:height { width: 100%; height: 100%; } .viewport, .view\:port { width: 100vw; height: 100vh; }

.gap { gap: 10px; }
.gap\:space { gap: 1px; }
.gap\:tiny { gap: 3px; }
.gap\:small { gap: 5px; }
.gap\:medium { gap: 15px; }
.gap\:large { gap: 20px; }
.gap\:big { gap: 25px; }

.margin { margin: var(--px); } [class*="margin:small"] { margin: var(--px-small); } [class*="margin:medium"] { margin: var(--px-medium); } [class*="margin:large"] { margin: var(--px-large); } [class*="margin:big"] { margin: var(--px-big); }
.margin-top, [class*="margin:top"] { margin-top: var(--px); } [class*="margin-top:small"] { margin-top: var(--px-small); } [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); }
.margin-bottom, [class*="margin:bottom"] { margin-bottom: var(--px); } [class*="margin-bottom:small"] { margin-bottom: var(--px-small); } [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); }
.margin-left, [class*="margin:left"] { margin-left: var(--px); } [class*="margin-left:small"] { margin-left: var(--px-small); } [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); }
.margin-right, [class*="margin:right"] { margin-right: var(--px); } [class*="margin-right:small"] { margin-right: var(--px-small); } [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); }
.margin-vertical, [class*="margin:vertical"] { margin-top: var(--px); margin-bottom: var(--px); } [class*="margin-vertical:small"] { margin-top: var(--px-small); margin-bottom: var(--px-small); } [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); }
.margin-horizontal, [class*="margin:horizontal"] { margin-left: var(--px); margin-right: var(--px); } [class*="margin-horizontal:small"] { margin-left: var(--px-small); margin-right: var(--px-small); } [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\:pop { padding: 5px 10px; }
.padding\:io { padding: 7px 10px; }
.padding\:sky { padding: 7px 15px; }
.padding { padding: 10px; } .padding\:small { padding: 5px; } .padding\:medium { padding: 15px; } .padding\:large { padding: 20px; } .padding\:big { padding: 25px; }
.padding\:top { padding-top: 10px; } .padding-top\:small { padding-top: 5px; } .padding-top\:medium { padding-top: 15px; } .padding-top\:large { padding-top: 20px; } .padding-top\:big { padding-top: 25px; }
.padding\:bottom { padding-bottom: 10px; } .padding-bottom\:small { padding-bottom: 5px; } .padding-bottom\:medium { padding-bottom: 15px; } .padding-bottom\:large { padding-bottom: 20px; } .padding-bottom\:big { padding-bottom: 25px; }
.padding\:left { padding-left: 10px; } .padding-left\:small { padding-left: 5px; } .padding-left\:medium { padding-left: 15px; } .padding-left\:large { padding-left: 20px; } .padding-left\:big { padding-left: 25px; }
.padding\:right { padding-right: 10px; } .padding-right\:small { padding-right: 5px; } .padding-right\:medium { padding-right: 15px; } .padding-right\:large { padding-right: 20px; } .padding-right\:big { padding-right: 25px; }
.padding\:vertical { padding-top: 10px; padding-bottom: 10px; } .padding-vertical\:small { padding-top: 5px; padding-bottom: 5px; } .padding-vertical\:medium { padding-top: 15px; padding-bottom: 15px; } .padding-vertical\:large { padding-top: 20px; padding-bottom: 20px; } .padding-vertical\:big { padding-top: 25px; padding-bottom: 25px; }
.padding\:horizontal { padding-left: 10px; padding-right: 10px; } .padding-horizontal\:small { padding-left: 5px; padding-right: 5px; } .padding-horizontal\:medium { padding-left: 15px; padding-right: 15px; } .padding-horizontal\:large { padding-left: 20px; padding-right: 20px; } .padding-horizontal\:big { padding-left: 25px; padding-right: 25px; }
.padding-top\:none { padding-top: 0px; }
.padding-bottom\:none { padding-bottom: 0px; }

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

.no-border, .border\:none { border: none; }
.border-top\:none { border-top: none; }
.border-bottom\:none { border-bottom: none; }
.border-left\:none { border-left: none; }
.border-right\:none { border-right: none; }

.border { border-width: 1px; border-style: solid; border-color: rgb(var(--border-color)); }
.border-size, .border\:size { border-width: 1px; } .border\:bold { border-width: 2px; }
.border\:solid, .border-style\:solid { border-style: solid; }
.border\:dash, .border-style\:dash { border-style: dashed; }
.border\:dot, .border-style\:dot { border-style: dotted; }

.border-radius, .border\:radius { border-radius: var(--border-radius); }
.border-radius\:regular { border-radius: var(--border-radius-regular); }
.border-radius\:pop { border-radius: var(--border-radius-pop); }
.border-radius-pop\:top { border-top-left-radius: var(--border-radius-pop); border-top-right-radius: var(--border-radius-pop); } .border-radius-pop\:top-left { border-top-left-radius: var(--border-radius-pop); } .border-radius-pop\:top-right { border-top-right-radius: var(--border-radius-pop); }
.border-radius-pop\:bottom { border-bottom-left-radius: var(--border-radius-pop); border-bottom-right-radius: var(--border-radius-pop); } .border-radius-pop\:bottom-left { border-bottom-left-radius: var(--border-radius-pop); } .border-radius-pop\:bottom-right { border-bottom-right-radius: var(--border-radius-pop); }
.border-radius\:round { border-radius: var(--border-radius-round); }
.border-radius\:circle { border-radius: var(--border-radius-circle); }

.border-radius-top\:none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.border-radius-top-left\:none { border-top-left-radius: 0; }
.border-radius-top-right\:none { border-top-right-radius: 0; }
.border-radius-bottom\:none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.border-radius-bottom-left\:none { border-bottom-left-radius: 0; }
.border-radius-bottom-right\:none { border-bottom-right-radius: 0; }

.border\:transparent { border-color: transparent; }
.border\:color { border-color: rgb(var(--border-color)); }
.border-color\:mono { border-color: rgb(var(--border-color-mono)); }
.border-color\:red { border-color: rgb(var(--red)); }
.border-color\:green { border-color: rgb(var(--green)); }
.border-color\:blue { border-color: rgb(var(--blue)); }
.border-hover\:mono { border: 1px solid transparent; }
.border-hover\:mono:hover, .border-hover\:mono:focus { border-color: rgb(var(--border-color-mono)); }
.border-hover\:red:hover { border-color: rgb(var(--red)); }
.border-hover\:green:hover { border-color: rgb(var(--green)); }
.border-hover\:blue:hover { border-color: rgb(var(--blue)); }

.box-shadow { box-shadow: 0px 1px 2px 0px rgba(var(--box-shadow), 0.3), 0px 1px 3px 1px rgba(var(--box-shadow), 0.15); }
[theme="night"] .box-shadow { border: 1px solid rgba(var(--white),0.05); }
.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); }
[theme="night"] .box-shadow\:pop { border: 1px solid rgba(var(--white),0.05); }

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

.icon\:container { display: flex; align-items: center; }
.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; }
.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; }
.icon\:material.icon-face\:sharp, .icon-material\:line.icon-face\:sharp { font-family: "Material Symbols Sharp"; }
.icon\:material.icon-face\:round, .icon-material\:line.icon-face\:round { font-family: "Material Symbols Rounded"; }
.icon-variant\:fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.icon-variant\:line { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.icon\:tiny .icon\:container:first-child { font-size: var(--font-tiny); }
.icon\:small .icon\:container:first-child { font-size: var(--font-small); }
.icon\:medium .icon\:container:first-child { font-size: var(--font-medium); }
.icon\:large > .icon\:container:first-child { font-size: var(--font-large); }

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

button > section, button > .float { position: absolute; }
button > section:hover, button > .float:hover { visibility: visible; opacity: 1; }
button:focus > section, button:focus > .float { visibility: visible; opacity: 1; }
.button { position: relative; border: none; background-color: transparent; }
.button:hover { background-color: transparent; }

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

.size\:tiny { width: var(--size-tiny); height: var(--size-tiny); }
.size\:small { width: var(--size-small); height: var(--size-small); }
.size\:pop, .size { width: var(--size-pop); height: var(--size-pop); }
.size\:regular { width: var(--size-regular); height: var(--size-regular); }
.size\:medium { width: var(--size-medium); height: var(--size-medium); }
.size\:large { width: var(--size-large); height: var(--size-large); }
.size\:big { width: var(--size-big); height: var(--size-big); }

.img\:tiny { height: var(--size-tiny); }
.img\:atom { height: var(--size-atom); }
.img\:small { height: var(--size-small); }
.img\:pop { height: var(--size-pop); }
.img\:size { height: var(--size-regular); }
.img\:medium { height: var(--size-medium); }
.img\:large { height: var(--size-large); }
.img\:big { height: var(--size-big); }

.header\:size { min-height: var(--header-size); }
.menu\:size { min-width: var(--menu-size); }
.float\:size { width: var(--float-size); }
.float\:medium, .float-size\:medium { width: var(--float-medium); }

.text-gradient, .text\:gradient { background: -webkit-linear-gradient(315deg,#42d392 25%,#647eff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.transition\:visibility { visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.2s; }
.transition\:opacity { transition: opacity 0.2s; }

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

.background\:transparent, .background-color\:transparent { background-color: transparent; }
.background-color, .background\:color { background-color: rgb(var(--background-color)); }
.background-color\:alpha { background-color: rgba(var(--background-color),0.98); }
.background-color\:mono { background-color: rgb(var(--mono)); }
.background-color\:mono-pop { background-color: rgb(var(--mono-pop)); }
.background-color\:mono-extra { background-color: rgb(var(--mono-extra)); }
.background-color\:mono-sky { background-color: rgb(var(--mono-sky)); }
.background-color\:red { background-color: rgb(var(--red)); } .background-color\:red-pop { background-color: rgb(var(--red-pop)); } .background-color\:red-light { background-color: rgb(var(--red-light)); }
.background-color\:green { background-color: rgb(var(--green)); } .background-color\:green-pop { background-color: rgb(var(--green-pop)); }
.background-color\:blue { background-color: rgb(var(--blue)); } .background-color\:blue-pop { background-color: rgb(var(--blue-pop)); }
.background-color\:yellow { background-color: rgb(var(--yellow)); } .background-color\:yellow-pop { background-color: rgb(var(--yellow-pop)); }

.background-hover\:transparent:hover { background-color: transparent; }
.background-hover\:mono:hover { background-color: rgb(var(--mono)); }
.background-hover\:mono-pop:hover { background-color: rgb(var(--mono-pop)); }
.background-hover\:mono-extra:hover { background-color: rgb(var(--mono-extra)); }
.background-hover\:mono-sky:hover { background-color: rgb(var(--mono-sky)); }
.background-hover\:red:hover { background-color: rgb(var(--red)); }
.background-hover\:green:hover { background-color: rgb(var(--green)); }
.background-hover\:blue:hover { background-color: rgba(var(--blue),0.95); }

.background-focus\:transparent:focus { background-color: transparent; }
.background-focus\:mono:focus { background-color: rgb(var(--mono)); }
.background-focus\:mono-pop:focus { background-color: rgb(var(--mono-pop)); }
.background-focus\:mono-extra:focus { background-color: rgb(var(--mono-extra)); }
.background-focus\:mono-sky:focus { background-color: rgb(var(--mono-sky)); }
.background-focus\:red:focus { background-color: rgb(var(--red)); }
.background-focus\:green:focus { background-color: rgb(var(--green)); }
.background-focus\:blue:focus { background-color: rgb(var(--blue)); }

.background\:clear, .background\:clear:hover, .background\:clear:focus { background-color: transparent; }

/**
 * ::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); }
 */

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

[print] { display: none; }
[device="computer"] {}
[device="mobile"] {}
[device="tablet"] {}
[device="phone"] {}
.computer [mobile] { display: none; } .computer .--mobile { display: none; }
.computer [tablet] { display: none; }
.computer [phone] { display: none; }
.mobile [computer] { display: none; }
.tablet [computer] { display: none; }
.phone [computer] { display: none; }
:disabled { opacity: 0.55; }
::placeholder { color: darkgray; }

@media only screen and (orientation: landscape) {
	[device="computer"] {}
	[device="mobile"] {}
	[device="tablet"] {}
	[device="phone"] {}
	}

@media print {
	#app { display: none !important; }
	[id="app:print"] { display: flex; }
	[no-print] { display: none !important; }
	[print] { display: flex !important; }
	* {}
	}

#app { height: 100%; }
#application { height: 100%; }

.scrollbar\:pop { scrollbar-width: thin; scrollbar-color: rgb(var(--background-color)) rgb(var(--background-color)); }

.mobile #menu [outter] { position: fixed; width: 100vw; height: calc(100vh - var(--header-size)); background-color: rgba(var(--black),0.75); }
#menu-simple { position: fixed; height: calc(100vh - var(--header-size)); overflow-y: scroll; }

.computer .wrap\:container { width: var(--wrap-size); }
.computer .main\:size { width: var(--main-size); }
.wrap\:side { width: var(--side-size); }
.mobile .no-overflow\:mobile { overflow: hidden; }
.mobile .flexible { flex-grow: 1; }
.mobile .flexible\:port { width: 100vw; }

.position\:top-left { top: 10px; left: 10px; }
.position\:top-right { top: 10px; right: 10px; }
.position\:bottom-left { bottom: 10px; left: 10px; }
.position\:bottom-right { bottom: 10px; right: 10px; }

.mobile [component="footer-simple"] { flex-direction: column; }

.paging > a { padding: 5px 10px; }
.paging :nth-child(2), .paging :nth-child(4) { font-size: var(--font-medium); }
.paging :nth-child(3) { font-size: var(--font-large); }

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

:root{--color-red:#ea4335;--color-blue:#4285f4;--color-yellow:#fbbc05;--color-green:#34a853}
.spinner{position:relative;margin:0 auto;width:100px}
.spinner:before{content:"";display:block;padding-top:100%}
.spinner-circular{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;transform-origin:center center;width:100%;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.spinner-path{stroke-dasharray:1,200;stroke-dashoffset:0;-webkit-animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round}
@-webkit-keyframes rotate{100%{transform:rotate(360deg)}}
@keyframes rotate{100%{transform:rotate(360deg)}}
@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}
@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}
@-webkit-keyframes color{0%,100%{stroke:var(--color-red)}40%{stroke:var(--color-blue)}66%{stroke:var(--color-green)}80%,90%{stroke:var(--color-yellow)}}
@keyframes color{0%,100%{stroke:var(--color-red)}40%{stroke:var(--color-blue)}66%{stroke:var(--color-green)}80%,90%{stroke:var(--color-yellow)}}

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

.tmdb-background::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.3; background-image: url('/asset/image/tmdb-bg-001.svg'); background-size: cover; background-repeat: no-repeat; background-position-y: 70px; z-index: -1; }
.owl-carousel-item { display: flex; flex-direction: column; }
.owl-carousel-rating { padding: 2px 5px; color: yellow; background-color: rgba(var(--black),0.75); }
.owl-carousel-tag { padding: 2px 7px; color: rgb(var(--yellow)); background-color: rgba(var(--black),0.75); }
.owl-carousel-quality { padding: 2px 5px; color: rgb(var(--font-color)); background-color: rgba(var(--background-color),0.75); }

/*
.owl-carousel-container { display: flex; }
.owl-carousel-group { display: grid; grid-gap: 15px 10px; grid-template-columns: 1fr 1fr 1fr; }
.owl-carousel-group-single { display: grid; grid-gap: 15px 10px; grid-template-columns: 1fr 1fr; }
.owl-carousel-group-tmp { width: 0px; height: 0px; overflow: hidden; }
.owl-carousel-item { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.owl-carousel-item-label { display: flex; align-items: center; gap: 5px; padding: 3px 10px; font-size: var(--font-small); font-weight: var(--font-bold-pop); border: 1px solid rgb(var(--border-color)); border-radius: 100px; background-color: rgb(var(--mono)); }
.owl-carousel-item-label .string { color: var(--font-color); }
.owl-carousel-thumbnail { position: relative; }
.owl-carousel-thumbnail-image img { width: 100%; border-radius: 10px; }
.owl-carousel-thumbnail-rating { font-size: 12px; color: yellow; position: absolute; top: 10px; left: 10px; }
.owl-carousel-thumbnail-flag { display: flex; gap: 5px; position: absolute; top: 10px; right: 10px; }
.owl-carousel-thumbnail-flag img { height: 16px; border-radius: 5px; }
.owl-carousel-thumbnail-info { display: flex; flex-direction: column; gap: 10px; position: absolute; bottom: 50px; left: 10px; }
.owl-carousel-thumbnail-info-title { display: flex; gap: 2px; }
.owl-carousel-thumbnail-info-title > div { background-color: rgba(255,255,255,0.9); }
.owl-carousel-thumbnail-info-title > p { font-weight: bold; padding: 10px; color: #333333; background-color: rgba(255,255,255,0.9); }
.owl-carousel-thumbnail-info-button { display: flex; }
.owl-carousel-thumbnail-video-quality { font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: 5px; color: #333333; background-color: #ffffff; position: absolute; bottom: 10px; left: 10px; }
.owl-carousel-thumbnail-video-length { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 5px; color: #333333; background-color: #ffffff; position: absolute; bottom: 10px; right: 10px; }
.owl-carousel-title { font-size: var(--font-small); font-weight: var(--font-bold-pop); }
.owl-carousel-episode { font-size: var(--font-tiny); }
*/