<style>
    body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 36px;
				margin-left: 60px;
                color:#904723;
                text-align: center;
			}
h2 {
				font-size: 16px;
    margin-left: 10px;
				margin-right: 20px;
                color:#904723;
			}

			p {
				font-size: 14px;
                margin-left: 60px;
                margin-right:60px;
                color:#904723;
			}

            .selected {
				background-color:#904723;
                opacity: 0.6;
                color:yellow;
            
			}

			svg {
				background-color: white;
			}

#svg {
width:620px;
}
			.axis path,
			.axis line {
				fill: none;
				stroke: grey;
				stroke-width: 1px;
			}

			.line {
				stroke: #904723;
				fill: none;
				stroke-opacity: 50%;
				stroke-width: 2px; 
			}


			.btn-group {
				padding-top: 20px;
                color:white;
			}
            
.btn {
background-color: rosybrown;
}





			.axis text {
				font-family: sans-serif;
				font-size: 12px;
                fill:dimgrey;
			}
            
            .row {
				padding-top: 50px;
			}
           
              .text.show {
            font: 12px sans-serif;
                fill: #4da6ff;
                opacity: 0.5;
            }
            
            .text.hide {
                font: 12px sans-serif;
                 fill: #4da6ff;
            opacity: 0;
            }

            .circle {
            fill: #ffff00;
            stroke:#904723;
            stroke-width:3px;
            }
            
            .mytooltip{
            position:absolute;
            z-index: 10;
            }
            
            .mytooltip p {
            background-color:#904723;
                border:white 1px solid;
                border-radius: 5px;
                padding:2px;
                max-width: 180px;
                font-weight:bold;
                margin-left: 5px;
                color:white;
            }
            
		</style>