body{animation: fadein 2s; }
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
/* TABS hidden by default */

.tabcontent{display:none}

/* collapsible content. hidden by default */

.coll1-content {
  padding: 0 18px;
  background-color: white; 
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.coll2-content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden; 
  transition: max-height 0.2s ease-out;
}
 
 /* HEADER */
 
.usernamedisplay { font-size:0.95rem}

/* COMMON */

.maintitle {
font-size:1.4rem; /* initial 1.85rem; */
text-align:center; 
color: #999999; 
font-weight:normal;} 

hr {width:80%; max-width:1200px; }

/* big horizontal bars ; also used to open and close the collapsible content */
.engiegradient { 
font-size:1.7rem; /* initial 2.25rem; */
text-decoration:none;
text-align:center;
width:100%;
display:block;
background: linear-gradient(135deg,#0af,#23d2b5);
padding: 18px;
width: 100%;
border: none;
color:white;
outline: none;
}

a.engiegradient:hover {text-decoration:none; color:white;
background: linear-gradient(135deg,#2bf,#43e2c5) ;
}

/* FIRST PAGE : INTRO */

table.itemtable {
font-size:1.05rem; /* initial 1.4rem; */
width:52%;margin:auto;
text-align:left;
max-width:1000px; }

.itemtable td {padding: 15px 15px}

.mainbutton{ 
font-size: 1.4rem; /* initial 1.75rem; */ 
color:rgb(0, 157, 233) ; 
border: 2px solid #CCCCCC;
border-radius: 15px; 
padding:8px 66px;  }

.mainbutton:hover{ color:white ; background: linear-gradient(135deg,#0af,#23d2b5); border: 2px solid white ; }

table.imagestable {width:60%;margin:auto;text-align:center;max-width:1200px;}
.imagestable td {padding: 4px 16px; font-weight:bold}
.imagestable img {border-radius: 15px;}

/* SECOND PAGE: RULES & GAMES */

.biglist {
font-size:1.05rem; /* initial 1.4rem; */
text-align:center; }

table.playtable {
font-size:0.9rem; /* initial 1rem; */ 
width:80%; 
max-width:1200px; 
margin:auto;
padding:4px;}
.playtable tr {border-width: 0px 0px 1px 0px;border-style:solid;border-color:#CFCFCF;}
.playtable tr.playtableheader {border-width: 3px 0px 3px 0px;}
.playtable td {padding:20px 8px;}

table.tagtable {
font-size:0.9rem; /* initial 1rem; */ 
width:80%; 
max-width:1200px; 
margin:auto;
text-align:center;}

.tagtable td {padding:10px;text-align:center;}

.footnote{font-size:0.9rem ; color: #999}

/* TAGS (levers) */

.tag{color:white;border-radius:10px;padding:2px 15px 5px;width:191px; margin:auto; text-align:center;}
a.tag, .tagtable span.tag, .playtable span.tag { display:block; }
span.tag{}

.tag-yellow{background-color: rgb(255,186,6);}
.tag-green{background-color:rgb(35,172,12);}
.tag-red{background-color:rgb(252,95,95);}
.tag-pink{background-color:rgb(255,149,219);}
.tag-blue{background-color:#009de9;}
a.tag:hover{color:white;text-decoration:none;opacity:0.75;transition: opacity 0.2s ease-out;}




/* SELECTORS */
.nj-slider input {min-width:60px;}

/* .nj-slider input[type='range']{background-color:red ; color: green ; } */

/*.nj-slider input[type=range]::-webkit-slider-runnable-track {background:green }

.nj-slider input[type=range]::-webkit-slider-runnable-thumb {background:green }
*/


.nj-tooltip .nj-tooltip__inner{ background-color:transparent; color:black ;padding:0px;margin-bottom:-10px}
.nj-tooltip .nj-tooltip__arrow{height:0px; display:none}
.nj-tooltip .nj-tooltip--top{padding:0px}
/* override fluid design system: center vertically and horizontally and remove space for select labels */
/*
.nj-form-group {padding-top:0px;margin-bottom:0px;}

select.selectinv{ padding-left:15px;}
select.selectyear{ padding-left:4px;}
*/



/* TOOLTIPS */
/* Tooltip container */
.tooltip {
  position: relative;
   display: inline-block;
  /*border-bottom: 1px dotted black;   */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 520px; /*210*/
 /* background-color: #0AF;*/
  color: #FFF;
  text-align: left;font-size:0.82em;
  padding: 10px;
  border-radius: 6px;
/* border:1px solid #333; */
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -120px; /*-105*/

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltip .tooltiptext ul {margin-left:-24px;margin-bottom:0px;}

.tooltip .tooltiptext table { border-spacing : 0;border-collapse : collapse;}
.tooltip .tooltiptext table tr td { padding:0 ; }


/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 25%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-right-color:transparent;
  border-left-color:transparent;
  border-bottom-color:transparent;


}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}



.tooltip-yellow .tooltiptext {background-color: rgb(204,149,5);}
.tooltip-green .tooltiptext {background-color:rgb(28,138,10);}
.tooltip-pink .tooltiptext {background-color:rgb(204,119,175);}
.tooltip-blue .tooltiptext {background-color:rgb(0,127,186);}
.tooltip-yellow .tooltiptext::after {border-top-color:rgb(204,149,5);}
.tooltip-green .tooltiptext::after {border-top-color:rgb(28,138,10);}
.tooltip-pink .tooltiptext::after {border-top-color:rgb(204,119,175);}
.tooltip-blue .tooltiptext::after {border-top-color:rgb(0,127,186);}


/*
.tooltip-yellow .tooltiptext::after {border-top-color:rgb(255,186,6);}
.tooltip-green .tooltiptext::after {border-top-color:rgb(35,172,12);}
.tooltip-pink .tooltiptext::after {border-top-color:rgb(255,149,219);}
.tooltip-blue .tooltiptext::after {border-top-color:rgb(0,157,233);}
*/
/* HIGHCHARTS */

.highcharts-figure, .highcharts-data-table table {
  min-width: 320px; 
  max-width: 800px;
  margin: 1em auto;width:80%
}

#budget-container {
  height: 200px; 
}
#carbon-container {
 /* height: 460px; */
}
.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}

.highcharts-credits{display:none}