:root {
  --redsolid: #eb0e0e;
  --greensolid: #0aad0a;
  --green: #33b03360;
  --red: #e82e2e60;
  --yellow: #f2cf7e;
  --background: rgb(18, 18, 18);
}

body {
	color: #f0f0f0;
	background: var(--background);
	width: min(100%, 60em);
	margin-left: auto;
	margin-right: auto;
	font-family: Verdana, sans-serif;
	font-size: .8em;
}

@media only screen and (min-device-width: 375px) and (max-device-width:812px){
	body {
	width: 95%;
	font-size: 1.9em;
	}
	#performance_table {width: 100%;}
}


table {
	border-collapse:collapse;
	margin-left: auto;
	margin-right: auto;
}

h1, h2 {
	text-align: center;
}

h1 {
	font-size: 2em;

}

h3 {font-size: 1.5em;}

h3, h4 {
	font-family: Arial, sans-serif;
	text-align: left;
}

a:link, a:visited {
	color: var(--greensolid);
}

#pnl {
	text-align: center;
}

th, td {
	padding: .4em;
}

td {
	min-height: 1.5em;
}

tr {height: 2.5em;}


@media only screen and (min-device-width: 375px) and (max-device-width:812px){
	tr, td, th {font-size: .84em;}
	td {min-width: 4.5em;}
	tr {height: 1.5em;}
}
th {
 	text-align: left;
	margin-right: 1em;
	font-weight: bold;
}



#performance_tbl {
	font-family: Verdana, sans-serif;
	min-height: 1.5em;
	td {	
	white-space: nowrap;
	}
}

.dataframe td:nth-child(n+2){
	text-align: right;
}

.dataframe td:nth-child(1){
	white-space: nowrap;
}


.dataframe tr:nth-child(even){
	background-color: rgb(30, 30, 30);
}

.dataframe tr:hover {
	background-color: rgb(25, 45, 62);
}

.negative {
	color: var(--redsolid);
}

.positive {
	color: var(--greensolid);
}

.unchanged {
	color: var(--yellow);
}

#portfolio_img{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

@-webkit-keyframes negative_flash {
  from { background-color: var(--red); }
  to { background-color: inherit; }
}
@-moz-keyframes negative_flash {
  from { background-color: var(--red); }
  to { background-color: inherit; }
}
@-o-keyframes negative_flash {
  from { background-color: var(--red); }
  to { background-color: inherit; }
}
@keyframes negative_flash {
  from { background-color: var(--red); }
  to { background-color: inherit; }
}
.negative_flash {
  -webkit-animation: negative_flash 1s 1; /* Safari 4+ */
  -moz-animation:    negative_flash 1s 1; /* Fx 5+ */
  -o-animation:      negative_flash 1s 1; /* Opera 12+ */
  animation:         negative_flash 1s 1; /* IE 10+ */
}

@-webkit-keyframes positive_flash {
  from { background-color: var(--green); }
  to { background-color: inherit; }
}
@-moz-keyframes positive_flash {
  from { background-color: var(--green); }
  to { background-color: inherit; }
}
@-o-keyframes positive_flash {
  from { background-color: var(--green); }
  to { background-color: inherit; }
}
@keyframes positive_flash {
  from { background-color: var(--green); }
  to { background-color: inherit; }
}
.positive_flash {
  -webkit-animation: positive_flash 1s 1; /* Safari 4+ */
  -moz-animation:    positive_flash 1s 1; /* Fx 5+ */
  -o-animation:      positive_flash 1s 1; /* Opera 12+ */
  animation:         positive_flash 1s 1; /* IE 10+ */
}