label span.required {
    color:red;
}

.hide-loading {
    display: none !important;
}

.show-loading {
    display: block !important;
}

.kt-input-addon {
    height: auto;
}

.hero-bg {
    background-image: url("../admin/metronic/media/images/2600x1200/bg-1-V_sJsKR.png");
}

.kt-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
	pointer-events: none;
}

button, .kt-button {
    @apply hover:cursor-pointer
}

.kt-select-tag {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    border-radius: 0;
    padding-inline: calc(var(--spacing) * 2);
    padding-block: calc(var(--spacing) * 1);
    font-size: var(--text-xs);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    border-style: var(--tw-border-style);
    border-width: 0.5px;
    border-color: var(--border);
    @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--border) 80%, transparent);
    }
    background-color: var(--accent);
    @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--accent) 10%, transparent);
    }
    color: var(--accent-foreground);
    max-width: 200px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kt-select-tag-remove {
    display: flex;
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    align-items: center;
    justify-content: center;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 0px;
    background-color: transparent;
    padding: calc(var(--spacing) * 0);
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    color: var(--muted-foreground);
    &:hover {
        @media (hover: hover) {
            background-color: var(--accent);
            @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--accent) 20%, transparent);
            }
        }
    }
    &:hover {
        @media (hover: hover) {
            color: var(--accent-foreground);
        }
    }
    cursor: pointer;
    transition-property: color,background-color,transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    --tw-duration: 200ms;
    transition-duration: 200ms;
    flex-shrink: 0;
    opacity: 100%;
    &:hover {
        @media (hover: hover) {
            --tw-scale-x: 105%;
            --tw-scale-y: 105%;
            --tw-scale-z: 105%;
            scale: var(--tw-scale-x) var(--tw-scale-y);
        }
    }
}
.kt-select-tag-remove svg {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    --tw-duration: 200ms;
    transition-duration: 200ms;
}
.kt-select-tag-remove:hover svg {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
}
.kt-select-selected-count {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    font-size: var(--text-xs);
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
    color: var(--muted-foreground);
}
.kt-select-display[data-multiple='true'] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    min-height: calc(var(--spacing) * 0);
    width: 100%;
    border-radius: calc(var(--radius) - 2px);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--input);
    background-color: var(--background);
    &:focus-within {
        border-color: var(--ring);
    }
    &:focus-within {
        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
    &:focus-within {
        --tw-ring-color: var(--ring);
        @supports (color: color-mix(in lab, red, red)) {
            --tw-ring-color: color-mix(in oklab, var(--ring) 20%, transparent);
        }
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    --tw-duration: 200ms;
    transition-duration: 200ms;
}