.top-bar .avatar {
	position:relative;
}

.top-bar .char-level {
	position:absolute;
	bottom:0;
	right:0;
}

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

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

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

.col-avatar, .col-items {
	width:70px;
}

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

.char-avatar {
	position:relative;
	display:inline-block;
	background-color:rgba(255,255,255,0.05);
	width:128px;
	height:128px;
	border-radius:50%;
	text-align:center;
}

.char-avatar > i {
	height:100%;
	width:100%;
	display:block;
	border-radius:50%;
}

.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:#27cc4e !important;}
.bg-mana {background:#1c8aff !important;}
.bg-rage {background:#ab0000 !important;}
.bg-focus {background:#d45719 !important;}
.bg-energy {background:#cb9501 !important;}
.bg-runic {background:#00bcde !important;}
.bg-fury {background:#8400ff !important;}

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

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

.item .item-trans {
	width: 22px;
	height: 22px;
	left: 0;
	bottom: 14px;
	margin: 0;
	z-index: 1000;
	position: absolute;
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent #e060df #e060df;
	-webkit-border-radius: 0 0 0 3px;
	border-radius: 0 0 0 3px;
	background-image: none;
	background-color: transparent;
}

/* Character top and bars polish */
.top-bar {
	padding: 1rem 1.2rem;
	border: 1px solid rgba(255, 166, 77, 0.12);
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(16, 22, 36, 0.94) 0%, rgba(9, 13, 23, 0.98) 100%);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

#bars > .col-6 > div {
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.03);
}

/* Character attributes and PVP cards */
#attributes .section-header {
	margin-bottom: 1rem;
	padding: 0.95rem 1.15rem;
	border: 1px solid rgba(255, 166, 77, 0.16);
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(18, 24, 39, 0.92) 0%, rgba(10, 14, 24, 0.96) 100%);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

#attributes .section-body {
	padding: 1rem 1.1rem;
	border: 1px solid rgba(255, 166, 77, 0.1);
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(16, 22, 36, 0.94) 0%, rgba(9, 13, 23, 0.98) 100%);
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

#attributes .table {
	margin-bottom: 1rem;
	color: rgba(244, 246, 251, 0.9);
}

#attributes .table:last-child {
	margin-bottom: 0;
}

#attributes .table > :not(caption) > * > * {
	background: transparent !important;
	color: inherit;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#attributes .table tr:last-child td {
	border-bottom: 0;
}

#attributes .table td:first-child {
	color: #cfd8e6;
	font-weight: 700;
}

#attributes .table td.text-end {
	color: #ffffff;
	font-weight: 700;
}
