html, body { margin: 0; padding: 0; 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; xheight: 2.5em; }
#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; }
#main { margin: 0 5% 1em; padding: 1em 1em 1.5em; background-color: #fff;}
p.error { margin: 2em 3em; padding: 1em 2em; border: 1px solid #d00; background-color: #fdd; }
p.note { margin: 0.5em 1.5em 2em; padding: 0.5em 1.5em; border: 1px solid #00d; background-color: #ddf; text-align: center; font-size: 80%; }
p.note a { font-weight: bold; }
h2 { margin: 0.5em; padding: 0; font-size: 170%; color: #030; }
h2.main {
    text-align: center;
    margin: 0.5em auto;
    padding: 0;
    font-size: 4em;
    color: white;
    width: 500px;
    background-image: linear-gradient(to right, #553c9a, #ee4b2b, #00c2cb, #ff7f50, #553c9a);
} /*text-shadow: 0.1em 0.1em 0.1em powderblue;*/
h2>small { font-size: 50%; }
h2>.walletnote { font-size: 60%; padding-top: 0.5em; color: #000; }
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%; }
div.paging { max-width: 59em; }
div.saveas { float: right; text-align: right; 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: #abd; cursor: pointer; font-size: 100%; border: 1px solid #003; }
form.main input[type=submit]:hover { background-color: yellow; }
span.walletcolor { display: inline-block; position: relative; top: 0.2em; width: 1em; height: 1em; margin-right: 0.4em; }
table { border-spacing: 1px; border-collapse: collapse; }
table th { border: 1px solid #aaa; padding: 0.3em 1em; background-color: #abd; }
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 ; padding: 0; max-width: 20em; }
table.serviceslist td h3 { margin: 0; padding: 0.5em 0.5em 0.5em 0.5em; font-size: 200%; border-bottom: 1px solid #aaa; background-color: #00c2cb; color: #ffffff; text-align: center;}
table.serviceslist td ul { margin: 0; list-style-type: none; padding: 0.5em 1em 1em 1.5em; font-size: 90%; }
table.serviceslist td ul li { margin: 0.2em 0; font-size: 120%;}
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 td.date { font-size: 80%; color: #555; }
table.txs td.amount { text-align: right; font-family: "Droid Sans Mono", monospace; }
table.txs tr.sent td.diff { color: #700; }
table.txs tr.received td.diff { color: #070; }
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: 0em 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 { margin: -0.7em 5% 0; padding: 0 0 1em; color: #aaa; }
div#foot a { color: yellow; text-decoration: none; }
div#foot a:hover { text-decoration: underline; background-color: transparent; }

#projectLink { text-decoration: none; width: 145px; display: block; margin: auto;}
#projectLinkButton {
  align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 10px 20px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
    margin: 10px auto;
}
p.message span{
    animation: color-animation 4s linear infinite;}
p .message1,p .message11{
    --color-1: #e0dd02;
    --color-2: #ACCFCB;
    --color-3: #E4A9A8;
    --color-4: #DBAD4A;
    --color-5: #eb0909;
    --color-6: #1d9641;
    --color-7: #6c1d96;
    --color-8: #DF8453;
    --color-9: #0296e0;
    --color-10: #02e05b;
}
p .message2{
    --color-1: #02e05b;
    --color-2: #e0dd02;
    --color-3: #ACCFCB;
    --color-4: #E4A9A8;
    --color-5: #DBAD4A;
    --color-6: #eb0909;
    --color-7: #1d9641;
    --color-8: #6c1d96;
    --color-9: #DF8453;
    --color-10: #0296e0;
}
p .message3{
    --color-9: #0296e0;
    --color-10: #02e05b;
    --color-1: #e0dd02;
    --color-2: #ACCFCB;
    --color-3: #E4A9A8;
    --color-4: #DBAD4A;
    --color-5: #eb0909;
    --color-6: #1d9641;
    --color-7: #6c1d96;
    --color-8: #DF8453;
}
p .message3{
    --color-1: #DF8453;
    --color-2: #0296e0;
    --color-3: #02e05b;
    --color-4: #e0dd02;
    --color-5: #ACCFCB;
    --color-6: #E4A9A8;
    --color-7: #DBAD4A;
    --color-8: #eb0909;
    --color-9: #1d9641;
    --color-10: #6c1d96;
}
p .message4{
    --color-1: #6c1d96;
    --color-2: #DF8453;
    --color-3: #0296e0;
    --color-4: #02e05b;
    --color-5: #e0dd02;
    --color-6: #ACCFCB;
    --color-7: #E4A9A8;
    --color-8: #DBAD4A;
    --color-9: #eb0909;
    --color-10: #1d9641;
}
p .message5{
    --color-1: #1d9641;
    --color-2: #6c1d96;
    --color-3: #DF8453;
    --color-4: #0296e0;
    --color-5: #02e05b;
    --color-6: #e0dd02;
    --color-7: #ACCFCB;
    --color-8: #E4A9A8;
    --color-9: #DBAD4A;
    --color-10: #eb0909;
}
p .message6{
    --color-1: #eb0909;
    --color-2: #1d9641;
    --color-3: #6c1d96;
    --color-4: #DF8453;
    --color-5: #0296e0;
    --color-6: #02e05b;
    --color-7: #e0dd02;
    --color-8: #ACCFCB;
    --color-9: #E4A9A8;
    --color-10: #DBAD4A;
}
p .message7{
    --color-1: #DBAD4A;
    --color-2: #eb0909;
    --color-3: #1d9641;
    --color-4: #6c1d96;
    --color-5: #DF8453;
    --color-6: #0296e0;
    --color-7: #02e05b;
    --color-8: #e0dd02;
    --color-9: #ACCFCB;
    --color-10: #E4A9A8;
}
p .message8{
    --color-1: #E4A9A8;
    --color-2: #DBAD4A;
    --color-3: #eb0909;
    --color-4: #1d9641;
    --color-5: #6c1d96;
    --color-6: #DF8453;
    --color-7: #0296e0;
    --color-8: #02e05b;
    --color-9: #e0dd02;
    --color-10: #ACCFCB;
}
p .message9{
    --color-1: #E4A9A8;
    --color-2: #DBAD4A;
    --color-3: #eb0909;
    --color-4: #1d9641;
    --color-5: #6c1d96;
    --color-6: #DF8453;
    --color-7: #0296e0;
    --color-8: #02e05b;
    --color-9: #e0dd02;
    --color-10: #ACCFCB;
}
p .message10{
    --color-1: #ACCFCB;
    --color-2: #E4A9A8;
    --color-3: #DBAD4A;
    --color-4: #eb0909;
    --color-5: #1d9641;
    --color-6: #6c1d96;
    --color-7: #DF8453;
    --color-8: #0296e0;
    --color-9: #02e05b;
    --color-10: #e0dd02;
}
@keyframes color-animation {
  0%    {color: var(--color-1)}
  10%   {color: var(--color-2)}
  20%  {color: var(--color-3)}
  30%    {color: var(--color-4)}
  40%   {color: var(--color-5)}
  50%  {color: var(--color-6)}
  60%    {color: var(--color-7)}
  70%   {color: var(--color-8)}
  80%  {color: var(--color-9)}
  90%  {color: var(--color-10)}
  100%  {color: var(--color-1)}
}