html			{ width:100%; min-width:400px; background:#DDD; }
body			{ font:13px/24px sans-serif; cursor:default; max-width:800px;
  				  background:#FFF; color:#1e3853; margin:15px auto; padding:0 50px; box-shadow:0 0 10px #98b0c9; direction: __MSG_@@bidi_dir__; }
header			{ display:block; text-align:center; margin-bottom:2em; padding:3em 0 1em 0;
				  border-bottom:0.2rem solid #1e3853; }
#domain_specific, #domain_specific button { display: none; }
section 		{ display:block; padding:0; }
fieldset		{ border:none; border-top:0.2rem solid #1e3853; background:#F5F5F5; border-radius:2px; padding:1px 20px 15px 20px; margin-bottom:2em; }
footer			{ display:block; text-align:center; margin-top:1em; padding:1em 0 2em 0; border-top:1px solid #fff; }
a				{ text-decoration:none; color:#001; }
fieldset:first-of-type button { padding: 0; margin-left: 4px; border-width: 1px; transform: scale(1.5); width: 1.5em; }
#buttons		{ display: flex; justify-content: space-between; flex-wrap: wrap; }
button, .button	{ background:#F5F5F5; border:2px #1e3853 solid; padding:12px; border-radius:0.5em; transition-duration:200ms;
				  cursor:pointer; font-size:12px; white-space:nowrap; flex-grow: 1; margin:2px; text-align: center; }
button:hover, .button:hover{ background:#FFF; }
#twitter:hover	{ background:#55ACEE; border-color:#3b88c3; color:#FFF; }
.buymeacoffee	{ padding: 1em; font-weight: normal; border-width:2px; border-radius:.5em; margin:2px; }
.buymeacoffee::before	{ content: "🍣"; font-size:1.5em; vertical-align: bottom; padding-right:.3em; }
button.buymeacoffee:hover, .button.buymeacoffee:hover { background: #79D6B5; border-color: #C9F6D5; color:#FFF }
.sponsor::before{ display: inline-block; content: "♡"; font-size:2em; color:rgb(219, 97, 162); vertical-align: bottom; padding-right:.3em; transition: transform 0.15s cubic-bezier(0.2, 0, 0.13, 2); transform: scaleX(1.1); }
button.sponsor:hover::before, .button.sponsor:hover::before { transform: scale(1.21, 1.1); }
h1				{ margin:0 0 -0.5em 0; font-size:24px; }
h1 > span 		{ display: inline-block; }
h1 > span::first-letter	{ font-size: xx-large; }
h3				{ margin-bottom:0.5em; }
table			{ width:100%; }
td:nth-child(2):not(:last-child){ text-align:center; }
table:not(.c) td:last-child:not(:first-child) { text-align: right; }
table.c td		{ vertical-align:top; }
table.c td:first-child	{ width:1.4em; }
input[type=number]{ width:4em; }
input[type=range].w100 { width: calc(100% - 12px); }
input:invalid	{ box-shadow:#F00 0 0 10px 0; background:#FEE; outline-color:#F00; transition:500ms; }
.slider_values::after{ content:"%"; }

div.toggle-container{ overflow:hidden; height:0; }
input.toggle:checked ~ div.toggle-container{ height:auto; }

#save_set		{ cursor:text; }

.i				{ display:inline; padding:2px 8px; margin:0 0.1em 0 0.2em; font-weight:bold;
				  background:#FFF; border:1px solid #1e3853; border-radius:10px; transition:opacity 0.5s; }
.i a 			{ text-decoration:underline; }
.i:hover, .i:focus-within{ background:#DDD; color:#000; transition:opacity 0.2s; }
.i:hover > .i_text, .i:focus-within > .i_text{ display:inline; opacity:1; }
.i_text			{ display:none; position:absolute; margin:13px 5px 0 3px; padding:10px 15px; z-index:99; opacity:0; max-width:500px; font-weight:normal;
				  background:#DDD; transition:opacity 0.2s; color:#000; }

dialog					{ position:fixed; cursor:default; min-width:400px; max-width:90%; padding:0;
						  color:#333; background:#FFF; border:1px solid rgba(0, 0, 0, 0.3);	border-radius:4px; box-shadow:0 0 20px rgba(0, 0, 0, 0.3);
						  animation:show_moved 200ms; }
dialog::backdrop		{ transition-duration:200ms; position:fixed; top:0;	left:0;	right:0; bottom:0; background-color:rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px);
						  animation:show 200ms; }
dialog .close			{ color:#AAA; font-weight:bold;	position:absolute; right:1em; top:1em; height:1em; width:1em; border-radius:0.1em; transition:200ms; }
dialog .close::before	{ position:relative; left:0.2em; bottom:0.45em;	content:"x"; }
dialog .close:hover		{ text-shadow:0 0 0.1em #333; color:#FFF; background:#AAA; }
dialog .content_area	{ margin:26px 0 0 0; padding:0em 2em 2em 2em; }
dialog .action_area 	{ padding: 0.7em 1em 0.5em 1em; text-align:right; background:#F8F8F8; border-top:1px solid #E0E0E0; border-radius:0 0 4px 4px; }
dialog.close			{ animation:show_moved 200ms reverse; }
dialog.close::backdrop	{ animation:show 200ms reverse; }
dialog h4				{ color:#BBB; font-weight:normal; font-size:20px; }
dialog input			{ width:100%; }
dialog ul 				{ margin-bottom:0.5em; }
dialog button, dialog .button	{ padding:0.5em 1em; }

@keyframes show_moved			{ from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes show 				{ from { opacity:0; } to { opacity:1; } }

@media all and (max-width: 900px), all and (max-device-width:900px){
	body 	{ margin:0; box-shadow:none; }
	footer > p{ margin-bottom:0; }
}

@media all and (max-width: 600px), all and (max-device-width:600px){
	body	{ padding:0 20px; }
}

@media all and (max-width: 500px), all and (max-device-width:500px){
	body	{ padding:0; }
	fieldset{ padding:1px 10px 10px 10px; }
}

@media all and (view-mode:floating), (view-mode:windowed){
	html	{ max-width:900px; }
	header	{ display:none; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	html {
		background: #222;
	}
	body {
		background: #404040;
		color: #e0f0ff;
		box-shadow:0 0 10px #111;
	}
	header {
		border-bottom: 0.2rem solid #222;
	}
	footer {
		border-top: 0.2rem solid #222;
	}
	h1, h2, h3 {
		color: #888;
	}
	h4 {
		color: #fff;
	}
	fieldset {
		background: #3b3b3b;
		border-top: 0.2rem solid #222;
	}
	a {
		color: #ffe;
	}
	button, .button {
		background: #333;
		border-color: #222;
		color: #FFF;
	}
	button:hover, .button:hover {
		background: #2c2c2c;
	}
	.i {
		background: #333;
		color: #fff;
		border:1px solid #666;
	}
	.i:hover, .i_text {
		background: #222;
		color: #fff;
	}
	input, select {
		background: #2c2c2c;
    	border: none;
    	color: #fff;
    	padding: 0.2rem;
	}
	input:invalid {
		background: #2c0000;
		outline-color: #a00;
		box-shadow:#C00 0 0 10px 0;
	}

	dialog 				{ background: #333; color: #eee; }
	dialog .action_area { background: #2c2c2c; border-top: 1px solid #222; }
	dialog .close:hover	{ background: #2c2c2c; }
}