/* === DEFAULT STYLING === */
/* factor 0.36, for avatar size and text*/
.avatar-icon {
    height: 50px;
    width: 50px;
    color: #ffffff;
    border-radius: 50%;
    position: relative;
    text-align: center;
}

.avatar-icon span {
    font-size: 18px;
    line-height: 50px;
}

/* === EXTRA SMALL SIZE === */
.avatar-icon.avatar-xs {
    height: 25px;
    width: 25px;
}

.avatar-icon.avatar-xs span {
    font-size: 9px;
    line-height: 25px;
}

/* === SMALL SIZE === */
.avatar-icon.avatar-sm {
    height: 35px;
    width: 35px;
}

.avatar-icon.avatar-sm span {
    font-size: 13px;
    line-height: 35px;
}

/* === MEDIUM SIZE === */
.avatar-icon.avatar-md {
    height: 50px;
    width: 50px;
}

.avatar-icon.avatar-md span {
    font-size: 18px;
    line-height: 50px;
}

/* === LARGE SIZE === */
.avatar-icon.avatar-lg {
    height: 75px;
    width: 75px;
}

.avatar-icon.avatar-lg span {
    font-size: 27px;
    line-height: 75px;
}

/* === EXTRA LARGE SIZE === */
.avatar-icon.avatar-xl {
    height: 110px;
    width: 110px;
}

.avatar-icon.avatar-xl span {
    font-size: 40px;
    line-height: 110px;
}