.bg-faction {
	background-position: center;
	background-repeat: no-repeat;
}

.bg-faction.horde {
    background-image: url(../../../assets/images/misc/bg_horde_complete.png);
}

.bg-faction.alliance {
    background-image: url(../../../assets/images/misc/bg_alliance_complete.png);
}

.col-items {
	width:70px !important;
}

.col-main {
	width:calc(100% - 150px) !important;
}

.char-avatar {
	position:relative;
	display:inline-block;
	text-align:center;
}

.char-avatar > img {
	width:128px;
	height:128px;
	object-fit:contain;
}

.char-avatar .char-level {
	position:absolute;
	bottom:0;
	right:0;
	border-radius:50%;
	width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.border-start {border-color:#1b1d29 !important;}

.bg-health {background-color:#27cc4e;}
.bg-mana {background-color:#1c8aff;}
.bg-rage {background-color:#ab0000;}
.bg-focus {background-color:#d45719;}
.bg-energy {background-color:#cb9501;}
.bg-runic {background-color:#00bcde;}

.item {
	width:70px;
	height:70px;
	position:relative;
}

.item a {
	background-image:url(../../../assets/images/misc/item_frame.png);
	width:68px;
	height:68px;
	margin-top:-6px;
	margin-left:-6px;
	position:absolute;
	z-index:999;
	display:block;
}

@media (max-width: 767px) {
	.pagebody .row {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
	}
	.pagebody .col-items {
		width:52px !important;
		flex:0 0 52px;
	}
	.pagebody .col-main {
		width:calc(100% - 104px) !important;
		padding-top:0.5rem !important;
	}
	.char-avatar > img {
		width:80px;
		height:80px;
	}
	.char-avatar .char-level {
		width:28px;
		height:28px;
		line-height:28px;
		font-size:12px;
	}
	.item {
		width:48px;
		height:48px;
	}
	.item a {
		width:46px;
		height:46px;
		background-size:46px;
		margin-top:-5px;
		margin-left:-5px;
	}
	.item img {
		width:38px;
		height:38px;
	}
	.pagebody .col-bottom {
		justify-content: center;
		gap:4px;
	}
	.col-bottom .item {
		width:52px;
		height:52px;
	}
	.col-bottom .item a {
		width:50px;
		height:50px;
		background-size:50px;
		margin-top:-5px;
		margin-left:-5px;
	}
	.col-bottom .item img {
		width:41px;
		height:41px;
	}
}

@media (max-width: 400px) {
	.pagebody .col-items {
		width:44px !important;
		flex:0 0 44px;
	}
	.pagebody .col-main {
		width:calc(100% - 88px) !important;
	}
	.item {
		width:40px;
		height:40px;
	}
	.item a {
		width:38px;
		height:38px;
		background-size:38px;
		margin-top:-4px;
		margin-left:-4px;
	}
	.item img {
		width:31px;
		height:31px;
	}
	.col-bottom .item {
		width:44px;
		height:44px;
	}
	.col-bottom .item a {
		width:42px;
		height:42px;
		background-size:42px;
		margin-top:-4px;
		margin-left:-4px;
	}
	.col-bottom .item img {
		width:35px;
		height:35px;
	}
}