#canvas {
    background-color: lightgray;
}

.pedigree-diagram {
    height: 350px;
    width: 700px;
    /*background-color: beige;*/
}

.tick-img {
    display: none;
}

#tot-found-div {
    display: none;
}

#show-but {
    display: none;
}

.slim-button {
    height: 30px;
}

.switch-toggle {
   float: left;
   background: #242729;
}
.switch-toggle input {
  position: absolute;
  opacity: 0;
}
.switch-toggle input + label {
  padding: 7px;
  float:left;
  color: #fff;
  cursor: pointer;
}
.switch-toggle input:checked + label {
  background: lightblue;
}

/* Test - radio buttons which look like toggle buttons

.donate-now {
  list-style-type: none;
  margin: 25px 0 0 0;
  padding: 0;
}

.donate-now li {
  float: left;
  margin: 0 5px 0 0;
  width: 100px;
  height: 40px;
  position: relative;
}
.donate-now label,
.donate-now input {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.donate-now input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

.donate-now input[type="radio"]:checked+label,
.Checked+label {
  background: yellow;
}

.donate-now label {
  padding: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.donate-now label:hover {
  background: #DDD;
}
*/

td:hover{
 background: #fff0ff;
}

/*.tr.ratio-row-selected:hover {*/
/*    background: lightcyan;*/
/*}*/

.table-hover > tbody > tr.ratio-row-selected:hover > td,
.ratio-row-selected > td {
    background: lavender}