.chart { 
  margin: 5px auto;
  min-height: 200px;
}
.node { 
  color: #FFFFFF; 
  border: 4px solid rgb(23, 102, 150);
  background-color: rgb(23, 102, 150); 
  border-radius: 10px;
  padding: 2px 10px 2px;
}
.node p { 
  font-size: 40px; 
  line-height: 40px; 
  height: 40px; 
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: bold; 
  padding: 3px; 
  margin: 0;
}
@media (max-width: 768px) { 
  .node {
    font-size: 30px; 
    line-height: 30px; 
    height: 30px; 
    padding: 2px 5px 2px;
  }
  .node p {
    font-size: 25px;
    line-height: 20px; 
    height: 30px; 
  }
}

.node.active {
  background-color: rgb(152, 203, 59) !important;
  border: 4px solid rgb(152, 203, 59) !important;
}
.node.active:after {
  content: none;
}


.node.selected {
  background-color: #fb8415;
  border: 4px solid #fb8415;
}
.node.correct {
  background-color: #000000;
  border: 4px solid #000000;
}
.node.correct.optional {
  border: 4px solid rgb(23, 102, 150);
  background-color: rgb(23, 102, 150); 
}
.node.selected.wrong {
  background-color: #f80000;
  border: 4px solid #f80000;
}
.node.selected.correct {
  background-color: rgba(121, 181, 7, 1.0) !important;
  border: 4px solid rgba(121, 181, 7, 1.0) !important;
}

body {
  font-family : "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.text-display-1 {
  font-family : "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: large;
  font-weight: bold;
  text-align: center;
}
.text-display-2 {
  font-family : "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: bold;
  text-align: center;
}
.text-display-3 {
  font-family : "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align: center;
}

.btn-color-green {
  background-color: rgb(152, 203, 59);
}
.btn-color-green:hover {
  background-color: rgb(150, 160, 163);
}
.btn-color-blue {
  background-color: rgb(44, 154, 209);
}
.btn-color-blue:hover {
  background-color: rgb(150, 160, 163);
}

.legend .orange { background-color: #fb8415; 
  border-radius: 0%;
  width: 1.7vw;
  margin-top: 1%;
  height: 1.7vw;
  border: 0.1vw solid black; 
  float: left; 
  border-radius: 50%;
}
.legend .red { background-color: #f80000; 
  border-radius: 0%;
  width: 1.7vw;
  margin-top: 1%;
  height: 1.7vw;
  border: 0.1vw solid black; 
  float: left; 
  border-radius: 50%;
}
.legend .black { 
  background-color: #000000; 
  border-radius: 0%;
  width: 1.7vw;
  margin-top: 1%;
  height: 1.7vw;
  border: 0.1vw solid black; 
  float: left; 
  border-radius: 50%;
}
.legend .green { 
  background-color: rgb(152, 203, 59); 
  border-radius: 0%;
  width: 1.7vw;
  margin-top: 1%;
  height: 1.7vw;
  border: 0.1vw solid black; 
  float: left; 
  border-radius: 50%;
  
}
.legend .blue { 
  background-color: rgb(23, 102, 150); 
  border-radius: 0%;
  width: 1.7vw;
  margin-top: 1%;
  height: 1.7vw;
  border: 0.1vw solid black; 
  float: left; 
  border-radius: 50%;
}



.container-fluid {
   padding-left: 0 !important;
   padding-right: 0 !important;
}