.img-header
{
	position: relative;
	text-align: center;
	color: white;
}

/* Bottom right text */
.img-header img {
    width: 1050px; height: 270px; object-fit: center;
}

/* Bottom right text */
.img-header h1 {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-weight:900;
}

.map-text {
	float:left; 
	margin-top:30px;
}

.droplet-pin.x11 {
    transform: scale(.33333334);
    margin-bottom: -120px;	
}

.article-data {
	width:100%;
}

.article-data thead tr td {
	padding-top:15px;
	padding-bottom:15px;
	border-right:1px solid #77b3d4;
	background-color:#6a95be;
	color: #e8f1f7;
}

/* .article-data thead tr td:hover {		
	color: #DDD;
} */	

.article-data thead tr td:last-child {
	border-right:1px solid #3d88b2;
}	

.article-data thead tr td:hover {
	background-color:#277098;
	transition:background-color 200ms ease-in
}

.article-data thead tr td { text-align: left; }

.article-data tbody tr.usa {background-color:#e9e9e9;}
.article-data tbody tr td{ text-align: left;}
.article-data tbody tr td:first-child{ text-align: left;}
.article-data tr:nth-child(even) {  background-color:#fafafa; }
.article-data .cell_selected { transition:border 800ms linear; border-right:1px solid lightgrey; border-left:1px solid lightgrey;
	background: rgba(96,154,203,0.1);
	transition:background-color 200ms ease-in;
}
.article-data thead tr {top:0; user-select:none;}
.article-data thead tr td {cursor:pointer;}


.sort-sprite,
.sort-sprite-up,
.sort-sprite-down {
	float:right;
	width:8px;
	height:16px;
	line-height:16px;
	margin-top:6px;
}	

.sort-sprite-org {	
	width:8px;
	height:16px;
	/* line-height:16px;
	margin-top:6px; */
}


.sort-sprite { background: url('/images/sort-sprite.png') 0 0 no-repeat;}
.sort-sprite-up	{ background: url('/images/sort-sprite.png') -10px 0 no-repeat;	}
.sort-sprite-down { background: url('/images/sort-sprite.png') -20px 0 no-repeat; }

.ranked-cards {
	counter-reset: ra-ho-ca;
	display: grid;
	grid-gap: 40px;
}

@media (min-width: 640px) {
	.ranked-cards {
		grid-template-columns: repeat(1, 1fr);
	}
	#area-by-map {
		display: block;
	}
  
}
.ranked-cards__card {
	position: relative;
	counter-increment: ra-ho-ca;
	display: flex;
	flex-flow: column;
	align-items: left;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid #ccc;  
	cursor: pointer;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 8px;
	background-color:#f6f6f6;
	padding:10px;
}

.ranked-cards__card:hover {
  background-color:#f1f1f1;
}
.ranked-cards__card-name {
	min-height: 3rem;
	max-height: 3rem;
	overflow: hidden;
	padding: 0rem 0rem 4rem 5rem;
	justify-content: center;
	text-transform: uppercase;
	text-align: left;  
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 2rem;
	font-weight:600;
	color: #2d80b1;  
}

.ranked-cards__card-name a {
	display: inline-block;
	width: inherit;
	color: inherit;  
}

.ranked-cards__card-rank {
	position: absolute;
	top: 0;
	left: 1rem;
	width: 4.2rem;
	height: 5rem;
	text-transform: uppercase;
	font-style: normal;
	font-size: 1.6rem;
	line-height: 4.5rem;
	background-color: #236288;
	color: #fff;
	text-align: center; 
}
.ranked-cards__card-rank::before {
  content: "#" counter(ra-ho-ca);
}

.ranked-cards__card-factoid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;  
}

.ranked-cards__card-factoid.std {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 2px auto;
  grid-gap: 0 1rem;
  margin: 2rem;
  /* background-color:red; */
}

.ranked-cards__card-factoid.std span {
	font-size:1.5rem;
	margin-top:20px;
	/* background-color:yellow; */
}

.ranked-cards__card-factoid.std .box {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  text-align: left;
  font-size: 1.3rem;
  
  /* background-color:cyan; */
}
.ranked-cards__card-factoid.std .box.sx {
  grid-area: span 1 / span 1;
  border-left: 5px solid #ddd;
  padding-left:10px;
  /* background-color:green; */
}

.ranked-cards__card-factoid.std .box.big {
	grid-area: span 1 / span 2;	
}
		
.ranked-cards__card-factoid.std .box.big a {
	display: inline-block;	
	margin-left; 50px;
	/* background-color:lightyellow; */
}	

.ranked-cards__card-factoid.std .box.big small {
  font-size: 1.7rem;
  text-transform:none;
  line-height: 2.5rem;
  margin-left:50px;
  
  /* background-color:white; */
}

.ranked-cards__card-factoid.std .box.full {
   grid-area: col / span 3;
   grid-row: row 2;
}

.ranked-cards__card-factoid.std small {
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 2 rem;
  margin-bottom: 0.8rem;
  /* background-color:lightgray; */
}
.ranked-cards__card-factoid.std svg {
  width: 100%;
  max-height: 124px;
}
.ranked-cards__card-factoid.std data {
  font-size: 1.3rem;
  font-weight:600;
  line-height: 0.7;  
   /* background-color:darkgray; */
}

#area-by-map {
  width: 100%;
  height: 80vh;
  max-height: 50rem;
  margin-bottom: 2.5rem;
}

.legend-div	{ text-align:center; background-color:#f1f1f1;}

.legend-div .legend 		{ list-style:none; display:inline-block; margin:0;}
.legend-div .legend li 		{ float:left; margin:0 15px; padding:0; height:20px; }
.legend-div .legend span	{ float:left; width:12px; height:12px; margin:7px; }

.legend-div .legend .well-below				{ background-color: #a3ce6c; }
.legend-div .legend .below				{ background-color: #bee092; }
.legend-div .legend .average			{ background-color: #e8df4d; }
.legend-div .legend .above-average		{ background-color: #f3c86c; }
.legend-div .legend .well-above-average	{ background-color: #e48d61; }


@media (max-width: 699px) {
	#area-by-map {
		height: 250px;
	}
  
	.ranked-cards__card-factoid.std .box.sx {
		display:none;	
	}
  
	.ranked-cards__card-factoid.std .box.big {
		padding-left:0;  
	}
	.ranked-cards__card-factoid.std .box.big small,
	.ranked-cards__card-factoid.std .box.big span
	{
		/* margin-left:0; */
	}
  
/*   .ranked-cards__card-factoid.std .box.sx {	   
	  grid-column: 1 / 4;
	}

	.ranked-cards__card-factoid.std .box.big {		
	  grid-column: 1 / 4;
	}

	.ranked-cards__card-factoid.std .box.full {	   
	   grid-column: 1 / 4;	   
	}  */ 
}

#area-by-map .leaflet-tooltip {
  font-size: 1.3rem;
  color: #2d80b1;
}

.informational-paras {
  font-size: 1.6rem;
}
.informational-paras p:last-of-type {
  margin-bottom: 5px;
}

#quick-search-src,
#quick-search-src-2
{
	overflow: hidden;        
	max-height: 300px;
}

/*button { margin-top:2rem;}*/

ul {	
	padding:0;
	margin:0;
}

.art-by-list ul {
	position: relative;		
	/* counter-reset: li; */
	counter-reset: items;	
}

.art-by-list ul::before {
	content: ' ';
	
	width: 0.5rem;
	height: 100%;
	position: absolute;
	top: 0;
	left: 3%;
	background: #eaf1f7;
	z-index: -1;
	
}

.art-by-list li {
	position: relative;
	font-size: 1.6rem;		
	 padding: 0.4rem 0.4rem 0.5rem 1rem; 
	border-radius: 1.5rem;
	background: #eaf1f7; 	
	list-style-type: none;
	counter-increment: items;
}

.art-by-list li:before {
	/* content: "0" counter(items)" "; */
	content: "\25A0";
	color: white;
	font-weight:600;
	padding-left:0;
	line-height:4rem;
	font-size:2.5rem;
}

.art-by-list li:nth-child(n+10):before {
  /* content: "" counter(items)" "; */
  content: "\25A0";
}


.art-by-list li:hover {
	background-color:#f1f5f9;		
}	

.art-by-list li + li {
	margin-top: 1rem;
}

.art-by-list li a {		
	position: absolute;
	width:100%;		
	/* left: 65px;	 */
	left: 35px;
	line-height:4.5rem;	
}