/*@import "lib/bootstrap/dist/css/bootstrap.min.css" layer(framework);*/

@import "_content/DevExpress.Blazor.Themes.Fluent/core.min.css" layer(framework);
@import "_content/DevExpress.Blazor.Themes.Fluent/global.min.css" layer(framework);
@import "_content/DevExpress.Blazor.Themes.Fluent/modes/light.min.css" layer(framework);
@import "_content/DevExpress.Blazor.Themes.Fluent/accents/blue.min.css" layer(framework);
@import "https://cdnjs.cloudflare.com/ajax/libs/devextreme-dist/25.1.5/css/dx.light.compact.css" layer(framework);


@layer reset {
    * {
        margin: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    p,
    li,
    figcaption {
        max-width: 65ch;
        text-wrap: pretty;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    a {
        text-decoration: none;
    }
}

:root {
    block-size: 100svh;
    --font: Helvetica, Arial, sans-serif;
    --font-0: clamp(0.9375rem, 0.8891rem + 0.1344vw, 1rem);
    --font-1: clamp(1.125rem, 1.0282rem + 0.2688vw, 1.25rem);
    --font-2: clamp(1.35rem, 1.1855rem + 0.457vw, 1.5625rem);
    --font-3: clamp(1.62rem, 1.3621rem + 0.7164vw, 1.9531rem);
    --font-4: clamp(1.944rem, 1.5589rem + 1.0697vw, 2.4414rem);
    --font-5: clamp(2.3328rem, 1.7762rem + 1.5461vw, 3.0518rem);
    --col-body: #f4f6f8;
    --col-font: #333;
    --col-havenBlue: #074092;
    --col-havenGreen: #046d4d;
    --col-divider-dark: #ddd;
    --col-divider-light: #eee;
}

body {
    block-size: 100svh;
    font: 400 var(--font-0)/1.5rem var(--font);
    color: var(--col-font);
    background-color: var(--col-body);
}

    body:has(> main:not(.account)) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        column-gap: .25rem;

        @media(width > 768px) {
            grid-template-columns: 300px 1fr;
        }
    }

h1 {
    font-size: var(--font-5);
}

    h1:focus {
        outline: none;
    }

h2 {
    font-size: var(--font-4);
}

h3 {
    font-size: var(--font-3);
}

h4 {
    font-size: var(--font-2);
}

h5 {
    font-size: var(--font-1);
}

h6 {
    font-size: var(--font-0);
}

p {
    font-size: var(--font-0);
}

small {
    font-size: calc(var(--font-0) * 0.75);
}

.container {
    max-inline-size: 1536px;
    padding-inline: 1rem;
    margin-inline: auto;
}

button {
    padding: .25rem .5rem;
    cursor: pointer;
}

dxbl-treeview > dxbl-input-editor {
    border: none;
}