.centered
{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.describe-box
{
	font-size: large;
	font-weight: bold;

	margin-bottom: 10px;
}

#infect-container
{
	width: 1004px;
	margin-left: auto;
	margin-right: auto;
}

#tab-container
{
	position: relative;
}

#tabs-box
{
}


.tab-button
{
	background-color: inherit;
	border: none;
	color: black;
	font: inherit;
	font-size: large;
	font-weight: bold;
}

.tab
{
	display: inline-block;
	margin-right: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.block 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 1006px;
}

#animation-block
{
	display: block;
	vertical-align: top;
	background-color: ;
}

#static-block
{
	display: none;
	vertical-align: top;
}

#charts
{
	display: none;
}

.feedback-button-box
{
	margin-top: 10px;
}

.info
{
	font-weight: bold;
	font-size: large;
	padding-bottom: 4px;
}

.tooltip
{
	display: none;
	z-index: 20;
	position: absolute;
	width: 600px;
	padding: 10px;
	border: solid blue 1px;
	background-color: antiquewhite;
	font-size: large;
}

.tooltip-button
{
	color: black;
}

.light-text
{
	color: white;
}

.info-img
{
	display: inline-block;
	width: 20px;
	object-fit: scale-down;
}

#animation-right
{
	margin-left: 20px;
}

#images
{
	display: none;
}

#info-panel
{
	display: flex;
	flex-flow: row;
}

#day-block
{
	display: inline-block;
	width: 380px;
}

#time-block
{
	display: inline-block;
	width: 170px;
}

#score-block
{
	display: none;
	margin-left: 20px;
	width: 400px;
}

#display
{
	background-color: #97DEFB;
	border: solid blue 1px;
	width: 1000px;
}

#overview_container
{
	width : 1000px; height : 320px;
	display: inline-block;
}

#moving_container
{
	width : 500px; height: 320px;
	display : inline-block;
}

.rangeSlider
{
	width: 80%;
}

.slider
{
  width: 100%;
}

.chartx 
{
  /* display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 320px 1fr;
  gap: 10px; */
	
  /* display: flex; */
}

.swatch
{
	display: inline-block;
	height: 16px;
	width: 20px;
	margin-top: 4px;
	margin-left: 6px;
}

#announce-outer
{
	display: none;

	background-color: rgba(0, 0, 0, 0);

	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;

	justify-content: center;
	align-content: center;
}

.announce
{
	position: fixed;
	width: 700px;
	height: 700px;
	top: 50%;
	left: 50%;
	margin-top: -350px; /* Negative half of height. */
	margin-left: -350px; /* Negative half of width. */	align-content: center;
	justify-content: center;
	background-color: var(--background);
}

#announce-win
{
	display: none;

	border: 10px solid green;
}

#announce-lose
{
	display: none;

	border: 10px solid black;
}

.announce-text
{
	font-size: xxx-large;
	text-align: center;
}

.button-group
{
	margin-top: 40px;
	display: grid;
	grid-template-columns: max-content max-content;
	justify-content: center;
}

.announce-button
{
	font-size: large;
	color: black;
}

.face-list
{
	display: grid;
	grid-template-columns: max-content auto;
}

.face-name
{
	margin-left: 20px;
	margin-right: 10px;
}

.face
{
	display: inline-block;
}


#debug
{
	display: none;
	position: absolute;
	width: 600px;
	padding: 10px;
	border: solid blue 1px;
	background-color: antiquewhite;
	font-size: large;
}