* { tab-size:4; box-sizing:border-box; padding:0; border:0; margin:0; }
body { background-color:black; color:cyan; font-size:16px; }
legend { background-color:cadetblue; color:white; padding:0 20px; margin-right:5px; }
select { background-color:black; color:cyan; padding:0 10px; margin-right:5px; }
input:not([type=file]) { background-color:cyan; padding:0 5px; margin-right:5px; }
input:not([type=button]) { width:120px; }
input[name=path] { width:160px; }
input[name=line] { width:40px; }
input[name=limit] { width:48px; }
input[name=offend] { width:48px; }
input[name=id] { width:48px; }
input[name=ID] { width:48px; }
input[name=url] { width:320px; }
input[name=cmd] { background-color:black; color:white; width:320px; }
input[type=button] { background-color:black; color:cyan; }
input[type=button][name=restart] { background-color:blue; }
input[type=button][name=start] { background-color:blue; }
input[type=button][name=open] { background-color:blue; }
input[type=button][name=stop] { background-color:red; }
input[type=button][name=trash] { background-color:red; }
input[type=button][name=delete] { background-color:red; }
input[type=button][name=remove] { background-color:red; }
textarea { background-color:cyan; padding:5px; width:600px; resize:vertical; }
/* output */
div.layout.flex>* { float:left; }
div.output { position:relative; }
div.project div.list { margin-left:10px; }
div.project div.item { padding:2px 10px; }
div.project div.item>div.name { padding-left:20px; }
div.project div.switch { margin-top:2px; width:12px; float:left; rotate:90deg; }
div.project div.switch.open { translate:3px -3px; rotate:180deg; }
div.project div.zone>div.name { background-color:steelblue; color:white; text-align:center; padding:3px; clear:both; position:relative; }
div.project div.zone>div.name>div.icon { margin-left:3px; display:none; float:right; }
div.project div.zone:hover>div.name>div.icon { display:block; }
div.project div.zone>div.list>div.zone:hover>div.name>div.icon { top:3px; }
div.project div.zone>div.list>div.zone>div.name { text-align:left; padding-left:20px; }
div.project div.zone>div.list>div.zone>div.name:hover { margin-left:10px; transition:all 0.3s;  }
div.project div.zone>div.list { min-width:200px; overflow:auto; }
div.project div.zone>div.action>div.item { float:right; clear:none; }
div.project div.zone>div.action>div.item input[type=text] { margin-right:-10px; }
table.content thead { position:sticky; top:2px; }
table.content th { background-color:steelblue; padding:2px 5px; }
table.content td { padding:2px 5px; }
table.content.action th:last-child { position:sticky; right:2px; }
table.content.action td:last-child { background-color:steelblue; position:sticky; right:2px; }
div.code { background-color:#343a3445; font-size:12px; padding:10px; border:green solid 1px; }
div.story[data-type=spark] { background-color:#2169a9a6; color:white; padding:5px 10px; border-left:blue solid 5px; margin:10px; }
h1 { text-align:center; margin:20px 0; } h2 { margin:20px 0; } h3 { margin:20px 0; } ul { padding-left:40px; margin:20px 0; }
/* fieldset */
fieldset.contexts { position:fixed; }
fieldset.panel>legend { display:none; }
fieldset.panel>div.status { display:none; }
fieldset.plugin { background-color:#061c3c9e; }
fieldset.plugin>div.status { border-top:darkcyan solid 1px; }
fieldset.story>div.status { border-top:darkcyan solid 1px; }
fieldset.output { padding:0; margin:0; }
fieldset.output>legend { display:none; }
fieldset.output>form.option { display:none; }
fieldset.output>div.action { display:none; }
fieldset.output>div.status { display:none; }
fieldset.output div.toggle { display:none; }
fieldset.simple>legend { display:none; }
fieldset.simple>form.option { display:none; }
fieldset.simple>div.status { display:none; }
fieldset.simple div.toggle { display:none; }
fieldset.float { background-color:#061c3c9e; }
fieldset.full { position:fixed; left:0; top:0; }
/* input */
fieldset.input>legend { display:none; }
fieldset.input.key { overflow:auto; }
fieldset.input.key div.action { display:none; }
fieldset.input.key.simple div.status { display:none; }
fieldset.input.key.simple th { display:none; }
fieldset.input.key.simple td { min-width:40px; }
fieldset.input.date select { margin-right:0; width:87px; }
fieldset.input.date select[name=year] { width:128px; }
fieldset.input.date select[name=month] { width:102px; }
fieldset.input.date input:not([type=file]) { margin-right:0; }
fieldset.input.date table.content { text-align:center; width:350px; }
fieldset.input.date div.output td { padding:2px 10px; }
fieldset.input.date div.output td.prev { color:gray; }
fieldset.input.date div.output td.next { color:gray; }
fieldset.input.date div.output td span.lunar { font-size:8px; display:block; clear:both; }
fieldset.input.date div.output td span.lunar.term { color:green; }
fieldset.input.date div.output td span.lunar.fest { color:red; }
fieldset.input.date div.status { text-align:center; }
/* float */
body div.float { background-color:#0e3369b3; padding:5px; }
body>div.toast div.title { color:blue; float:left; }
body>div.toast div.duration { color:gray; float:right; }
body>div.toast div.content { color:blue; text-align:center; }
body>div.toast div.progress { border:green solid 1px; margin-left:-2px; height:20px; clear:both; }
body>div.toast div.progress div.current { background-color:red; height:18px; }
body>div.toast div.action { display:block; }
body>div.carte { padding:0; }
body>div.carte input[name=filter] { margin-left:5px; width:calc(100% - 10px); position:sticky; top:0; }
body>div.carte div.item { padding:5px 10px; }
body>div.input td { padding:5px; }
body>div.input select { width:200px; }
body>div.input textarea { height:120px; width:200px; }
body>div.input input:not([type=button]) { width:200px; }
body>div.input div.action input[type=button] { width:90px; }
body>div.input div.action div { margin:5px; float:right; }
body>div.upload div.item { float:left; }
body>div.upload div.output { border:red solid 1px; }
body>div.upload div.progress { background-color:red; height:10px; width:0; }
body>div.upload div.status div.cost { float:left; }
body>div.upload div.status div.show { float:right; }
body>div.upload div.status div.size { text-align:center; }
body>div.upload input[type=file] { width:320px; }
/* font */
legend { font-size:1.2rem; height:31px; }
select, input { font-size:1rem; height:31px; } textarea { tab-size:2; height:93px; }
table.content, div.project, div.item, div.code, div.story[data-type=spark], svg { font-family:monospace; white-space:pre; text-align:left; }
div.action>div.tabs { padding:5px; height:31px; }
div.status>div.item { padding:5px; height:30px; }
div.status>div.item>label { font-size:0.6rem; }
/* display */
form.option, div.action { display:contents; }
form.option>div.item>label, div.action>div.item>label, .hidden, .hide { display:none; }
div.action, div.output, div.status, div.project, div.display, div.profile, div.content, table.content, table.content td, div.code, div.story, div.toast { overflow:auto; }
legend, form.option, form.option>div.item, div.action, div.action>div.item, div.action>div.tabs, div.status>div.item { float:left; }
div.output, div.status, div.item.textarea, div.project div.item, div.content, div.code, div.story[data-type=spark] { clear:both; }
div.status>legend { margin-left:2px; margin-right:0; float:right; clear:none; }
fieldset.plugin:not(.float):not(.full):not(.cmd) { padding:10px; margin:10px; }
fieldset.plugin:not(.float):not(.full):not(.cmd)>legend { float:none; }
fieldset.auto, fieldset.full, fieldset.float, div.float { position:fixed; z-index:10; }
div.code { position:sticky; left:0; }
form.option>div.icon { margin:5px; display:none; float:left; cursor:pointer; }
fieldset.float:not(.input) form.option>div.icon { display:block; }
fieldset.full form.option>div.icon { display:block; }
fieldset.plug form.option>div.icon { display:block; margin-left:5px; }
fieldset:not(.panel):not(.input) form.option>div.icon.refresh { display:block; margin-right:5px; }
/* hover */
legend:hover { background-color:skyblue; }
select:hover { background-color:gray; color:cyan; }
div.tabs div:hover, div.tabs div.select { background-color:transparent; }
div.item:hover, div.item.select, span.item:hover, table.content tr:hover, table.content tr.select, h1:hover, h2:hover, h3:hover { background-color:steelblue; }
table.content th:hover, table.content td:hover, table.content td.select { background-color:cornflowerblue; }
div.story[data-type=spark] span:hover { background-color:deepskyblue; box-shadow:4px 4px 20px 4px #29318e; }
div.carte div.item:hover { background-color:cornflowerblue; }
select, input[type=text], textarea { box-shadow:4px 4px 20px 4px #626bd0; }
legend, select, input[type=button], div.tabs, div.item, span.item, div.zone>div.name, th, td, h1, h2, h3 { cursor:pointer; }
div.title, div.story[data-type=spark] { cursor:copy; }
/* topic */
body.black a { color:yellow; }
body.black div.project div.zone>div.list>div.zone>div.name { background-color:#09466fc2; }
body.white { background-color:rgba(5,34,56,0.75); color:white; }
body.white select { background-color:yellowgreen; color:white; }
body.white input { background-color:white; }
body.white input[name=cmd] { background-color:black; color:white; }
body.white input[type=button] { background-color:cornflowerblue; color:white; }
body.white input[type=button][name=restart] { background-color:blue; }
body.white input[type=button][name=start] { background-color:blue; }
body.white input[type=button][name=open] { background-color:blue; }
body.white input[type=button][name=stop] { background-color:red; }
body.white input[type=button][name=trash] { background-color:red; }
body.white input[type=button][name=delete] { background-color:red; }
body.white input[type=button][name=remove] { background-color:red; }
body.white textarea { background-color:white; }
body.white table.content th { background-color:skyblue; }
body.white table.content.action td:last-child { background-color:skyblue; }
body.white div.zone>div.list>div.zone>div.name { background-color:aliceblue; color:black; }
body.white div.float { background-color:aliceblue; color:black; }
body.white fieldset.panel.Search a { color:yellow; }
body.white fieldset.panel.Action { color:black; }
body.white fieldset.panel.Action div.action { color:white; }
body.white fieldset.plugin { background-color:#ffffffa1; }
body.white fieldset.float { background-color:aliceblue; color:black; }
body.white fieldset.full { background-color:white; color:black; }
body.white legend:hover { background-color:skyblue; }
body.white select:hover { background-color:#99cc667d; }
body.white input[name=cmd]:hover { background-color:white; color:black; }
body.white input[type=button]:hover { background-color:#1b7acc8c; }
body.white div.project div.zone>div.list>div.zone>div.name:hover { background-color:#4682b46b; }
body.white div.item:hover, body.white span.item:hover { background-color:#4682b46b; }
body.white div.item.select { background-color:#4682b46b; }
body.white table.content tr:hover { background-color:#4682b46b; }
body.white table.content th:hover { background-color:#6495ed63; }
body.white table.content td:hover { background-color:#6495ed63; }
body.white table.content td.select { background-color:#6495ed63; }
body.white h1:hover { background-color:#4682b46b; }
body.white h2:hover { background-color:#4682b46b; }
body.white h3:hover { background-color:#4682b46b; }
body.light fieldset.panel:not(.main) { background-color:#4a566e; color:#d0d3da; }
body.light fieldset.panel:not(.main) label { color:#d0d3da; }
body.light fieldset.panel:not(.main) input { background-color:#6b7488; color:white; border-radius:5px; }
body.light fieldset.panel:not(.main) input::placeholder { background-color:#6b7488; color:#d0d3da; }
body.light fieldset.panel:not(.main) div.item.select  { background-color:#2b3446; color:white; }
body.light fieldset.panel:not(.main) div.item:hover  { background-color:#2b3446; color:white; }
body.light fieldset.panel:not(.main)>div.output { background-color:#4a566e; color:#d0d3da; }
body.light fieldset.panel:not(.main)>div.output div.state:hover  { background-color:#2b3446; color:white; }
body.light fieldset.panel:not(.main)>div.output div.title:hover  { background-color:#2b3446; color:white; }
body.light fieldset.panel:not(.main)>div.output div.menu:hover  { background-color:#2b3446; color:white; }
body.light fieldset.panel:not(.main)>div.output fieldset>div.output { color:black; }
body.print { -webkit-filter: grayscale(100%); }
body.print { background-color:white; color:black; }
body.print legend, body.print select, body.print input, body.print input[type=button], body.print textarea { background-color:snow; color:black; }
body.print div.item { background-color:white; } 
body.print div.carte div.item { background-color:snow; }
body.print div.item.select { background-color:lightgray; }
body.print div.zone>div.name { background-color:lightgray; color:black; }
body.print table.content th { background-color:lightgray; }
body.print table.content.action td:last-child { background-color:lightgray; }
body.print table.content td.select { background-color:lightgray; }
body.print a { color:black; }
body.print div.story[data-type=spark] { background-color:lightgray; }
body.print fieldset.panel { background-color:white; color:black; }
body.print fieldset.panel.Footer>div.output div.toast { background-color:lightgray; }
body.print fieldset.plugin { background-color:white; color:black; }
body.print fieldset.float { background-color:snow; }
body.print div.float { background-color:snow; }
body.print select, body.print input[type=text], body.print textarea { box-shadow:4px 4px 20px 4px lightgray; }
body.print fieldset.draw div.output { background-color:lightgray; }
body.print fieldset.draw div.output div.content svg { background-color:lightgray; }
/* mobile */
body.mobile legend { font-size:1.6rem; height:38px; }
body.mobile select { font-size:1.4rem; height:38px; }
body.mobile input { font-size:1.2rem; height:38px; }
body.mobile textarea { font-size:1.2rem; }
body.mobile form.option>div.item { margin:0; height:38px; }
body.mobile div.action>div.item { margin:0; height:38px; }
body.mobile div.carte div.item { font-size:1.6rem; }
body.mobile table.content th { padding:6px; }
body.mobile fieldset:not(.panel):not(.input)>div.action { display:none; }
body.mobile fieldset.plugin:not(.float):not(.full):not(.cmd) { margin:10px 0; }
body.mobile fieldset.Header { font-size:1.6rem; padding:0; height:3rem; width:100%; position:fixed; top:0; }
body.mobile fieldset.Header div.search { padding:0; height:3rem; width:100%; margin:0; }
body.mobile fieldset.Header div.search>input { background-color:#21181838; color:white; height:53px; width:100%; }
body.mobile fieldset.River { min-width:240px; position:fixed; top:3rem; z-index:10; }
body.mobile fieldset.River>div.output { font-size:1.6rem; width:320px; }
body.mobile fieldset.Action { margin-top:3rem; margin-bottom:3rem; }
body.mobile fieldset.Action.cmd { margin-top:0; margin-bottom:0; }
body.mobile fieldset.Footer { font-size:1.6rem; height:3rem; width:100%; position:fixed; bottom:0; }
body.mobile fieldset.Footer div.output { height:3rem; }
body.mobile fieldset.Footer div.output div { height:3rem; }
body.mobile fieldset.Footer input[name=cmd] { height:3rem; }
body.mobile fieldset.input.date div.output td { padding:8px 20px; }
body.mobile fieldset.word.float>div.output>div.project { top:38px; }
/* misc */
fieldset.draw td.content { position:relative; }
fieldset.draw div.output div.content svg { background-color:#1b5b738c; }
fieldset.draw.spide div.output div.toggle { display:none; }
fieldset.draw.trend div.output div.toggle { display:none; }
fieldset.panel.Action.cmd>div.toggle.project { display:none; }
fieldset.panel.Search div.story[data-type=spark] { padding:0; margin:0; }
fieldset.plugin.location>div.action input[type=text] { width:40px; }
fieldset.plugin.config form.option input[name=key] { width:240px; }
fieldset.plugin.parse.cmd>legend { display:none; }
fieldset.plugin.parse.cmd>form.option { display:none; }
fieldset.plugin.parse.cmd>div.action { display:none; }
fieldset.plugin.parse.cmd>div.status { display:none; }
fieldset.plugin.inner.cmd>legend { display:none; }
fieldset.plugin.inner.cmd>div.action { display:none; }
fieldset.plugin.inner.cmd>form.option { display:none; }
fieldset.xterm div.toggle { display:none; }
fieldset>div.output>fieldset.plug { position:absolute; bottom:0; right:0; display:none; }
fieldset>div.output>fieldset.plug.select { display:block; }
body.mobile fieldset.plugin>legend { border:none; }
.unselectable { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; }
/* layout */
table.layout { border-spacing:0; }
table.layout td { vertical-align:top; }
table.layout td.content div.toggle { background-color:#4682b46b; color:white; font-size:24px; position:absolute; }
table.layout td.content div.toggle>div { display:table-cell; }
table.layout td.content div.toggle.project { padding-top:50px; height:130px; width:15px; top:20%; left:0; border-top-right-radius:10px; border-bottom-right-radius:10px; }
table.layout td.content div.toggle.profile { padding-top:50px; height:130px; width:15px; top:20%; right:0; border-top-left-radius:10px; border-bottom-left-radius:10px; }
table.layout td.content div.toggle.display { margin-top:-15px; height:15px; width:130px; left:40%; border-top-left-radius:10px; border-top-right-radius:10px; }
table.layout td.content div.toggle.display>div { text-align:center; width:130px; rotate:-90deg; translate:5px -5px; }
body.mobile table.layout div.toggle { font-size:48px; }
body.mobile table.layout td.content div.toggle.project { width:30px; padding-top:35px; }
body.mobile table.layout td.content div.toggle.profile { width:30px; padding-top:35px; }
body.mobile table.layout td.content div.toggle.display { margin-top:-30px; height:30px; }
body.mobile table.layout td.content div.toggle.display>div { translate:5px -15px; }
/* flex */
div.layout.tabs>div.tabs { display:flex; overflow:auto; }
div.layout.tabs>div.tabs>div { padding:10px; height:32px; flex:1; }
div.layout.tabs>div.tabs>div:hover { background-color:steelblue; }
div.layout.tabs>div.list { width:100%; height:100%; flex:1; }
div.layout.tabs>div.list>div { height:100%; display:none; }
div.layout.tabs>div.list>div.select { display:block; }
div.layout.tabs.left { display:flex; }
div.layout.tabs.left>div.tabs { flex-direction:column; }
div.layout.tabs.left>div.tabs>div { writing-mode:tb; }
div.layout.tabs.right { display:flex; }
div.layout.tabs.right>div.tabs { flex-direction:column; }
div.layout.tabs.right>div.tabs>div { writing-mode:tb; }
div.layout.tabs.box>div.list { height:unset; }
div.layout.tabs.box>div.tabs { background-color:steelblue; text-align:center; padding:3px; display:block; }
/* table card */
div.output.card div.item.stop { color:gray; }
div.output.card div.item { padding:10px; border:#e7e7e7 solid 1px; margin:10px; width:240px; float:left; }
div.output.card div.item>div.title { font-size:1.2rem; font-weight:bold; padding:10px; border-bottom:solid 1px #e7e7e7; }
div.output.card div.item>div.content { padding:10px; height:45px; }
body.white div.output.card div.item input[type=button] { background-color:transparent; }
body.mobile div.output.card div.item { height:160px; float:none; }
body.mobile.simple div.output.card div.item { width:100%; }
body.mobile.landscape div.output.card div.item { width:auto; float:left; }
/* scrollbar */
body { overflow:-moz-scrollbars-none; -ms-overflow-style:none; }
body::-webkit-scrollbar { width:0 !important; height:0 !important; }
fieldset.panel.Action>div.output::-webkit-scrollbar { width:0 !important; height:0 !important; }
div.story[data-type=spark]::-webkit-scrollbar { width:0 !important; height:0 !important; }
div.project::-webkit-scrollbar { width:0 !important; height:0 !important; }
div.content::-webkit-scrollbar { width:0 !important; height:0 !important; }