html, body {
	--body-bg-color:white;
	--body-fg-color:black;

	--legend-bg-color:lightsteelblue;
	--input-bg-color:white;
	--input-fg-color:var(--body-fg-color);
	--input-radius:5px;
	--input-border:blue solid 1px;
	--output-bg-color:var(--input-bg-color);
	--status-border:transparent solid 1px;

	--plugin-radius:10px;
	--plugin-bg-color:aliceblue;
	--plugin-fg-color:var(--body-fg-color);
	--panel-output-bg-color:var(--body-bg-color);
	--panel-output-fg-color:#d0d3da;
	--panel-input-bg-color:#6b7488;
	--panel-input-fg-color:white;
	--panel-hover-bg-color:#2b3446;
	--panel-hover-fg-color:white;
	--panel-bg-color:var(--panel-output-bg-color);
	--panel-fg-color:var(--panel-output-fg-color);

	--float-fg-color:var(--plugin-fg-color);
	--float-bg-color:var(--plugin-bg-color);
	--carte-bg-color:var(--plugin-bg-color);
	--hover-bg-color:var(--input-bg-color);
	--hover-fg-color:var(--input-fg-color);

	--th-fg-color:var(--plugin-fg-color);
	--th-bg-color:var(--plugin-bg-color);
	--td-hover-bg-color:var(--plugin-bg-color);
	--tr-hover-bg-color:var(--plugin-bg-color);
}
@media (prefers-color-scheme: dark) {
html, body {
	--body-bg-color:black;
	--body-fg-color:silver;

	--legend-bg-color:#212121;
	--input-bg-color:#232526;
	--input-fg-color:var(--body-fg-color);
	--input-radius:5px;
	--input-border:blue solid 1px;
	--output-bg-color:var(--input-bg-color);
	--status-border:gray solid 1px;

	--plugin-radius:var(--input-radius);
	--plugin-bg-color:var(--body-bg-color);
	--plugin-fg-color:var(--body-fg-color);
	--panel-output-bg-color:var(--body-bg-color);
	--panel-output-fg-color:var(--body-fg-color);
	--panel-bg-color:var(--panel-output-bg-color);
	--panel-fg-color:var(--panel-output-fg-color);

	--float-fg-color:var(--plugin-fg-color);
	--float-bg-color:var(--plugin-bg-color);
	--carte-bg-color:var(--plugin-bg-color);
	--hover-bg-color:var(--input-bg-color);
	--hover-fg-color:white;

	--th-fg-color:var(--plugin-fg-color);
	--th-bg-color:var(--plugin-bg-color);
	--td-hover-bg-color:var(--plugin-bg-color);
	--tr-hover-bg-color:var(--plugin-bg-color);
}
}
fieldset.contexts {
	background-color:var(--plugin-bg-color); color:var(--plugin-fg-color); border-radius:var(--plugin-radius);
	padding:0; border:0; margin:0; position:fixed; top:400px; left:400px; z-index:100;
}
fieldset.contexts * { padding:0; border:0; margin:0; }
fieldset.contexts legend { font-size:1.2rem; line-height:30px; padding:0 10px; height:32px; float:left; }
fieldset.contexts select.hide { display:none; }
fieldset.contexts input { background-color:var(--input-bg-color); color:var(--input-fg-color); font-size:1rem; padding:0 20px; height:32px; min-width:80px; outline:none; }
fieldset.contexts form.option>div.item { float:left; margin-right:10px; height:32px; }
fieldset.contexts div.action>div.item { float:left; margin-right:10px; height:32px; }
fieldset.contexts div.status>div.item { float:left; padding:5px; height:31px; }
fieldset.contexts div.status>div.item>label { font-size:0.6rem; }
fieldset.contexts div.output { background-color:var(--output-bg-color); overflow:auto; clear:both; }
fieldset.auto, fieldset.full, fieldset.float, body>div.float { position:fixed; z-index:100; }

body>div.carte { padding:0; }
body>div.carte input[name=filter] { margin:5px; width:calc(100% - 10px); position:sticky; top:5px; }
body>div.carte div.item { white-space:pre; padding:5px 10px; }
body>div.carte div.item span.icon.next { float:right; }
body>div.carte div.item { background-color:var(--carte-bg-color); }
body>div.carte div.item:hover { background-color:var(--hover-bg-color); }

/* icon */
fieldset.contexts form.option>div.icon { background-color:unset; font-size:26px; line-height:28px; padding:0 5px; height:32px; margin:0; }
fieldset.contexts form.option>div.item.icons>span.icon { font-size:26px; line-height:28px; padding:0 5px; height:32px; }
fieldset.contexts form.option>div.item.icons>span.icon.create { line-height:30px; }
fieldset.contexts div.action>div.item.icons>span.icon { font-size:26px; line-height:28px; padding:0 5px; height:32px; }
fieldset.contexts div.action>div.item.icons>span.icon.create { line-height:30px; }
fieldset.contexts form.option>div.icon:first-child { margin-left:-5px; }
fieldset.contexts form.option>div.icon.refresh { line-height:26px; }
fieldset.contexts form.option>div.icon.goback { line-height:26px; }
fieldset.contexts form.option>div.icon.delete { font-size:18px; margin-left:5px; margin-right:0px; }
fieldset.contexts form.option>div.icon.next { font-size:18px; }
fieldset.contexts form.option>div.icon.prev { font-size:18px; }
fieldset.contexts form.option>div.item.text>span.icon { margin-left:-20px; margin-right:3px; }
fieldset.contexts form.option>div.item.select>span.icon { margin-left:-15px; margin-right:3px; visibility:hidden; }
fieldset.contexts form.option>div.item.select:hover>span.icon { visibility:visible; }
fieldset.contexts div.item.text>span.icon.delete { font-size:20px; visibility:hidden; }
fieldset.contexts div.item.text:hover>span.icon.delete { visibility:visible; }
fieldset.contexts form.option>div.button.icons { display:none; }
fieldset.contexts div.action>div.button.icons { display:none; }