.graph-section-wrapper{
	position: relative;
	}
.graph-wrapper{
	margin-top: 2.5em;
	padding-left: 120px;	
	margin-left: 40px;
	padding-bottom: 2.75em;
	margin-bottom: 1em;
	position: relative;
	}	


/* herd immunity */ 
.herd-wrapper{
	position: relative;
	margin: 0;
	padding: 1em 1em .75em 1em;
	display: flex;
	align-items: center;
	min-height: 2.5em;
	}
.herd-wrapper img{
	width: 2.5em;
	margin-right: .75em;
	margin-left: auto; 
	order: 2;
	}	
.herd-active{
	background-color: #C3EA7D;
	}
.herd-none{
	background-color: #E6DFEA;
	}

/* GRPH LINE PART original is 900 x 450 */ 	
.canvas-wrapper{
	width: 630px;
	height: 317px;	
	position: relative;
	}

.canvas-wrapper canvas{
	width: 630px;
	height: 315px;	
	outline: 3px solid #ccc;
	touch-action: none;
	cursor: pointer;
	}

.info-bar {
	border-left: dotted .15em #000;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events:none;
	}

/* key header */
.graph-header-wrapper{
	margin: 1.5em 0 2em 0;
	}
.graph-week-display{
	display: inline-block;
	font-weight: bold;
	}

/* key items */
.graph-key-wrapper{
	margin: 1em 0;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	grid-gap: 1em;
	}	
.graph-key-item-wrapper .graph-key-block{
	width: .8em;
	height: .8em;
	float: left;
	}
.graph-key-item-wrapper .graph-key-title{
	margin-left: 1.25em;
	line-height: 1em;
	}	

.y-axis-label{
	position: absolute;
	left: -5%;
    bottom: 35%;
	transform-origin: 0 0;
  	transform: rotate(-90deg);
	}
.x-axis-label{
	position: absolute;
    bottom: 0;
    left: 40%;
	}	
.x-axis-value-wrapper{
	left: 0;
    bottom: -1.25em;
    position: absolute;
    width: 100%;
    height: 1em;
    font-size: .9em;
	}		
.y-axis-value-wrapper{
	left: -2.75em;
    top: -0.5em;
	text-align: right;
	position: absolute;
	height: 100%;
	width: 2.25em;
	font-size: .9em;
	}	
.y-axis-value-wrapper div{
	position: relative;
	display: block;
	width: 100%;
	text-align: right;
	}	
.x-axis-value-wrapper div, 
.y-axis-value-wrapper div {
	position: absolute;
	}		



/* removes blue highlight */	
.x-axis-value-wrapper, .y-axis-value-wrapper {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
	}