inflation-explorer/shared/css/_chart.scss

.interactive-wrapper-outer {

	border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    padding-top: 20px;
    padding-bottom: 5px;

    max-width:1200px; 

    #graphicContainer {
    	position: relative;
    }

	.axis path,
	.axis line {
	  fill: none;
	  stroke: #767676;
	  shape-rendering: crispEdges;
	}

	.labelWrapper {
		font-weight: bold;
		font-size:14px;
		pointer-events: none;
	}

	select {
		max-width:150px;;
	}
	.controlBlock {
		display: inline-block;
		margin-bottom: 10px;
	}

	  #loadingContainer {
    	text-align: center;
    	width:auto;
        margin-left:5px;        
        border-radius: 16px;
        text-align: center;
        padding: 5px 10px;
        font-size: 16px;
        color:#FFFFFF;
        background-color: #bdbdbd;
        display: inline-block;
        position: absolute;
        left:49%;
        top:20%;
    }

	.figureTitle {
		font-size: 20px;
	    line-height: 28px;
	    font-weight: 600;
	    -webkit-font-smoothing: antialiased;
	    color: #333333;
	    font-family: "Guardian Headline Full", Georgia, serif;
	    margin-bottom: 10px;
	}

	#tooltipContainer {
		visibility: hidden;
		position: absolute;
		top:20px;
		left:60px;
		background-color:#FFF;
		border: solid 3px #000;
		max-width: 200px;
		font-size: 0.9em;
		color:#000;
		pointer-events: none;
		opacity: 0.8;
		.tooltipInner {
			padding: 5px;
		}
		#tooltipHeading {
			font-weight: bold;
			font-size: 1em;
		}

	}

	a {
		color:#ab0613;
		text-decoration: none !important;
		border-bottom: 0.0625em solid #dcdcdc;
		-webkit-transition: border-color 0.15s ease-out;
		transition: border-color 0.15s ease-out;
	}

	a:hover {
		border-color: #ab0613;
	}

	.subTitle {
		font-size: 16px;
	    line-height: 20px;
	    color: #333333;
	    font-family: "Guardian Egyptian Web", Georgia, serif;
	    margin-bottom: 15px;
	}

	.footer {
		margin-top:5px;
		font-size: 12px;
		line-height: 16px;
		color: rgb(118, 118, 118);
		font-family: 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	}

	.notes {
		font-family: 'Guardian Text Sans Web',Arial;
		font-size:16px;
		color:#767676;
	}

	.chartSans {
		font-size:12px;
		color:#767676;
		font-family:'Guardian Text Sans Web', 'Agate Sans', sans-serif;
	}


	.annotationBox {
		font-size: 14px;
		font-weight: bold;
	    color: #333333;
	    font-family: "Guardian Egyptian Web", Georgia, serif;
	}

	.tick text {
		font-size:12px;
		line-height:1em;
		font-family:'Guardian Text Sans Web', 'Agate Sans', sans-serif;
	}

	.keyText {
		font-size:0.8em;
		margin-left:5px;
	}

	#chartKey div {
		margin-right:10px;
	}

	#chartKey {
		margin-bottom: 10px;
	}
	// #chartKey div:first-child {
	// 	margin-left: 0px;
	// }

	.keyDiv {
		display: inline-block;
	}

	.keyDiv .keyCircle:first-of-type {
	    margin-left:0;
	}

	.keyCircle {
		width:12px;
		height:12px;
		border-radius: 50%;
		display: inline-block;
	}

	.annotationTextMobile {
		font-weight:bold;
	}

	#footerAnnotations {
		color:#000;
	}

	.periodLabel {
			fill: #cccccc;
			text-transform: uppercase;
			font-weight: bold;
	}

	.barPart:hover {
		opacity:0.7;
	} 

	.tooltip {
		font-size:16px;
		pointer-events: none;	
		border: 1px #000 solid;
		padding:2px 5px 2px 5px;
		color:#000;
	}

	.line {
		fill: none;
	}

	@media (max-width: 450px) {

		.mobHide {
		display: none;
		}

		

	}

}