#mutation-matrix {
position: relative;
display: inline-block;
padding: 5px;
border: 1px solid grey;
background-color: #f2f2f2;
}



#mutation-matrix .cell {
width: 20px;
height: 20px;
border: 1px solid grey;
background-color: white;
}

#mutation-matrix .cell-inactive {
width: 20px;
height: 20px;
border: 1px solid grey;
background-color: LightGrey;
}

#mutation-matrix .cell-on {
width: 20px;
height: 20px;
border: 1px solid grey;
background-color: grey;
}

/* Popup container */
.popup {
  position: relative;
  display: block;
  cursor: pointer;
  width: fit-content; 
}

/* The actual popup (appears on top) */
.popup .popuptext {
	display: none;
 /* visibility: hidden; */
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";

}

.dashboard {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;  
	padding: 10px;
	background-color: #d3d3d3;
}

.dashboardOff {
	display: none;
}


.help-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

body {
  /*font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #fafafa; */ 
}
svg {
  /*border: 1px solid #ccc;
  background: #fff;*/
}
.node {
  cursor: pointer;
  stroke: #333;
  stroke-width: 1px;
}
.link {
  stroke: #000000;
  stroke-width: 2px;
  fill: none;
  opacity: 1;
}
.arrowhead {
  fill: #000000;
}
.weight-label {
  fill: #333;
  font-size: 12px;
  pointer-events: none;
}