.avatar_sm,
.avatar_md,
.avatar_vsm,
.avatar_vvsm,
.avatar_topbar,
.avatar-xs,
.avatar-s,
.avatar-r,
.avatar-m,
.avatar-xm,
.avatar-l,
.avatar-xl,
.avatar-xxl,
.avatar-xxxl {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    color: #FFF;
    border-radius: 50%;
}

.avatar_sm div,
.avatar_md div,
.avatar_vsm div,
.avatar_vvsm div,
.avatar_topbar div,
.avatar-xs div,
.avatar-s div,
.avatar-r div,
.avatar-m div,
.avatar-xm div,
.avatar-l div,
.avatar-xl div,
.avatar-xxl div,
.avatar-xxxl div {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.avatar_sm img,
.avatar_md img,
.avatar_vsm img,
.avatar_vvsm img,
.avatar_topbar img,
.avatar-xs img,
.avatar-s img,
.avatar-r img,
.avatar-m img,
.avatar-xm img,
.avatar-l img,
.avatar-xl img,
.avatar-xxl img,
.avatar-xxxl img {
    border-radius: 100%;
}

.avatar-xs, .avatar-xs img, .avatar-xs i, .avatar-xs div {
    --avatar-font-size: var(--font-size-xs);
}

.avatar-s, .avatar-s img, .avatar-s i, .avatar-s div {
    --avatar-font-size: var(--font-size-s);
}

.avatar-r, .avatar-r img, .avatar-r i, .avatar-r div {
    --avatar-font-size: var(--font-size-r);
}

.avatar-m, .avatar-m img, .avatar-m i, .avatar-m div {
    --avatar-font-size: var(--font-size-m);
}

.avatar-xm, .avatar-xm img, .avatar-xm i, .avatar-xm div {
    --avatar-font-size: var(--font-size-xm);
}

.avatar-l, .avatar-l img, .avatar-l i, .avatar-l div {
    --avatar-font-size: var(--font-size-l);
}

.avatar-xl, .avatar-xl img, .avatar-xl i, .avatar-xl div {
    --avatar-font-size: var(--font-size-xl);
}

.avatar-xxl, .avatar-xxl img, .avatar-xxl i, .avatar-xxl div {
    --avatar-font-size: var(--font-size-xxl);
}
.avatar-xxxl, .avatar-xxxl img, .avatar-xxxl i, .avatar-xxxl div {
    --avatar-font-size: var(--font-size-xxxl);
}

.avatar {
    height: calc(var(--avatar-font-size) * 1.5);
    width: calc(var(--avatar-font-size) * 1.5);

}

.avatar img {
    height: calc(var(--avatar-font-size) * 1.35);
    width: calc(var(--avatar-font-size) * 1.35);
}

.avatar i {
    font-size: calc(var(--avatar-font-size));
}

.avatar div {
    height: auto;
    /*height: calc(var(--avatar-font-size));*/
    width: auto;
    /*width: calc(var(--avatar-font-size));*/
    font-size: calc(var(--avatar-font-size)*0.8);
    /*top: 50%;*/
    text-align: center;
}


.avatar_vvsm {
    height: 22px;
    width: 22px;
}

.avatar_topbar {
    height: 20px;
    width: 20px;
}

.avatar_vsm {
    height: 30px;
    width: 30px;
}

.avatar_sm {
    height: 44px;
    width: 44px;
}

.avatar_md {
    height: 72px;
    width: 72px;
}

.avatar_vvsm img {
    width: 21px !important;
    height: 21px !important;
}

.avatar_topbar img {
    width: 20px !important;
    height: 20px !important;
}

.avatar_vvsm i {
    font-size: calc(0.675rem);
    font-weight: 500;
}

.avatar_topbar i {
    font-size: calc(0.7rem);
    font-weight: 500;
}

.avatar_vsm img {
    width: 30px !important;
    height: 30px !important;
}

.avatar_sm img {
    width: 44px;
    height: 44px;
}

.avatar_md img {
    width: 72px;
    height: 72px;
}

.avatar_md div {
    font-size: calc(2rem);
    font-weight: 500;
}

.avatar_vsm div {
    font-size: calc(0.95rem);
    font-weight: 500;
}

.avatar_sm div {
    font-size: calc(1.4rem);
    font-weight: 500;
}

.avatar_vvsm div {
    font-size: calc(0.675rem);
    font-weight: 500;
}


.avatar_vsm_plain {
    /* Center the content */
    display: inline-block;
    vertical-align: middle;
    /* Used to position the content */
    /*position: relative;*/
    /* Colors */
    /*background-color: rgba(0, 0, 0, .3);*/
    /*color: #FFF;*/
    /* Rounded border */
    border-radius: 50%;
    height: 30px;
    width: 30px;
}


.avatar_xsm {
    /* Center the content */
    display: inline-block;
    vertical-align: middle;
    /* Used to position the content */
    position: relative;
    /* Colors */
    background-color: rgba(0, 0, 0, .3);
    color: #FFF;
    /* Rounded border */
    border-radius: 50%;
    height: 24px;
    width: 24px;
}

.avatar_xsm div {
    /* Center the content */
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(1rem);
}


@media screen and (max-width: 767px) {
    .avatar_sm {
        height: 38px;
        width: 38px;
    }

    .avatar-md {
        height: 52px;
        width: 52px;
    }

    .avatar_md div {
        font-size: calc(1.125rem);
    }

    .avatar_sm div {
        font-size: calc(1.125rem);
    }

    .avatar_vsm {
        height: 24px;
        width: 24px;
    }

    .avatar_vsm img {
        width: 24px !important;
        height: 24px !important;
    }

}