.swstats-dash .panels > div,
#swstats-widget .inside {
	
	background: linear-gradient(#2c3d4e, lighten(#2c3d4e, 5%));
	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;
		}
	}
	
}

.swstats-dash .summary-panel,
#swstats-widget .panel {
	.inner {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		& > 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;
	}
	.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);
			}
		}
	}
}

.swstats-dash,
#swstats-widget {
	
	@keyframes bar {
		0% {
			background-size: 0 100%;
		}
		100% {
			background-size: 100% 100%;
		}
	}
	
	@keyframes pulse {
		0% {
			transform: scale(.5);
		}
		100% {
			transform: scale(1);
		}
	}
	
}