/* KüA list special markup */
.kuealist .comment {
    font-size: .875em;
}
.kuealist .kuea-cancelled .kuea-title .content,
.kuealist .kuea-cancelled .kuea-time,
.kuealist .kuea-cancelled .kuea-place,
.kuealist .kuea-cancelled .kuea-people
{
    text-decoration: line-through;
}

/* KüA list category colors */
.kuealist tr.kuea-with-category {
    border-left: solid 5px var(--category-border);
}
.kuealist tr.kuea-with-category .kuea-title .content {
    color: var(--category-text);
}

[data-bs-theme="dark"] .kuealist tr.kuea-with-category {
    border-left-color: var(--category-border-dark);
}
[data-bs-theme="dark"] .kuealist tr.kuea-with-category .kuea-title .content {
    color: var(--category-text-dark);
}

/* Fixes for tom-select dark theme colors */
.ts-control, .ts-control input, .ts-dropdown {
    color: var(--bs-body-color);
}
.ts-wrapper.multi .ts-control > div {
    background: var(--bs-secondary-bg);
    border: 0 solid var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Extra component for error pages */
.error-technical-info {
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
    padding: 1rem;
    border-left: 0.25rem solid var(--bs-secondary-border-subtle);
    border-radius: var(--bs-border-radius);
}

/* Extra components for category management */
.color-demo {
    width: 1em;
    height: 1em;
    display: inline-block;
    background: var(--demo-color);
    margin-right: .5rem;
    margin-bottom: -1px;
    border: solid 1px var(--bs-border-color);
    border-radius: .25rem;
}
tr.category-row>* {
    background: var(--category-bg);
    color: var(--category-text);
}
[data-bs-theme="dark"] tr.category-row>* {
    background: var(--category-bg-dark);
    color: var(--category-text-dark);
}
.list-group-item.category-row {
    --bs-list-group-color: var(--category-text);
    --bs-list-group-bg: var(--category-bg);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--category-border);
    --bs-list-group-action-active-color: var(--bs-emphasis-color);
    --bs-list-group-action-active-bg: var(--category-border);
    --bs-list-group-active-color: var(--category-bg);
    --bs-list-group-active-bg: var(--category-text);
}
[data-bs-theme="dark"]  .list-group-item.category-row {
    --bs-list-group-color: var(--category-text-dark);
    --bs-list-group-bg: var(--category-bg-dark);
    --bs-list-group-action-hover-bg: var(--category-border-dark);
    --bs-list-group-action-active-bg: var(--category-border-dark);
    --bs-list-group-active-color: var(--category-bg-dark);
    --bs-list-group-active-bg: var(--category-text-dark);
}

/* loader-overlay component */
.loader-overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(var(--bs-body-bg-rgb),.8);
    backdrop-filter: blur(4px);
}
.card>:last-child>.loader-overlay {
    border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);
}

/* Fix for border-radius of .overflow-y-auto in card */
.card>:last-child>.overflow-y-auto, .card>:last-child.overflow-y-auto {
    border-radius: 0 0 var(--bs-card-border-radius) var(--bs-card-border-radius);
}

/* Add text color and border color "invalid", which is the same as "is-invalid" on a form-control input */
.text-invalid {
    color: var(--bs-form-invalid-color);
}
.border-invalid {
    border-color: var(--bs-form-invalid-border-color);
}

/* Helper classes */
.inner-margin-fix>:last-child{
    margin-bottom: 0;
}
td.shrink-to-content {
    width: 0;
    min-width: fit-content;
    text-wrap: nowrap;
}