/************************************/
/**** -------------------------- ****/
/**** DATA VISUALISATION STYLING ****/
/**** -------------------------- ****/
/************************************/


/***********************************/
/***** EMISSIONS BUBBLE CHART  *****/
/***********************************/

	svg#bubbleChart .sectorLabel{
		font-size: 40px;
		text-anchor: middle;
		transition: all 200ms;
	}
	svg#bubbleChart .sectorLabel:hover{
		opacity: 0;
		pointer-events: none;
	}
	svg#bubbleChart .xAxisItemLabels{	
		font-size: 20px;
	}
	svg#bubbleChart .yAxisItemLabels{	
		font-size: 15px;
	}
	svg#bubbleChart .x-axis path.domain{
		stroke: none;
	}
	svg#bubbleChart .sector-key-element > text{
		font-weight: bold;
		text-anchor: middle;
		font-size: 18px;
		fill: #fff;
	}
  	div.bubbleChart-tooltip { 
		position: absolute;  
		color: #FFF;  
		background: #000;  
		background-opacity: 0.8;  
		width: 25rem;          
		padding: 0.5rem 0.5rem;   
		border: 0px;    
		border-radius: 8px;     
		pointer-events: none; 
		z-index: 999; 
  	}
  	div.bubbleChart-tooltip > #bubbleChart-tooltip-header{ 
      	text-align: center;
  	}
  	div.bubbleChart-tooltip > #bubbleChart-tooltip-classification{   	
      	font-size: 1rem;   
      	padding: 0rem 0.5rem;
      	font-style: italic;
      	text-align: center;      	
  	}
  	div.bubbleChart-tooltip > #bubbleChart-tooltip-emissions{ 	
        color: #CDDC39;
      	font-size: 1.25rem;  
      	font-weight: bold; 
      	padding: 0rem 0.5rem;
      	font-style: italic;
      	text-align: center;           	
  	}
	div.bubbleChart-tooltip> #bubbleChart-tooltip-description{ 
		padding-top: 0.5rem;
      	font-size: 0.75rem;  	
	}

	/* Theme styling */
	.comic svg#bubbleChart .xAxisItemLabels,
	.comic svg#bubbleChart .sectorLabel{
		font-family: 'BadaBoom BB';
		fill: #fff;
		text-shadow: 3px 3px 3px #000;		
	}	
  	.comic div.bubbleChart-tooltip #bubbleChart-tooltip-header{
       font-family: 'BadaBoom BB' ;
       font-size: 1.5rem;
       padding-bottom: 0.25rem
  	}

/***********************************/
/***** EMISSIONS SANKEY CHART  *****/
/***********************************/

	#sankeyChart-container #sankeyChart, #sankeyChart-container #sankeyCanvas  {
	  	position: absolute;
	}
	svg#sankeyChart .node rect {
	  	cursor: move;
	  	fill-opacity: .9;
	  	shape-rendering: crispEdges;
	}
	svg#sankeyChart .node text {
		font-size: 0.75rem;
	  	pointer-events: none;
	  	text-shadow: 0 1px 0 #000;
	  	fill: #fff;
	}
	svg#sankeyChart .node text.activity {
		font-size: 0.5rem;
	}
	svg#sankeyChart .link {
	  fill: none;
	  stroke: #fff;
	  stroke-opacity: .2;
	}
	svg#sankeyChart .link:hover {
	  stroke-opacity: .5;
	}
	svg#sankeyChart  .vis-container{
		position: relative;
		height: 90vh;
	}
	svg#sankeyChart .annotationLabel{
		font-size: 2.5vw;
		text-anchor:  middle;
		fill: rgba(255,255,255,0.6);
	}
	svg#sankeyChart .title{
		font-size:  3vw;
	}
	svg#sankeyChart  #switchButton{
		cursor: pointer;
	}
	svg#sankeyChart .annotation{
		font-size: 0.75vw;
		fill: #fff;
	}

	/* Theme styling */
	.comic svg#sankeyChart .annotationGroup{
		mix-blend-mode: difference;
	}
	.comic svg#sankeyChart .annotationLabel{
		font-family: 'BadaBoom BB';
		fill: #fff;
	  	text-shadow: 0 1px 0 #000;
		font-size: 1.25rem;
	}
	.comic svg#sankeyChart .annotation{
	    font-family: 'DigitalStrip';
		fill: #fff;
		transform: translateX(9vw);
	}

/***********************************/
/****  HEPBURN MAP VISUALISATION ***/
/***********************************/

	svg#mapVis path.ward{
		stroke: #fff;
		stroke-width: 1px;
		fill: url(#radialGradient-1);
		transition: all  1s;
		cursor: pointer;
		filter: url(#glow);
		transform-origin: 50% 50%;
	}
	svg#mapVis #mapVis-base{
		transition: all  1s;
	}	
	svg#mapVis  #mapVis-base.isometric{
		transform: rotateX(60deg) rotateZ(45deg);
		transform-origin: 50% 50%
	}
	svg#mapVis .mapVis-wardGroup{
		pointer-events: none
	}
	svg#mapVis .mapVis-wardTitle{
		text-anchor: middle;
		font-size: 30px;		
	}
	svg#mapVis .mapVis-wardTotal{
		text-anchor: middle;
		font-size: 15px;		
	}
	svg#mapVis .mapVis-keyHeader{
		fill: #fff;		
		font-size: 15px;	
		font-weight: normal;
	}
	svg#mapVis .mapVis-keyLabel{
		fill: #fff;
		text-shadow: 1px 1px 0 #000;	
		text-anchor: middle;
		font-size: 11px;	
		font-weight: bold;	
	}
	svg#mapVis .mapVis-barSectorEmissions{
		pointer-events: none;		
	}
	svg#mapVis .mapVis-barEmissionsPct{
		text-anchor: middle;
		fill: #fff;
	  	text-shadow: 1px 1px 0 #000;		
		font-size: 10px;	
		font-weight: bold;
		pointer-events: none;			
	}
	svg#mapVis .mapVis-shirePctLabel{
		text-anchor: middle;
	  	text-shadow: 2px 2px 0 #fff;			
		font-size: 20px;	
		font-weight: bold;	
	}
	svg#mapVis .mapVis-divider{
		stroke: rgba(255, 255, 255, 0.8);
		stroke-width: 0.75px;
	}
	svg#mapVis .mapVis-shireMap{
		fill: rgba(255, 255, 255, 0.75);
    	filter: url(#shadow);	
	}
	svg#mapVis .mapVis-shireGroup-label-1,
	svg#mapVis .mapVis-shireGroup-label-3{
		fill: #fff;		
		font-size: 12.5px;
	}
	svg#mapVis .mapVis-shireGroup-label-2{
		fill: #fff;
		font-size: 25px;
	}
	svg#mapVis .map-turbines .turbine-stem{
		fill: #fff;
		stroke: #000;
		stroke-width: 0.25;
	}
	svg#mapVis .map-turbines .turbine-blades{
		fill: #fff;
		stroke: #000;
		stroke-width: 0.25;
	}	

  	div.mapVis-tooltip { 
		position: absolute;  
		color: #FFF;  
		background: #000;  
		background-opacity: 0.8;  
		width: 15rem;          
		padding: 0.5rem 0.5rem;   
		border: 0px;    
		border-radius: 8px;     
		pointer-events: none; 
		z-index: 999; 
  	}
	div.mapVis-tooltip> #mapVis-tooltip-info{ 
		padding-top: 0.5rem;
      	font-size: 0.75rem;  	
	}

	/* Theme styling */
	.comic svg#mapVis .mapVis-wardTitle,
	.comic svg#mapVis .mapVis-shireGroup-label-2{
		text-anchor: middle;
		font-family: 'BadaBoom BB';
		fill: #fff;
	  	text-shadow: 3px 3px 2px #000;			
		font-size: 30px;		
	}
	.comic svg#mapVis .mapVis-shireGroup-label-2{
		text-anchor: start;		
	}
	.comic svg#mapVis .mapVis-wardTotal{
		font-family: 'DigitalStrip';	
		font-size: 13px;			
	  	text-shadow: 2px 2px 0 #fff;				
	}
	.comic svg#mapVis .mapVis-shirePctLabel{
		font-family: 'BadaBoom BB';		
		font-size: 25px;	
	}	
  	.comic div.mapVis-tooltip #mapVis-tooltip-headline{
       font-family: 'BadaBoom BB' ;
       font-size: 1.25rem;
       padding-bottom: 0.25rem;
       text-align: center;       
  	}

	/* WIND TUBINES > adapted from Sherri Alexanders pen > https://codepen.io/SherriAlexander/pen/XZBwJN */
	#mapVis-turbine-group{
		cursor: pointer;
	}
	#mapVis-turbine-group .wind-turbine {
		position: relative;
		display: inline-block;
		vertical-align: bottom;
		width: 50px;
		height: 100px;
		margin: 0 10px;
	}
	#mapVis-turbine-group .wind-turbine:before {
		content: "";
		display: block;
		background-color: white;
		background: linear-gradient(to right, #fff 0%, #fff 50%, #666 100%);
		width: 10%;
		position: absolute;
		bottom: 0;
		top: 29%;
		left: 57%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 1;
	}
	#mapVis-turbine-group .turbine-details:before, .turbine-details:after {
		display: block;
		content: "";
		position: absolute;
	}
	#mapVis-turbine-group .turbine-details:after {
		width: 11%;
		padding-top: 8%;
		background: radial-gradient(circle at 25% 25%, #fff 0%, #fff 20%, #666 100%);
		border-radius: 50%;
		left: 50%;
		top: 27.5%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		z-index: 4;
	}
	#mapVis-turbine-group .turbine-details:before {
		width: 17%;
		padding-top: 12%;
		background-color: pink;
		background: linear-gradient(to bottom right, #fff 0%, #666 100%);
		top: 26%;
		left: 48%;
		z-index: 2;
		border-radius: 15% 40% 30% 30%;
		-webkit-transform: skew(-15deg, -14deg);
		transform: skew(-15deg, -14deg);
	}
	#mapVis-turbine-group .turbine {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 87.8088962108731%;
		overflow: hidden;
		z-index: 3;
		-webkit-transform-origin: 50% 67.0454545454545%;
		transform-origin: 50% 67.0454545454545%;
		-webkit-animation: 3s infinite rotate linear;
		animation: 3s infinite rotate linear;
	}
	#mapVis-turbine-group .turbine svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	/* Positioning each turbine */
	#mapVis-turbine-group #gusto{
		-webkit-transform: scale(1) rotateY(-45deg) translateX(50%);
		transform: scale(1) rotateY(-45deg) translateX(50%);
	}
	#mapVis-turbine-group #gusto .turbine{
		-webkit-animation-duration: 3s;
		animation-duration: 3s;
	}	

	#mapVis-turbine-group #gale{
		-webkit-transform: scale(0.8) rotateY(-45deg) translateX(250%);
		transform: scale(0.8) scale(0.8) rotateY(-45deg) translateX(250%);
	}
	#mapVis-turbine-group #gale .turbine{
		-webkit-animation-duration: 2.5s;
		animation-duration: 2.5s;
	}
		@-webkit-keyframes rotate {
		  	from {
		    	-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		  	}
		  	to {
		    	-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
		  	}
		}
		@keyframes rotate {
		  	from {
		    	-webkit-transform: rotate(0deg);
		        transform: rotate(0deg);
		  	}
		  	to {
		    	-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
		  	}
		}

/***********************************/
/*****  ABATEMENT COST CURVE  ******/
/***********************************/

    /* STUFF BEING USED IN CRISP SKETCH */
    svg#costCurve{
    	transition: all 800ms;
    }
    svg#costCurve .block{
      	stroke: #FFF;
      	stroke-width: 0.5px; 
      	cursor: pointer;
      	opacity: 0.7;  
    }
    svg#costCurve .block:hover{
      	opacity: 1;
    }
	svg#costCurve .block.blockFocus{
		fill: #fff;
		opacity: 1;
	}
    svg#costCurve #costCurveMetrics-group{
	    fill: #000;
    }
    svg#costCurve #costCurveMetrics-group #ccMetrics-header.costCurve-metrics{
	    font-size: 18px
    }
    svg#costCurve #costCurveMetrics-group .costCurve-metrics{
	    font-size: 12px
    }
	svg#costCurve #legend-header{
		fill: #000;
	    font-size: 18px
    }
	svg#costCurve .label.legend{
      	font-size: 12px;   
    }
	svg#costCurve path.domain{
		stroke-width: 1px;
		fill: none;
	}
	svg#costCurve .y.axis path.domain{
		stroke: none;
		fill: none;
	}	
    svg#costCurve .axis{
      fill: #231f20;
    }
    svg#costCurve .tick line{
    	stroke: none;
    }    
    svg#costCurve .tick > text{
      fill: #231f20;
      font-size: 0.5rem;
    }
	svg#costCurve .energyEfficiency{
		fill: #00d565;                    
    }
	svg#costCurve .emissionsReduction{
		fill: #00d565;                    
    }    
    svg#costCurve .renewableEnergyGeneration{
		fill: #d5008e;   
    }
    svg#costCurve .transport{
		fill: #03a9f4;   
    }
    svg#costCurve .agriculture{
      	fill: #EFB605;   
    }
    svg#costCurve .carbonSequestration{
      	fill: #EFB605;   
    }
    svg#costCurve .fuelSwitching{
		fill: #00F9FF;   
    }
    svg#costCurve .waste{
		fill: #f40;   
    }
    svg#costCurve #costCurveTargetLine{
      	stroke: red;
      	stroke-dasharray: 5px 5px;
      	stroke-width: 1px;   
    }
    svg#costCurve .costCurveTargetText{
    	fill: red;
    	font-size: 12px;
    }
    svg#costCurve #costCurveAbatementLine{
      	stroke: blue;
      	stroke-dasharray: 5px 5px;
      	stroke-width: 1px;   
    }
    svg#costCurve .costCurveAbatementText{
    	fill: blue;
    	font-size: 12px;
    }
	svg#costCurve .label{
		font-size: 16px;
		fill: #231f20;
	}
	svg#costCurve .subLabel{		
		font-size: 12px;
		fill: #231f20;
	}

	/* CRAZY INTRO PERSPECTIVE VIEW */
	svg#costCurve.perspective{
		transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) scale(2.5) translateX(20%);	
	}
	svg#costCurve.perspective .energyEfficiency{
		fill: #00d565;                    
    }
    svg#costCurve.perspective .renewableEnergyGeneration{
		fill: #d5008e;   
    }
    svg#costCurve.perspective .fuelSwitching{
		fill: #d5d500;   
    }
    svg#costCurve.perspective .agriculture{
      	fill: #bf5a15;   
    }
    svg#costCurve.perspective .carbonSequestration{
      	fill: #EFB605;   
    }
	
	svg#costCurve  .offsetLine{
	    stroke: #52be36;
	    stroke-width: 1.5px;
	    stroke-dasharray: 5 5;
	}
	svg#costCurve .targetLine{
	    stroke: #52be36;
	    stroke-width: 1.5px;
	    stroke-dasharray: 5 5;
	}
  	div.costCurve-tooltip { 
		position: absolute;  
		color: #FFF;  
		background: #000;  
		background-opacity: 0.8;  
		width: 25rem;          
		padding: 0.5rem 0.5rem;   
		border: 0px;    
		border-radius: 8px;     
		pointer-events: none; 
		z-index: 999; 
		display: grid;   
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: calc(25%) repeat(2, 1fr) calc(10%);
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-header{
         grid-area: 1 / 1 / 1 / 5;     
         text-align: center; 	 
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-uptakeHeader{
         grid-area: 2 / 1 / 2 / 1;      	
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-uptake{
         grid-area: 3 / 1 / 3 / 1;      	   
  	}  	
  	div.costCurve-tooltip > #costCurve-tooltip-uptakeHeader,
  	div.costCurve-tooltip > #costCurve-tooltip-uptake{
      	color: #52be36;
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-contributionHeader{
        grid-area: 2 / 2 / 2 / 2;      	 
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-contribution{
        grid-area: 3 / 2 / 3 / 2;      	
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-abatement{
        grid-area: 3 / 3 / 3 / 3;      	  
  	}  	
  	div.costCurve-tooltip > #costCurve-tooltip-abatementHeader{
        grid-area: 2 / 3 / 2 / 3;      	   
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-abatement,
  	div.costCurve-tooltip > #costCurve-tooltip-abatementHeader{
      	color: #b5dc17;
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-abatementCostHeader{
         grid-area: 2 / 4 / 2 / 4;      	   
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-abatementCost{
         grid-area: 3 / 4 / 3 / 4;      	 
  	}
  	div.costCurve-tooltip > #costCurve-tooltip-instruction{
        grid-area: 4 / 1 / 4 / 5;      	
      	font-size: 0.75rem;    
      	font-style: italic;
      	text-align: center;
      	justify-self: center; 
  	}
  	div.costCurve-tooltip > .tooltipLabel{   	
      	font-size: 0.75rem;   
      	padding: 0rem 0.5rem;
      	align-self: center;
      	justify-self: end; 
      	font-style: italic;
  	}
  	div.costCurve-tooltip > .tooltipNumber{   	
      	font-size: 1rem;  
      	font-weight: bold;
      	padding: 0rem 0.5rem; 
      	line-height: 1;	  
  	}
	div.costCurve-tooltip > .tooltipNumber .tooltipUnit{
      	font-size: 0.75rem;  	
	}

	/* Theme styleing */
  	.comic div.costCurve-tooltip #costCurve-tooltip-header{
       font-family: 'BadaBoom BB' ;
       font-size: 1.75rem;
       padding-bottom: 0.75rem
  	}
  	.dark div.costCurve-tooltip #costCurve-tooltip-header{
       font-weight: bold;
       font-size: 1.25rem;
       padding-bottom: 0.75rem
	  }
	  .dark .simplePlanAnnotation{
	      font-size: 0.8rem;
	  }

/***********************************/
/***** ABATEMENT WEDGES CHART ******/
/***********************************/

	svg#wedgesChart{
    	transition: all 800ms;	
	}
	svg#wedgesChart.perspective{
		transform: rotateX(45deg) rotateY(0deg) rotateZ(35deg) scale(3) translateX(30%) translateY(20%);
	}
	svg#wedgesChart  .y.axis path.domain,
	svg#wedgesChart  .tick line{
		stroke: none;
	}
	svg#wedgesChart  .x.axis path.domain{
		stroke: #fff;
	}	
    svg#wedgesChart .tick > text{
      fill: #fff;
      font-size: 0.5rem;
    }
	svg#wedgesChart .line{
		fill: none;
		stroke-width: 1px;
	}
	svg#wedgesChart .referenceWorld,
	svg#wedgesChart .actionWorld{
		filter: url(#glow);
		stroke-width: 3px;		
	}
	svg#wedgesChart .referenceWorld{
		stroke: #ffcc66;		
	}
	svg#wedgesChart #referenceEmissionsPathMarker{
		fill: #ffcc66;
		r: 7.5;					
	}	
	svg#wedgesChart .actionWorld{
		stroke: #fff;	
	}	
	svg#wedgesChart #actionEmissionsPathMarker{
		fill: #fff;
		r: 7.5;			
	}
	svg#wedgesChart #baselineEmissionsMarker{
		fill: aqua;		
		r: 12.5;	
	}
	svg#wedgesChart #targetEmissionsMarkerInner{
		fill: #C6ED2C;		
		r: 3;		
	}
	svg#wedgesChart #targetEmissionsMarkerOuter{
		fill: none;
		stroke-width: 3px;
		stroke: #C6ED2C;
		r: 8;
	}
	svg#wedgesChart #baselineEmissionsLabel,
	svg#wedgesChart #referenceEmissionsLabel,
	svg#wedgesChart #targetEmissionsLabel,
	svg#wedgesChart #netEmissionsLabel{
		font-weight: bold;
		filter: url(#glow);	
	}
	svg#wedgesChart #referenceEmissionsLabel{
		fill: #ffcc66;
	}
	svg#wedgesChart #netEmissionsLabel{
		fill: #fff;	
	}
	svg#wedgesChart #baselineEmissionsLabel{
		fill: aqua;	
		text-anchor: middle;
	}
	svg#wedgesChart #targetEmissionsLabel{
		fill: #C6ED2C;	
	}
    svg#wedgesChart #netTotalsWedge {
      	fill: blue;
      	opacity: 0.7;
    }
    svg#wedgesChart #grossOffsetWedge {
      	fill: aqua;
    }
    svg#wedgesChart #grossTotalWedge {
      	fill: #FE019A;
    }
    svg#wedgesChart #referenceCaseWedge {
      	fill: #b5dc17;     
    }
	svg#wedgesChart .wedgeLabel{
		font-size: 50px;
		mix-blend-mode: multiply;
		text-shadow: 5px 5px 0px #000;		
	}
	svg#wedgesChart .wedgeSubLabel{
		font-size: 20px;
		mix-blend-mode: multiply;
	}
	svg#wedgesChart #offsetsLabel{
		font-size: 40px;
		text-anchor: middle;		
		fill: aqua;
	}
	svg#wedgesChart #grossWedgeLabel{
		text-anchor: middle;		
		fill: #FE019A;
	}
	svg#wedgesChart #netTotalsWedgeLabel{
		font-size: 50px;
		text-anchor: middle;		
		fill: #FFF;		
		mix-blend-mode: normal;
	}
	svg#wedgesChart #impactWedgeLabel{
		font-size: 30px;		
		text-anchor: end;	
		fill: #FFF;	
		mix-blend-mode: normal;				
	}
	svg#wedgesChart .sectorWedgeLabel{
		fill: #fff;
		font-size: 20px;
		text-shadow: 3px 3px 0px #000;
		text-anchor: middle;	
	}
	svg#wedgesChart .label.wedgesChart{
		fill: #fff;
		font-size: 20px;
	}
	svg#wedgesChart .subLabel.wedgesChart{	
		fill: #fff;
		font-size: 10px;
	}
	/* Theme styeing */
	.comic svg#wedgesChart .wedgeLabel, .sectorWedgeLabel{
		font-family: 'BadaBoom BB'
	}
	.comic  svg#wedgesChart .wedgeSubLabel{
		font-family: 'DigitalStrip';
	}


/***********************************/
/*******  PLAYBOOK FLOWCHART  ******/
/***********************************/

	.simplePlanAnnotation{
		fill: #fff;
	}
  	div.playbook-tooltip { 
		position: absolute;  
		color: #000;  
		background: #FFF;  
		background-opacity: 0.8;  
		width: 15rem;          
		padding: 0.5rem 0.5rem;   
		border: 0px;    
		border-radius: 8px;     
		pointer-events: none; 
		z-index: 999; 
		padding-top: 0.5rem;
      	font-size: 0.75rem;  	
  	}
	#pb_planAnnotation,
	.pb_connector{
		pointer-events: none;
	}
	.pb_modelledAction, 
	.pb_actionType{
		cursor: pointer;
		pointer-events: bounding-box
	}