#PageBody #MainContent .map-selectors {
	display:flex;
	flex-flow: row wrap;
	width:60%;
	padding-left:0;
	justify-content:space-between;
	align-items:center;
	list-style-type:none;
	margin:0 auto 10px auto;
}
#PageBody #MainContent .map-selectors {
	width:60%;
	margin-bottom:10px;
}
#PageBody #MainContent .map-selector {
	position: relative;
	background-color: #dcdddc;
	color: #2f302f;
	padding: 5px 10px;
	font-size: 14px;
	font-weight: 700;
	border: 1px solid #dcdddc;
	border-radius: 5px;
}
#PageBody #MainContent .selector-text{
	font-size:24px;
	color:#001871;
	font-weight:700;	
}
#PageBody #MainContent .map-selector.active {
	background-color: #0077c8;
	color: #fff;
}
#PageBody #MainContent .map-selector.disabled,
#PageBody #MainContent .map-selector.disabled:hover {
	background-color: #dcdddc;
	color: #2f302f;
	cursor: default;
	position: relative;
}
#PageBody #MainContent .map-selector.disabled:after{
	visibility: hidden;
	position:absolute;
	content:"There are no events scheduled for this time period.";
	height:75px;
	width:180px;
	top:105%;
	left:0;
	background-color:#fff;
	color:#000;
	border-radius:5px;
	border:1px solid #000;
	line-height:1.2em;
	padding:10px;
	z-index:1000;
}
#PageBody #MainContent .map-selectors li:last-child .map-selector.disabled:after{
	right:0;
	left:unset;
}
#PageBody #MainContent .map-selection .tuda-map {
	display:none;
	width: 98%;
}
#PageBody #MainContent .map-selection .tuda-map.active {
	display:block;
}
#PageBody #MainContent .map-selection{
	display:flex;
	flex-flow:row nowrap;
}
#PageBody #MainContent .map-selection .map-wrapper{
	width:60%;
	padding-left:20px;
}
#PageBody #MainContent .map-selection .list-wrapper {
	width:40%;
	overflow-y:auto;
}
#PageBody #MainContent span.list-district {
	display: none;
}
#PageBody #MainContent span.list-district:before {
	content:"";
	border-radius:3px;
	height: 12px;
	width: 12px;
    left: 0px;
    top: 50%;
    position: absolute;
    display: block;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	content: "";
	background-image:url("/nationsreportcard/adminonly/design2021/img/legend-triangle.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	color: #001871;
	margin-bottom: 3px;
	border: 1px solid #c69214;	
}

/* Table ============================================= */
#PageBody #MainContent .map-selection .list-wrapper table{
	width:100%;
	border-collapse: collapse;
}
#PageBody #MainContent .map-selection .list-wrapper table caption{
	font-size:16px;
}
#PageBody #MainContent .map-selection .list-wrapper table th{
	font-weight:400;
}
#PageBody #MainContent .map-selection .list-wrapper table th,
#PageBody #MainContent .map-selection .list-wrapper table td {
	padding: 2px;
	vertical-align: top;
}
#PageBody #MainContent .map-selection .list-wrapper table col.district{
	width:calc(100% - 75px);
}
#PageBody #MainContent .map-selection .list-wrapper table col.year{
	width:75px;
}
#PageBody #MainContent .map-selection .list-wrapper thead th {
	font-size: 16px;
	border-bottom: 1px solid #c69214;
}
#PageBody #MainContent .map-selection .list-wrapper table tbody tr{
	display:none;
}
#PageBody #MainContent .map-selection .list-wrapper table tbody th {
	padding-left: 20px;
}
#PageBody #MainContent .map-selection .list-wrapper table tbody tr.active{
	display:table-row;
}
#PageBody #MainContent .map-selection .list-wrapper table tbody tr.odd{
	background-color:#fef6e9;
}
#PageBody #MainContent .map-selection .list-wrapper table tbody tr.current th span{
	position:relative;
	display:block;
	padding: 2px 0px 2px 0px;
}
#PageBody #MainContent .map-selection .list-wrapper table tbody tr th span span {
	padding-left: 30px;
}
#PageBody #MainContent .map-selection .list-wrapper table tbody tr.current th > span:before {
	content: "";
	border-radius: 3px;
	height: 15px;
	width: 15px;
	left: -20px;
	top: 12px;
	position: absolute;
	display: block;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	background-image: url("/nationsreportcard/adminonly/design2021/img/legend-triangle.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px 15px;
	color: #001871;
	margin-bottom: 3px;
	margin-right: 5px;
	border: 1px solid #c69214;
}
#PageBody #MainContent .map-selection .list-wrapper tfoot td {
	border-top: 1px solid #c69214;
	font-size: 0.85em;
}
#PageBody #MainContent .map-wrapper .map-legend span{
	position:relative;
	display:block;
	padding: 2px 10px 2px 30px;
}
#PageBody #MainContent .map-wrapper .map-legend span:before{
	content:"";
	border-radius:3px;
	height:15px;
	width: 15px;
    left: 10px;
    top: 50%;
    position: absolute;
    display: block;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#PageBody #MainContent .map-wrapper .map-legend span.district:before{
	background-color:	#f2ede2;
	content: "";
	background-image: url("/nationsreportcard/adminonly/design2021/img/legend-triangle.svg");
	background-repeat: no-repeat;
	background-position:center;
	background-size:15px 15px;
	color:#001871;
	margin-bottom:3px;
	border:1px solid #c69214;
}
#PageBody #MainContent .map-wrapper .map-legend span.state:before{
	background-color:#001871;		
}
#PageBody #MainContent .map-wrapper .map-legend span.none:before{
	background-color:#dbe2e9;		
}
/* MEDIUM =========================================== */
@media screen and (min-width: 992px) and (max-width: 1199px) {
	#PageBody #MainContent .map-selectors{
		width:70%;
		padding-left:0;
	}	
}
/* SMALL ============================================ */
@media screen and (min-width: 768px) and (max-width: 991px) {
	#PageBody #MainContent .map-selectors{
		width:80%;
		padding-left:0;
	}	
}
/* XTRA-SMALL ========================================= */
@media screen and (max-width: 767px) {
	#PageBody #MainContent .map-selectors{
		width:90%;
		padding-left:0;
	}	
	#PageBody #MainContent .map-selection .list-wrapper{
		width:100%;
		height:unset;
	}
	#PageBody #MainContent span.list-district {
		position: relative;
		display: block;
		padding: 2px 10px 2px 18px;
	}
	#PageBody #MainContent .map-selection .map-wrapper{
		display:none;
		width:0;
	}		
}
/* Very small screens */
@media screen and (max-width: 575px) {
	#PageBody #MainContent .map-selectors { 
		width:100%;
	}
	#PageBody #MainContent .map-selector {
		padding: 4px 6px;
		font-size: 12px;
		line-height: 16px;
	}
	#PageBody #MainContent .selector-text{
		font-size:24px;
		color:#001871;
		font-weight:700;	
	}	
}