.avatar {
    background: var(--ba-lower-opacity);
    border-radius: 100%;
    text-align: center;
    margin: auto;
}

.avatar span {
    font-family: Quicksand, sans-serif;
    font-weight: bold;
    text-align: right;
    color: var(--ba-primary-opacity);
    font-size: 150px;
    line-height: 200px;
    text-transform: uppercase;
}

.list-item .avatar {
    float: left;
    height: 40px;
    width: 40px;
    margin: 4px;
}

.list-item .avatar span {
    height: 30px;
    width: 33px;
    font-size: 24px;
    line-height: 40px;
}

.list-item .selected .avatar span {
    color: var(--ba-primary-color);
}

.list-item .selected .avatar {
    box-shadow: 0 0 0 3px var(--ba-primary-color);
}