@charset "UTF-8";
/* CSS Document */



body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	color: #616161; padding:0; margin:0;
}

body{
animation:1s ease 0s normal forwards 1 fadein;
-webkit-animation:1s ease 0s normal forwards 1 fadein;
opacity:1
}

@keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}

@-webkit-keyframes fadein{
    0%{opacity:0}
    80%{opacity:0}
    100%{opacity:1}
}



.clear {clear:both}

#holder {width:100%;}
@media only screen and (max-width : 768px) {
	#holder {width:100%;}
}

section {width:100%; height:100%; overflow:hidden;}

div, canvas{-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box; }


hr {display: none;}


#logoDiv img {max-width: 100%; height:auto;}

#modePanel { padding: 15px; background-color: #f5f5f5; font-size: 14px;margin-bottom: 15px}
#modeSelectDiv {margin-bottom: 15px}
#modeButtonsDiv {margin-top: 7px}
#hostStatusResDiv {margin-top: 15px}
#simtimeDivLabel, #simtimeValue, #playbackSpeedValue, #simtimeMessage {padding-top: 6px}

.padded {margin-bottom: 0;}

#helpDiv {
	margin-top: 15px !important;
	padding-top: 15px !important;
	border-top-width: 1px !important;
	border-top-style: solid !important;
	border-top-color: #e2e2e2 !important;
	border-bottom-width: 1px !important;
	border-bottom-style: solid !important;
	border-bottom-color: #e2e2e2 !important;
	margin-bottom: 0 !important;
	padding-bottom: 15px !important;
}

#downloadPanel, #paramSummaryPanel {
	margin-top: 0 !important;
	padding-top: 15px !important;
	border-top-width: 1px !important;
	border-top-style: solid !important;
	border-top-color: #e2e2e2 !important;}

#playbackControlDiv { padding: 15px; background-color: #f5f5f5; color:#62be1e; font-size: 14px; margin-bottom: 15px;}
#simtimeDivLabel, #simtimeValue, #playbackSpeedValue, #simtimeMessage {font-size: 14px !important; display:inline-block !important}
#simtimeValue, #playbackSpeedValue {
	font-weight: normal !important;
}

#runEpidDiv, #multiEpidCountDiv {width:100% !important}
#submitEpids {width: 100% !important}
#simtimeDivLabel {padding-left: 7px; padding-right: 3px}
#rewindSim, #playSim, #forwardSim, #navDownInput, #navUpInput  {padding: 2px; font-size:9px;}
#playSim {width: 50px !important}
#simtimeMessage {padding-left: 7px; color: #616161 !important}


#left {width:27%; border-style: none; float: left; position:relative; margin-right: 3%}
#right {width:70%; border-style: none; float: right; position: relative;}

@media only screen and (max-width : 768px) {
#left {width:100%; border-style: none; float: none; position:relative; margin-right: 0}
#right {width:100%; border-style: none; float: none; position: relative;}	
}


#hostPanelDiv {display: block ;width: 48.5%; vertical-align: auto; padding-bottom: 48.5%; position:relative; float:left; margin-right: 1.5%; background-color: #f5f5f5}
.ct-panel-wrapper {display: block;width: 48.5%; position:relative; float:left; margin-left: 1.5%; padding:6%; background-color: #f5f5f5; margin-bottom: 0;}
#hostCountChartDiv {display: block !important ;width: 100%; vertical-align: auto; padding-bottom: 100%; position:relative; background-color: #f5f5f5}

#paramRangeChartDiv {display: none ;width: 100%; vertical-align: auto; padding-bottom: 100%; position:relative; background-color: #f5f5f5}

.authors {
    font-size: 14px;
    line-height: 22px; clear:both;
}
.authors a {
	color: #62be1e;
}

#helpButton { background-color:#62be1e !important; color:#fff; padding:3%; height: auto !important; font-size: 14px}
#tutorialButton  {background-color:#e2e1df !important; color:#616161; padding:4%; height: auto !important}
#hostCanvas {
position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    margin-right: 0;}
	
#hostCountChartCanvas {
position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin-right: 0;}
	
#bottomDiv {clear:both; width:100%; position:relative;}
	
@media only screen and (max-width : 768px) {
	#hostPanelDiv {display: block; width: 100%; vertical-align: auto; padding-bottom: 0; position:relative; margin-right: 0; float: none; margin-bottom: 3%;}
.ct-panel-wrapper {display: block;width: 100%; position:relative; float:none; margin-left: 0; padding:6%; background-color: #f5f5f5; margin-bottom: 3%;}
#hostCountChartDiv {display: block ;width: 100%; vertical-align: auto; padding-bottom: 0; position:relative; 
background-color: #f5f5f5}

#hostCanvas, #hostCountChartCanvas {
position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    height: auto;
    width: 100%;
    margin-right: 0;}	
}
.hostPanelDiv {
margin-right: 0;
    background-color: #f5f5f5;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    width: 48.5%;
    padding: 3%; margin-bottom: 3%;
}
@media only screen and (max-width : 768px) {
	.hostPanelDiv {
    width: 100%;
}}

#hostCanvas {padding: 0 !important}
#histogramDiv {
width: 100%;
    border-style: none;
    float: left;
    position: relative;
    clear: both;
}

.row, .grid {
width: 100%;
    height: 250px;
    background-color: #f5f5f5;
    border-style: none;
    margin-right: 0; margin-bottom: 3%;
}

#hostPanelDiv, .ct-panel-wrapper {margin-bottom: 3%}
.ct-panel-wrapper-two {
display: block;
    width: 25%;
    position: relative;
    float: left;
    margin-left: 0;
    padding: 1.5%;
    background-color: #f5f5f5;
    margin-bottom: 3%;
}
@media only screen and (max-width : 768px) {
.ct-panel-wrapper-two {
display: block;
    width: 100%;
    padding: 12%;
    margin-bottom: 3%;
}	
}
.one-one, .one-two, .two-one, .two-two {width: 100%; height:auto; margin-top: 0;}





#submitEpids {background-color: #62be1e !important; color:#FFF !important; font-weight: bold;
    padding: 3%;
    font-size: 14px; height:auto !important; 
}
.grey {background-color: #fafafa}

#hostCountDiv, #epidSummaryDiv {
    display: inline-block;
    width: 50%;
    margin-right: 0; float:left;}
	
#hostCountAndSummaryDiv:after  {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
#hostCountDiv p, #epidParamDiv p, #controlsDiv p {
	margin: 0;
	display: block;
	background-color: #07883f;
	color: #FFF;
	font-size: 12px;
	padding-top: 4%;
	padding-right: 4%;
	padding-bottom: 4%;
	padding-left: 5%; margin-bottom:7px;
}

#epidParamDiv p, #controlsDiv p {margin-top: 30px}

#epidSummaryDiv p {
	margin: 0;
	display: block;
	background-color: #07883f;
	color: #FFF;
	font-size: 12px;
	padding-top: 4%;
	padding-right: 4%;
	padding-bottom: 4%;
	padding-left: 5%; margin-bottom: 7px;
}
	
#hostCountDiv .color {
	display: inline-block;
	width: 5%;
	height: 10px;
	border-style: none;
	border-width: 0;
	position: relative;
	margin-top: 0;
	margin-right: 2%;
	margin-bottom: 0;
	margin-left: 0;
}
#hostCountDiv .label, #epidSummaryDiv .label {
    display: inline-block;
    width: 49%;
    border-style: none;
    border-width: 0;
    padding-left: 0;
    margin: 0;
    vertical-align: middle;
    font-size: 11px;
}
#paramSummaryDiv .label {
    display: inline-block;
    width: 70%;
    border-style: none;
    border-width: 0;
    padding-left: 0;
    margin: 0;
    vertical-align: middle;
    font-size: 11px; padding-right: 5%; padding-left: 5%;
}
#paramSummaryDiv .value {
    display: inline-block;
    width: 20%;
    border-style: none;
    border-width: 0;
    padding-left: 0;
    margin: 0;
    vertical-align: middle;
    font-size: 11px;
}



#controlsDiv, #epidParamDiv {border-style: none;
width: 50% !important;
display: block;
float: left;}


#hostCountDiv .value, #epidSummaryDiv .value {display: inline-block;
    width: 17%;
    border-style: none;
    border-width: 1px;
    margin: 0;
    vertical-align: middle;
    text-align: left;
    font-size: 11px;
}

#healthyCountDiv, #exposedCountDiv, #crypticCountDiv, #detectableCountDiv, #infectiousCountDiv, #deadCountDiv, #deadNaturalCountDiv, #culledCountDiv, #epidDurationDiv, #susYieldDiv, #inocYieldDiv {padding-left:5%}

#submitEpids:hover, #helpButton:hover, #landscapeParamValsSubmitButton:hover, #downloadData:hover, #uploadButton:hover, #landscapeParamValsDefaultButton:hover, #landscapeParamValsUndoButton:hover, #paramValsUndoButton:hover, #paramValsDefaultButton:hover, #paramValsSubmitButton:hover, #controlValsDefaultButton:hover, #controlValsUndoButton:hover, #controlValsSubmitButton:hover {cursor: pointer; background-color:#616161 !important; color: #FFF !important} 

#sweepParamSelectLabel, #sweepParamValueLabel, #paramRangeDiv {font-size: 11px}

#landscapeInputsDiv {border-style: none;
    display: block;
    width: 100%;
    margin-top: 5%; font-size: 11px;
}
#hostCountDiv{
display: inline-block;
    margin-right: 0;
    margin-bottom: 5%;
}

#landscapeParamValsSubmitButton, #paramValsSubmitButton, #controlValsSubmitButton{
    background-color: #62be1e !important;
    color: #FFF !important;
    font-weight: bold;
    padding: 3%;
    font-size: 14px;
    height: auto !important; border:none; margin-bottom: 10%;
}

#helpButton, #tutorialButton {border: none; width:50% !important; font-size: 12px; padding: 3%}

#epidDurationLabel, #susYieldLabel, #inocYieldLabel {width: 58% !important;}

#downloadDiv, #uploadDiv {width: 100%}
#downloadData, #uploadButton {width: 100% !important}

.greybutton, #downloadData, #uploadButton {
    height: auto !important;
    border-style: none !important;
    background-color: #e2e2e2 !important;
	color: #616161 !important;
    font-weight: bold;
    padding: 6% !important; font-size: 12px !important;
}
#tutorialDiv:after, #paramSummaryDiv:after { content: "";
  display: table;
  clear: both;}
  
#tutorialDiv {margin-bottom: 0 !important;} 
#controlsDisabledDiv {display: none}

#landscapeInputsDiv, #inputsDiv, #controlInputsDiv {
display: block;
    width: 60%;
    margin-top: 10%;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
}

#hostCountDiv, #initialInfDiv{
display: inline-block;
    margin-right: 0;
    margin-bottom: 12%;
   width:50%;
}

#landscapeInputsDiv #initialInfDiv{
display: inline-block;
    margin-right: 0;
    margin-bottom: 12%;
	float: none;
   width:100%;
}

#inputsDiv div, #controlInputsDiv div{
display: inline-block;
    margin-right: 0;
    margin-bottom: 6%;
	float: none;
   width:100%;
}

#landscapeInputsDiv label, #inputsDiv label, #controlRadiusDiv label {
display: inline-block;
    width: 100%;
    text-align: left;
    vertical-align: middle;
    padding-right: 0;
}

#landscapeParamValsDefaultButton, #landscapeParamValsUndoButton, #paramValsUndoButton, #paramValsDefaultButton, #controlValsDefaultButton, #controlValsUndoButton{
height: auto !important;
    border-style: none !important;
    background-color: #e2e2e2 !important;
    color: #616161 !important;
    font-weight: bold;
    padding: 3% !important;
    font-size: 12px !important;
    margin-right: 4px;
}

#landscapeParamValsPanel, #landscapeParamValsPanel, #controlParamValsPanel {width: 100%}

#naturalDeathCheckbox, #cullTogetherInput , #disableControlsInput{width:auto !important}

#inputsDiv, #controlInputsDiv {margin-bottom: 10%}

#controlInputsDiv input {
    width: 90% !important;}
	
#navDiv .value, #navDiv .label {font-size: 12px; padding-top: 5px;}

#navDiv .label {margin-right: 0;}

#navDiv {margin-bottom: 5%}

#sweepParamResponseDiv, #sweepParamRangeDiv, #sweepParamSelectDiv {margin-bottom: 2.5%}

#changeLandscapeParamsButton, #changeEpidParamsButton, #changeControlParamsButton {padding: 2px}