td {
  text-align: center;
  vertical-align: middle;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color: #333;
}

table {
  text-align: left;
  line-height: 25px;
  border-collapse: separate;
  border-spacing: 2px;
  border: 2px solid #ed1c40;
  margin: 50px auto;
  border-radius: .25rem;
  min-width: 300px;
}

thead tr {
  background: #ed1c40;
  color: #fff;
  border: none;
  text-align: center;
}

caption {
  font-weight:bold;
  background: #ed1c40;
  color: #fff;
  border: none;
}

th:first-child, td:first-child { padding: 0px 0px 0px 0px; }

thead th { border-bottom: 3px solid #ddd; padding: 5px 5px 5px 5px; }

tbody tr:last-child td { border: none; }
tbody td { border-bottom: 1px solid #ddd; }


.stacked-bar-graph {
  width: 80%;
  height: 38px;
  color:#414042;
  margin: 0 auto;
}

  span {
    display: inline-block;
    height:100%;
    float: left;
    box-sizing: border-box;
    font-weight: bold;
    font-family: arial, sans-serif;
    padding: 0px;
  }

/* Tooltip container */
.pop {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.pop .poptext {
    visibility: hidden;
    background-color: #333;
    color: #ddd;
    text-align: left;
    padding: 10px 5px;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    top:-20px;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.pop:hover .poptext {
    visibility: visible;
}

.active { font-size: 2em; color: black; text-decoration: none; }






.note {
    position: relative;
background-color: #f7f7f7; color: #444; font-family: Arial; text-align:center;
}
.note:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
	width: 0; 
	height: 0; 
    display: block;
	border-left: 10px solid transparent;
	border-bottom: 10px solid transparent;
	
	border-top: 10px solid #f00;
}