.statistics {
	background: #301e38;
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 2rem;
	padding-right: 2rem;
	border: 1px solid #583270;
}

.statistics div[class^="col-3"] > div,
.statistics div[class^="col-4"] > div {
	border: 1px solid #583270;
	background-color: #100011;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	height: 100%;
}

.statistics-left {
	background: url(../../../images/mageguildwars/grey.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
}

.statistics-right {
	background: url(../../../images/mageguildwars/natsu.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
}

.statistics-number {
	background-color: #1a131d;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.statistics-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

.statistics-item p {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1.8rem;
	font-weight: 600;
	text-align: center;
	color: #ababab;
	margin-bottom: 0;
}

.statistics-item p a:link,
.statistics-item p a:visited {
	color: #777;
	transition: color .1s ease-in-out;
}

.statistics-item p a:active,
.statistics-item p a:hover,
.statistics-item p a:focus {
	color: #ffffff;
}

.statistics-item span {
	display: block;
	font-weight: 400;
	font-size: .8rem;
}

.online-past,
.online-current,
.current-birthday {
	border: 1px solid #583270;
	background-color: #100011;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	margin-bottom: 1rem;
}

.online-past {
	margin-bottom: 0;
}

.online-past h5,
.online-current h5,
.current-birthday h5 {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #ababab;
}

.online-past p,
.online-current p,
.current-birthday p {
	color: #424242;
	font-size: .9rem;
}

.online-past span,
.online-current span,
.current-birthday span {
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.85rem;
}

.usergroups {
	display: grid;
	grid-template-columns: 100%;
	gap: 1rem;
	background-color: #1a131d;
	margin-top: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media screen and (min-width: 768px) {
	.usergroups {
		grid-template-columns: repeat(2, calc(50% - .5rem));
}


}

@media screen and (min-width: 992px) {
	.usergroups {
		grid-template-columns: repeat(4, calc(25% - .75rem));
}


}

.usergroups a:link,
.usergroups a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.85rem;
	color: #ffffff;
	min-height: 40px;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	padding-left: 1rem;
	padding-right: 1rem;
	transition: background-color .1s ease-in-out;
}

.usergroups a.admin {
	background-color: #c7005c;
}

.usergroups a.mod {
	background-color: #ffeaa7;
	color: #2b2b2b;
}

.usergroups a.em {
	background-color: #30336b;
}

.usergroups a.mg {
	background-color: #264f4f;
}

.usergroups a.rm {
	color: #2b2b2b;
	background-color: #00efa9;
}

.usergroups a.ft {
	background-color: #e28a04;
}

.usergroups a.gh {
	background-color: #960000;
}

.usergroups a.ls {
	background-color: #27a82c;
}

.usergroups a.rt {
	background-color: #00377a;
}

.usergroups a.sam {
	background-color: #ffff99;
	color: #2b2b2b;
}

.usergroups a:active,
.usergroups a:hover,
.usergroups a:focus {
	border: none;
	outline: none;
	color: #ffffff;
	background-color: #301e38;
}