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

h1 {
font-size: 36px;
margin-left: 60px;
color:orange;
text-align: center;
}

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

svg {
background-color: white;
}

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

.line {
fill: none;
}


.btn-group {
padding-top: 10px;
margin-left:100px;
}


button.selected {
background:orange;
  border-radius: 28px;
  font-family: Arial;
  color: white;
  font-size: 14px;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  border-color:none;
    opacity: 0.8;
}

.button {
  border-radius: 20px;
  font-family: Arial;
  border:2px solid orange;
  color: orange;
  font-size: 14px;
  padding: 5px 10px 5px 10px;
  background: white;
    outline:none;
}

.button:hover {
  border-radius: 20px;
  font-family: Arial;
  border:1.5px solid orange;
  color: white;
  font-size: 14px;
  padding: 5px 10px 5px 10px;
  outline:none;
  background: #ffc299;
}

.axis text {
font-family: sans-serif;
font-size: 12px;
fill:dimgrey;
}

.row {
padding-top: 0px;
}

text {
    font-family: sans-serif;
    font-size: 12px;
}

.textshow {
fill: orange;
opacity: 1;
}

.texthide {
fill: orange;
opacity: 0;
}

.circle {
fill: #ffff00;
stroke:orange;
stroke-width:3px;
}

.mytooltip{
position:absolute;
z-index: 10;
}

.mytooltip p {
background:#ffebcc;
border:white 1px solid;
border-radius: 5px;
padding:2px;
max-width: 180px;
font-weight:bold;
margin-left: 5px;
color:#ff7733;
}

.focused{
stroke:orange;
stroke-opacity:1;
stroke-width:2.5px;
}

.unfocused{
stroke: gray;
stroke-width: 1.5px;
stroke-opacity:0.7;
}


#highlight{
font: 15px sans-serif;
fill: orange;
opacity: 1;
font-weight: bold;

}

</style>