.avatar {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.avatar img,
.avatar .avatar-name {
    width: 100%;
    height: 100%;
}

.avatar img {
    display: block;
    object-fit: cover;
}

.avatar .avatar-name {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--sft-accent-soft, rgba(37, 99, 235, .10));
    color: var(--sft-accent, #1d4ed8);
    font-weight: 700;
    line-height: 1;
}

.avatar.rounded-circle img,
.avatar.rounded-circle .avatar-name,
.avatar .rounded-circle,
.avatar img.rounded-circle,
.avatar .avatar-name.rounded-circle {
    border-radius: 50%;
}

.avatar-s   { height: 1.5rem; width: 1.5rem; font-size: .75rem; }
.avatar-m   { height: 2rem;   width: 2rem;   font-size: .9rem; }
.avatar-l   { height: 2.5rem; width: 2.5rem; font-size: 1rem; }
.avatar-xl  { height: 3rem;   width: 3rem;   font-size: 1.1rem; }
.avatar-2xl { height: 4rem;   width: 4rem;   font-size: 1.4rem; }
.avatar-3xl { height: 5rem;   width: 5rem;   font-size: 1.6rem; }
.avatar-4xl { height: 6rem;   width: 6rem;   font-size: 1.9rem; }
.avatar-5xl { height: 7rem;   width: 7rem;   font-size: 2.2rem; }

.avatar-s .avatar-name,
.avatar-m .avatar-name,
.avatar-l .avatar-name,
.avatar-xl .avatar-name,
.avatar-2xl .avatar-name,
.avatar-3xl .avatar-name,
.avatar-4xl .avatar-name,
.avatar-5xl .avatar-name {
    font-size: inherit;
}

.avatar-bordered img,
.avatar-bordered .avatar-name {
    border: 2px solid var(--sft-surface-bg, #ffffff);
    box-shadow: 0 0 0 1px var(--sft-row-border, rgba(15, 23, 42, .08));
}

.avatar-xl.avatar-bordered img,
.avatar-xl.avatar-bordered .avatar-name,
.avatar-2xl.avatar-bordered img,
.avatar-2xl.avatar-bordered .avatar-name,
.avatar-3xl.avatar-bordered img,
.avatar-3xl.avatar-bordered .avatar-name,
.avatar-4xl.avatar-bordered img,
.avatar-4xl.avatar-bordered .avatar-name,
.avatar-5xl.avatar-bordered img,
.avatar-5xl.avatar-bordered .avatar-name {
    border-width: 3px;
}

.feather {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.bg-holder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

[data-feather] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
[data-feather]::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    display: inline-block;
    line-height: 1;
}
[data-feather="check"]::before     { content: "\f00c"; }
[data-feather="x"]::before         { content: "\f00d"; }
[data-feather="info"]::before      { content: "\f129"; }
[data-feather="clock"]::before     { content: "\f017"; }
[data-feather="clipboard"]::before { content: "\f328"; }
[data-feather="pie-chart"]::before { content: "\f200"; }
[data-feather="alert-circle"]::before { content: "\f06a"; }
[data-feather="alert-triangle"]::before { content: "\f071"; }
[data-feather="user"]::before      { content: "\f007"; }
[data-feather="users"]::before     { content: "\f0c0"; }
[data-feather="settings"]::before  { content: "\f013"; }
[data-feather="search"]::before    { content: "\f002"; }
[data-feather="bell"]::before      { content: "\f0f3"; }
[data-feather="calendar"]::before  { content: "\f133"; }
[data-feather="mail"]::before      { content: "\f0e0"; }
[data-feather="lock"]::before      { content: "\f023"; }
[data-feather="log-out"]::before   { content: "\f2f5"; }
[data-feather="moon"]::before      { content: "\f186"; }
[data-feather="sun"]::before       { content: "\f185"; }
[data-feather="edit"]::before      { content: "\f044"; }
[data-feather="trash"]::before     { content: "\f1f8"; }
[data-feather="plus"]::before      { content: "\2b"; }
[data-feather="chevron-right"]::before { content: "\f054"; }
[data-feather="chevron-down"]::before  { content: "\f078"; }
[data-feather="arrow-right"]::before   { content: "\f061"; }
[data-feather="external-link"]::before { content: "\f08e"; }
[data-feather="file"]::before      { content: "\f15b"; }
[data-feather="folder"]::before    { content: "\f07b"; }
[data-feather="home"]::before      { content: "\f015"; }
[data-feather="more-horizontal"]::before { content: "\f141"; }
[data-feather="more-vertical"]::before   { content: "\f142"; }