.kt-tag {
    display: inline-flex;
    background-color: var(--kt-ui-tag-blue-20);
    font-family: "IBM Plex Sans";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.32px;
    padding: 4px 12px;
    border-radius: 24px;
    position: relative;
    margin: 2px;
}
.kt-tag__close {
    position: absolute;
    right: -6px;
    top: -6px;
    display: block;
    background-image: var(--kt-icon-svg-black);
    background-repeat: no-repeat;
    background-position: center;
    width: 16px;
    height: 16px;
    border-radius: 24px;
    background-color: var(--kt-ui-layer-01);
    cursor: pointer;
    border: 1px solid transparent;
}
.kt-tag__close:hover {
    background-image: var(--kt-icon-svg-white);
    background-color: var(--kt-ui-tag-blue-20-hover);
}
.kt-tag__close:focus {
    border-color: var(--kt-ui-focus);
}

/* Tag Blue-20 Color (--kt-ui-tag-blue-20) */
.kt-tag__blue-20 {
    color: var( --kt-ui-text-primary, #161616);
    background-color: var(--kt-ui-tag-blue-20);
}
.kt-tag__blue-20:hover {
    background-color: var(--kt-ui-tag-blue-20-hover);
}
.kt-tag__blue-20 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-blue-20-hover);
}

/* Tag Blue-50 Color (--kt-ui-tag-blue-50) */
.kt-tag__blue-50 {
    color: var(--kt-text-on-color, #ffffff);
    background-color: var(--kt-ui-tag-blue-50);
}
.kt-tag__blue-50:hover {
    background-color: var(--kt-ui-tag-blue-50-hover);
}
.kt-tag__blue-50 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-blue-50-hover);
}

/* Tag Green-20 Color (--kt-ui-tag-green-20) */
.kt-tag__green-20 {
    color: var(--kt-ui-text-primary, #161616);
    background-color: var(--kt-ui-tag-green-20);
}
.kt-tag__green-20:hover {
    background-color: var(--kt-ui-tag-green-20-hover);
}
.kt-tag__green-20 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-green-20-hover);
}
/* Tag Green-50 Color (--kt-ui-tag-green-50) */
.kt-tag__green-50 {
    color: var(--kt-ui-text-on-color, #ffffff);
    background-color: var(--kt-ui-tag-green-50);
}
.kt-tag__green-50:hover {
    background-color: var(--kt-ui-tag-green-50-hover);
}
.kt-tag__green-50 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-green-50-hover);
}
/* --kt-ui-tag-magenta-20 */
.kt-tag__magenta-20 {
    color: var(--kt-text-primary, #161616);
    background-color: var(--kt-ui-tag-magenta-20);
}
.kt-tag__magenta-20:hover {
    background-color: var(--kt-ui-tag-magenta-20-hover);
}
.kt-tag__magenta-20 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-magenta-20-hover);
}

/* --kt-ui-tag-magenta-50 */
.kt-tag__magenta-50 {
    color: var(--kt-ui-text-on-color, #ffffff);
    background-color: var(--kt-ui-tag-magenta-50);
}
.kt-tag__magenta-50:hover {
    background-color: var(--kt-ui-tag-magenta-50-hover);
}
.kt-tag__magenta-50 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-magenta-50-hover);
}
/* --kt-ui-tag-yellow-20 */
.kt-tag__yellow-20 {
    color: var(--kt-ui-text-primary, #161616);
    background-color: var(--kt-ui-tag-yellow-20);
}
.kt-tag__yellow-20:hover {
    background-color: var(--kt-ui-tag-yellow-20-hover);
}
.kt-tag__yellow-20 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-yellow-20-hover);
}

/* --kt-ui-tag-yellow-50 */
.kt-tag__yellow-50 {
    color: var(--kt-ui-text-on-color, #ffffff);
    background-color: var(--kt-ui-tag-yellow-50);
}
.kt-tag__yellow-50:hover {
    background-color: var(--kt-ui-tag-yellow-50-hover);
}
.kt-tag__yellow-50 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-yellow-50-hover);
}
/* --kt-ui-tag-purple-20 */
.kt-tag__purple-20 {
    color: var(--kt-text-primary, #161616);
    background-color: var(--kt-ui-tag-purple-20);
}
.kt-tag__purple-20:hover {
    background-color: var(--kt-ui-tag-purple-20-hover);
}
.kt-tag__purple-20 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-purple-20-hover);
}

/* --kt-ui-tag-purple-50 */
.kt-tag__purple-50 {
    color: var(--kt-ui-text-on-color, #ffffff);
    background-color: var(--kt-ui-tag-purple-50);
}
.kt-tag__purple-50:hover {
    background-color: var(--kt-ui-tag-purple-50-hover);
}
.kt-tag__purple-50 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-purple-50-hover);
}
/* --kt-ui-tag-red-20 */
.kt-tag__red-20 {
    color: var(--kt-text-primary, #161616);
    background-color: var(--kt-ui-tag-red-20);
}
.kt-tag__red-20:hover {
    background-color: var(--kt-ui-tag-red-20-hover);
}
.kt-tag__red-20 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-red-20-hover);
}

/* --kt-ui-tag-red-50 */
.kt-tag__red-50 {
    color: var(--kt-ui-text-on-color, #ffffff);
    background-color: var(--kt-ui-tag-red-50);
}
.kt-tag__red-50:hover {
    background-color: var(--kt-ui-tag-red-50-hover);
}
.kt-tag__red-50 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-red-50-hover);
}
/* --kt-ui-tag-teal-20 */
.kt-tag__teal-20 {
    color: var(--kt-ui-text-primary, #161616);
    background-color: var(--kt-ui-tag-teal-20);
}
.kt-tag__teal-20:hover {
    background-color: var(--kt-ui-tag-teal-20-hover);
}
.kt-tag__teal-20 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-teal-20-hover);
}

/* --kt-ui-tag-teal-50 */
.kt-tag__teal-50 {
    color: var(--kt-ui-text-on-color, #ffffff);
    background-color: var(--kt-ui-tag-teal-50);
}
.kt-tag__teal-50:hover {
    background-color: var(--kt-ui-tag-teal-50-hover);
}
.kt-tag__teal-50 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-teal-50-hover);
}
/* --kt-ui-tag-orange-20 */
.kt-tag__orange-20 {
    color: var(--kt-ui-text-primary, #161616);
    background-color: var(--kt-ui-tag-orange-20);
}
.kt-tag__orange-20:hover {
    background-color: var(--kt-ui-tag-orange-20-hover);
}
.kt-tag__orange-20 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-orange-20-hover);
}

/* --kt-ui-tag-teal-50 */
.kt-tag__orange-50 {
    color: var(--kt-ui-text-on-color, #ffffff);
    background-color: var(--kt-ui-tag-orange-50);
}
.kt-tag__orange-50:hover {
    background-color: var(--kt-ui-tag-orange-50-hover);
}
.kt-tag__orange-50 .kt-tag__close:hover {
    background-color: var(--kt-ui-tag-orange-50-hover);
}
/* Tag Disabled */
.kt-tag__disabled:hover,
.kt-tag__disabled {
    background-color: var(--kt-ui-layer-01);
    color: var(--kt-ui-text-disabled);
}
.kt-tag__disabled .kt-tag__close:hover,
.kt-tag__disabled .kt-tag__close:focus,
.kt-tag__disabled .kt-tag__close {
    background-image: var(--kt-icon-svg-disable);
    background-color: var(--kt-ui-layer-01);
    cursor: default;
}

/* Quasar tag region */
.k-team.desktop .q-chip--clickable:focus {
    box-shadow: none;
}
/* End quasar tag region */