.dn-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #dee2e6;
    color: #adb5bd;
    flex-shrink: 0;
    line-height: 1;
    overflow: visible;
}

.dn-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.dn-user-level-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 50rem;
    font-size: .6rem;
    font-weight: 700;
    background-color: #c7cbd1;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

.dn-avatar-color-muted   { background-color: #dee2e6; color: #adb5bd; }
.dn-avatar-color-muted   .dn-user-level-badge { background-color: #c7cbd1; color: #adb5bd; }

.dn-avatar-color-red     { background-color: #ff8171; color: #fff3f3; }
.dn-avatar-color-red     .dn-user-level-badge { background-color: #c97468; color: #fff3f3; }

.dn-avatar-color-yellow  { background-color: #f9d160; color: #fff3ce; }
.dn-avatar-color-yellow  .dn-user-level-badge { background-color: #e6c05a; color: #fff3ce; }

.dn-avatar-color-dblue   { background-color: #3a466b; color: #d9e4ff; }
.dn-avatar-color-dblue   .dn-user-level-badge { background-color: #303957; color: #d9e4ff; }

.dn-avatar-color-pink    { background-color: #e48195; color: #ffeaf7; }
.dn-avatar-color-pink    .dn-user-level-badge { background-color: #d37a8c; color: #ffeaf7; }

.dn-avatar-color-green   { background-color: #5bcfbc; color: #d2fff2; }
.dn-avatar-color-green   .dn-user-level-badge { background-color: #53bdab; color: #d2fff2; }

.dn-avatar-color-mint    { background-color: #5bbe82; color: #d4ffe1; }
.dn-avatar-color-mint    .dn-user-level-badge { background-color: #50a672; color: #d4ffe1; }

.dn-avatar-color-violet  { background-color: #523971; color: #d2b5f4; }
.dn-avatar-color-violet  .dn-user-level-badge { background-color: #614287; color: #d2b5f4; }

.dn-avatar-color-black   { background-color: #191516; color: #e3e3e3; }
.dn-avatar-color-black   .dn-user-level-badge { background-color: #322f30; color: #e3e3e3; }

.dn-avatar-color-olive   { background-color: #86836d; color: #d7d9c3; }
.dn-avatar-color-olive   .dn-user-level-badge { background-color: #74715f; color: #d7d9c3; }

.dn-avatar-color-pumpkin { background-color: #e89a59; color: #ffdbbc; }
.dn-avatar-color-pumpkin .dn-user-level-badge { background-color: #d99053; color: #ffdbbc; }

.dn-avatar-color-onyx    { background-color: #403f4c; color: #c8cacc; }
.dn-avatar-color-onyx    .dn-user-level-badge { background-color: #36353f; color: #c8cacc; }