div.tooltip {
    position: absolute;
    text-align: center;
    padding: 5px;
    background: lightyellow;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
	overflow: visible;
	white-space: nowrap;
}

#tavg-chart-frame {
	margin-bottom: 10px;
}
.tooltip table {
	margin: 0;
}

.tooltip td {
	padding-right: 0.5em;
	padding-left: 0.5em;
}

#modal-more-detail {
	overflow: visible;
}

.carbon-chart .attribution {
	display:none;
}

div.chart-button {
  padding: 2px;
  width: 20px;
  position: relative;
  margin-top: -24px;
  height: 20px;
  border: 1px solid lightbrown;
  background-color: lightyellow;
}

.table-caption {
  font-size: 80%;
}

.chart {
    font-family: Helvetica, sans-serif;
    font-weight: 400;
}

.chart .grid {
    stroke-dasharray: 3,3;
    stroke-width: 0.25;
    stroke: #333;
}

.chart .annual-line {
    stroke-width: 1px;
    stroke: steelblue;
    fill: none;
}

.chart .decade-line {
    stroke-width: 2px;
    stroke: red;
    fill: none;
}

.chart .annual-dots {
    stroke: none;
    fill: black;
}

.chart .ssp119-line {
    stroke-width: 2px;
    stroke: lightgreen;
    fill: none;
}

.chart .ssp126-line {
    stroke-width: 2px;
    stroke: green;
    fill: none;
}

.chart .ssp126-region {
    fill: green;
    fill-opacity: 0.1;
}

.chart .ssp245-line {
    stroke-width: 3px;
    stroke: orange;
    fill: none;
}

.chart .ssp245-region {
    fill: orange;
    fill-opacity: 0.1;
}

.chart .ssp370-line {
    stroke-width: 2px;
    stroke: darkred;
    fill: none;
}

.chart .ssp370-region {
    fill: darkred;
    fill-opacity: 0.15;
}

.chart .global-carbon-line {
    stroke-width: 2px;
    stroke: gray;
    fill: none;
}

.chart .carbon-trend-line {
    stroke-width: 2px;
    stroke: blue;
    fill: none;
}

.chart .carbon-trend-ext {
    stroke-width: 2px;
    stroke: blue;
    fill: none;
    stroke-dasharray: 10,10;
}

.chart .carbon-nz-2080 {
    stroke-width: 2px;
    stroke: orange;
    fill: none;
//    stroke-dasharray: 15,15;
}

.chart .carbon-nz-2050 {
    stroke-width: 2px;
    stroke: green;
    fill: none;
//    stroke-dasharray: 15,15;
}

.chart .nz-arrow-50 {
	fill: green;
}

.chart .nz-arrow-80 {
	fill: orange;
}

.chart .ssp-history-line {
    stroke-width: 2px;
    stroke: brown;
    fill: none;
    stroke-dasharray: 15,15;
}

.chart .legend .ssp-history-line {
    stroke-dasharray: 10, 10;
}

.chart .tick text {
    font-size: 16px;
}

.chart svg {
    background: #F0F0F0;
}

.chart .background {
    fill: #F0F0F0;
    stroke: none;
}

.chart .panel {
    fill: #fff;
    stroke: none;
}

.chart .label {
    font-size: 18px;
    text-anchor: middle;
}

.chart .title {
    font-size: 45px;
    text-anchor: left;
}

.chart .carbon-title {
    font-size: 16px;
    text-anchor: left;
}

.chart .attribution, .chart .comment {
    font-size: 12px;
    fill: #555;
}

.chart .uncertainty {
    fill: #ddd;
    stroke: none;
}

.chart .legend {
    fill: #fff;
    stroke: none;
}

.chart .summary {
    fill: #fff;
    stroke: none;
	fill-opacity: 0.5;
}

.chart text.legend {
    fill: #000;
    font-size: 12px;
    alignment-baseline: central;
}

.chart tspan.normal-summary {
    fill: black;
    font-size: 20px;
    alignment-baseline: central;
	fill-opacity: 1;
}

.chart tspan.modern-summary {
    fill: red;
    font-size: 35px;
    alignment-baseline: central;
	fill-opacity: 1;
}

.chart tspan.future-summary {
    fill: orange;
    font-size: 35px;
    alignment-baseline: central;
	fill-opacity: 1;
}

.chart text.legend-title {
    fill: #000;
    font-size: 18px;
    alignment-baseline: central;
}

.chart .legend .annual-line {
    stroke-width: 1px;
}


.small-chart text.legend-title {
    fill: #000;
    font-size: 12px;
    alignment-baseline: central;
}

.small-chart .legend .annual-line {
    stroke-width: 1px;
}

.small-chart text.legend {
    fill: #000;
    font-size: 10px;
    alignment-baseline: central;
}

.small-chart .annual-line {
    stroke-width: 0.75px;
}

.small-chart .decade-line {
    stroke-width: 1.5px;
}

.small-chart .ssp119-line {
    stroke-width: 1.5px;
}

.small-chart .ssp126-line {
    stroke-width: 1.5px;
}

.small-chart .ssp245-line {
    stroke-width: 2px;
}

.small-chart .ssp370-line {
    stroke-width: 1.5px;
}

.small-chart .ssp-history-line {
    stroke-width: 1.5px;
    stroke-dasharray: 7,7;
}

.small-chart .tick text {
    font-size: 10px;
}

.small-chart svg {
    background: #FFF;
}

.small-chart .label {
    font-size: 12px;
    text-anchor: middle;
}

.small-chart tspan.normal-summary {
    fill: black;
    font-size: 20px;
    alignment-baseline: central;
	fill-opacity: 1;
}

.small-chart tspan.modern-summary {
    fill: red;
    font-size: 35px;
    alignment-baseline: central;
	fill-opacity: 1;
}

.small-chart tspan.future-summary {
    fill: red;
    font-size: 35px;
    alignment-baseline: central;
	fill-opacity: 1;
}

.small-chart .attribution { 
   font-size: 8px;
}

.small-chart .summary { 
	text-anchor: middle;
	fill-opacity: 0.6;
}

.small-chart .title {
	fill: #000;
	text-anchor: end;
	font-size: 18px;
	fill-opacity: 1;
}

.carbon-table th {
	text-align: left;
	padding: 2px;
	padding-left: 1em;
}

.carbon-table thead {
	font-size: 140%;
}
.carbon-table thead th {
	border-bottom-style: solid;
	border-bottom-color: black !important;
	border-bottom-width: 2px;
}

#block-takeaway-1-row-2 #country-future-prepend2 {
    color: orange;
	padding: 0 10px;
}
#block-takeaway-1-row-2 #country-future2 {
    color: orange;
	padding: 0;
}

#block-takeaway-1-row-2 .cell-1 {
	margin-top: 3em;
}

.carbon-table-caption {
	text-align: left;
	font-size: 12px;
}