/* Live Roblox avatar preview shown above the username input. */
.rblx-av{
	overflow:hidden;
	max-height:0;
	opacity:0;
	margin:0 auto;
	text-align:center;
	transition:max-height .45s ease, opacity .35s ease, margin .45s ease;
}
.rblx-av.is-loading,
.rblx-av.is-found,
.rblx-av.is-notfound,
.rblx-av.is-error{
	max-height:260px;
	opacity:1;
	margin:0 auto 28px auto;
}
.rblx-av-ring{
	position:relative;
	width:118px;
	height:118px;
	margin:0 auto;
	border-radius:50%;
	background:#eee;
	box-shadow:0 0 0 7px rgba(0,0,0,.06);
	transition:box-shadow .3s ease;
}
.rblx-av-img{
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:50%;
	border:5px solid #fff;
	box-sizing:border-box;
	opacity:0;
	transform:scale(.6);
	transition:opacity .35s ease, transform .4s cubic-bezier(.2,1.3,.4,1);
}
.rblx-av-ph{
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#bdbdbd;
	transition:opacity .3s ease;
}
.rblx-av-ph .material-icons-two-tone{ font-size:3.4em; }
.rblx-av-spin{
	position:absolute;
	top:-6px; left:-6px; right:-6px; bottom:-6px;
	border-radius:50%;
	border:4px solid rgba(131,221,129,.25);
	border-top-color:#83dd81;
	opacity:0;
	animation:rblx-spin .8s linear infinite;
}
@keyframes rblx-spin{ to{ transform:rotate(360deg); } }
.rblx-av-check{
	position:absolute;
	right:-2px; bottom:-2px;
	color:#83dd81;
	opacity:0;
	transform:scale(.4);
	transition:opacity .3s ease, transform .3s cubic-bezier(.2,1.3,.4,1);
}
.rblx-av-check .material-icons-two-tone{
	font-size:2em;
	background:#fff;
	border-radius:50%;
}
.rblx-av-meta{ margin-top:14px; line-height:1.3; }
.rblx-av-name{ font-size:1.25em; font-weight:700; color:#000; }
.rblx-av-user{ font-size:.95em; font-weight:700; color:#83dd81; }
.rblx-av-msg{ display:none; font-size:.95em; font-weight:700; color:#bdbdbd; }

/* ---- states ---- */
.rblx-av.is-loading .rblx-av-spin{ opacity:1; }
.rblx-av.is-loading .rblx-av-ph{ opacity:1; }

.rblx-av.is-found .rblx-av-img{ opacity:1; transform:scale(1); }
.rblx-av.is-found .rblx-av-ph{ opacity:0; }
.rblx-av.is-found .rblx-av-ring{ box-shadow:0 0 0 6px rgba(131,221,129,.45); }
.rblx-av.is-found .rblx-av-check{ opacity:1; transform:scale(1); }

.rblx-av.is-notfound .rblx-av-ph,
.rblx-av.is-error .rblx-av-ph{ opacity:1; }
.rblx-av.is-notfound .rblx-av-name,
.rblx-av.is-notfound .rblx-av-user,
.rblx-av.is-error .rblx-av-name,
.rblx-av.is-error .rblx-av-user{ display:none; }
.rblx-av.is-notfound .rblx-av-msg,
.rblx-av.is-error .rblx-av-msg{ display:block; }
.rblx-av.is-notfound .rblx-av-ring{ animation:rblx-shake .4s ease; }
@keyframes rblx-shake{
	0%,100%{ transform:translateX(0); }
	20%{ transform:translateX(-6px); }
	40%{ transform:translateX(6px); }
	60%{ transform:translateX(-4px); }
	80%{ transform:translateX(4px); }
}