/*
 * Kailo UI Components — Main Stylesheet
 *
 * Usage in host app index.html / App.razor:
 *   <link rel="stylesheet" href="_content/Kailo.Core.UI/styles/kailo.ui-components.css" />
 */

@import url('../fonts/font-awesome/css/all.min.css');
@import url('default-main.css');
@import url('default-main-dark.css');
@import url('kailo.tokens.css');
@import url('kailo.telerik.overrides.css');

html, body {
    font-family: var(--kailo-font-family);
    background-color: var(--kailo-color-app-surface);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--kailo-color-neutral);
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--kailo-color-neutral-hover);
    }

.kailo-validation {
    display: block;
    font-size: var(--kailo-font-size-sm);
    color: var(--kailo-color-danger);
}