*, *::before, *::after { box-sizing: border-box; }
:root { --bg-color: #fff; --fg-color: #000; --h2-color: #030; --sent-color: #700; --received-color: #070; --th-bg-color: #abd; --error-bg-color: #fdd; --note-bg-color: #ddf; --unimportant-fg-color: #555; --highlight-color: #ff0; }
@media (prefers-color-scheme: dark) {
    :root { --bg-color: #111; --fg-color: #fff; --h2-color: #efe; --sent-color: #f99; --received-color: #9f9; --th-bg-color: #235; --error-bg-color: #411; --note-bg-color: #114; --unimportant-fg-color: #aaa; --highlight-color: #880; }
    a:link { color: #aaf; }
    a:visited { color: #faf; }
}
html, body { margin: 0; padding: 0; background-color: #333; height: 100%; font-family: "Trebuchet MS", sans-serif; }
a:hover { background-color: #ffa; }
#topbar { margin: 0; padding: 1em 1em 0; color: white; background-color: #003; text-align: right; }
#topbar>h1 { float: left; margin: 0; padding: 0 0 0.3em; font-weight: normal; font-size: 140%; }
#topbar>h1>a { color: yellow; text-decoration: none; font-weight: bold; }
#topbar>h1>a:hover { text-decoration: underline; background-color: transparent; }
#topbar>form { padding: 0.2em 0 0.3em; }
#topbar form input[type=text] { padding: 0.2em 0.3em; color: #003; width: 40ex; font-size: 90%; border: 2px solid #fff; }
#topbar form input[type=text]:focus { border-color: yellow; }
#topbar form input[type=submit] { color: yellow; background-color: transparent; cursor: pointer; font-size: 100%; border: 1px solid yellow; }
#topbar form input[type=submit]:hover { color: black; background-color: yellow; cursor: pointer; }
.body-wrapper1 { text-align: center; padding: 0 1em; }
.body-wrapper2 { display: inline-block; min-width: 800px; text-align: left; padding: 0 1em 1em; color: var(--fg-color); background: var(--bg-color); border-radius: 0 0 0.3rem 0.3rem; }
p.error { margin: 2em 3em; padding: 1em 2em; border: 1px solid #d00; background-color: var(--error-bg-color); }
p.note { margin: 0.5em 1.5em 2em; padding: 0.5em 1.5em; border: 1px solid #00d; background-color: var(--note-bg-color); text-align: center; font-size: 80%; }
p.note a { font-weight: bold; }
#wallet-renames-info { text-align: right; font-size: 80%; }
#wallet-renames-info span { display: inline-block; padding: 0.2em 0.3em 0.2em 0.5em; border-radius: 0 0 0.5em 0.5em; background-color: var(--th-bg-color); }
#wallet-renames-info span button { margin-left: 0.4em; padding: 0 0.2em; font-size: 80%; }
h2 { margin: 0.3em 0.5em; padding: 0; font-size: 170%; color: var(--h2-color); }
h2.main { text-align: center; margin: 1.5em 0.5em 0.5em; padding: 0; font-size: 210%; text-shadow: 0.1em 0.1em 0.1em var(--th-bg-color); }
h2>small { font-size: 50%; }
h2>.walletnote { font-size: 60%; padding-top: 0.5em; color: var(--fg-color); }
h2>.showother { padding-left: 1em; font-weight: normal; font-size: 60%; }
h3 { margin: 0.8em; font-size: 120%; }
ul { margin-left: 1em; }
li { margin-top: 0.5em; }
div.alternatives { margin: -0.5em 0.5em 1.5em; color: #555; font-size: 90%; }
form.main { margin: 3.5em 1em 4em; font-size: 120%; text-align: center; }
form.main input { display: block; margin: 0 auto; }
form.main input[type=text] { width: 40em; margin: 0.5em auto 0.3em; padding: 0.2em 0.3em; color: #003; font-size: 90%; }
form.main input[type=submit] { padding: 0 2em; color: #003; background-color: var(--th-bg-color); cursor: pointer; font-size: 100%; border: 1px solid #003; }
form.main input[type=submit]:hover { background-color: yellow; }
div.paging { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; }
span.wallet_color { display: inline-block; width: 1em; height: 1em; margin-right: 0.4em; vertical-align: middle; }
span.wallet_color:has(+ span.wallet_name[data-original-name]) { text-align: center; vertical-align: text-top; color: var(--fg-color); border-radius: 0.5em; line-height: 1.04; }
span.wallet_color:has(+ span.wallet_name[data-original-name]):after { content: "✪"; color: var(--highlight-color); }
span.wallet_name.highlight { background-color: var(--highlight-color); }
span.wallet_name_edit_button { display: inline-block; position: relative; top: -0.2em; margin-left: 0.3em; transform: scaleX(-1); cursor: pointer; font-size: 80%; line-height: 1; color: #888; }
span.wallet_name_edit_button:hover { color: var(--fg-color); }
table { border-spacing: 1px; border-collapse: collapse; }
table th { border: 1px solid #aaa; padding: 0.3em 1em; background-color: var(--th-bg-color); }
table td { border: 1px solid #aaa; padding: 0.3em 1em; font-size: 92%; }
table.empty { margin: 0; }
table.empty td, table.empty th { border-width: 0; padding: 0.2em 0.3em; }
table .outnumber { color: #999; font-size: 70%; }
table.serviceslist { margin: 0 auto; }
table.serviceslist td { vertical-align: top; border: 1px solid #ccc; border-width: 0 1px; padding: 0; max-width: 18em; }
table.serviceslist td h3 { margin: 0; padding: 0.5em 0.5em 0; font-size: 130%; border-bottom: 1px solid #aaa; background-color: #ddd; }
table.serviceslist td ul { margin: 0; list-style-type: none; padding: 0.5em 1em 1em 1em; font-size: 90%; }
table.serviceslist td ul li { margin: 0.2em 0; }
table.serviceslist td ul li a { text-decoration: none; }
table.tx>tbody>tr>th { text-align: right; font-weight: normal; }
table.tx>tbody>tr>th>b { display: block; float: left; text-align: left; margin-right: 1em; }
table.tx>tbody>tr>th>small { font-size: 85%; }
table.txs { width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
table.txs td.date { font-size: 80%; color: var(--unimportant-fg-color); }
table.txs td.amount { text-align: right; font-family: "Droid Sans Mono", monospace; }
table.txs tr.sent td.diff { color: var(--sent-color); }
table.txs tr.received td.diff { color: var(--received-color); }
table.txs td.inout table.empty td { width: 10em; }
table.txs td.inout table.empty td.walletid { width: 12em; }
table.txs td.txid { font-family: monospace; font-size: 80%; }
table.info { margin: 1em 0; }
table.info th { text-align: left; }
table.tx td.small { font-size: 85%; }
table .data-hidden { font-size: 80%; color: #888; display: none; }
div.info { margin: 0 auto; padding: 0.1em; max-width: 70em; background-color: #e2e2ff; }
div.info p { margin: 0.5em 2em 1em; }
div.info ol { margin: 0.5em 1em 1em; }
div.info pre { margin: 1em 3em; padding: 0.5em; background-color: #ddd; }
div#foot { padding: 1em 5%; color: #aaa; }
div#foot a { color: yellow; text-decoration: none; }
div#foot a:hover { text-decoration: underline; background-color: transparent; }