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

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

body {
	background: #0a1621 !important;
	font-family: 'Segoe UI', Arial, sans-serif;
	font-size: 1em;
}

.header {
	text-align: left;
    padding: 15px;
    background: #000;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
	z-index: 20;
	display: flex;
	background-image: url("../img/header_bg.jpg");
	background-size: cover;
}

.tooltip { right:0; width: 100%; margin: 0; position: sticky}

.IEMLogo {
/*	max-width: 150px;*/
	height: 50px;
	display: inline;
	margin-right: 30px
}

.header h1 {
	display: inline;
	align-self: flex-end
}

#mainContainer {
	padding: 95px 20px 10px;
	background: #0a1621;
	color: #fff;
	display: grid;
grid-template-areas:
        "updated usMap usMap infoPane"
"lineGraph usMap usMap infoPane"
"lineGraph usMap usMap top20"
"lineGraph usMap usMap top20"
"stateMap usMap usMap top20"
"stateMap usMap usMap top20"
"about about about top20";
	grid-template-columns: 1fr 1fr 1fr .75fr;
	transition: grid-template-areas .5s ease;
}

#layoutSwap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 25;
}

.cell {
	background: #2e313e;
	padding: 10px;
	color: #d6c8c8;
	margin: 5px;
	transition: height 0.5s ease;
}

.timeContainer {
	color: #ff0000;
}

#stateCell {
	grid-area: stateMap;
}

#title {
	grid-area: title;
	font-size: 2rem;
}

#top20 {
	grid-area: top20;
}

#top20List {
/*	width: 275px;*/
}

#infoPane {
	grid-area: infoPane;
}

#updatedCell {
	grid-area: updated;
}

.expandLink {
	color: #ff0000;
	font-weight: bold;
	margin-bottom: 5px;
	cursor: pointer;
	display: block;
}

.sectionInfo {
	max-height: 600px;
	transition: max-height 0.5s ease, opacity 0.5s ease;
	display: none;
}

.expandChevron {
	display: inline-block;
}

.rotateChevron {
	transform: rotate(90deg);
	transition: transform 0.5s ease;
}

.hideInfo {
	max-height: 0 !important;
	opacity: 0 !important;
	transition: max-height 0.5s ease, opacity 0.5s ease;
}

.top20ListCell {
	border-bottom: 1px #d6c8c8 dashed;
	margin-bottom: 5px;
	cursor: pointer;
}

.top20ListCell:last-of-type {
	border-bottom: 0;
}



#USMapContainer {
	grid-area: usMap;
}

#USMapContainer select, .stateCountySelect {
    background: #0a1621;
    width: 100%;
    color: #d6c8c8;
    font-size: 1em;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.selectCell {
	font-size: .8em
}


.mapToolTip {
  position: absolute;           
  text-align: center; 
  vertical-align: middle;          
  width: auto;                 
  height: auto;                 
  padding: 2px;             
  font: 12px sans-serif;    
  color: #fff;    
  background: #888b8d;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;    
}


.svgMapContainer, .svgLegendContainer {
  display: inline-block;
  position: relative;
  width: 100%;
  vertical-align: top;
  overflow: hidden;
  padding-bottom: 67%;
}

.svgContained {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.svgLegendContainer {
  padding-bottom: 0%;
  height: 70px;
}

#sliderPlusLegend {
	    width: 80%;
    margin: auto;
}

.state {fill: none; stroke: #333; stroke-width: 0.5; transition: fill 0.5s ease;}
.county {fill: #e3e3e3; stroke: #ccc; stroke-width: 0.5; transition: fill 0.5s ease;}
.county:hover {stroke: #000; stroke-width: 1;}

#lineGraphContainer {
	grid-area: lineGraph;
}

#about {
	grid-area: about;
	font-size: .75em;
	display: flex;
	justify-content: space-between;
}

.increase {
	color: #00a9ec;
}

.red, #about a {
	color: #ff0000;
}

.orange {
	color: #f7941d
}

.green {
	color: #00ff07
}

.bold {
	font-weight: bold;
}

#labelContainer {
	margin-bottom: 20px
}

#labelContainer div {
	margin: 5px;
	display: inline-block;
}

#caseLabel {
	color: #fff;
}
#projectionLabel {
	color: #1f96b2;
}

#stateMap {
}

#stateContainer {
}

#stateMapFocus {
	padding: 10px;
}

#stateStats {
	padding: 10px;
}

#lineGraph {
	cursor: pointer;
}

#countyName p {
	margin-bottom: 0;
}


.map {
	width: 100%;
	max-width: 450px;
}

#socialLinks svg {
    margin-right: 10px;
}

#socialLinks a:hover {
	fill: #ff0000;
}

#socialLinks a {
	display: inline-block;
}

#socialLinks p {
	text-align: right;
	margin-bottom: 0;
}

#socialLinksContainer {
	display: flex;
	justify-content: center;
    flex-direction: column;
}

#socialLinks {
	display: flex;
	justify-content: center;
    flex-direction: column;
}

.ui-state-default, .ui-widget-content .ui-state-default {
	border-radius: 100px;
background: #ff0000;
border: 0;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #54555a;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888b8d;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.mobileLineBreak {
	display: inline;
}

.pseudoH4 {
	font-size: 1.5rem;
}

#mobileLegend {
	display: none;
}

#footerLogo {
		max-width: 150px;
		padding: 10px
	}

#mainplot {
    
	min-height: 350px;
	background-repeat: no-repeat;
	background-position: center;
}

.plotlyPlaceholder {
	background-image: url("../img/plotly_placeholder.png");
}

.plot-container {
	transition: opacity 0.5s ease;
}

.hidePlotly {
	opacity: 0 !important;
}

.plotly {
	animation: fadeIn 0.5s;
}

.dayControls {
	display: flex;
}

.dayControls svg {
	flex: auto;
	align-self: center;
	cursor: pointer;
}

@media (max-width: 1200px) {
	.breakEarlier {
		display: block;
	}
}

/*
@media (max-width: 992px) {
	#mainContainer {
		grid-template-areas:
        "lineGraph usMap usMap infoPane"
        "lineGraph usMap usMap top20"
        "stateMap usMap usMap top20"
        "stateMap usMap usMap top20"
        "about about about top20";
	grid-template-columns: .5fr 1fr 1fr .75fr;
	}
	
}
*/

/*@media (max-width: 768px) {*/
	



	
	@media (max-width: 992px) {
	.header {
		display: block;
		text-align: center
	}
	
	.header img, .header h1 {
		display: block;
		margin: auto;
	}
	
	#mainContainer {
		display: block;
		height: auto;
		padding: 20px;
	}
	
	#USmap, #stateContainer {
		margin-bottom: 2em;
	}
	footer, .header {
		position: relative
	}
	
	#footerLinks {
		margin: auto;
	}
	
	.mobileLineBreak {
	display: block;
}
	
	
	#about .col-4 {
		text-align: left;
	}
	
	#socialLinks p {
		text-align: left;
		}
	
	#top20List {
		width: auto;
	}
		
		#about {
		flex-direction: column;
	}
	
	
}

.massUtahNotification {
	cursor: pointer;
	display: none !important;
}

@media (min-width : 768px) 
and (max-width : 1024px) 
/*and (orientation : landscape) { */
{
	#mainContainer {
		grid-template-areas:
			"updated updated"
        "infoPane infoPane"
"usMap usMap"
"lineGraph stateMap"
"top20 top20"
"about about";
grid-template-columns: 1fr 1fr;
	}
	
	
}

/* Transitions */
.fadeIn {
  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}
@keyframes fadeIn {0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.moreInfoIcon {
	margin-left: 5px;
	color: #d6c8c8;
	cursor: pointer;
}

#expandedText {
	display: none;
}