.center-screen {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: blue;
}

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

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

body {
  font-family: inherit;
  color: #333;
}

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

}

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

caption {
  font-weight:bold;
  background: #ed1c40;
  color: #fff;
  padding: 5px;
  border-radius: .25rem;
  border: 2px solid #ed1c40;
}

div {
  margin: 0 auto;
}

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

thead th {  padding: 5px 5px 5px 5px; }

tbody tr { background: #ffffff; }

tbody tr:last-child td { border: none; }

tbody td { 
  border-bottom: 1px solid #ddd;
  padding: 3px;
}
tbody td.whitebottomtable {
  border-bottom: 2px solid #fff;
}

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

  span {
    display: inline-block;
    width: max-content;
    height:100%;
    box-sizing: border-box;
    font-weight: bold;
    padding: 0px;
    vertical-align: top;
  }
  
/* Tooltip container */
.pop {
    position: relative;
    text-align: left;
}

/* 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: 1.2em; color: black; text-decoration: none; }


select {
    width: 16rem;
    border: #eee 2px solid;
    font-size: 15px;
}
select>option {
    background-color: #eee;
}



.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;
}




.logo-container {
  position: relative;
}

h1#page-logo {
  font: bold 1rem;
  animation: zoom-fade 1s ease;
}

@keyframes zoom-fade {
  0% { transform: scale(0,0);}
  100% { transform: scale(1,1);}
}