style.css

*
{
  font-family: 'Helvetica';
  font-size: 1.2vw;
  font-weight: bold;
  color: #7F7F7F;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
h1
{
  margin: 0 17.5vw;
  font-size:2vw;
}
#options
{
    float:left;
    width:20%;
    padding:1.5vw 1.5vw;
    position: relative;
    background-color: #f6fafe;
}

.OptionsLabel
{
  color:#0D67BD;
  display:flex;
  padding-bottom: .8vw;
}


span.label
{
  margin: auto 0px;
  color:#0D67BD;
}
#ppe
{
  padding-top: 1.8vw;
  bottom: 0;
}

#midRow
{
  display: flex;
  width:85%;
  margin: auto;
  height: 10vw;
}

#graphDiv
{
  padding-top: 1.1vw;
  position: relative;
  margin-left: 1.8vw;
  padding-bottom: 6vh;
}

#ball-graph0
{
  float: left;
  width: 38vw !important;
  margin-left: 0;
  z-index:2;
}

#timeGraph
{
  position: relative;
  width:38vw;
}

#progressBar
{
  position:absolute;
  margin-top: 5vw;
  background-color: white;
  height:100%;
  width:100%;
  margin-left: 0%;
  z-index:-1;
}

#timeTable
{
  width:38vw !important;
  background: white;
  position:relative;
  z-index: -3;
}

.timeLabel
{
  color:#B11C1C;
  z-index: -3;
  text-align: right;
  font-size: 1.25vw;
}

#ball-simulation0
{
  float: left;
  padding: 0px 1vw 0px;
  width:50vw;
}

label
{
  color: #7F7F7F;
  text-align: left;
  font-size: 1vw !important;
}

#defaultCanvas1
{
  width:100% !important;
  height:100% !important;
}

.container
{
  padding-top: 2vw;
  margin:0px auto;
  width:80%;
  padding-bottom: 5vw;
}

#statistics
{
  float:left;
  width:20%;
  position: relative;
}

#sick-stat0
{
  width:100%;
  color: #B11C1C;
  font-size: 3em;
}

#provider-percentage
{
  width:100%;
  color: #B11C1C;
  font-size: 3em;
}
#attribution
{
  font-size: .5em;
}
#deathStats
{
  position: absolute;
  bottom: 0;
  color: #7F7F7F;
}

#dead-stat0
{
  font-size: 2vw;
}


h2
{
  display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-top:.5vh;
  margin-bottom:.1vh;
  width:50vw;
}

#defaultCanvas0
{
  display: flex;
  width:38vw !important;
  height: 5.25vw !important;
  z-index:2;
}

.icon{
  padding-right: 1vw;
  display:inline-block;
}

.imglungicon
{
  height:3vw;
  width:3vw;
}

.imgpolicyicon
{
  height:2.9vw;
  width:3.3vw;
}

#bottomBar
{
  width:100%;
  display:flex;
  height:auto;
  background-color: #F4F4F4;
  overflow: hidden;
}
table{
    table-layout: fixed;
}

th{
  word-wrap:break-word;
}
td
{
  font-size: 18px;
  text-align: center;
  word-wrap:break-word;
}

.InfectedCivilian{
text-align: center;
  color: #A90D0E;
}

#legend
{
  display: inline-block;
  margin: 0 auto;
  padding-top: .5vw;
}

#topRow
{
  display: flex;
  width:80%;
  margin: auto;
  height: 27vw;
}

#RestartButtonLabel
{
  position:relative;
  top:-2.75vw;
  left:-5vw;
  color: #FFFFFF;
  pointer-events: none;
}

#restart-button0
{
  width:6vw;
  height:6vw;
  outline: none;
  position: relative;
  margin-top: 1vw;
  margin-left: 5vw;
}

#buttonDiv
{
  position:flex;
  width:15vw;
}

/* The container */
.checkcontainer {
  display: block;
  position: relative;
  padding-left: 2vw;
  padding-bottom: 1vw;
  margin-left: 1vw;
  margin-top: .7vw;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.checkcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: -0.25vw;
  left: 0;
  height: 1.5vw;
  width: 1.5vw;
  background-color: #FFFFFF;
  border-style: solid;
  border-radius: 50%;
  border-color: #DCDCDC;
  border-width: 2px;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
  border-color: #0D68BB;
  border-width: 2px;
}

.noHover:hover input ~ .checkmark
{
  border-color: #DCDCDC !important;
}

/* When the radio button is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
  border-radius: 50%;
  border-color: #0D68BB;
  border-width: 2px;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: relative;
  display: none;
  background-color: #0D68BB;
}

/* Show the indicator (dot/circle) when checked */
.checkcontainer input:checked ~ .checkmark:after {
  display: flex;
  border-color: #0D68BB;
}

/* Style the indicator (dot/circle) */
.checkcontainer .checkmark:after {
  top:.25vw;
  left:.25vw;
	width: 1vw;
	height: 1vw;
    border-radius: 50%;
}

/*Table values*/
.dot
{
  height: .75vw;
  width: .75vw;
  border-radius: 50%;
  display: inline-block;
}

.HealthyCivilian
{
  background-color: #8B8B8B;
}

.InfectedCivilian
{
  background-color: #B11C1C;
}

.DeceasedCivilian
{
  height: 1.5vw;
  width: 1.5vw;
  background-color: #F8B2B2;
}

.HealthyProvider
{
  height: .8vw;
  width: .8vw;
}

.InfectedProvider
{
  height: .8vw;
  width: .8vw;
}

.DeceasedProvider
{
  height: 1.5vw;
  width: 1.5vw;
}

.HospitalIcon
{
  height:5vw;
  width:5vw;
}

.QuarantineIcon
{
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  border-width: 2px;
  border-color: #1B75C3 !important;
  display: inline-block;
  border:solid;
}

.bottomHeader
{
  vertical-align: text-top;
}
.sideHeader
{
  font-weight: normal;
}