/*
 * Sneat base layer (sneatx): generic Bootstrap components inside the WHMCS content (#main-body) drawn exactly like
 * Sneat (ThemeSelection, MIT), light and dark, over the legacy layers (twenty-one all.min.css/theme.min.css/custom.css,
 * main-site bootstrap/style/whmcs-unify/whmcs-pages, NXRagons experience, pages/*.css and workspace CSS, stage-1 sneat-skin).
 *
 * Conventions for the page-family files (css/sneat-area-*.css):
 *  - Base prefix:  body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c)   (four ids beat every legacy rule; the
 *    strongest legacy selectors carry three). Every base rule uses exactly these four ids; exclusions sit in :where()
 *    so the base stays as light as possible.
 *  - Family prefix:  body.hg-sneat.sn-tpl-<template> #main-body:not(#sn-a):not(#sn-b):not(#sn-c):not(#sn-d)
 *    (a fifth id): it always beats this base and every legacy rule, whatever the rest of the selector is.
 *  - Colours come from the --snb-* tokens below (defined on body.hg-sneat, so they also work in modals/tooltips that
 *    Bootstrap moves to <body>); they follow html[data-bs-theme="dark"] automatically.
 *  - Buttons: colour comes from the variant class (btn-primary … btn-label-* … btn-default); a .btn without a variant
 *    keeps its own colours. Elements that carry an hg-* class (custom NXRagons widgets) keep their own geometry
 *    (padding, height, font size); only the colours of their variant apply.
 */

/* ============================================================== tokens */
body.hg-sneat {
    --snb-primary: #761098;
    --snb-primary-rgb: 118, 16, 152;
    --snb-primary-hover: #6a0e89;
    --snb-primary-text: #761098;
    --snb-primary-label: color-mix(in sRGB, var(--snb-paper) 84%, #761098);
    --snb-secondary: #8592a3;
    --snb-secondary-rgb: 133, 146, 163;
    --snb-success: #71dd37;
    --snb-success-rgb: 113, 221, 55;
    --snb-info: #03c3ec;
    --snb-info-rgb: 3, 195, 236;
    --snb-warning: #ffab00;
    --snb-warning-rgb: 255, 171, 0;
    --snb-danger: #ff3e1d;
    --snb-danger-rgb: 255, 62, 29;
    --snb-dark: #2b2c40;
    --snb-dark-rgb: 43, 44, 64;
    --snb-light: #dbdee0;
    --snb-light-rgb: 219, 222, 224;
    --snb-base-rgb: 34, 48, 62;
    --snb-paper: #fff;
    --snb-body-bg: #f5f5f9;
    --snb-heading: #384551;
    --snb-body: #646e78;
    --snb-muted: #a7acb2;
    --snb-border: #e4e6e8;
    --snb-input-border: color-mix(in sRGB, #22303e 22%, var(--snb-paper));
    --snb-input-disabled-bg: rgba(var(--snb-base-rgb), .06);
    --snb-input-disabled-border: rgba(var(--snb-base-rgb), .24);
    --snb-hover: rgba(var(--snb-base-rgb), .06);
    --snb-track: rgba(var(--snb-base-rgb), .08);
    --snb-tint-amount: 84%;
    --snb-radius: .375rem;
    --snb-radius-sm: .25rem;
    --snb-radius-lg: .5rem;
    --snb-shadow: 0 .1875rem .5rem 0 rgba(34, 48, 62, .1);
    --snb-shadow-lg: 0 .25rem .75rem 0 rgba(34, 48, 62, .14);
    --snb-modal-shadow: 0 .25rem .75rem 0 rgba(34, 48, 62, .14);
    --snb-tooltip-bg: #22303e;
    --snb-tooltip-color: #fff;
    --snb-select-img: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%2322303e" fill-opacity="0.9"/%3e%3c/svg%3e');
    --snb-search-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7acb2' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e");
    --snb-close-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a7acb2'%3e%3cpath d='M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z'/%3e%3c/svg%3e");
}
html[data-bs-theme="dark"] body.hg-sneat {
    --snb-primary-text: #d9a6ec;
    --snb-primary-label: rgba(201, 138, 224, .16);
    --snb-base-rgb: 230, 230, 241;
    --snb-paper: #2b2c40;
    --snb-body-bg: #232333;
    --snb-heading: #d5d5e2;
    --snb-body: #b2b2c4;
    --snb-muted: #7e7f96;
    --snb-border: #444564;
    --snb-input-border: #56577a;
    --snb-input-disabled-bg: rgba(230, 230, 241, .06);
    --snb-input-disabled-border: rgba(230, 230, 241, .16);
    --snb-hover: rgba(230, 230, 241, .06);
    --snb-track: rgba(230, 230, 241, .1);
    --snb-shadow: 0 .1875rem .5rem 0 rgba(0, 0, 0, .24);
    --snb-shadow-lg: 0 .25rem .75rem 0 rgba(0, 0, 0, .32);
    --snb-modal-shadow: 0 .25rem .75rem 0 rgba(0, 0, 0, .4);
    --snb-tooltip-bg: #e6e6f1;
    --snb-tooltip-color: #2b2c40;
    --snb-select-img: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%23e6e6f1" fill-opacity="0.9"/%3e%3c/svg%3e');
    --snb-search-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e7f96' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e");
    --snb-close-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237e7f96'%3e%3cpath d='M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z'/%3e%3c/svg%3e");
}

/* The content takes Sneat's variables again (legacy layers redefine some of them on #main-body), and the stage-1
   skin's private tokens point at the same Sneat palette so its page rules match the shell while it is loaded. */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) {
    --bs-body-color: var(--snb-body);
    --bs-heading-color: var(--snb-heading);
    --bs-border-color: var(--snb-border);
    --bs-border-radius: var(--snb-radius);
    --sn-primary: var(--snb-primary-text);
    --sn-primary-rgb: var(--snb-primary-rgb);
    --sn-primary-hover: var(--snb-primary-hover);
    --sn-primary-label: var(--snb-primary-label);
    --sn-secondary: var(--snb-secondary);
    --sn-secondary-label: color-mix(in sRGB, var(--snb-paper) 84%, var(--snb-secondary));
    --sn-success: var(--snb-success);
    --sn-success-label: color-mix(in sRGB, var(--snb-paper) 84%, var(--snb-success));
    --sn-info: var(--snb-info);
    --sn-info-label: color-mix(in sRGB, var(--snb-paper) 84%, var(--snb-info));
    --sn-warning: var(--snb-warning);
    --sn-warning-label: color-mix(in sRGB, var(--snb-paper) 84%, var(--snb-warning));
    --sn-danger: var(--snb-danger);
    --sn-danger-label: color-mix(in sRGB, var(--snb-paper) 84%, var(--snb-danger));
    --sn-body-bg: var(--snb-body-bg);
    --sn-paper: var(--snb-paper);
    --sn-soft: var(--snb-hover);
    --sn-heading: var(--snb-heading);
    --sn-body: var(--snb-body);
    --sn-muted: var(--snb-muted);
    --sn-border: var(--snb-border);
    --sn-input-border: var(--snb-input-border);
    --sn-hover: var(--snb-hover);
    --sn-shadow: var(--snb-shadow);
    --sn-shadow-lg: var(--snb-shadow-lg);
    --sn-radius: var(--snb-radius);
    color: var(--snb-body);
    font-size: .9375rem;
    line-height: 1.375;
}

/* ============================================================== typography */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):where(:not([class*="hg-"])) {
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
/* headings and text on coloured surfaces (bg-primary, text-white …) keep their light ink */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):where(:not([class*="hg-"])):where(:not(:is(.text-white, .text-light, .bg-primary, .bg-dark, .bg-success, .bg-danger, .bg-info, .bg-warning, .btn, .alert) *, [class*="text-"])) {
    color: var(--snb-heading) !important;
}
/* Sneat sizes for plain headings (custom widgets with their own classes keep their scale) */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(h3:not([class]), .h3) { font-size: 1.75rem !important; line-height: 1.37 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(h4:not([class]), .h4) { font-size: 1.5rem !important; line-height: 1.37 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(h5:not([class]), .h5) { font-size: 1.125rem !important; line-height: 1.37 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(h6:not([class]), .h6) { font-size: .9375rem !important; line-height: 1.37 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) p:where(:not([class], :is(.text-white, .text-light, .bg-primary, .bg-dark, .bg-success, .bg-danger, .bg-info, .bg-warning) *)) { color: var(--snb-body) !important; font-size: .9375rem !important; line-height: 1.375 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(small, .small):where(:not([class*="hg-"])) { font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.text-muted, .text-secondary, .text-grey, .text-gray) { color: var(--snb-muted) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .text-body { color: var(--snb-body) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .text-heading { color: var(--snb-heading) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .text-primary { color: var(--snb-primary-text) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .text-success { color: var(--snb-success) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .text-info { color: var(--snb-info) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .text-warning { color: var(--snb-warning) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .text-danger { color: var(--snb-danger) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(strong, b) { font-weight: 600; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) hr:where(:not([class*="hg-"])) { margin: 1rem 0; border: 0 !important; border-top: 1px solid var(--snb-border) !important; background: none !important; color: var(--snb-border) !important; opacity: 1 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) a:where(:not(.btn, .nav-link, .dropdown-item, .page-link, .list-group-item, .badge, .label, [class*="hg-"], [class*="rs-"], [class*="sn-"])) {
    color: var(--snb-primary-text) !important;
    text-decoration: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) a:where(:not(.btn, .nav-link, .dropdown-item, .page-link, .list-group-item, .badge, .label, [class*="hg-"], [class*="rs-"], [class*="sn-"])):hover { color: var(--snb-primary-hover) !important; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) a:where(:not(.btn, .nav-link, .dropdown-item, .page-link, .list-group-item, .badge, .label, [class*="hg-"], [class*="rs-"], [class*="sn-"])):hover { color: #e6c3f3 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(code, kbd) { color: var(--snb-danger); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) pre:where(:not([class*="hg-"])) { padding: 1rem; border-radius: var(--snb-radius); background: var(--snb-hover) !important; color: var(--snb-heading) !important; }

/* Sprite icons (<svg><use href="…header-icons….svg#x"></svg>) render as 300x150 black shapes when no page CSS sizes
   them. Zero-specificity safety net: 1.25em line icons in currentColor; any family or legacy rule overrides it. */
:where(body.hg-sneat #main-body svg:is(:has(> use), [class*="icon"]):not([width]):not([height])) { width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -.2em; }
:where(body.hg-sneat #main-body svg:has(> use)) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================== cards */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.card, .panel):where(:not([class*="hg-"])) {
    border: 0 !important;
    border-radius: var(--snb-radius) !important;
    background-color: var(--snb-paper) !important;
    background-image: none !important;
    box-shadow: var(--snb-shadow) !important;
    color: var(--snb-body);
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.card-header, .panel-heading):where(:not([class*="hg-"])) {
    padding: 1.5rem 1.5rem 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    color: var(--snb-heading) !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.card-header, .panel-heading):where(:not([class*="hg-"])):has(+ :is(.list-group, .table, .table-responsive, .card-table)) { padding-bottom: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.card-body, .panel-body):where(:not([class*="hg-"])) { padding: 1.5rem !important; background: transparent !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.card-header, .panel-heading):where(:not([class*="hg-"])) + :is(.card-body, .panel-body):where(:not([class*="hg-"])) { padding-top: 1rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.card-footer, .panel-footer):where(:not([class*="hg-"])) {
    padding: 1rem 1.5rem 1.5rem !important;
    border-top: 0 !important;
    background: transparent !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.card-title, .panel-title):where(:not([class*="hg-"])) {
    margin-bottom: .5rem;
    color: var(--snb-heading) !important;
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    line-height: 1.37 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.card-header, .panel-heading) :is(.card-title, .panel-title):where(:not([class*="hg-"])) { margin-bottom: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .card-subtitle:where(:not([class*="hg-"])) { color: var(--snb-muted) !important; font-weight: 400 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .card-text { color: var(--snb-body); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .card-img-top { border-top-left-radius: var(--snb-radius); border-top-right-radius: var(--snb-radius); }
/* BS3 "well": a soft Sneat surface */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .well:where(:not([class*="hg-"])) { padding: 1.25rem !important; border: 0 !important; border-radius: var(--snb-radius) !important; background: var(--snb-hover) !important; box-shadow: none !important; color: var(--snb-body) !important; }

/* ============================================================== buttons */
/* variant colours: each variant names its colour, the kind (solid/outline/label/text) paints it */
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) :is(.btn-primary, .btn-outline-primary, .btn-label-primary) { --snb-c: var(--snb-primary); --snb-c-rgb: var(--snb-primary-rgb); --snb-c-text: var(--snb-primary-text); --snb-c-label: var(--snb-primary-label); }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) :is(.btn-secondary, .btn-outline-secondary, .btn-label-secondary, .btn-text-secondary, .btn-default, .btn-outline-default) { --snb-c: var(--snb-secondary); --snb-c-label: initial; --snb-c-rgb: var(--snb-secondary-rgb); --snb-c-text: var(--snb-secondary); }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) :is(.btn-success, .btn-outline-success, .btn-label-success) { --snb-c: var(--snb-success); --snb-c-label: initial; --snb-c-rgb: var(--snb-success-rgb); --snb-c-text: var(--snb-success); }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) :is(.btn-info, .btn-outline-info, .btn-label-info) { --snb-c: var(--snb-info); --snb-c-label: initial; --snb-c-rgb: var(--snb-info-rgb); --snb-c-text: var(--snb-info); }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) :is(.btn-warning, .btn-outline-warning, .btn-label-warning) { --snb-c: var(--snb-warning); --snb-c-label: initial; --snb-c-rgb: var(--snb-warning-rgb); --snb-c-text: var(--snb-warning); }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) :is(.btn-danger, .btn-outline-danger, .btn-label-danger) { --snb-c: var(--snb-danger); --snb-c-label: initial; --snb-c-rgb: var(--snb-danger-rgb); --snb-c-text: var(--snb-danger); }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) :is(.btn-dark, .btn-outline-dark, .btn-label-dark) { --snb-c: var(--snb-dark); --snb-c-label: initial; --snb-c-rgb: var(--snb-dark-rgb); --snb-c-text: var(--snb-heading); }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) :is(.btn-light, .btn-outline-light) { --snb-c: var(--snb-light); --snb-c-label: initial; --snb-c-rgb: var(--snb-light-rgb); --snb-c-text: var(--snb-heading); }

/* the kinds, as private button variables */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark) {
    --snb-btn-color: #fff;
    --snb-btn-bg: var(--snb-c);
    --snb-btn-bd: var(--snb-c);
    --snb-btn-hover-color: #fff;
    --snb-btn-hover-bg: color-mix(in sRGB, #000 10%, var(--snb-c));
    --snb-btn-shadow: 0 .125rem .25rem 0 rgba(var(--snb-c-rgb), .4);
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-light {
    --snb-btn-color: #22303e;
    --snb-btn-bg: var(--snb-c);
    --snb-btn-bd: var(--snb-c);
    --snb-btn-hover-color: #22303e;
    --snb-btn-hover-bg: color-mix(in sRGB, #000 10%, var(--snb-c));
    --snb-btn-shadow: 0 .125rem .25rem 0 rgba(var(--snb-c-rgb), .4);
}
/* BS4 .btn-default (twenty-one "Cancel", toolbars) is Sneat's outline-secondary, as on Sneat's account settings page */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-danger, .btn-outline-dark, .btn-outline-light, .btn-default, .btn-outline-default) {
    --snb-btn-color: var(--snb-c-text);
    --snb-btn-bg: transparent;
    --snb-btn-bd: var(--snb-c);
    --snb-btn-hover-color: #fff;
    --snb-btn-hover-bg: color-mix(in sRGB, #000 10%, var(--snb-c));
    --snb-btn-shadow: none;
}
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-outline-primary { --snb-btn-bd: #c98ae0; --snb-btn-hover-bg: var(--snb-primary); }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.btn-outline-secondary, .btn-default, .btn-outline-default) { --snb-btn-color: #b2b2c4; --snb-btn-bd: #6d6e8a; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.btn-label-primary, .btn-label-secondary, .btn-label-success, .btn-label-info, .btn-label-warning, .btn-label-danger, .btn-label-dark) {
    --snb-btn-color: var(--snb-c-text);
    --snb-btn-bg: var(--snb-c-label, color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-c)));
    --snb-btn-bd: transparent;
    --snb-btn-hover-color: #fff;
    --snb-btn-hover-bg: var(--snb-c);
    --snb-btn-shadow: none;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-text-secondary {
    --snb-btn-color: var(--snb-secondary);
    --snb-btn-bg: transparent;
    --snb-btn-bd: transparent;
    --snb-btn-hover-color: var(--snb-secondary);
    --snb-btn-hover-bg: color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-secondary));
    --snb-btn-shadow: none;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-link {
    --snb-btn-color: var(--snb-primary-text);
    --snb-btn-bg: transparent;
    --snb-btn-bd: transparent;
    --snb-btn-hover-color: var(--snb-primary-hover);
    --snb-btn-hover-bg: transparent;
    --snb-btn-shadow: none;
}
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-link { --snb-btn-hover-color: #e6c3f3; }
/* Sneat's dark button would vanish on dark paper: it turns light */
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-dark { --snb-btn-color: #2b2c40; --snb-btn-bg: #e6e6f1; --snb-btn-bd: #e6e6f1; --snb-btn-hover-color: #2b2c40; --snb-btn-hover-bg: #d0d0de; --snb-btn-shadow: none; }

/* geometry (Sneat: 0.9375rem/500, .4812rem 1.25rem, 38px high, .375rem radius); custom hg-* buttons keep theirs */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn:where(:not([class*="hg-"], .p-0, .btn-icon)) {
    padding: .4812rem 1.25rem !important;
    font-size: .9375rem !important;
    line-height: 1.375 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: var(--snb-radius) !important;
}
/* display stays Sneat's own (.sn-root .btn: inline-flex) so legacy rules that hide buttons keep working */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn {
    gap: .375rem;
    border-width: 1px !important;
    border-style: solid !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    transform: none !important;
    transition: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn:where(:not([class*="hg-"])):is(.btn-sm, .btn-group-sm > .btn) { padding: .317rem .75rem !important; font-size: .8125rem !important; border-radius: var(--snb-radius-sm) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn:where(:not([class*="hg-"])):is(.btn-xs, .btn-group-xs > .btn) { padding: .175rem .5rem !important; font-size: .6875rem !important; border-radius: .125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn:where(:not([class*="hg-"])):is(.btn-lg, .btn-group-lg > .btn) { padding: .708rem 1.5rem !important; font-size: 1.0625rem !important; border-radius: var(--snb-radius-lg) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-block { width: 100% !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-block + .btn-block { margin-top: .5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-icon { align-items: center; justify-content: center; padding: 0 !important; width: calc(2.2505rem + 2px); height: calc(2.2505rem + 2px); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-icon.btn-sm { width: calc(1.7rem + 2px); height: calc(1.7rem + 2px); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn :is(i, .fa, .fas, .far, .fal, .fab, .bx, .icon-base) { color: inherit !important; }

/* colours of every variant */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, [class*="btn-outline-"], .btn-default, [class*="btn-label-"], .btn-text-secondary, .btn-link) {
    color: var(--snb-btn-color) !important;
    background: var(--snb-btn-bg) !important;
    border-color: var(--snb-btn-bd) !important;
    box-shadow: var(--snb-btn-shadow) !important;
    opacity: 1;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, [class*="btn-outline-"], .btn-default, [class*="btn-label-"], .btn-text-secondary, .btn-link) * { color: inherit !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-dark, .btn-light, [class*="btn-outline-"], .btn-default, [class*="btn-label-"], .btn-text-secondary, .btn-link):is(:hover, :focus-visible, :active, .active, .show, [aria-expanded="true"]):not(:disabled):not(.disabled) {
    color: var(--snb-btn-hover-color) !important;
    background: var(--snb-btn-hover-bg) !important;
    border-color: var(--snb-btn-hover-bd, var(--snb-btn-hover-bg)) !important;
    outline: 0 !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-link:where(:not([class*="hg-"])) { font-weight: 400 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-link:is(:hover, :focus-visible) { text-decoration: none !important; border-color: transparent !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn:is(:disabled, .disabled), body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) fieldset:disabled .btn { opacity: .45 !important; pointer-events: none; box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn:focus { outline: 0 !important; }

/* button groups and toolbars (twenty-one markdown editor) */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-group > .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger) { box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-toolbar { gap: .5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn-toolbar > .btn-group { margin: 0 !important; }

/* ============================================================== Pro button helpers for the shell (outside #main-body) */
.sn-root .btn-label-primary,
.sn-root .btn-label-secondary,
.sn-root .btn-label-success,
.sn-root .btn-label-info,
.sn-root .btn-label-warning,
.sn-root .btn-label-danger {
    --bs-btn-color: var(--snb-c-text);
    --bs-btn-bg: var(--snb-c-label, color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-c)));
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--snb-c);
    --bs-btn-hover-border-color: var(--snb-c);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in sRGB, #000 10%, var(--snb-c));
    --bs-btn-active-border-color: color-mix(in sRGB, #000 10%, var(--snb-c));
    --bs-btn-disabled-color: var(--snb-c-text);
    --bs-btn-disabled-bg: var(--snb-c-label, color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-c)));
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
}
.sn-root .btn-text-secondary {
    --bs-btn-color: var(--snb-secondary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--snb-secondary);
    --bs-btn-hover-bg: color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-secondary));
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--snb-secondary);
    --bs-btn-active-bg: color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-secondary));
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--snb-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
}
html[data-bs-theme="dark"] .sn-root .btn-text-secondary { --bs-btn-color: #b2b2c4; --bs-btn-hover-color: #d5d5e2; --bs-btn-active-color: #d5d5e2; }

/* ============================================================== forms: controls */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .custom-select, .form-select, select.form-control, textarea.form-control, .dataTables_filter input, .dataTables_length select) {
    border: 1px solid var(--snb-input-border) !important;
    border-radius: var(--snb-radius) !important;
    background-color: transparent !important;
    color: var(--snb-heading) !important;
    font-size: .9375rem !important;
    font-weight: 400 !important;
    line-height: 1.375 !important;
    box-shadow: none !important;
    transition: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .custom-select, .form-select, .dataTables_filter input, .dataTables_length select):where(:not([class*="hg-"])):not(textarea):not([multiple]):not([size]):not([type="file"]) {
    height: auto !important;
    min-height: calc(1.375em + 1.086rem + 2px) !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-control:where(:not([class*="hg-"])):not([type="file"]) { padding: .543rem .9375rem !important; }
/* intl-tel-input keeps the room for its flag button */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.iti, .intl-tel-input) .form-control:where(:not([class*="hg-"])) { padding-left: 52px !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.iti, .intl-tel-input).iti--separate-dial-code .form-control:where(:not([class*="hg-"])) { padding-left: 94px !important; }
/* selects: Sneat's chevron */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.custom-select, .form-select, select.form-control, .dataTables_length select):not([multiple]):not([size]):where(:not([class*="hg-"])) {
    padding: .543rem 2.625rem .543rem .9375rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: var(--snb-select-img) !important;
    background-repeat: no-repeat !important;
    background-position: right .9375rem center !important;
    background-size: 22px 24px !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) select:is(.form-control, .custom-select, .form-select) option { background-color: var(--snb-paper); color: var(--snb-heading); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .custom-select, .form-select, .dataTables_filter input, .dataTables_length select):focus {
    border-color: var(--snb-primary) !important;
    box-shadow: inset 0 0 0 1px var(--snb-primary), 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important;
    outline: 0 !important;
}
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .custom-select, .form-select, .dataTables_filter input, .dataTables_length select):focus {
    border-color: #c98ae0 !important;
    box-shadow: inset 0 0 0 1px #c98ae0, 0 .125rem .25rem 0 rgba(0, 0, 0, .3) !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .dataTables_filter input)::placeholder { color: var(--snb-muted) !important; opacity: 1 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .custom-select, .form-select):disabled {
    border-color: var(--snb-input-disabled-border) !important;
    background-color: var(--snb-input-disabled-bg) !important;
    color: var(--snb-muted) !important;
    opacity: 1 !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-control-plaintext { color: var(--snb-heading) !important; }
/* sizes (BS4 -sm/-lg plus BS3 input-sm used by DataTables) */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control-sm, .input-sm, .custom-select-sm, .form-select-sm, .input-group-sm > .form-control):where(:not([class*="hg-"])) {
    min-height: calc(1.375em + .633rem + 2px) !important;
    padding-top: .3165rem !important;
    padding-bottom: .3165rem !important;
    font-size: .8125rem !important;
    border-radius: var(--snb-radius-sm) !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control-sm, .input-sm, .input-group-sm > .form-control):where(:not(select, [class*="hg-"], :is(.iti, .intl-tel-input, .dataTables_filter) *)) { padding-inline: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control-lg, .input-lg, .custom-select-lg, .form-select-lg, .input-group-lg > .form-control):where(:not([class*="hg-"])) {
    min-height: calc(1.375em + 1.415rem + 2px) !important;
    padding-top: .7075rem !important;
    padding-bottom: .7075rem !important;
    font-size: 1.0625rem !important;
    border-radius: var(--snb-radius-lg) !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control-lg, .input-lg, .input-group-lg > .form-control):not(select):where(:not([class*="hg-"])) { padding-inline: 1.3125rem !important; }
/* native file input */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-control[type="file"] { padding: 0 !important; overflow: hidden; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-control[type="file"]::file-selector-button { margin: 0 .9375rem 0 0; padding: .543rem .9375rem; border: 0; border-inline-end: 1px solid var(--snb-input-border); background: transparent; color: var(--snb-heading); }

/* labels, help text, spacing */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(label:where(:not(.btn, .label, .form-check-label, .custom-control-label, .custom-file-label, [class*="hg-"])), .form-label, .control-label, .col-form-label) {
    margin-bottom: .25rem;
    color: var(--snb-heading) !important;
    font-size: .8125rem !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .col-form-label { padding-top: calc(.543rem + 1px); padding-bottom: calc(.543rem + 1px); margin-bottom: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-group:where(:not([class*="hg-"])) { margin-bottom: 1rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-text, .help-block, small.form-text, .field-help-text):where(:not([class*="hg-"])) { margin-top: .3rem; color: var(--snb-body) !important; font-size: .8125rem !important; }

/* validation */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .custom-select, .form-select).is-invalid, body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .has-error :is(.form-control, .custom-select) { border-color: var(--snb-danger) !important; background-image: none; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .custom-select, .form-select).is-valid, body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .has-success :is(.form-control, .custom-select) { border-color: var(--snb-success) !important; background-image: none; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .custom-select, .form-select).is-invalid:focus { box-shadow: 0 0 .25rem .05rem rgba(var(--snb-danger-rgb), .1) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-control, .custom-select, .form-select).is-valid:focus { box-shadow: 0 0 .25rem .05rem rgba(var(--snb-success-rgb), .1) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) select.is-invalid:is(.form-control, .custom-select, .form-select), body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) select.is-valid:is(.form-control, .custom-select, .form-select) { background-image: var(--snb-select-img) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.invalid-feedback, .has-error .help-block, .text-danger.field-error-msg) { color: var(--snb-danger) !important; font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .valid-feedback { color: var(--snb-success) !important; font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .has-error :is(label, .control-label) { color: var(--snb-danger) !important; }

/* ============================================================== forms: input groups */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group { flex-wrap: nowrap; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > :is(.form-control, .custom-select, .form-select) { min-width: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.input-group-text, .input-group-addon) {
    display: flex;
    align-items: center;
    padding: .543rem .9375rem !important;
    border: 1px solid var(--snb-input-border) !important;
    border-radius: var(--snb-radius) !important;
    background: transparent !important;
    color: var(--snb-heading) !important;
    font-size: .9375rem !important;
    line-height: 1.375 !important;
    white-space: nowrap;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.input-group-prepend, .input-group-append) > .btn { position: relative; z-index: 2; }
/* joined corners */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > :is(.form-control, .custom-select, .form-select, .input-group-text, .input-group-addon, .btn):not(:last-child),
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > :is(.input-group-prepend, .input-group-append):not(:last-child) > :is(.input-group-text, .btn),
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > .input-group-append:not(:last-child) > :is(.input-group-text, .btn),
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > :is(.input-group-prepend, .input-group-append) > :is(.input-group-text, .btn):not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > :is(.form-control, .custom-select, .form-select, .input-group-text, .input-group-addon, .btn):not(:first-child),
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > :is(.input-group-prepend, .input-group-append):not(:first-child) > :is(.input-group-text, .btn),
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > :is(.input-group-prepend, .input-group-append) > :is(.input-group-text, .btn):not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > .input-group-prepend > .input-group-text { border-right: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > .input-group-append > .input-group-text, body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > .input-group-addon:last-child { border-left: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > .input-group-append > .btn, body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > .btn:not(:first-child) { margin-left: -1px; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group:focus-within > :is(.input-group-prepend, .input-group-append) > .input-group-text, body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group:focus-within > .input-group-addon { border-color: var(--snb-primary) !important; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group:focus-within > :is(.input-group-prepend, .input-group-append) > .input-group-text,
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group:focus-within > .input-group-addon { border-color: #c98ae0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > .input-group-append > .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger) { box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group-sm :is(.input-group-text, .btn) { padding: .3165rem .8125rem !important; font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group-lg :is(.input-group-text) { padding: .7075rem 1.3125rem !important; font-size: 1.0625rem !important; }

/* ============================================================== forms: checks, radios, switches */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-check-input {
    width: 1.2em !important;
    height: 1.2em !important;
    margin-top: .0875em;
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 2px solid var(--snb-muted) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: none !important;
    cursor: pointer;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-check-input[type="checkbox"] { border-radius: .267em !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-check-input[type="radio"] { border-radius: 50% !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-check-input:checked { border-color: var(--snb-primary) !important; background-color: var(--snb-primary) !important; box-shadow: 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='17' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M3.41667 7L6.33333 9.91667L12.1667 4.08333' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.6' fill='%23fff'/%3e%3c/svg%3e") !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-check-input:indeterminate { border-color: var(--snb-primary) !important; background-color: var(--snb-primary) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-check-input:focus:not(:checked) { border-color: var(--snb-body) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-check-input:disabled { opacity: .45; pointer-events: none; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-switch .form-check-input[type="checkbox"] {
    width: 2em !important;
    border: 0 !important;
    border-radius: 2em !important;
    background-color: rgba(var(--snb-base-rgb), .12) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-position: left center !important;
    box-shadow: 0 0 .25rem 0 rgba(34, 48, 62, .16) inset !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .form-switch .form-check-input[type="checkbox"]:checked { background-color: var(--snb-primary) !important; background-position: right center !important; box-shadow: 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.form-check-label, .form-check > label) { color: var(--snb-heading) !important; font-size: .9375rem !important; font-weight: 400 !important; cursor: pointer; }
/* plain checkboxes/radios without a class (WHMCS forms) take the Sneat accent */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) input:is([type="checkbox"], [type="radio"]):not([class]) { accent-color: var(--snb-primary); }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) input:is([type="checkbox"], [type="radio"]):not([class]) { accent-color: #c98ae0; }

/* BS4 custom-control checkboxes, radios and switches */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-control:where(:not([class*="hg-"])) { padding-left: 1.8rem; min-height: 1.375rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-switch:where(:not([class*="hg-"])) { padding-left: 2.75rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-control-label { color: var(--snb-heading) !important; font-weight: 400 !important; cursor: pointer; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-control-label::before { top: .1rem; left: -1.8rem; width: 1.2rem; height: 1.2rem; border: 2px solid var(--snb-muted) !important; background-color: transparent !important; box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-checkbox .custom-control-label::before { border-radius: .32rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-radio .custom-control-label::before { border-radius: 50% !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-control-label::after { top: .1rem; left: -1.8rem; width: 1.2rem; height: 1.2rem; background-size: 70% 70% !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--snb-primary) !important; background-color: var(--snb-primary) !important; box-shadow: 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--snb-body) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-control-input:disabled ~ .custom-control-label { opacity: .45; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-switch .custom-control-label::before { left: -2.75rem; width: 2.1rem; border: 0 !important; border-radius: 2rem !important; background-color: rgba(var(--snb-base-rgb), .12) !important; box-shadow: 0 0 .25rem 0 rgba(34, 48, 62, .16) inset !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-switch .custom-control-label::after { top: calc(.1rem + 2px); left: calc(-2.75rem + 2px); width: calc(1.2rem - 4px); height: calc(1.2rem - 4px); border-radius: 50%; background-color: #fff !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-switch .custom-control-input:checked ~ .custom-control-label::after { transform: translateX(.9rem); }

/* BS4 custom-file (ticket attachments): a Sneat input with an attached "Browse" segment */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-file { height: auto; min-height: calc(1.375em + 1.086rem + 2px); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-file-label {
    height: auto !important;
    min-height: calc(1.375em + 1.086rem + 2px);
    padding: .543rem .9375rem !important;
    border: 1px solid var(--snb-input-border) !important;
    border-radius: var(--snb-radius) !important;
    background: transparent !important;
    color: var(--snb-muted) !important;
    font-size: .9375rem !important;
    font-weight: 400 !important;
    line-height: 1.375 !important;
    box-shadow: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-file-label::after {
    height: 100% !important;
    padding: .543rem .9375rem !important;
    border-left: 1px solid var(--snb-input-border) !important;
    border-radius: 0 var(--snb-radius) var(--snb-radius) 0 !important;
    background: transparent !important;
    color: var(--snb-heading) !important;
    line-height: 1.375 !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .custom-file-input:focus ~ .custom-file-label { border-color: var(--snb-primary) !important; box-shadow: inset 0 0 0 1px var(--snb-primary) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > .custom-file:not(:last-child) .custom-file-label, body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group > .custom-file:not(:last-child) .custom-file-label::after { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

/* ============================================================== tables */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table:where(:not([class*="hg-"])) {
    margin-bottom: 0;
    border-color: var(--snb-border) !important;
    background: transparent !important;
    color: var(--snb-body) !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table:where(:not([class*="hg-"])) > :not(caption) > tr > :is(th, td) {
    padding: .782rem 1.25rem !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--snb-border) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit;
    font-size: .9375rem;
    vertical-align: middle !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table:where(:not([class*="hg-"])) > thead > tr > th {
    padding-top: 1.161rem !important;
    padding-bottom: 1.161rem !important;
    border-top: 1px solid var(--snb-border) !important;
    color: var(--snb-heading) !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    letter-spacing: .2px !important;
    text-transform: uppercase !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table:where(:not([class*="hg-"])) > thead > tr > th:is(.sorting, .sorting_asc, .sorting_desc, .sorting_disabled) { padding-right: 1.75rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table:where(:not([class*="hg-"])) > :not(caption) > tr { background: transparent !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table:where(:not([class*="hg-"])) > tbody > tr > th { color: var(--snb-heading) !important; font-weight: 500 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table:where(:not([class*="hg-"])) > tbody > tr:last-child > :is(td, th) { border-bottom: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table:is(.table-hover, .table-list, .dataTable) > tbody > tr:hover > :is(td, th) { background-color: var(--snb-hover) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-striped > tbody > tr { background: transparent !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-striped > tbody > tr > :is(td, th) { box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-striped > tbody > tr:nth-of-type(odd) > :is(td, th) { background-color: var(--snb-hover) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-bordered > :not(caption) > tr > :is(th, td) { border: 1px solid var(--snb-border) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-borderless > :not(caption) > tr > :is(th, td) { border: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-sm > :not(caption) > tr > :is(th, td) { padding: .5rem 1.25rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table .table-active > :is(td, th), body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table > tbody > tr.active > :is(td, th) { background-color: rgba(var(--snb-primary-rgb), .08) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-responsive { border: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table :is(td, th) a:not(.btn):where(:not([class*="hg-"])) { font-weight: 500; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-container { background: transparent !important; }
/* Small screens: the main-site layers turn every content table into display:block (<992px), so thead/tbody end up in
   an anonymous shrink-to-fit table. Inside a scrolling wrapper the table stays a real table (Sneat: the wrapper
   scrolls); in WHMCS's stacked-card mode (<=768px, rows as cards) the body becomes a block so each card is full width. */
@media (max-width: 991.98px) {
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.table-responsive, .listtable) > .table:where(:not([class*="hg-"])) { display: table !important; overflow: visible !important; }
}
@media (max-width: 768px) {
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-list.dataTable:where(:not([class*="hg-"])),
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .table-list.dataTable:where(:not([class*="hg-"])) > tbody { display: block !important; width: 100% !important; }
}

/* DataTables (twenty-one): search, length, info, pagination */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dataTables_wrapper { color: var(--snb-body); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dataTables_wrapper :is(.dataTables_filter, .dataTables_length, .dataTables_info) { color: var(--snb-body) !important; font-size: .9375rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dataTables_wrapper .dataTables_filter label, body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--snb-body) !important; font-size: .9375rem !important; font-weight: 400 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dataTables_wrapper .dataTables_filter input {
    min-width: 12rem;
    margin-left: 0 !important;
    padding: .543rem .9375rem .543rem 2.5rem !important;
    background: transparent var(--snb-search-img) no-repeat .875rem center / 1.0625rem !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dataTables_wrapper .dataTables_length select { width: auto !important; min-width: 4.75rem; margin: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dataTables_wrapper .dataTables_info { padding-top: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dataTables_wrapper .dataTables_empty { color: var(--snb-muted) !important; text-align: center !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) table.dataTable > thead > tr > :is(th, td).sorting::before,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) table.dataTable > thead > tr > :is(th, td).sorting::after,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) table.dataTable > thead > tr > :is(th, td)[class*="sorting_"]::before,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) table.dataTable > thead > tr > :is(th, td)[class*="sorting_"]::after { color: var(--snb-muted); opacity: .45; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) table.dataTable > thead > tr > :is(th, td).sorting_asc::before,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) table.dataTable > thead > tr > :is(th, td).sorting_desc::after { color: var(--snb-heading); opacity: .9; }

/* ============================================================== badges, labels, statuses (Sneat bg-label-*) */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label):where(:not([class*="hg-"])) {
    padding: .4235em .77em !important;
    border: 0 !important;
    border-radius: var(--snb-radius-sm) !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap;
    box-shadow: none !important;
    vertical-align: baseline;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label):where(:not([class*="hg-"])) > span { color: inherit !important; font-weight: inherit !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge-pill, .rounded-pill):is(.badge, .label) { border-radius: 50rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .btn .badge { margin-left: .25rem; padding: .25em .5em !important; font-size: .75rem !important; }
/* default and every variant: tinted background, coloured text */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label, span[class*="status-"]) { --snb-c: var(--snb-primary); --snb-c-text: var(--snb-primary-text); --snb-c-label: var(--snb-primary-label); background: var(--snb-c-label, color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-c))) !important; color: var(--snb-c-text) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label):is(.badge-primary, .label-primary, .bg-label-primary, .requestor-type-owner) { --snb-c: var(--snb-primary); --snb-c-text: var(--snb-primary-text); --snb-c-label: var(--snb-primary-label); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label, span[class*="status-"]):is(.label-default, .badge-secondary, .badge-default, .badge-light, .label-secondary, .bg-label-secondary,
    .status-terminated, .status-cancelled, .status-closed, .status-refunded, .status-expired, .status-draft, .status-dead, .status-inactive, .status-transferred-away, .status-cancelled-domain, .status-delivered) {
    --snb-c: var(--snb-secondary); --snb-c-text: var(--snb-secondary); --snb-c-label: initial;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label, span[class*="status-"]):is(.badge-success, .label-success, .bg-label-success,
    .status-active, .status-paid, .status-open, .status-answered, .status-completed, .status-accepted, .status-operational, .status-online) {
    --snb-c: var(--snb-success); --snb-c-text: var(--snb-success); --snb-c-label: initial;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label, span[class*="status-"]):is(.badge-warning, .label-warning, .bg-label-warning,
    .status-pending, .status-unpaid, .status-customer-reply, .status-on-hold, .status-pending-transfer, .status-pending-registration, .status-payment-pending, .status-grace, .status-scheduled) {
    --snb-c: var(--snb-warning); --snb-c-text: var(--snb-warning); --snb-c-label: initial;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label, span[class*="status-"]):is(.badge-danger, .label-danger, .bg-label-danger,
    .status-suspended, .status-overdue, .status-fraud, .status-collections, .status-redemption, .status-lost, .status-offline, .status-outage) {
    --snb-c: var(--snb-danger); --snb-c-text: var(--snb-danger); --snb-c-label: initial;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label, span[class*="status-"]):is(.badge-info, .label-info, .bg-label-info,
    .status-in-progress, .status-inprogress, .status-info, .status-processing, .status-investigating) {
    --snb-c: var(--snb-info); --snb-c-text: var(--snb-info); --snb-c-label: initial;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label):is(.badge-dark, .label-dark, .bg-label-dark) { --snb-c: var(--snb-dark); --snb-c-text: var(--snb-heading); --snb-c-label: initial; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.badge, .label):is(.badge-dark, .label-dark, .bg-label-dark) { --snb-c: #8b8ca3; }
/* status dots some WHMCS lists draw before the text */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.label, .badge, span[class*="status-"]).status::before { display: none !important; }
/* solid Sneat badges stay solid */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .badge:is(.bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-dark) { color: #fff !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .badge.bg-primary { background: var(--snb-primary) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .badge.bg-secondary { background: var(--snb-secondary) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .badge.bg-success { background: var(--snb-success) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .badge.bg-info { background: var(--snb-info) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .badge.bg-warning { background: var(--snb-warning) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .badge.bg-danger { background: var(--snb-danger) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .badge.bg-dark { background: var(--snb-dark) !important; }

/* ============================================================== alerts (Sneat tint: subtle background, coloured text) */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:where(:not([class*="hg-"])) {
    --snb-c: var(--snb-primary);
    --snb-c-text: var(--snb-primary-text);
    position: relative;
    padding: .75rem 1rem !important;
    border: 1px solid transparent !important;
    border-radius: var(--snb-radius) !important;
    background: color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-c)) !important;
    color: var(--snb-c-text) !important;
    font-size: .9375rem !important;
    line-height: 1.375rem !important;
    box-shadow: none !important;
    text-align: start;
}
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:where(:not([class*="hg-"])) { background: color-mix(in sRGB, var(--snb-paper) 80%, var(--snb-c)) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:is(.alert-primary) { --snb-c: var(--snb-primary); --snb-c-text: var(--snb-primary-text); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:is(.alert-secondary, .alert-light, .alert-default) { --snb-c: var(--snb-secondary); --snb-c-text: var(--snb-secondary); }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:is(.alert-secondary, .alert-light, .alert-default) { --snb-c-text: #b2b2c4; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:is(.alert-success) { --snb-c: var(--snb-success); --snb-c-text: var(--snb-success); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:is(.alert-info) { --snb-c: var(--snb-info); --snb-c-text: var(--snb-info); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:is(.alert-warning) { --snb-c: var(--snb-warning); --snb-c-text: var(--snb-warning); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:is(.alert-danger, .alert-error) { --snb-c: var(--snb-danger); --snb-c-text: var(--snb-danger); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:is(.alert-dark) { --snb-c: var(--snb-dark); --snb-c-text: var(--snb-heading); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:where(:not([class*="hg-"])) :is(p, li, span, strong, b, div, h1, h2, h3, h4, h5, h6, .alert-heading, i, .fa, .fas, .far, .fal) { color: inherit !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:where(:not([class*="hg-"])) :is(h1, h2, h3, h4, h5, h6, .alert-heading) { font-size: 1.125rem !important; font-weight: 500 !important; margin-bottom: .5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:where(:not([class*="hg-"])) p:last-child, body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:where(:not([class*="hg-"])) ul:last-child { margin-bottom: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:where(:not([class*="hg-"])) a:not(.btn), body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert .alert-link { color: inherit !important; font-weight: 500 !important; text-decoration: underline !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert:where(:not([class*="hg-"])) hr { border-top-color: currentColor !important; opacity: .25 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert-dismissible { padding-right: 3rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .alert-dismissible :is(.close, .btn-close) { position: absolute; top: 0; right: 0; padding: .75rem 1rem !important; }

/* close buttons (BS4 .close and BS5 .btn-close) */
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat .modal) :is(.close, .btn-close) {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--snb-radius) !important;
    background: transparent var(--snb-close-img) center / 1.25rem no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    float: none;
}
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat .modal) :is(.close, .btn-close) > * { display: none !important; }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat .modal) .alert :is(.close, .btn-close) { background-color: transparent !important; filter: none; }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat .modal) :is(.close, .btn-close):hover { opacity: .75 !important; }

/* ============================================================== nav tabs and pills */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .nav-tabs:where(:not([class*="hg-"])) {
    gap: 0;
    border-bottom: 1px solid var(--snb-border) !important;
    background: transparent !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .nav-tabs:where(:not([class*="hg-"])) :is(.nav-link, li > a) {
    margin: 0 0 -1px !important;
    padding: .5435rem 1.375rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--snb-heading) !important;
    font-size: .9375rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .nav-tabs:where(:not([class*="hg-"])) :is(.nav-link, li > a):hover:not(.active) { color: var(--snb-primary-text) !important; box-shadow: 0 -2px 0 rgba(var(--snb-primary-rgb), .16) inset !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .nav-tabs:where(:not([class*="hg-"])) :is(.nav-link.active, .nav-item.show .nav-link, li.active > a) {
    color: var(--snb-primary-text) !important;
    background: transparent !important;
    box-shadow: 0 -2px 0 var(--snb-primary-text) inset !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .nav-pills:where(:not([class*="hg-"])) { gap: .25rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .nav-pills:where(:not([class*="hg-"])) :is(.nav-link, li > a) {
    padding: .5435rem 1.375rem !important;
    border: 0 !important;
    border-radius: var(--snb-radius) !important;
    background: transparent !important;
    color: var(--snb-heading) !important;
    font-size: .9375rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .nav-pills:where(:not([class*="hg-"])) :is(.nav-link, li > a):hover:not(.active) { background: rgba(var(--snb-primary-rgb), .16) !important; color: var(--snb-primary-text) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .nav-pills:where(:not([class*="hg-"])) :is(.nav-link.active, .show > .nav-link, li.active > a) {
    background: var(--snb-primary) !important;
    color: #fff !important;
    box-shadow: 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.nav-tabs, .nav-pills):where(:not([class*="hg-"])) .nav-link.disabled { color: var(--snb-muted) !important; opacity: .65; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.nav-tabs, .nav-pills) .nav-link .badge { margin-left: .4rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .tab-content:where(:not([class*="hg-"])) { background: transparent; }

/* ============================================================== list groups */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .list-group:where(:not([class*="hg-"])) { border-radius: var(--snb-radius); background: transparent !important; box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .list-group-item:where(:not([class*="hg-"])) {
    padding: .5rem 1.25rem !important;
    border: 1px solid var(--snb-border) !important;
    background: transparent !important;
    color: var(--snb-heading) !important;
    font-size: .9375rem !important;
    box-shadow: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .list-group-item:where(:not([class*="hg-"])) + .list-group-item:where(:not([class*="hg-"])) { border-top-width: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .list-group:not(.list-group-flush) > .list-group-item:first-child { border-top-left-radius: var(--snb-radius) !important; border-top-right-radius: var(--snb-radius) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .list-group:not(.list-group-flush) > .list-group-item:last-child { border-bottom-left-radius: var(--snb-radius) !important; border-bottom-right-radius: var(--snb-radius) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .list-group-flush > .list-group-item:where(:not([class*="hg-"])) { border-width: 0 0 1px !important; border-radius: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .list-group-flush > .list-group-item:where(:not([class*="hg-"])):last-child { border-bottom-width: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(a, button).list-group-item:where(:not([class*="hg-"])):hover { background: var(--snb-hover) !important; color: var(--snb-heading) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .list-group-item.active:where(:not([class*="hg-"])) { z-index: 2; border-color: var(--snb-border) !important; background: var(--snb-primary-label) !important; color: var(--snb-primary-text) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .list-group-item.disabled { color: var(--snb-muted) !important; }

/* ============================================================== pagination (Sneat: round, tinted, active filled) */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .pagination { flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .pagination .page-item { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.375rem;
    height: 2.375rem;
    margin: 0 !important;
    padding: 0 .75rem !important;
    border: 0 !important;
    border-radius: 50rem !important;
    background: rgba(var(--snb-base-rgb), .08) !important;
    color: var(--snb-heading) !important;
    font-size: .9375rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .pagination .page-item:not(.active):not(.disabled) .page-link:hover { background: var(--snb-primary-label) !important; color: var(--snb-primary-text) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .pagination :is(.page-item.active .page-link, .page-link.active) { background: var(--snb-primary) !important; color: #fff !important; box-shadow: 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .pagination .page-item.disabled .page-link { opacity: .45 !important; pointer-events: none; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .pagination-sm .page-link { min-width: 1.875rem; height: 1.875rem; font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .pagination-lg .page-link { min-width: 3rem; height: 3rem; font-size: 1.0625rem !important; }

/* ============================================================== breadcrumbs inside content */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .breadcrumb:where(:not([class*="hg-"])) { padding: 0 !important; margin-bottom: 1rem; border: 0 !important; background: transparent !important; font-size: .9375rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .breadcrumb-item:where(:not([class*="hg-"])) { color: var(--snb-body) !important; line-height: 1.5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .breadcrumb-item:where(:not([class*="hg-"])) a { color: var(--snb-body) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .breadcrumb-item:where(:not([class*="hg-"])) a:hover { color: var(--snb-primary-text) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .breadcrumb-item.active { color: var(--snb-heading) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .breadcrumb-item + .breadcrumb-item::before { color: var(--snb-body) !important; content: "/" !important; }

/* ============================================================== dropdowns inside content */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dropdown-menu:where(:not([class*="hg-"])) {
    min-width: 10rem;
    padding: .5rem 0 !important;
    border: 0 !important;
    border-radius: var(--snb-radius) !important;
    background: var(--snb-paper) !important;
    color: var(--snb-body) !important;
    font-size: .9375rem !important;
    box-shadow: var(--snb-shadow-lg) !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dropdown-menu:where(:not([class*="hg-"])) .dropdown-item {
    padding: .543rem 1.25rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--snb-heading) !important;
    font-size: .9375rem !important;
    font-weight: 400 !important;
    white-space: nowrap;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dropdown-menu:where(:not([class*="hg-"])) .dropdown-item:is(:hover, :focus) { background: var(--snb-hover) !important; color: var(--snb-heading) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dropdown-menu:where(:not([class*="hg-"])) .dropdown-item:is(.active, :active) { background: rgba(var(--snb-primary-rgb), .16) !important; color: var(--snb-primary-text) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dropdown-menu:where(:not([class*="hg-"])) .dropdown-item:is(.disabled, :disabled) { color: var(--snb-muted) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dropdown-menu .dropdown-divider { margin: .5rem 0; border-top: 1px solid var(--snb-border) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dropdown-menu .dropdown-header { padding: .5rem 1.25rem !important; color: var(--snb-muted) !important; font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dropdown-toggle:where(:not([class*="hg-"]))::after { border: 0 !important; width: .55em; height: .55em; margin-left: .5em; vertical-align: .18em; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: rotate(45deg); content: ""; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .dropdown-toggle-split:where(:not([class*="hg-"]))::after { margin-left: 0; }

/* ============================================================== modals (inside the content or moved to <body>) */
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) .modal-content:where(:not([class*="hg-"])) {
    border: 0 !important;
    border-radius: var(--snb-radius-lg) !important;
    background: var(--snb-paper) !important;
    color: var(--snb-body) !important;
    box-shadow: var(--snb-modal-shadow) !important;
}
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) .modal-content:where(:not([class*="hg-"])) .modal-header {
    align-items: center;
    padding: 1.5rem 1.5rem 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--snb-heading) !important;
}
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) .modal-content:where(:not([class*="hg-"])) .modal-title { margin: 0; color: var(--snb-heading) !important; font-size: 1.125rem !important; font-weight: 500 !important; line-height: 1.375 !important; }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) .modal-content:where(:not([class*="hg-"])) .modal-body { padding: 1.5rem !important; color: var(--snb-body) !important; }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) .modal-content:where(:not([class*="hg-"])) .modal-footer {
    gap: 1rem;
    padding: 0 1.5rem 1.5rem !important;
    border: 0 !important;
    background: transparent !important;
}
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) .modal-content:where(:not([class*="hg-"])) .modal-footer > * { margin: 0 !important; }
:is(body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c), body.hg-sneat) .modal-content:where(:not([class*="hg-"])) .modal-header :is(.close, .btn-close) { margin: 0 0 0 auto !important; }
body.hg-sneat .modal-backdrop.show { background-color: #22303e; opacity: .5; }
html[data-bs-theme="dark"] body.hg-sneat .modal-backdrop.show { background-color: #171725; opacity: .6; }
/* modals that live outside #main-body need the generic buttons too (twenty-one "Cancel"/"Submit") */
body.hg-sneat .modal .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-default, [class*="btn-outline-"], [class*="btn-label-"]):where(:not([class*="hg-"])) {
    padding: .4812rem 1.25rem !important;
    border: 1px solid var(--snb-btn-bd) !important;
    border-radius: var(--snb-radius) !important;
    background: var(--snb-btn-bg) !important;
    color: var(--snb-btn-color) !important;
    font-size: .9375rem !important;
    font-weight: 500 !important;
    line-height: 1.375 !important;
    box-shadow: var(--snb-btn-shadow) !important;
}
body.hg-sneat .modal .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-default, [class*="btn-outline-"], [class*="btn-label-"]):where(:not([class*="hg-"])):hover {
    background: var(--snb-btn-hover-bg) !important;
    border-color: var(--snb-btn-hover-bg) !important;
    color: var(--snb-btn-hover-color) !important;
}
body.hg-sneat .modal :is(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning, .btn-danger) {
    --snb-btn-color: #fff;
    --snb-btn-bg: var(--snb-c);
    --snb-btn-bd: var(--snb-c);
    --snb-btn-hover-color: #fff;
    --snb-btn-hover-bg: color-mix(in sRGB, #000 10%, var(--snb-c));
    --snb-btn-shadow: 0 .125rem .25rem 0 rgba(var(--snb-c-rgb), .4);
}
body.hg-sneat .modal :is(.btn-default, [class*="btn-outline-"]) {
    --snb-btn-color: var(--snb-c-text);
    --snb-btn-bg: transparent;
    --snb-btn-bd: var(--snb-c);
    --snb-btn-hover-color: #fff;
    --snb-btn-hover-bg: color-mix(in sRGB, #000 10%, var(--snb-c));
    --snb-btn-shadow: none;
}
body.hg-sneat .modal .modal-content:where(:not([class*="hg-"])) :is(.form-control, .custom-select) { border: 1px solid var(--snb-input-border) !important; border-radius: var(--snb-radius) !important; background-color: transparent !important; color: var(--snb-heading) !important; box-shadow: none !important; }

/* ============================================================== progress */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .progress:where(:not([class*="hg-"])) {
    height: .375rem;
    overflow: visible;
    border-radius: 50rem !important;
    background: var(--snb-track) !important;
    box-shadow: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .progress:where(:not([class*="hg-"])) .progress-bar {
    --snb-c-rgb: var(--snb-primary-rgb);
    background-color: var(--snb-primary);
    color: #fff;
    font-size: .8125rem;
    box-shadow: 0 2px 4px 0 rgba(var(--snb-c-rgb), .4);
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .progress:where(:not([class*="hg-"])) .progress-bar:first-child { border-start-start-radius: 50rem; border-end-start-radius: 50rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .progress:where(:not([class*="hg-"])) .progress-bar:last-child { border-start-end-radius: 50rem; border-end-end-radius: 50rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .progress-bar:is(.bg-success, .progress-bar-success) { --snb-c-rgb: var(--snb-success-rgb); background-color: var(--snb-success) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .progress-bar:is(.bg-info, .progress-bar-info) { --snb-c-rgb: var(--snb-info-rgb); background-color: var(--snb-info) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .progress-bar:is(.bg-warning, .progress-bar-warning) { --snb-c-rgb: var(--snb-warning-rgb); background-color: var(--snb-warning) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .progress-bar:is(.bg-danger, .progress-bar-danger) { --snb-c-rgb: var(--snb-danger-rgb); background-color: var(--snb-danger) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .progress-bar.progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important; background-size: .375rem .375rem; }

/* ============================================================== tooltips and popovers (Bootstrap appends them to <body>) */
body.hg-sneat .tooltip { font-size: .8125rem; }
body.hg-sneat .tooltip .tooltip-inner {
    max-width: 200px;
    padding: .379rem .75rem;
    border-radius: var(--snb-radius-sm);
    background: var(--snb-tooltip-bg) !important;
    color: var(--snb-tooltip-color) !important;
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .8125rem;
    font-weight: 500;
}
body.hg-sneat .tooltip.show { opacity: 1; }
body.hg-sneat .tooltip :is(.arrow, .tooltip-arrow)::before { border-top-color: transparent; border-bottom-color: transparent; }
body.hg-sneat .tooltip:is(.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"], .bs-tooltip-auto[data-popper-placement^="top"]) :is(.arrow, .tooltip-arrow)::before { border-top-color: var(--snb-tooltip-bg); }
body.hg-sneat .tooltip:is(.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"], .bs-tooltip-auto[data-popper-placement^="bottom"]) :is(.arrow, .tooltip-arrow)::before { border-bottom-color: var(--snb-tooltip-bg); }
body.hg-sneat .tooltip:is(.bs-tooltip-left, .bs-tooltip-start, .bs-tooltip-auto[x-placement^="left"]) :is(.arrow, .tooltip-arrow)::before { border-left-color: var(--snb-tooltip-bg); }
body.hg-sneat .tooltip:is(.bs-tooltip-right, .bs-tooltip-end, .bs-tooltip-auto[x-placement^="right"]) :is(.arrow, .tooltip-arrow)::before { border-right-color: var(--snb-tooltip-bg); }
body.hg-sneat .popover {
    border: 0;
    border-radius: var(--snb-radius-lg);
    background: var(--snb-paper);
    box-shadow: var(--snb-shadow-lg);
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .9375rem;
}
body.hg-sneat .popover .popover-header { padding: .625rem 1.125rem 0; border: 0; background: var(--snb-paper); color: var(--snb-heading); font-size: 1.125rem; font-weight: 500; }
body.hg-sneat .popover .popover-header::before { display: none; }
body.hg-sneat .popover .popover-body { padding: 1.125rem 1rem; color: var(--snb-body); }
body.hg-sneat .popover :is(.arrow, .popover-arrow)::before { border-color: transparent; }
body.hg-sneat .popover :is(.arrow, .popover-arrow)::after { border-top-color: transparent; border-bottom-color: transparent; }
body.hg-sneat .popover:is(.bs-popover-top, .bs-popover-auto[x-placement^="top"]) :is(.arrow, .popover-arrow)::after { border-top-color: var(--snb-paper); }
body.hg-sneat .popover:is(.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"]) :is(.arrow, .popover-arrow)::after { border-bottom-color: var(--snb-paper); }
body.hg-sneat .popover:is(.bs-popover-left, .bs-popover-start, .bs-popover-auto[x-placement^="left"]) :is(.arrow, .popover-arrow)::after { border-left-color: var(--snb-paper); }
body.hg-sneat .popover:is(.bs-popover-right, .bs-popover-end, .bs-popover-auto[x-placement^="right"]) :is(.arrow, .popover-arrow)::after { border-right-color: var(--snb-paper); }

/* ============================================================== right-hand column cards (.sn-panel) */
.sn-root .sn-side-col .sn-panel { border: 0; border-radius: var(--snb-radius); background: var(--snb-paper); box-shadow: var(--snb-shadow); }
.sn-root .sn-side-col .sn-panel :is(.card-title, .card-header h5, .card-header h3) { color: var(--snb-heading); font-size: 1.125rem; font-weight: 500; }
.sn-root .sn-side-col .sn-panel .list-group-item { border-color: var(--snb-border); background: transparent; color: var(--snb-heading); }
.sn-root .sn-side-col .sn-panel :is(.badge, .label):not(.sn-badge-dot):not([class*="bg-"]) {
    --snb-c: var(--snb-primary);
    --snb-c-text: var(--snb-primary-text);
    --snb-c-bg: var(--snb-primary-label);
    padding: .4235em .77em !important;
    border: 0 !important;
    border-radius: var(--snb-radius-sm) !important;
    background: var(--snb-c-bg) !important;
    color: var(--snb-c-text) !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: none !important;
}
.sn-root .sn-side-col .sn-panel :is(.badge, .label):is(.label-success, .badge-success, .status-active, .status-paid, .status-open, .status-answered, .status-completed) { --snb-c-text: var(--snb-success); --snb-c-bg: color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-success)); }
.sn-root .sn-side-col .sn-panel :is(.badge, .label):is(.label-warning, .badge-warning, .status-pending, .status-unpaid, .status-customer-reply, .status-on-hold) { --snb-c-text: var(--snb-warning); --snb-c-bg: color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-warning)); }
.sn-root .sn-side-col .sn-panel :is(.badge, .label):is(.label-danger, .badge-danger, .status-suspended, .status-overdue, .status-fraud, .status-collections) { --snb-c-text: var(--snb-danger); --snb-c-bg: color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-danger)); }
.sn-root .sn-side-col .sn-panel :is(.badge, .label):is(.label-info, .badge-info, .status-in-progress) { --snb-c-text: var(--snb-info); --snb-c-bg: color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-info)); }
.sn-root .sn-side-col .sn-panel :is(.badge, .label):is(.label-default, .badge-secondary, .status-terminated, .status-cancelled, .status-closed, .status-refunded, .status-expired) { --snb-c-text: var(--snb-secondary); --snb-c-bg: color-mix(in sRGB, var(--snb-paper) var(--snb-tint-amount), var(--snb-secondary)); }

/* ============================================================== additions from the page-family pass (2026-10-31) */
/* WHMCS (Bootstrap 4) opens tab panes with .active only; Sneat's fade would keep them transparent and shifted 30px */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .tab-content > .tab-pane.active { opacity: 1 !important; transform: none !important; }
/* intl-tel-input v12 markup (separate dial code): the number starts after the flag and the dial code */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .intl-tel-input.separate-dial-code .form-control { padding-inline-start: 92px !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .intl-tel-input.separate-dial-code.iti-sdc-2 .form-control { padding-inline-start: 84px !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .intl-tel-input.separate-dial-code.iti-sdc-4 .form-control { padding-inline-start: 100px !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .intl-tel-input.separate-dial-code.iti-sdc-5 .form-control { padding-inline-start: 108px !important; }
/* BS3 .input-group-addon around a .input-group-text: one box, not two */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group-addon:has(> .input-group-text) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; display: flex; }
/* Sneat .input-group-merge (field + icon such as the password eye): one joined control */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group-merge > .form-control:not(:last-child) { border-inline-end: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group-merge > .input-group-text:last-child { border-inline-start: 0 !important; padding-inline-start: .5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group-merge > .input-group-text:first-child { border-inline-end: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group-merge:focus-within > .input-group-text { border-color: var(--snb-primary) !important; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .input-group-merge:focus-within > .input-group-text { border-color: #c98ae0 !important; }
/* iCheck square-blue radios/checkboxes (twenty-one forms) as Sneat controls */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.iradio_square-blue, .icheckbox_square-blue) {
    position: relative;
    display: inline-block; flex: none; width: 1.2rem !important; height: 1.2rem !important; margin: 0 .125rem 0 0; vertical-align: -.25rem;
    border: 1px solid var(--snb-input-border) !important; background: var(--snb-paper) none !important; filter: none !important; box-shadow: none !important; cursor: pointer;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .iradio_square-blue { border-radius: 50% !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .icheckbox_square-blue { border-radius: var(--snb-radius-sm) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.iradio_square-blue, .icheckbox_square-blue).hover { border-color: var(--snb-primary) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .iradio_square-blue.checked { border-color: var(--snb-primary) !important; background: var(--snb-primary) none !important; box-shadow: inset 0 0 0 .25rem var(--snb-paper), 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .icheckbox_square-blue.checked {
    border-color: var(--snb-primary) !important; box-shadow: 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important;
    background: var(--snb-primary) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 14' fill='none'%3e%3cpath d='M3.41667 7L6.33333 9.91667L12.1667 4.08333' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") no-repeat center / .8rem !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) :is(.iradio_square-blue, .icheckbox_square-blue).disabled { opacity: .45; cursor: not-allowed; }