/* Lyzen theme on top of Tabler. Load after tabler.min.css. */
:root {
    --lz-ink: #0b2b54;
    --lz-cyan: #9ad5f5;
    --lz-bg: #f0f6fb;
    --lz-border: rgba(154, 213, 245, .4);

    /* Derived from the four tokens above. */
    --lz-surface: #fff;
    --lz-muted: #4f6482;
    --lz-rule: rgba(11, 43, 84, .12);
    --lz-track: rgba(154, 213, 245, .35);

    --lz-radius-panel: 14px;
    --lz-radius-control: 8px;

    /* Tabler derives buttons, links, focus rings and subtle variants from these. */
    --tblr-primary: var(--lz-ink);
    --tblr-primary-rgb: 11, 43, 84;
    --tblr-body-bg: var(--lz-bg);
    --tblr-body-color: var(--lz-ink);
    --tblr-font-sans-serif: 'Atkinson Hyperlegible Next Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tblr-body-font-size: .9375rem;
    --tblr-body-line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--lz-ink);
}

.card {
    --tblr-card-border-color: var(--lz-border);
}

.btn {
    --tblr-btn-border-radius: var(--lz-radius-control);
    font-weight: 600;
}

.form-control {
    border-radius: var(--lz-radius-control);
}

.form-label {
    font-weight: 600;
}

:focus-visible {
    outline: 2px solid var(--lz-ink);
    outline-offset: 2px;
}

.form-control:focus,
.form-control:focus-visible {
    border-color: var(--lz-ink);
    box-shadow: 0 0 0 3px rgba(154, 213, 245, .6);
    outline: 0;
}

.lz-muted {
    color: var(--lz-muted);
}

.lz-wordmark {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
}

.lz-wordmark:hover {
    color: #fff;
    text-decoration: none;
}

.lz-wordmark span {
    font-weight: 400;
    opacity: .72;
}

/* The wordmark with the white logo (assets/img/logo-branca.png) in place of
   the name, for dark backgrounds. The file has empty space under the letters:
   the negative margin ends the image's box on their baseline (64.4% of its
   height), so the text beside it sits on the same line. That only works in
   inline layout: a flex container would align to the image's real bottom. */
.lz-wordmark--logo {
    display: inline-block;
    white-space: nowrap;
}

.lz-wordmark__logo {
    width: auto;
    height: 2.25rem;
    margin: 0 .375rem -.8rem 0;
    vertical-align: baseline;
}