* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

*:focus {
	outline: 1px dotted peru;
}


html {
	font-size: 10px;
}

body {
	font-size: 1.6rem;
	font-family: sans-serif;
	text-align: center;
	line-height: 1.2;
	padding-top: 3rem;
	background: lightgray;
	color: darkslateblue;
}

a {
	color: peru;
}

h1, h2, h3, h4, h5, h6, p, ol, ul {
	margin: 0 0 .8rem;
}

h1 { font-size: 3.2rem; font-family:sans-serif; }
h2 { font-size: 2.8rem; font-family:sans-serif; }
h3 { font-size: 2.4rem; font-family:sans-serif; }
h4 { font-size: 1.6rem; font-family:sans-serif; font-weight: normal; }
h5 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; }
h6 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; font-weight: normal; }
p  { font-size: 1.2rem; }
ol { font-size: 1.2rem; }
ul { font-size: 1.2rem; }

h5 small, h6 small {
	text-transform: none;
	letter-spacing: 0;
	display: inline-block;
	margin: 0 .8rem;
}

figure {
	position: relative;
}


form { margin: 0; }
label { display: block; font-size: 1.2rem; margin: .8rem 0 .4rem; }
label+input { width: 100%; max-width: 36rem; line-height: 1.5; padding: .4rem 1.2rem; }
label+textarea { width: 100%; max-width: 36rem; height: 6.4rem; line-height: 1.5; padding: .4rem 1.2rem; }
input[type="submit"] { background:black;color:gold;font-size: 1.8rem; margin: 1.6rem 0; padding: .4rem 1.2rem; }

label+input+.help, label+textarea+.help { display: block; font-size: 1.1rem; margin: .4rem 0 .8rem; font-style: italic; color: darkgoldenrod; }
label+input+ul.help, label+textarea+ul.help { margin-left:1.6rem; }


pre {
	font-size: 1.6rem;
	background: black;
	color: limegreen;
	text-align: left;
	margin: .8rem -3rem;
}
.flex-on-wide {
	display:flex;
	flex-wrap: wrap;
}

.m-0 {
	margin: 0 !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mr-auto {
	margin-right: auto !important;
}

.ml-auto {
	margin-left: auto !important;
}

.bg-navy {
	background: navy !important;
}

.bg-danger {
	background: mediumvioletred !important;
}

.text-gold {
	color: gold !important;
}

.text-palegold {
	color: palegoldenrod !important;
}

.align-right {
	text-align: right !important;
}

.align-left {
	text-align: left !important;
}

.align-center {
	text-align: center !important;
}

.system-message {
	position:fixed;
	top:0; right:0;
	z-index: 1990;
	padding:.5rem;
}


.block-received {
	color: darkgreen;
	background: palegreen;
}

.block-sent {
	color: maroon;
	background: thistle;
}

table {
	font-family: monospace;
	font-size: 1.2rem;
	width: 100%;
	border-spacing: 0;
	margin: .8rem 0 3.2rem;
	border-top: 1px solid lightgray;
}

table th {
	padding: .4rem .8rem;
}

table tbody tr {
	background: lightgray;
}

table tbody tr td {
	padding: .4rem .8rem;
}

table tbody tr td+td {
	border-left: 1px dotted white;
}

table tbody tr+tr>td {
	border-top: 1px dotted white;
}






body.base main > .wrap:not(.tabs) {
    display: flex;
    align-items: center;
    justify-content: center;
}


.wrap {
	position: relative;
	text-align: left;
	margin: 0 auto;
}

.formal {
	background: lightgray;
	padding: 1.6rem;
	border: .8rem solid lightgray;
	width: 100%;
	max-width: 41.2rem;
}

header > .wrap {
	padding: 1.6rem 0;
	background: navy;
	color: gold;
	height: 26rem;
	text-align: center;
}

header > .wrap div.align-right {
	display: none;
}

header .wrap > * {
	margin: 0 1.6rem;
}

header .title {
	color: white;
}

footer {
	position: fixed;
	top: 0; right: 0; left: 0;
}

footer .wrap {
	display: flex;
	align-items: center;
	background: black;
	color: limegreen;
	font-size: 1rem;
	padding: .8rem;
	font-family: monospace;
	line-height: 1.2;
	height: 3rem;
}

main > .wrap:not(.tabs) {
	display: block;
	padding: 3.2rem 1.6rem;
	background: white;
	min-height: calc(100vh - 29rem);
}

footer .wrap > * {
	margin: 0 .8rem;
}

.table-wrap {
	max-width: 100%;
	overflow-x: auto;
}


.tabs {
    list-style: none;
    display: flex;
    align-items: center;
    width: 100%;
    background: darkslateblue;
    padding: 0;
}

.tabs > .tab {
    list-style: none;
}

.tabs > .tab > a {
    display: block;
    padding: .8rem 1.6rem;
    background: lightgray;
    font-weight: bold;
    text-decoration: none;
}

.tabs > .tab.no-style > a {
    display: block;
    padding: .8rem 1.6rem;
    background: none;
    font-weight: bold;
    text-decoration: none;
}

.tabs > .tab.active > a {
	background: white;
	color: darkslateblue;
}

@media only screen and (min-width: 560px) {

	.wrap {
		display: flex;
		align-items: center;
		align-content: center;
		max-width: 118rem;		
	}

	header > .wrap {
		height: 16rem;
	}

	header > .wrap div.align-right {
		display: block;
	}

	main > .wrap:not(.tabs) {
		padding: 3.2rem;
		min-height: calc(100vh - 19rem);
	}

	.tabs {
		padding: 0 1.6rem;
	}


}





/* trasnactions table dl */

td h5 {
    margin: 1rem 0 0;
}

dl {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 0;
    border-bottom: 1px dotted lightgray;
}

dl > dt {
    width: 10rem;
    padding: .5rem 1rem;
    text-align: right;
    border-top: 1px dotted lightgray;
    border-left: 1px dotted lightgray;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    color: darkslateblue;
}

dl > dd {
    width: calc(100% - 10rem);
    padding: .5rem 1rem;
    border-top: 1px dotted lightgray;
    border-left: 1px dotted lightgray;
    border-right: 1px dotted lightgray;
    overflow: hidden;
    text-overflow: ellipsis;
}

dl > dt:nth-of-type(even) {
    background: whitesmoke;
}
dl > dd:nth-of-type(odd) {
    background: whitesmoke;
}
dl > dt:nth-of-type(odd) {
    background: ghostwhite;
}
dl > dd:nth-of-type(even) {
    background: ghostwhite;
}