* {
  font-family: Arial, Helvetica, sans-serif;
}
.flexbox{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
}
input {   
  width: 5em;
  text-align:right;
  border-radius: 5px;
  border:1px solid var(--text-color);
  color:var(--text-color);
  background-color:var(--bkg-color);
}  
input:disabled{
  width: 5em;
  text-align:right;
  border-radius: 5px;
  border:1px solid var(--text-color);
  color:var(--text-color);
  background-color:var(--bkg-color);
  -webkit-text-fill-color: var(--text-color);
  -webkit-opacity:1;
  opacity: 1!important; /* required on iOS */
}       
td {      
  text-align:right;
}         
table, td, th{
  border: 1px solid;
  padding: 2px;
}        
body{
  --text-color: black;
  --bkg-color: white;
  --odd-start-color:#e0fae0;
  --odd-end-color:#c0f9c0;
  --even-start-color:#f7f2c4;
  --even-end-color:#f2e99d;
  --portfolio-color:green;
  --pShade:gold;
  --myLink-color:blue;
  --myALink-color:red;
  --myVLink-color:purple;
}
body.dark-theme {
  --text-color: white;
  --bkg-color: black;
  --odd-start-color:#006400;
  --odd-end-color:black;
  --even-start-color:#b8860b;
  --even-end-color:black;
  --portfolio-color:#00ff00;
  --pShade:white;
  --myLink-color:#33FF33;
  --myALink-color:#AAFF33;
  --myVLink-color:#FFFF00;
}
@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  body {
	text-align:center;
	--text-color: white;
	--bkg-color: black;
	--odd-start-color:#006400;
  --odd-end-color:black;
  --even-start-color:#b8860b;
  --even-end-color:black;
	--portfolio-color:#00ff00;
	--pShade:white;
  --myLink-color:#33FF33;
  --myALink-color:#AAFF33;
  --myVLink-color:#FFFF00;
  }
  body.light-theme {
	text-align:center;
	--text-color: black;
	--bkg-color: white;
	--odd-start-color:#e0fae0;
  --odd-end-color:#c0f9c0;
  --even-start-color:#f7f2c4;
  --even-end-color:#f2e99d;
	--portfolio-color:green;
	--pShade:gold;
  --myLink-color:blue;
  --myALink-color:red;
  --myVLink-color:purple;
  }
}
body {
  text-align:center;
  background: var(--bkg-color);
  color: var(--text-color) ;
}
a:link {
    color: var(--myLink-color) ;
    cursor: pointer;
}
a:active {
    color: var(--myALink-color);
    cursor: pointer;
}
a:visited{
  color: var(--myVLink-color) ;
  cursor: pointer;
}

h1,
p {
  color: var(--text-color);
}
select{
  border-radius: 5px;
  border:0px;
  outline:none;
  background-color:var(--bkg-color);
  color:var(--text-color);
}
.selectWrapper{
  border-radius:5px;
  display:inline-block;
  overflow:hidden;
  border:1px solid #cccccc;
}
button{
  border-radius: 5px;
  background-image: linear-gradient(-45deg, #6eaa2e, #6eaa2e, green);
  background-color:green;
  color:white;
  margin:3px;
  text-shadow: 2px 2px 3px black;
  cursor: pointer;
}
button:active {
  border-radius: 5px;
  background-image: linear-gradient(-45deg, #6eaa2e, #6eaa2e, blue);
  background-color:blue;
  color:white;
  margin:3px;
  text-shadow: 2px 2px 3px black;
  cursor: pointer;
}
.portfolio{
	color:var(--portfolio-color);
	text-shadow: .5px .5px .5px var(--pShade);
	font-size: 20px;
	font-weight:bold;
}
.portfolioRed{
  color: rgb(255, 9, 9);
  text-shadow: .5px .5px .5px var(--pShade);
  font-size: 20px;
  font-weight:bold;
}
.portfolioDiamond{
	color:var(--portfolio-color);
	text-shadow: 1px 1px black, 2px 2px white;
	font-size: 24px;
	font-weight:bold;
}
.greenWithShadow{
	color:green;
	text-shadow: 2px 2px 3px gold;
}
.goldWithShadow{
	color:gold;
	text-shadow: 2px 2px 3px green;
}
.blackWithShadow{
	color: var(--text-color);
	text-shadow: 2px 2px 3px gray;
}
.resp-table {
	width: 100%;
	display: table;
}         
.resp-table-header{
  display: table-header-group;
}         
.table-header-cell{
  display: table-cell;
  padding: 5px;
  text-align:center;
  background-color: green;
  background-image: linear-gradient(-45deg, #6eaa2e, #6eaa2e, green);
  color:var(--bkg-color);
  font-weight: bold;
  font-size: 12px;
  border: 1px solid var(--text-color);
  border-radius: 5px;
}         
.resp-table-body{
  display: table-row-group;
}         
.resp-table-row{
  display: table-row;
  text-align:center;
}         
.table-body-cell{
  display: table-cell;
  border: 1px solid var(--text-color);
  border-radius: 5px;
  vertical-align: middle;
}         
.resp-table-caption{
  display: table-caption;
  font-size: 12px;
  font-weight: bold;
  text-align:left;
}         
.parent { 
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
}        
.odd {   
  color:var(--text-color); 
  background-color:var(--odd-start-color);
  background-image: linear-gradient(-45deg, var(--odd-start-color), var(--odd-end-color));
}         
.even {  
  color:var(--text-color); 
  background-color:var(--even-start-color);
  background-image: linear-gradient(-45deg, var(--even-start-color), var(--even-end-color));
}   
.percent{
  font-size:.8em;
  padding:3px;
  text-align:right;
  color:var(--text-color);
  font-weight:bold;
}	
.badgeBoost {
  color:gold;
  font-weight:bold;
  text-shadow: 1px 1px 1px green;
}        
* {
  box-sizing: border-box;
}
/* Container for flexboxes */
.column2 {
  display: flex;
}

/* Container for flexboxes */
.column3 {
  display: flex;
}

/* Create four equal columns */
.column1 {
  max-width: 340px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.lowerTable{
	max-width:515px;
}
.footer{
	width: 90%;
	text-align:center;
	font-size:.8em;
}
#instructions{
	font-size:.8em;
}
.chart-container{
	position:relative;
	height:70px;
	width:70px;
	margin:auto;
}

.noborder > td,tr {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	text-align:center;
	color:var(--text-color); 
}

.noborder {
	border-collapse: collapse;
	border: 0;
	padding: 0;
	text-align:center;
	color:var(--text-color); 
}

.noborderBadge {
  border-collapse: collapse;
  border: 0;
  padding: 0;
  text-align:center;
}

.embeddedFrame{
  width:90%;
  height: 500px;
}

.fullTable{
  width:70%;
}

.embeddedXLS{
  width: 600px;
  height: 650px;
}

/* On screens that are 1446px wide or less, go from four columns to two columns */
@media screen and (max-width: 1446px) {
  .column3 {
    display: none;
    visibility: hidden;
  }
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column1 {
	max-width: 340px;
    flex: 50%;
	padding-bottom: 10px;
  }
  .column3 {
    display: none;
    visibility: hidden;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column2 {
    flex-direction: column;
  }
  .column3 {
    display: none;
    visibility: hidden;
  }
  .fullTable{
    width:100%;
  }

  .embeddedXLS{
    width: 95%;
    height: 650px;
  }
} 

.common {
  background-color: #76FF03;
  color: black;
}
.rare{
  background-color: #40C4FF;
  color: black;
}
.epic {
  background-color: #E040FB;
  color: black;
}
.legendary{
  background-color: #FFA726;
  color: black;
}

.circle {
  border-radius: 50%;
  padding: 10px;
  background: black;
  border: 3px solid #000;
  color: #000;
  text-align: center;
  font: 32px Arial, sans-serif;
}

.checkmark {
  position: relative;
  right: 52px;
  top:-5px;
  z-index:1;
  display: inline-block;
  width: 22px;
  height: 22px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

#powerTable{
  margin-top: 7px;
}

#statsTable{
  margin-top: 7px;
}

.checkmark_stem {
  position: absolute;
  width: 8px;
  height: 45px;
  background-color: #00ff00;
  left: 15px;
  top: -12px;
}

.checkmark_kick {
  position: absolute;
  width: 15px;
  height: 8px;
  background-color: #00ff00;
  left: 2px;
  top: 25px;
}

.cellpadding {
  padding:5px;
}