/* first color is frontend, second admin */
.kt-tag,
.kt-tag-over::after {
  display: inline-block;
  white-space: nowrap;
  background: color-mix(in srgb, var(--kt-primary, #606637ff), transparent 20%);
  color: var(--kt-background, white);
  padding: 1px 8px;
  border-radius: 5px;
  font-size: 14px;
}

.kt-tag-over::after {
  content: "";
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  width: auto;
  height: auto;
  background: color-mix(in srgb, var(--kt-primary, #606637ff), transparent 20%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  color: var(--kt-background, white);
  padding: 1px 8px;
  z-index: 999;
}

.kt-tag-active,
.kt-tag-success {
  color: var(--kt-on-primary, white);
  background-color: var(--kt-primary, #46b450);
}

.kt-tag-inactive {
  color: var(--kt-background, white);
  background-color: var(--kt-on-background, #888);
}

.kt-tag-alert {
  color: var(--kt-background, white);
  background-color: var(--kt-secondary, #d59318);
}

.kt-tag-error {
  color: var(--kt-background, white);
  background-color: var(--kt-tertiary, #dc3232);
}