/* Custom Avatar Frame */

.avatar-round { border-radius: 50%; width: 100%; height: 100%; }

.avatar-span-32 { display: inline-block; width: 32px; height: 32px; }
.avatar-span-40 { display: inline-block; width: 40px; height: 40px; }
.avatar-span-44 { display: inline-block; width: 44px; height: 44px; }
.avatar-span-50 { display: inline-block; width: 50px; height: 50px; }
.avatar-span-64 { display: inline-block; width: 64px; height: 64px; }
.avatar-span-96 { display: inline-block; width: 96px; height: 96px; }
.avatar-span-128 { display: inline-block; width: 128px; height: 128px; }

.premium-avatar-32 { display: inline-block; vertical-align: middle; position: relative; z-index: 0; width: 32px; height: 32px; }
.premium-avatar-32 img { width: 100%; height: 100%; z-index: 0; object-fit: cover; display: block; }

.premium-avatar-40 { display: inline-block; vertical-align: middle; position: relative; z-index: 0; width: 40px; height: 40px; }
.premium-avatar-40 img { width: 100%; height: 100%; z-index: 0; object-fit: cover; display: block; }

.premium-avatar-44 { display: inline-block; vertical-align: middle; position: relative; z-index: 0; width: 44px; height: 44px; }
.premium-avatar-44 img { width: 100%; height: 100%; z-index: 0; object-fit: cover; display: block; }

.premium-avatar-50 { display: inline-block; vertical-align: middle; position: relative; z-index: 0; width: 50px; height: 50px; }
.premium-avatar-50 img { width: 100%; height: 100%; z-index: 0; object-fit: cover; display: block; }

.premium-avatar-64 { display: inline-block; vertical-align: middle; position: relative; z-index: 0; width: 64px; height: 64px; }
.premium-avatar-64 img { width: 100%; height: 100%; z-index: 0; object-fit: cover; display: block; }

.premium-avatar-96 { display: inline-block; vertical-align: middle; position: relative; z-index: 0; width: 96px; height: 96px; }
.premium-avatar-96 img { width: 100%; height: 100%; z-index: 0; object-fit: cover; display: block; }

.premium-avatar-128 { display: inline-block; vertical-align: middle; position: relative; z-index: 0; width: 128px; height: 128px; }
.premium-avatar-128 img { width: 100%; height: 100%; z-index: 0; object-fit: cover; display: block; }

.premium-frame { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }

.premium-shape-0001 { position: absolute; z-index: 1; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(7% 7%, 93% 7%, 97% 93%, 3% 93%); }

.premium-shape-0004 { position: absolute; z-index: 1; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(51% 5%, 97% 40%, 77% 95%, 24% 95%, 3% 40%); }

.premium-shape-0011 { position: absolute; z-index: 1; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(50% 10%, 3% 89%, 97% 89%); }

.premium-shape-0012 { position: absolute; z-index: 1; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(14% 14%, 88% 14%, 88% 87%, 15% 88%); }

.premium-shape-0013 { position: absolute; z-index: 1; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(8% 8%, 92% 8%, 92% 92%, 8% 92%); }

.premium-shape-0014 { position: absolute; z-index: 1; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; clip-path: circle(44% at 50% 50%); }

.premium-shape-0015 { position: absolute; z-index: 1; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(5% 18%, 95% 18%, 95% 82%, 6% 82%); }

.premium-shape-0016 { position: absolute; z-index: 1; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(12% 27%, 50% 8%, 89% 28%, 89% 71%, 50% 94%, 12% 72%); }

/* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */