.swstats-dash {
	
	position: relative;
	
	a {
		box-shadow: none;
	}
	
	#periodselect {
		font-size: 16px;
		margin-top: 10px;
	}
	
	.panels {
		
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 15px;
		margin-top: 20px;
		
		& > div {
			position: relative;
			grid-column-end: span 6;
			padding: 10px;
			border-radius: 5px;
			box-shadow: 0 10px 20px rgba(#000, .2);
		}
		
		h2 {
			margin: 0 0 10px 0;
			color: #fff;
		}
		
		.switches {
			position: absolute;
			top: 0px;
			right: 10px;
			a {
				display: inline-block;
				margin-left: .5em;
				color: #fff;
				opacity: .67;
				transition: opacity 100ms ease-out;
				&:hover {
					opacity: 1;
				}
				&:nth-child(1) {
					display: none;
				}
			}
		}
		
	}
	
	.summary-panel {
		padding: 20px;
		min-height: 401px;
		.inner {
			grid-gap: 20px;
			margin: 10px;
		}
		.chart {
			height: 200px;
		}
	}
	
	.data-panel {
		min-height: 120px;
		h2 {
			margin: 10px;
		}
	}
	
	.table {
		margin: 5px 0;	
		.row {
			display: grid;
			grid-template-columns: 1fr 4em;
			&.cols3 {
				grid-template-columns: 1fr 4em 4em;
			}
			grid-gap: 20px;
			padding: 0 10px;
			background-repeat: no-repeat;
			background-position: 0 0;
			animation: bar 600ms 400ms ease-out both;
			&.head {
				font-weight: bold;
				opacity: .67;
			}
			&.body {
				margin-top: 3px;
			}
			div {
				padding: 6px 0;
				text-align: right;
				&:first-child {
					text-align: left;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		.fflag {
			vertical-align: -1px;
			margin-right: 6px;
		}
	}
	

	
	@media (min-width: 400px) {
		#periodselect {
			position: absolute;
			top: 10px;
			right: 0;
			margin: 0;
		}
		.panels {
			margin-top: 30px;
		}
		.summary-panel {
			min-height: 419px;
			.inner p {
				font-size: 24px;
			}
		}
	}
	
	@media (min-width: 600px) {
		.summary-panel {
			min-height: 403px;
			.inner div {
				grid-column-end: span 2;
				&:nth-child(2n+1)::before {
					display: block;
				}
				&:nth-child(3n+1)::before {
					display: none;
				}
			}
			.chart {
				height: 250px;
			}	
		}
	}
	
	@media (min-width: 880px) {
		.panels {
			div.half {
				grid-column-end: span 3;
			}
			div.third {
				grid-column-end: span 2;
			}
		}
		.data-panel {
			min-height: 406px;
		}
	}
	
	@media (min-width: 1220px) {
		.summary-panel {
			min-height: 366px;
			.inner div {
				grid-column-end: span 1;
				&:nth-child(3n+1)::before {
					display: block;
				}
				&:nth-child(6n+1)::before {
					display: none;
				}
			}
			.chart {
				height: 280px;
			}	
		}
	}
	
}