:root {
    --ui-icon-size-xs: var(--kt-ui-icon-size-xs);
    --ui-icon-size-sm: var(--kt-ui-icon-size-sm);
    --ui-icon-size-md: var(--kt-ui-icon-size-md);
    --ui-icon-size-lg: var(--kt-ui-icon-size-lg);
    --ui-icon-size: var(--kt-ui-icon-size-sm);
}

.ui-icon-common-user {
    --ui-icon-service-bg-color: var(--kt-ui-icon-common-user-bg-color);
    --ui-icon-service-bg-image: var(--kt-ui-icon-common-user-bg-image);
}

.ui-icon-xl {
    --ui-icon-size: var(--kt-ui-icon-size-xl);
}

.ui-icon > i {
    background-size: 45%;
}

.ui-icon-xl > i,
.ui-icon-lg > i {
    background-size: 35%;
}

.ui-icon-md > i,
.ui-icon-sm > i {
    background-size: 45%;
}

.ui-icon-xs > i {
    background-size: 65%;
}

.kt-mask-icon-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.kt-mask-icon {
    position: relative;
    width: var(--kt-mask-icon-size, var(--ui-icon-size-sm));
    height: var(--kt-mask-icon-size, var(--ui-icon-size-sm));
}

.kt-mask-icon:after {
    mask: var(--kt-mask-icon) center no-repeat;
    -webkit-mask: var(--kt-mask-icon) center no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    position: absolute;
    background-color: var(--kt-mask-icon-color, var(--kt-ui-icon-primary));
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: '';
}

a .kt-mask-icon {
    --kt-mask-icon-color: var(--ui-link-color);
}

.ui-icon-common-user > i,
.calendar-planner-user-image-icon.ui-icon > i,
.calendar-field-choice-calendar-img .ui-icon > i  {
    background-size: cover;
}