body{
    color:#ffffff;
    background-color:#A5A5FF;
	animation: cycle 5s infinite alternate;
    margin:50px;
}

@keyframes cycle {
	from{background-color:#A5A5FF;}
	to{background-color:#F5A5FF;}
}

main{
	background-color:#014Fb4;
	padding: 3%;
}

main>p{margin-bottom: 30px;}


div.grand_total{margin: 2rem 0 1rem 0;}

table.voting_amp_table{
	border-spacing: 0;
	text-align:left;
}

/* Right align the right most column (amplification column).  */
table.voting_amp_table thead tr th:nth-child(2),table.voting_amp_table tbody tr td:nth-child(3){
	text-align: right;
	width: 8%;
}

/* Prevent the wrapping of the proposal names. */
table.voting_amp_table tbody tr td:nth-child(1){white-space: nowrap;width: 5%;}


table.voting_amp_table thead tr{
	font-weight: bolder;
}

table.voting_amp_table tbody tr td:nth-child(2){
	display: flex;
}

TABLE.cn_accounts_table,TABLE.cn_accounts_table th,TABLE.cn_accounts_table td{
	border: 1px solid #0000aa;
    text-align:left;
    font-family: 'Courier New',monospace,ui-monospace,system-ui;
}
/* Just for the row numbers. */
TABLE.cn_accounts_table{counter-reset: rowNumber -1;}
TABLE.cn_accounts_table tr{counter-increment: rowNumber;}
TABLE.cn_accounts_table tr td:first-child::before{
	content: counter(rowNumber)")";
	margin-right: 0.5em;
}

TABLE.cn_accounts_table th,TABLE.cn_accounts_table td{padding: 3px;}

TABLE.cn_accounts_table th{cursor: pointer;}

.clickable{cursor: pointer;color: lime;text-decoration: underline;}


tbody tr:hover {background-color: hsl(253, 83%, 28%);}


/* The Modal (background) */
.vote_modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
/* Modal Content/Box */
.vote_modal_content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	animation-name: animatetop;
	animation-duration: 0.4s
}

/* Modal Header */
.vote_modal_header{
	padding: 2px 16px;
	background-color: hsl(0, 83%, 51%);
	color: white;
 }

 .vote_modal_body{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 10px;
}


/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}
  
.close:hover,.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

/* Add Animation */
@keyframes animatetop {
	from {top: -300px; opacity: 0}
	to {top: 0; opacity: 1}
}







div.amp_vote {
	flex: 0 0 auto;
	margin: 0px;
}

div.for{
	background-color: aquamarine;
	color: aquamarine;
}


div.against{
	background-color:lightcoral;
	color: lightcoral;
}

div.abstain{
	background-color:whitesmoke;
	color: whitesmoke;
}

div.delegate{
	background-color: #F5A5FF;
	color: #F5A5FF;
}

div.do_nothing{
	background-color:rgb(67, 66, 66);
	color:rgb(67, 66, 66);
}


div.legend{
	display: inline-flex;
	width:10px;
	height: 10px;
	border-radius: 1em;
	margin-right: 0.2em;
}

a:link{color: #00dF00; text-decoration: underline;}
a:active{color: #00009f; text-decoration: underline;}
a:visited{color: #ff5555; text-decoration: underline;}
a:hover{color: #FFFFFF; text-decoration: none;}