.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;
			background: linear-gradient(#2c3d4e, lighten(#2c3d4e, 5%));
			color: #fff;
			padding: 10px;
			border-radius: 5px;
			box-shadow: 0 10px 20px rgba(#000, .2);
		}
		
		h2 {
			margin: 0 0 10px 0;
			color: #fff;
		}
		
		.inner {
			position: relative;
			z-index: 2;
		}
		
		.loading,
		.nodata {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
		.loading {
			z-index: 1;
			i {
				display: inline-block;
				width: 8px;
				height: 8px;
				margin: 0 3px;
				border-radius: 50%;
				background-color: #fff;
				animation: pulse 600ms ease-out alternate infinite;
				&:nth-child(1) {
					animation-delay: -300ms;
				}
				&:nth-child(2) {
					animation-delay: -150ms;
				}
			}
		}
		
		.nodata {
			z-index: 0;
			margin: 0;
		}
		
		.inner,
		.loading,
		.nodata {
			transition: opacity 300ms ease-out;
			opacity: 0;
			&.show {
				opacity: 1;
			}
		}
		
		.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 {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			grid-gap: 20px;
			margin: 10px;
			& > div {
				position: relative;
				grid-column-end: span 3;
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -10px;
					width: 1px;
					height: 100%;
					background-color: #fff;
					opacity: .2;
				}
				&:nth-child(2n+1)::before {
					display: none;
				}
				&.granularity,
				&.chart {
					grid-column: 1/-1;
					&::before {
						display: none;
					}
				}
			}
			h3 {
				font-size: 1em;
				color: rgba(#fff, .67);
				white-space: nowrap;
				margin: 0 0 .33em 0;
			}
			p {
				font-size: 18px;
				line-height: 1;
				margin: 0;
				white-space: nowrap;
				.comparison {
					display: inline-block;
					font-size: 11px;
					margin-left: .5em;
					&.green {
						color: rgb(150, 222, 150);
					}
					&.red {
						color: rgb(247, 140, 140);
					}
				}
			}
			& > div.visits,
			& > div.views {
				h3::after {
					content: '';
					display: inline-block;
					vertical-align: baseline;
					border-radius: 50%;
					margin-left: 8px;
					width: 10px;
					height: 10px;
				}
			}
			& > div.visits {
				h3::after {
					background-color: rgb(54, 162, 235, .8);
				}
			}
			& > div.views {
				h3::after {
					background-color: rgb(150, 222, 150, .8);
				}
			}
		}
		.chart {
			position: relative;
			height: 200px;
		}
		.granularity {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			line-height: 1;
			font-size: 11px;
			white-space: nowrap;
			a {
				display: inline-block;
				margin-left: 3px;
				color: rgba(#fff, .67);
				text-decoration: none;
				transition: color 100ms ease-out;
				padding: 4px 7px 5px 7px;
				border-radius: 1em;
				background-color: rgba(#000, .5);
				&:first-child {
					margin-left: 0;
				}
				&:hover {
					color: rgba(#fff, 1);
				}
				&.active {
					color: rgba(#fff, 1);
				}
			}
		}
		
	}
	
	.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;
			}	
		}
	}
	
	@keyframes bar {
		0% {
			background-size: 0 100%;
		}
		100% {
			background-size: 100% 100%;
		}
	}
	
	@keyframes pulse {
		0% {
			transform: scale(.5);
		}
		100% {
			transform: scale(1);
		}
	}
	
}