html
{
	height:100%;
}

body 
{
	background-color: white;
	margin: 0px;
	padding: 0px;
}
#left-side {
	margin: auto 0px;
}

p{
	margin: 0px 0px 10px 0px;
}

/*add the border and a special pointer (hand) to a sparkline*/	
.sparkline
{
	cursor: pointer;
	border-style: solid;
    border-width: 1px;
	top: 1px !important;	
}

/*to highlight when hover on a sparkline*/	
.hlt_gray 
{
	border-radius: 5px;
	/*background: #ebebeb; - gray*/  
	background: rgba(179,215,248,0.5); 
}

h1
{
	text-align: center;
	font-size:30px;
}

.keyword
{
	font-weight: bold;
}

.keyword:hover
{
	border-radius: 5px;
	background: rgba(179,215,248,0.5); 
	/*background: #ebebeb; */
}

.legend
{
	display: inline-block;
	font-size: 18px;
}

	div#left-side{
		background-color: white;
		padding: 0px 0px 20px 20px;
		width: 700px;
		font-size:20px;
		font-family: calibri;
		text-align: justify;
		margin: auto;
	}

	div.chart{
		width:600px;
		padding: 20px;
		margin:auto;
	}


#square-main {
	width: 10px;
	height: 10px;
	background: #5e5b5b;
	display: inline-block;
	border-style: solid;
    border-width: 2px;
}

#square-second {
	width: 10px;
	height: 10px;
	background: #8080ff;
	display: inline-block;
	border-style: solid;
    border-width: 2px;
	margin-left: 10px;
}

#mytooltip{
    background-color: #f2f2f2;
    color: #333;
    text-align: center;
    padding: 5px;
    border-radius:6px;
	display:block;
    position:fixed;
    overflow:hidden;
	font-family: calibri;
	font-size: 11pt;
}