/* VSN Telerik 13 theme bridge.
   The base component CSS comes from the Telerik UI for Blazor package. This file owns VSN's
   colors and fills the Telerik 13 default-appearance gaps for components that do not specify
   Size, Rounded, FillMode, or ThemeColor in Razor. */

:root {
    --vsn-color-teal: #61c0bf;
    --vsn-color-teal-hover: #5db8b7;
    --vsn-color-teal-active: #55a9a8;
    --vsn-color-teal-subtle: #dff2f2;
    --vsn-color-teal-emphasis: #8fd7d6;
    --vsn-color-cream: #fae3d9;
    --vsn-color-cream-muted: #cbb8b0;
    --vsn-color-dark: #111111;
    --vsn-color-surface: #1a1a1a;
    --vsn-color-surface-alt: #2a2a2a;
    --vsn-color-border: rgba(250, 227, 217, 0.7);
    --vsn-color-border-muted: rgba(250, 227, 217, 0.28);

    --kendo-color-app-surface: var(--vsn-color-dark);
    --kendo-color-on-app-surface: var(--vsn-color-cream);
    --kendo-color-subtle: var(--vsn-color-cream);
    --kendo-color-surface: var(--vsn-color-surface);
    --kendo-color-surface-alt: var(--vsn-color-surface-alt);
    --kendo-color-border: var(--vsn-color-border);
    --kendo-color-border-alt: var(--vsn-color-border-muted);

    --kendo-color-base-subtle: rgba(97, 192, 191, 0.18);
    --kendo-color-base-subtle-hover: rgba(97, 192, 191, 0.24);
    --kendo-color-base-subtle-active: rgba(97, 192, 191, 0.3);
    --kendo-color-base: var(--vsn-color-teal);
    --kendo-color-base-hover: var(--vsn-color-teal-hover);
    --kendo-color-base-active: var(--vsn-color-teal-active);
    --kendo-color-base-emphasis: #4d9897;
    --kendo-color-base-on-subtle: var(--vsn-color-cream);
    --kendo-color-on-base: #18302f;
    --kendo-color-base-on-surface: var(--vsn-color-teal);

    --kendo-color-primary-subtle: var(--vsn-color-teal-subtle);
    --kendo-color-primary-subtle-hover: #c7e9e9;
    --kendo-color-primary-subtle-active: #b8dfdf;
    --kendo-color-primary: var(--vsn-color-teal);
    --kendo-color-primary-hover: var(--vsn-color-teal-hover);
    --kendo-color-primary-active: var(--vsn-color-teal-active);
    --kendo-color-primary-emphasis: var(--vsn-color-teal-emphasis);
    --kendo-color-primary-on-subtle: #223f3f;
    --kendo-color-on-primary: #ffffff;
    --kendo-color-primary-on-surface: var(--vsn-color-teal);

    --kendo-color-secondary-subtle: rgba(250, 227, 217, 0.18);
    --kendo-color-secondary-subtle-hover: rgba(250, 227, 217, 0.24);
    --kendo-color-secondary-subtle-active: rgba(250, 227, 217, 0.3);
    --kendo-color-secondary: var(--vsn-color-cream);
    --kendo-color-secondary-hover: #f3d3c5;
    --kendo-color-secondary-active: #e8c3b5;
    --kendo-color-secondary-emphasis: var(--vsn-color-cream-muted);
    --kendo-color-secondary-on-subtle: var(--vsn-color-cream);
    --kendo-color-on-secondary: #111111;
    --kendo-color-secondary-on-surface: var(--vsn-color-cream);

    --kendo-color-tertiary-subtle: rgba(243, 163, 125, 0.18);
    --kendo-color-tertiary-subtle-hover: rgba(243, 163, 125, 0.24);
    --kendo-color-tertiary-subtle-active: rgba(243, 163, 125, 0.3);
    --kendo-color-tertiary: #f3a37d;
    --kendo-color-tertiary-hover: #ee956c;
    --kendo-color-tertiary-active: #df855d;
    --kendo-color-tertiary-emphasis: #f4b79a;
    --kendo-color-tertiary-on-subtle: #ffd7c4;
    --kendo-color-on-tertiary: #111111;
    --kendo-color-tertiary-on-surface: #f3a37d;

    --kendo-color-info: var(--vsn-color-teal);
    --kendo-color-info-hover: var(--vsn-color-teal-hover);
    --kendo-color-info-active: var(--vsn-color-teal-active);
    --kendo-color-info-subtle: rgba(97, 192, 191, 0.18);
    --kendo-color-info-subtle-hover: rgba(97, 192, 191, 0.24);
    --kendo-color-info-subtle-active: rgba(97, 192, 191, 0.3);
    --kendo-color-info-emphasis: var(--vsn-color-teal-emphasis);
    --kendo-color-info-on-subtle: var(--vsn-color-cream);
    --kendo-color-on-info: #ffffff;
    --kendo-color-info-on-surface: var(--vsn-color-teal);
    --kendo-color-success: #61c0bf;
    --kendo-color-success-hover: #5db8b7;
    --kendo-color-success-active: #55a9a8;
    --kendo-color-success-subtle: rgba(97, 192, 191, 0.18);
    --kendo-color-success-subtle-hover: rgba(97, 192, 191, 0.24);
    --kendo-color-success-subtle-active: rgba(97, 192, 191, 0.3);
    --kendo-color-success-emphasis: var(--vsn-color-teal-emphasis);
    --kendo-color-success-on-subtle: var(--vsn-color-cream);
    --kendo-color-on-success: #ffffff;
    --kendo-color-success-on-surface: var(--vsn-color-teal);
    --kendo-color-warning: #ffcc00;
    --kendo-color-warning-hover: #f2c100;
    --kendo-color-warning-active: #e5b700;
    --kendo-color-warning-subtle: rgba(255, 204, 0, 0.16);
    --kendo-color-warning-subtle-hover: rgba(255, 204, 0, 0.22);
    --kendo-color-warning-subtle-active: rgba(255, 204, 0, 0.28);
    --kendo-color-warning-emphasis: #ffda4d;
    --kendo-color-warning-on-subtle: #ffe58f;
    --kendo-color-on-warning: #000000;
    --kendo-color-warning-on-surface: #ffda4d;
    --kendo-color-error: #ff4d4d;
    --kendo-color-error-hover: #f04444;
    --kendo-color-error-active: #dc3838;
    --kendo-color-error-subtle: rgba(255, 77, 77, 0.16);
    --kendo-color-error-subtle-hover: rgba(255, 77, 77, 0.22);
    --kendo-color-error-subtle-active: rgba(255, 77, 77, 0.28);
    --kendo-color-error-emphasis: #ff8585;
    --kendo-color-error-on-subtle: #ffc9c9;
    --kendo-color-on-error: #ffffff;
    --kendo-color-error-on-surface: #ff8585;
    --kendo-color-light: #ffffff;
    --kendo-color-light-hover: #f4f4f4;
    --kendo-color-light-active: #e6e6e6;
    --kendo-color-light-emphasis: #d7d7d7;
    --kendo-color-light-on-subtle: #111111;
    --kendo-color-on-light: #111111;
    --kendo-color-light-on-surface: #ffffff;
    --kendo-color-dark: #000000;
    --kendo-color-dark-hover: #1a1a1a;
    --kendo-color-dark-active: #262626;
    --kendo-color-dark-emphasis: #555555;
    --kendo-color-dark-on-subtle: var(--vsn-color-cream);
    --kendo-color-on-dark: #ffffff;
    --kendo-color-dark-on-surface: #000000;
    --kendo-color-inverse: var(--vsn-color-cream);
    --kendo-color-inverse-hover: #f3d3c5;
    --kendo-color-inverse-active: #e8c3b5;
    --kendo-color-on-inverse: #111111;

    --kendo-border-radius-md: 8px;
    --kendo-border-radius-lg: 12px;
    --kendo-font-family: inherit;
    --kendo-letter-spacing: 0;

    --vsn-kendo-radius-md: var(--kendo-border-radius-md);
    --vsn-kendo-primary: var(--kendo-color-primary);
    --vsn-kendo-primary-hover: var(--kendo-color-primary-hover);
    --vsn-kendo-primary-active: var(--kendo-color-primary-active);
    --vsn-kendo-on-primary: var(--kendo-color-on-primary);
    --vsn-kendo-base: var(--kendo-color-base);
    --vsn-kendo-base-hover: var(--kendo-color-base-hover);
    --vsn-kendo-on-base: var(--kendo-color-on-base);
    --vsn-kendo-border: var(--kendo-color-border);
    --vsn-kendo-surface: var(--kendo-color-surface);
    --vsn-kendo-app-surface: var(--kendo-color-app-surface);
    --vsn-kendo-on-surface: var(--kendo-color-on-app-surface);
}

.k-icon[class*="k-i-"] {
    width: 1em;
    height: 1em;
    font-family: "WebComponentsIcons";
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

.k-button {
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kendo-spacing-2, 8px);
    font-family: var(--kendo-font-family, inherit);
    font-size: var(--kendo-font-size, inherit);
    font-weight: var(--kendo-font-weight-medium, 500);
    line-height: var(--kendo-line-height, normal);
    white-space: nowrap;
}

.k-button:where(:not(.k-button-xs):not(.k-button-sm):not(.k-button-md):not(.k-button-lg):not(.k-button-xl):not(.k-button-xxl):not(.k-button-xxxl)) {
    padding-block: calc(var(--kendo-spacing-2, 8px) + var(--kendo-spacing-1px, 1px));
    padding-inline: var(--kendo-spacing-4, 16px);
}

.k-button:where(:not(.k-rounded-sm):not(.k-rounded-md):not(.k-rounded-lg):not(.k-rounded-full):not(.k-rounded-none)) {
    border-radius: var(--vsn-kendo-radius-md);
}

.k-button:where(:not(.k-button-flat):not(.k-button-outline):not(.k-button-clear):not(.k-button-link)),
.k-button.k-button-solid,
.k-button.k-button-solid-base {
    border-color: var(--vsn-kendo-base);
    color: var(--vsn-kendo-on-base);
    background-color: var(--vsn-kendo-base);
    background-image: none;
}

.k-button:where(:not(.k-button-flat):not(.k-button-outline):not(.k-button-clear):not(.k-button-link)):hover,
.k-button.k-button-solid:hover,
.k-button.k-button-solid-base:hover,
.k-button.k-hover:where(:not(.k-button-flat):not(.k-button-outline):not(.k-button-clear):not(.k-button-link)) {
    border-color: var(--vsn-kendo-base-hover);
    background-color: var(--vsn-kendo-base-hover);
}

.k-button.k-button-primary:where(:not(.k-button-outline):not(.k-button-flat):not(.k-button-clear):not(.k-button-link)),
.k-button.k-button-solid-primary {
    border-color: var(--vsn-kendo-primary);
    color: var(--vsn-kendo-on-primary);
    background-color: var(--vsn-kendo-primary);
}

.k-button.k-button-primary:where(:not(.k-button-outline):not(.k-button-flat):not(.k-button-clear):not(.k-button-link)):hover,
.k-button.k-button-solid-primary:hover {
    border-color: var(--vsn-kendo-primary-hover);
    background-color: var(--vsn-kendo-primary-hover);
}

.k-button.k-button-secondary:where(:not(.k-button-outline):not(.k-button-flat):not(.k-button-clear):not(.k-button-link)),
.k-button.k-button-solid-secondary {
    border-color: var(--kendo-color-secondary, #fae3d9);
    color: var(--kendo-color-on-secondary, #000000);
    background-color: var(--kendo-color-secondary, #fae3d9);
}

.k-button.k-button-error:where(:not(.k-button-outline):not(.k-button-flat):not(.k-button-clear):not(.k-button-link)),
.k-button.k-button-solid-error {
    border-color: var(--kendo-color-error, #ff4d4d);
    color: var(--kendo-color-on-error, #ffffff);
    background-color: var(--kendo-color-error, #ff4d4d);
}

.k-button.k-button-light:where(:not(.k-button-outline):not(.k-button-flat):not(.k-button-clear):not(.k-button-link)),
.k-button.k-button-solid-light {
    border-color: var(--kendo-color-light, #ffffff);
    color: var(--kendo-color-on-light, #1d1b20);
    background-color: var(--kendo-color-light, #ffffff);
}

.k-button.k-button-dark:where(:not(.k-button-outline):not(.k-button-flat):not(.k-button-clear):not(.k-button-link)),
.k-button.k-button-solid-dark {
    border-color: var(--kendo-color-dark, #000000);
    color: var(--kendo-color-on-dark, #ffffff);
    background-color: var(--kendo-color-dark, #000000);
}

.k-button.k-button-outline,
.k-button.k-button-outline-base,
.k-button.k-button-base.k-button-outline {
    border-color: color-mix(in srgb, var(--vsn-kendo-on-surface) 44%, transparent);
    color: var(--vsn-kendo-on-surface);
    background-color: transparent;
}

.k-button.k-button-outline-primary,
.k-button.k-button-primary.k-button-outline {
    border-color: var(--vsn-kendo-primary);
    color: var(--vsn-kendo-primary);
    background-color: transparent;
}

.k-button.k-button-outline-error,
.k-button.k-button-error.k-button-outline {
    border-color: var(--kendo-color-error, #ff4d4d);
    color: var(--kendo-color-error, #ff4d4d);
    background-color: transparent;
}

.k-button.k-button-outline:hover,
.k-button.k-button-outline-base:hover,
.k-button.k-button-base.k-button-outline:hover,
.k-button.k-button-outline-primary:hover,
.k-button.k-button-primary.k-button-outline:hover {
    background-color: color-mix(in srgb, var(--vsn-kendo-primary) 8%, transparent);
}

.k-button.k-button-clear,
.k-button.k-button-clear-base,
.k-button.k-button-base.k-button-clear {
    border-color: transparent;
    color: inherit;
    background-color: transparent;
}

.k-button.k-button-clear-primary,
.k-button.k-button-primary.k-button-clear {
    color: var(--vsn-kendo-primary);
}

.k-button:disabled,
.k-button.k-disabled {
    opacity: var(--kendo-disabled-opacity, .6);
    filter: var(--kendo-disabled-filter, grayscale(.1));
    pointer-events: none;
}

.k-button:disabled:where(:not(.k-button-clear):not(.k-button-link)),
.k-button.k-disabled:where(:not(.k-button-clear):not(.k-button-link)) {
    border-color: color-mix(in srgb, var(--vsn-kendo-on-surface) 12%, transparent);
    color: color-mix(in srgb, var(--vsn-kendo-on-surface) 46%, transparent);
    background-color: color-mix(in srgb, var(--vsn-kendo-on-surface) 12%, transparent);
}

.k-split-button,
.k-button-group.k-split-button {
    display: inline-flex;
    align-items: stretch;
}

.k-split-button .k-button {
    border-radius: 0;
}

.k-split-button .k-button:first-child {
    border-start-start-radius: var(--vsn-kendo-radius-md);
    border-end-start-radius: var(--vsn-kendo-radius-md);
}

.k-split-button .k-button:last-child {
    border-start-end-radius: var(--vsn-kendo-radius-md);
    border-end-end-radius: var(--vsn-kendo-radius-md);
}

.k-split-button .k-button + .k-button {
    border-inline-start-color: color-mix(in srgb, var(--vsn-kendo-on-base) 20%, transparent);
}

.k-picker:where(:not(.k-picker-outline):not(.k-picker-flat)),
.k-input:where(:not(.k-input-outline):not(.k-input-flat)) {
    border-width: 1px 0;
    border-style: solid;
    border-block-start-color: transparent;
    border-block-end-color: color-mix(in srgb, var(--vsn-kendo-on-surface) 44%, transparent);
    color: var(--vsn-kendo-on-surface);
    background-color: var(--vsn-kendo-surface);
    background-image: none;
    border-start-start-radius: var(--vsn-kendo-radius-md);
    border-start-end-radius: var(--vsn-kendo-radius-md);
    border-end-end-radius: 0;
    border-end-start-radius: 0;
}

.k-picker:where(:not(.k-picker-outline):not(.k-picker-flat)):hover,
.k-input:where(:not(.k-input-outline):not(.k-input-flat)):hover {
    border-block-end-color: var(--vsn-kendo-on-surface);
}

.k-picker:where(:not(.k-picker-outline):not(.k-picker-flat)):focus-within,
.k-input:where(:not(.k-input-outline):not(.k-input-flat)):focus-within,
.k-picker.k-focus:where(:not(.k-picker-outline):not(.k-picker-flat)),
.k-input.k-focus:where(:not(.k-input-outline):not(.k-input-flat)) {
    border-block-end-color: var(--vsn-kendo-primary);
}

.k-picker:where(:not(.k-picker-sm):not(.k-picker-md):not(.k-picker-lg)) .k-input-inner,
.k-input:where(:not(.k-input-sm):not(.k-input-md):not(.k-input-lg)) .k-input-inner {
    padding-block: calc(var(--kendo-spacing-2, 8px) + var(--kendo-spacing-1px, 1px));
    padding-inline: var(--kendo-spacing-4, 16px);
}

.k-picker .k-input-button,
.k-input .k-input-button {
    border-color: transparent;
    color: inherit;
    background-color: transparent;
    background-image: none;
}

.k-picker:where(:not(.k-picker-sm):not(.k-picker-md):not(.k-picker-lg)) .k-input-button,
.k-input:where(:not(.k-input-sm):not(.k-input-md):not(.k-input-lg)) .k-input-button {
    padding-block: calc(var(--kendo-spacing-2, 8px) + var(--kendo-spacing-1px, 1px));
    padding-inline: calc(var(--kendo-spacing-2, 8px) + var(--kendo-spacing-1px, 1px));
}

.k-multiselect .k-input-values {
    gap: var(--kendo-spacing-1, 4px);
}

textarea.k-textarea:where(:not(.k-input-outline):not(.k-input-flat)),
.k-textarea:where(:not(.k-input-outline):not(.k-input-flat):not(.k-input-solid)) {
    border-width: 1px 0;
    border-style: solid;
    border-block-start-color: transparent;
    border-block-end-color: color-mix(in srgb, var(--vsn-kendo-on-surface) 44%, transparent);
    color: var(--vsn-kendo-on-surface);
    background-color: var(--vsn-kendo-surface);
    background-image: none;
    border-start-start-radius: var(--vsn-kendo-radius-md);
    border-start-end-radius: var(--vsn-kendo-radius-md);
    border-end-end-radius: 0;
    border-end-start-radius: 0;
}

textarea.k-textarea:where(:not(.k-input-sm):not(.k-input-md):not(.k-input-lg)),
.k-textarea:where(:not(.k-input-sm):not(.k-input-md):not(.k-input-lg)) .k-input-inner {
    padding-block: calc(var(--kendo-spacing-1\.5, 0.375rem) + var(--kendo-spacing-1px, 1px));
    padding-inline: var(--kendo-spacing-4, 16px);
}

textarea.k-textarea:hover,
.k-textarea:where(:not(.k-input-outline):not(.k-input-flat)):hover {
    border-block-end-color: var(--vsn-kendo-on-surface);
}

textarea.k-textarea:focus,
.k-textarea:where(:not(.k-input-outline):not(.k-input-flat)):focus-within {
    border-block-end-color: var(--vsn-kendo-primary);
}

.k-chip:where(:not(.k-chip-sm):not(.k-chip-md):not(.k-chip-lg)) {
    padding-block: calc(var(--kendo-spacing-2\.5, 0.625rem) / 2);
    padding-inline: var(--kendo-spacing-4, 16px);
    font-size: var(--kendo-font-size, inherit);
    line-height: var(--kendo-line-height, normal);
}

.k-chip:where(:not(.k-rounded-sm):not(.k-rounded-md):not(.k-rounded-lg):not(.k-rounded-full):not(.k-rounded-none)) {
    border-radius: var(--vsn-kendo-radius-md);
}

.k-chip:where(:not(.k-chip-sm):not(.k-chip-md):not(.k-chip-lg)) .k-chip-action {
    padding: calc(var(--kendo-spacing-2\.5, 0.625rem) / 2);
}

.k-chip-list:where(:not(.k-chip-list-sm):not(.k-chip-list-md):not(.k-chip-list-lg)) {
    gap: var(--kendo-spacing-1, 4px);
}

.k-chip:where(:not([class*="k-chip-outline"]):not([class*="k-chip-flat"]):not(.k-chip-solid-primary):not(.k-chip-solid-secondary):not(.k-chip-solid-tertiary):not(.k-chip-solid-info):not(.k-chip-solid-success):not(.k-chip-solid-warning):not(.k-chip-solid-error):not(.k-chip-solid-light):not(.k-chip-solid-dark):not(.k-chip-solid-inverse)),
.k-chip.k-chip-solid-base {
    border-color: var(--kendo-color-base-subtle, var(--vsn-kendo-base));
    color: var(--kendo-color-base-on-subtle, var(--vsn-kendo-on-base));
    background-color: var(--kendo-color-base-subtle, var(--vsn-kendo-base));
}

.k-chip:where(:not([class*="k-chip-outline"]):not([class*="k-chip-flat"]):not(.k-chip-solid-primary):not(.k-chip-solid-secondary):not(.k-chip-solid-tertiary):not(.k-chip-solid-info):not(.k-chip-solid-success):not(.k-chip-solid-warning):not(.k-chip-solid-error):not(.k-chip-solid-light):not(.k-chip-solid-dark):not(.k-chip-solid-inverse)):hover,
.k-chip.k-chip-solid-base:hover,
.k-chip.k-chip-solid-base.k-hover {
    border-color: var(--kendo-color-base-subtle-hover, var(--vsn-kendo-base-hover));
    background-color: var(--kendo-color-base-subtle-hover, var(--vsn-kendo-base-hover));
}

.k-chip:where(:not([class*="k-chip-outline"]):not([class*="k-chip-flat"]):not(.k-chip-solid-primary):not(.k-chip-solid-secondary):not(.k-chip-solid-tertiary):not(.k-chip-solid-info):not(.k-chip-solid-success):not(.k-chip-solid-warning):not(.k-chip-solid-error):not(.k-chip-solid-light):not(.k-chip-solid-dark):not(.k-chip-solid-inverse)).k-selected,
.k-chip.k-chip-solid-base.k-selected {
    border-color: var(--kendo-color-base-subtle-active, var(--vsn-kendo-primary-active));
    background-color: var(--kendo-color-base-subtle-active, var(--vsn-kendo-primary-active));
}

.k-checkbox {
    margin: 0;
    padding: 0;
    border-width: 2px;
    border-style: solid;
    border-color: var(--vsn-kendo-on-surface);
    outline: 0;
    color: var(--vsn-kendo-on-primary);
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    display: inline-block;
    flex: none;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.k-checkbox:where(:not(.k-checkbox-sm):not(.k-checkbox-md):not(.k-checkbox-lg)) {
    width: var(--kendo-spacing-4, 16px);
    height: var(--kendo-spacing-4, 16px);
}

.k-checkbox:where(:not(.k-rounded-sm):not(.k-rounded-md):not(.k-rounded-lg):not(.k-rounded-full):not(.k-rounded-none)) {
    border-radius: 50%;
}

.k-checkbox::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.k-checkbox:where(:not(.k-checkbox-sm):not(.k-checkbox-md):not(.k-checkbox-lg))::before {
    font-size: var(--kendo-spacing-4, 16px);
}

.k-checkbox:where(:not(.k-checkbox-sm):not(.k-checkbox-md):not(.k-checkbox-lg))::after {
    width: var(--kendo-spacing-10, 40px);
    height: var(--kendo-spacing-10, 40px);
}

.k-checkbox:checked,
.k-checkbox.k-checked {
    border-color: var(--vsn-kendo-primary);
    color: var(--vsn-kendo-on-primary);
    background-color: var(--vsn-kendo-primary);
}

.k-checkbox:checked::before,
.k-checkbox.k-checked::before {
    background-color: currentColor;
}

.k-checkbox:hover,
.k-checkbox.k-hover {
    border-color: var(--vsn-kendo-primary);
}

.k-checkbox:focus,
.k-checkbox.k-focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--vsn-kendo-primary) 35%, transparent);
}

.k-switch:where(:not(.k-switch-sm):not(.k-switch-md):not(.k-switch-lg)) {
    width: 52px;
    height: 32px;
}

.k-switch:where(:not(.k-switch-sm):not(.k-switch-md):not(.k-switch-lg)) .k-switch-track {
    width: 52px;
    height: 32px;
}

.k-switch:where(:not(.k-switch-sm):not(.k-switch-md):not(.k-switch-lg)) .k-switch-thumb {
    width: 24px;
    height: 24px;
}

.k-switch:where(:not(.k-switch-sm):not(.k-switch-md):not(.k-switch-lg)).k-switch-on .k-switch-thumb-wrap {
    inset-inline-start: calc(100% - 16px);
}

.k-switch:where(:not(.k-switch-sm):not(.k-switch-md):not(.k-switch-lg)).k-switch-off .k-switch-thumb-wrap {
    inset-inline-start: 16px;
}

.k-switch .k-switch-track {
    border-radius: var(--kendo-border-radius-full, 9999px);
}

.k-switch .k-switch-thumb {
    border-radius: var(--kendo-border-radius-full, 9999px);
}

.k-switch-off .k-switch-track {
    border-color: var(--kendo-color-base-emphasis, #4d9897);
    background-color: var(--vsn-kendo-base);
}

.k-switch-off .k-switch-thumb {
    background-color: var(--kendo-color-base-emphasis, #4d9897);
}

.k-switch-on .k-switch-track {
    border-color: var(--vsn-kendo-primary);
    background-color: var(--vsn-kendo-primary);
}

.k-switch-on .k-switch-thumb {
    background-color: var(--kendo-color-primary-subtle, #dff2f2);
}

.k-badge:where(:not(.k-badge-sm):not(.k-badge-md):not(.k-badge-lg)) {
    padding-block: var(--kendo-spacing-1, 4px);
    padding-inline: var(--kendo-spacing-1, 4px);
    font-size: var(--kendo-font-size-xs, inherit);
    line-height: var(--kendo-line-height-xs, normal);
    min-width: calc(var(--kendo-line-height-xs, normal) * 1em + var(--kendo-spacing-1, 4px) * 2 + 2px);
}

.k-badge:where(:not(.k-badge-sm):not(.k-badge-md):not(.k-badge-lg)):empty {
    padding: var(--kendo-spacing-1, 4px);
    min-width: auto;
}

.k-badge:where(:not(.k-rounded-sm):not(.k-rounded-md):not(.k-rounded-lg):not(.k-rounded-full):not(.k-rounded-none)) {
    border-radius: var(--kendo-border-radius-md, 8px);
}

.k-badge:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"]):not(.k-badge-primary):not(.k-badge-secondary):not(.k-badge-tertiary):not(.k-badge-info):not(.k-badge-success):not(.k-badge-warning):not(.k-badge-error):not(.k-badge-light):not(.k-badge-dark):not(.k-badge-inverse)),
.k-badge.k-badge-solid-base {
    border-color: var(--vsn-kendo-primary);
    color: var(--vsn-kendo-on-primary);
    background-color: var(--vsn-kendo-primary);
}

.k-badge.k-badge-primary:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"])) {
    border-color: var(--vsn-kendo-primary);
    color: var(--vsn-kendo-on-primary);
    background-color: var(--vsn-kendo-primary);
}

.k-badge.k-badge-secondary:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"])) {
    border-color: var(--kendo-color-secondary, #fae3d9);
    color: var(--kendo-color-on-secondary, #000000);
    background-color: var(--kendo-color-secondary, #fae3d9);
}

.k-badge.k-badge-info:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"])) {
    border-color: var(--kendo-color-info, #61c0bf);
    color: var(--kendo-color-on-info, #ffffff);
    background-color: var(--kendo-color-info, #61c0bf);
}

.k-badge.k-badge-success:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"])) {
    border-color: var(--kendo-color-success, #fae3d9);
    color: var(--kendo-color-on-success, #000000);
    background-color: var(--kendo-color-success, #fae3d9);
}

.k-badge.k-badge-warning:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"])) {
    border-color: var(--kendo-color-warning, #ffcc00);
    color: var(--kendo-color-on-warning, #000000);
    background-color: var(--kendo-color-warning, #ffcc00);
}

.k-badge.k-badge-error:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"])) {
    border-color: var(--kendo-color-error, #ff4d4d);
    color: var(--kendo-color-on-error, #ffffff);
    background-color: var(--kendo-color-error, #ff4d4d);
}

.k-badge.k-badge-light:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"])) {
    border-color: var(--kendo-color-light, #ffffff);
    color: var(--kendo-color-on-light, #1d1b20);
    background-color: var(--kendo-color-light, #ffffff);
}

.k-badge.k-badge-dark:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"])),
.k-badge.k-badge-inverse:where(:not([class*="k-badge-outline"]):not([class*="k-badge-solid"])) {
    border-color: var(--kendo-color-dark, #000000);
    color: var(--kendo-color-on-dark, #ffffff);
    background-color: var(--kendo-color-dark, #000000);
}

.k-loader:where(:not(.k-loader-sm):not(.k-loader-md):not(.k-loader-lg)) {
    padding: calc(var(--kendo-spacing-2, 8px) / 2);
}

.k-loader:where(:not(.k-loader-sm):not(.k-loader-md):not(.k-loader-lg)) .k-loader-segment {
    width: var(--kendo-spacing-2, 8px);
    height: var(--kendo-spacing-2, 8px);
}

.k-loader:where(:not(.k-loader-primary):not(.k-loader-secondary):not(.k-loader-tertiary):not(.k-loader-info):not(.k-loader-success):not(.k-loader-warning):not(.k-loader-error):not(.k-loader-light):not(.k-loader-dark):not(.k-loader-inverse)) {
    color: var(--vsn-kendo-primary);
}

.k-list:where(:not(.k-list-sm):not(.k-list-md):not(.k-list-lg)),
.k-list-ul:where(:not(.k-list-sm):not(.k-list-md):not(.k-list-lg)) {
    font-size: var(--kendo-font-size-lg, inherit);
    line-height: var(--kendo-line-height-lg, normal);
}

.k-form:where(:not(.k-form-sm):not(.k-form-md):not(.k-form-lg)) .k-form-field,
.k-form:where(:not(.k-form-sm):not(.k-form-md):not(.k-form-lg)) .k-form-buttons {
    margin-block-start: var(--kendo-spacing-6, 24px);
}

.k-tabstrip:where(:not(.k-tabstrip-sm):not(.k-tabstrip-md):not(.k-tabstrip-lg)) .k-tabstrip-items .k-link {
    font-size: var(--kendo-font-size, inherit);
    line-height: var(--kendo-line-height, inherit);
    padding-block: var(--kendo-spacing-3\.5, 0.875rem);
    padding-inline: var(--kendo-spacing-4, 16px);
}

.k-tabstrip:where(:not(.k-tabstrip-left):not(.k-tabstrip-right):not(.k-tabstrip-bottom)) {
    flex-direction: column;
}

.k-tabstrip:where(:not(.k-tabstrip-left):not(.k-tabstrip-right):not(.k-tabstrip-bottom)) > .k-tabstrip-items-wrapper {
    flex-direction: row;
    border-block-end-width: 1px;
}

.k-tabstrip:where(:not(.k-tabstrip-left):not(.k-tabstrip-right):not(.k-tabstrip-bottom)) > .k-tabstrip-items-wrapper .k-item .k-link {
    justify-content: center;
    position: relative;
}

.k-tabstrip:where(:not(.k-tabstrip-left):not(.k-tabstrip-right):not(.k-tabstrip-bottom)) > .k-tabstrip-items-wrapper .k-item.k-active .k-link::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    inset-inline-start: var(--kendo-spacing-4, 16px);
    inset-inline-end: var(--kendo-spacing-4, 16px);
    inset-block-end: 0;
    height: 3px;
    border-radius: var(--kendo-border-radius-full, 9999px) var(--kendo-border-radius-full, 9999px) 0 0;
    background: var(--vsn-kendo-primary);
    pointer-events: none;
}

.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) {
    font-size: var(--kendo-font-size, inherit);
    line-height: var(--kendo-line-height, normal);
}

.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-header .k-table-th,
.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-table-md .k-table-th,
.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-table-md .k-table-td,
.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-content td,
.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-content .k-table-td,
.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-content-locked td,
.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-content-locked .k-table-td {
    padding-block: var(--kendo-spacing-3, 12px);
    padding-inline: var(--kendo-spacing-3, 12px);
}

.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-header .k-table-th > .k-link {
    margin-block: calc(var(--kendo-spacing-3, 12px) * -1);
    margin-inline: calc(var(--kendo-spacing-3, 12px) * -1);
    padding-block: var(--kendo-spacing-3, 12px);
    padding-inline: var(--kendo-spacing-3, 12px);
}

.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-header .k-table-th > .k-cell-inner {
    margin-block: calc(var(--kendo-spacing-3, 12px) * -1);
    margin-inline: calc(var(--kendo-spacing-3, 12px) * -1);
}

.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-header .k-table-th > .k-cell-inner > .k-link {
    padding-block: var(--kendo-spacing-3, 12px);
    padding-inline: var(--kendo-spacing-3, 12px);
}

.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-header .k-grid-filter,
.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-header .k-header-column-menu,
.k-grid:where(:not(.k-grid-xs):not(.k-grid-sm):not(.k-grid-md):not(.k-grid-lg):not(.k-grid-xl):not(.k-grid-xxl):not(.k-grid-xxxl)) .k-grid-header .k-grid-header-menu {
    padding: calc(var(--kendo-spacing-4\.5, 1.125rem) / 2);
    width: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-4\.5, 1.125rem) + 2px);
    height: calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-4\.5, 1.125rem) + 2px);
}

.k-pager .k-button:where(:not(.k-button-solid-primary):not(.k-button-primary)) {
    border-color: color-mix(in srgb, var(--vsn-kendo-on-surface) 28%, transparent);
    color: var(--vsn-kendo-on-surface);
    background-color: transparent;
}

.k-pager .k-button.k-selected,
.k-pager .k-button[aria-current="page"] {
    border-color: var(--vsn-kendo-primary);
    color: var(--vsn-kendo-on-primary);
    background-color: var(--vsn-kendo-primary);
}