@import url("../../ucp/css/ucp.css");

#ucp_top {
	display:flex;
	gap:16px;
	align-items:stretch;
	flex-wrap:wrap;
	padding:16px;
	border-radius:10px;
	background:rgba(0,0,0,0.25);
	border:1px solid rgba(255,255,255,0.06);
}

#ucp_avatar {
	flex:0 0 auto;
	width:120px !important;
	height:120px !important;
	margin-top:0 !important;
	display:block;
	border-radius:12px;
	overflow:hidden;
	border:1px solid rgba(255,255,255,0.10);
	background:rgba(0,0,0,0.35);
}

#ucp_avatar img {
	width:100%;
	height:100%;
	object-fit:cover;
}

#ucp_info {
	flex:1 1 520px;
	height:auto !important;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:12px;
}

#ucp_info > aside {
	width:auto !important;
	height:auto !important;
	margin-right:0 !important;
	padding:12px !important;
	border-radius:10px;
	background:rgba(0,0,0,0.22);
	border:1px solid rgba(255,255,255,0.06);
}

#ucp_info table {
	width:100%;
	border-collapse:collapse;
}

#ucp_info td {
	padding:6px 4px;
	vertical-align:middle;
}

#ucp_info td img {
	width:20px;
	height:20px;
	opacity:0.95;
}

#ucp_info td:last-child {
	font-weight:600;
	overflow:hidden;
	text-overflow:ellipsis;
}

@media (max-width: 900px) {
	#ucp_info {
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	#ucp_info {
		grid-template-columns:1fr;
	}
}

.user-avatar {
	position:relative;
	display:inline-block;
	width:150px;
	height:150px;
}

.user-avatar img {
	width:100%;
	height:150px;
	object-fit:cover;
   object-position:50% 50%;
}

.user-avatar .blend {
	position:absolute;
	display:block;
	top:-1px;
	left:-1px;
	justify-content:center;
	align-items:center;
	width:calc(100% + 2px);
	height:calc(100% + 2px);
	border-radius:50%;
    z-index:2;
}


.user-table .user-table-icon {
	display:inline-block;
	width:20px;
}

.user-points .donation-points > svg > path,
.user-points .gold-points > svg > path {
	color:goldenrod!important;
	padding-right:5px;
}

.user-points .vote-points > svg > path,
.user-points .silver-points > svg > path {
	color:silver;
	padding-right:5px;
}

.user-points .copper-points > svg > path {
	color: #b87333;
	padding-right:5px;
}