/* Container */
.ia-avatar-container {
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.avatar-70px .ia-avatar-container {
    width: 70px;
    height: 70px;
    cursor: pointer;
}
.avatar-100px .ia-avatar-container {
    width: 100px;
    height: 100px;
    cursor: pointer;
}
.avatar-150px .ia-avatar-container {
    width: 150px;
    height: 150px;
    cursor: pointer;
}

/* Image */
.ia-avatar-container .ia-avatar-image, .ia-avatar-container .ia-avatar-image:hover {
    width: 50px;
    height: 50px;
    object-fit: cover;
    object-position: center center;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
}
.avatar-70px .ia-avatar-container .ia-avatar-image, .avatar-70px .ia-avatar-container .ia-avatar-image:hover {
    width: 70px;
    height: 70px;
    object-fit: cover;
    object-position: center center;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
}
.avatar-100px .ia-avatar-container .ia-avatar-image, .avatar-100px .ia-avatar-container .ia-avatar-image:hover {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center center;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
}
.avatar-150px .ia-avatar-container .ia-avatar-image, .avatar-150px .ia-avatar-container .ia-avatar-image:hover {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center center;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
}

/* Image - CC-Accent */
.cc-accent .ia-avatar-container .ia-avatar-image {
    border-color: var(--e-global-color-74e93c4);
}
body.mode .cc-accent .ia-avatar-container .ia-avatar-image {
    border-color: var(--e-global-color-74e93c4);
}

/* Image - CC-0 */
.cc-0 .ia-avatar-container .ia-avatar-image {
    border-color: var(--e-global-color-9ca0ed2);
}
body.mode .cc-0 .ia-avatar-container .ia-avatar-image {
    border-color: var(--e-global-color-bcec371);
}

/* Image - CC-1 */
.cc-1 .ia-avatar-container .ia-avatar-image {
    border-color: var(--e-global-color-40cf936);
}
body.mode .cc-1 .ia-avatar-container .ia-avatar-image {
    border-color: var(--e-global-color-d4b1a21);
}

/* Image - CC-2 */
.cc-2 .ia-avatar-container .ia-avatar-image {
    border-color: var(--e-global-color-d99ca76);
}
body.mode .cc-2 .ia-avatar-container .ia-avatar-image {
    border-color: var(--e-global-color-295a6a0);
}

/* Icon */
.ia-avatar-container .ia-avatar-icon, .ia-avatar-container .ia-avatar-icon:hover {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
    padding: 10px;
}
.avatar-70px  .ia-avatar-container .ia-avatar-icon, .avatar-70px  .ia-avatar-container .ia-avatar-icon:hover {
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
    padding: 15px;
}
.avatar-100px  .ia-avatar-container .ia-avatar-icon, .avatar-100px  .ia-avatar-container .ia-avatar-icon:hover {
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
    padding: 20px;
}
.avatar-150px  .ia-avatar-container .ia-avatar-icon, .avatar-150px  .ia-avatar-container .ia-avatar-icon:hover {
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
    padding: 30px;
}

 /* Icon - CC-0 */
.cc-accent .ia-avatar-container .ia-avatar-icon {
    border-color: var(--e-global-color-74e93c4);
    background-color: var(--e-global-color-74e93c4);
}
body.mode .cc-accent .ia-avatar-container .ia-avatar-icon {
    border-color: var(--e-global-color-74e93c4);
    background-color: var(--e-global-color-74e93c4);
}

 /* Icon - CC-0 */
.cc-0 .ia-avatar-container .ia-avatar-icon {
    border-color: var(--e-global-color-9ca0ed2);
    background-color: var(--e-global-color-9ca0ed2);
}
body.mode .cc-0 .ia-avatar-container .ia-avatar-icon {
    border-color: var(--e-global-color-bcec371);
    background-color: var(--e-global-color-bcec371);
}

/* Icon - CC-1 */
.cc-1 .ia-avatar-container .ia-avatar-icon {
    border-color: var(--e-global-color-40cf936);
    background-color: var(--e-global-color-40cf936);
}
body.mode .cc-1 .ia-avatar-container .ia-avatar-icon {
    border-color: var(--e-global-color-d4b1a21);
    background-color: var(--e-global-color-d4b1a21);
}

/* Icon - CC-2 */
.cc-2 .ia-avatar-container .ia-avatar-icon {
    border-color: var(--e-global-color-d99ca76);
    background-color: var(--e-global-color-d99ca76);
}
body.mode .cc-2 .ia-avatar-container .ia-avatar-icon {
    border-color: var(--e-global-color-295a6a0);
    background-color: var(--e-global-color-295a6a0);
}

/* Icon - SVG */
.ia-avatar-container .ia-avatar-icon svg {
    width: auto;
    height: auto;
}

/* Icon - SVG Primary - CC-0 */
.cc-accent .ia-avatar-container .ia-avatar-icon svg .fa-primary, .cc-1 .ia-avatar-container .ia-avatar-icon svg .fa-primary, .cc-2 .ia-avatar-container .ia-avatar-icon svg .fa-primary {
    fill: var(--e-global-color-e8d2580);
}
body.mode .cc-accent .ia-avatar-container .ia-avatar-icon svg .fa-primary, body.mode .cc-1 .ia-avatar-container .ia-avatar-icon svg .fa-primary, body.mode .cc-2 .ia-avatar-container .ia-avatar-icon svg .fa-primary {
    fill: var(--e-global-color-e8d2580);
}
    
/* Icon - SVG Primary - CC-0 */
.cc-0 .ia-avatar-container .ia-avatar-icon svg .fa-primary, .cc-1 .ia-avatar-container .ia-avatar-icon svg .fa-primary, .cc-2 .ia-avatar-container .ia-avatar-icon svg .fa-primary {
    fill: var(--e-global-color-e8d2580);
}
body.mode .cc-0 .ia-avatar-container .ia-avatar-icon svg .fa-primary, body.mode .cc-1 .ia-avatar-container .ia-avatar-icon svg .fa-primary, body.mode .cc-2 .ia-avatar-container .ia-avatar-icon svg .fa-primary {
    fill: var(--e-global-color-74e93c4);
}

/* Icon - SVG Secondary - CC-0 */
.cc-accent .ia-avatar-container .ia-avatar-icon svg .fa-secondary, .cc-1 .ia-avatar-container .ia-avatar-icon svg .fa-secondary, .cc-2 .ia-avatar-container .ia-avatar-icon svg .fa-secondary {
    fill: var(--e-global-color-accent);
}
body.mode .cc-accent .ia-avatar-container .ia-avatar-icon svg .fa-secondary, body.mode .cc-1 .ia-avatar-container .ia-avatar-icon svg .fa-secondary, body.mode .cc-2 .ia-avatar-container .ia-avatar-icon svg .fa-secondary {
    fill: var(--e-global-color-accent);
}

/* Icon - SVG Secondary - CC-0 */
.cc-0 .ia-avatar-container .ia-avatar-icon svg .fa-secondary, .cc-1 .ia-avatar-container .ia-avatar-icon svg .fa-secondary, .cc-2 .ia-avatar-container .ia-avatar-icon svg .fa-secondary {
    fill: var(--e-global-color-accent);
}
body.mode .cc-0 .ia-avatar-container .ia-avatar-icon svg .fa-secondary, body.mode .cc-1 .ia-avatar-container .ia-avatar-icon svg .fa-secondary, body.mode .cc-2 .ia-avatar-container .ia-avatar-icon svg .fa-secondary {
    fill: var(--e-global-color-accent);
}