/* Base shared by the demo websites. Each demo sets its own colours and font on :root. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font), 'Hind Siliguri', system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
img, svg { display: block; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.i { width: 20px; height: 20px; flex: none; }
.i.sm { width: 16px; height: 16px; }
.i.xs { width: 13px; height: 13px; }
.art { display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Link back to the demo's page on the Arivon IT site. */
.demo-ribbon {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border-radius: 99px;
    background: #040a1c;
    color: #e8f0ff;
    font: 600 13px/1 system-ui, sans-serif;
    box-shadow: 0 12px 30px -10px rgb(4 10 28 / .6);
}

.demo-ribbon span {
    padding: 5px 9px;
    border-radius: 99px;
    background: #1f5bff;
    color: #fff;
    font-size: 11px;
    letter-spacing: .02em;
}

.demo-ribbon:hover { background: #0a1636; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}