/* =====================================================================================================================
ADMIN "NEW LOOK" (2026-10)
Loaded last by Admin.Master / AdminNoPadding.Master, only for sites with the site setting ADMIN_THEME = "modern"
(see Core/AdminTheme.cs). Every rule is scoped under body.wfm, so a page without that class is untouched.
Designed in docs/mockups/admin-modern.html (open it from disk to compare against the current look).
Contrast ratios noted next to text colors are WCAG 2.x: AA needs 4.5:1 for normal text, 3:1 for icons and large text.
Fonts: Montserrat (headings) + Open Sans (text), self-hosted in /site/fonts.
===================================================================================================================== */
/* ---------- tokens: brand colors from the style guide ---------- */
body.wfm {
--wf-orange: #F5871F; /* brand orange: buttons (white text), accents, markers */
--wf-blue: #005DAC; /* dark blue (logo) */
--wf-blue-600: #004E91;
--wf-light-blue: #0083CA; /* focus rings, icons (4.1:1 on white: too light for small link text) */
--wf-slate: #323A45;
--wfm-bg: #F4F6F9; /* page background */
--wfm-surface: #FFFFFF;
--wfm-border: #E3E7ED;
--wfm-border-strong: #D3D9E1;
--wfm-text: #232A33; /* 14.6:1 on white */
--wfm-text-muted: #5F6B7A; /* 5.0:1 on the page background */
--wfm-link: #0074B8; /* 5.0:1 on white */
--wfm-link-hover: #005DAC;
--wfm-radius: 8px;
--wfm-radius-sm: 6px;
--wfm-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
--wfm-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);
--wfm-sidebar-w: 248px;
--wfm-topbar-h: 60px;
/* sidebar: "Ocean", the marketing site's #0B3D5E -> #0083CA gradient, kept deep enough for white text */
--wfm-side-bg: #0B3D5E;
--wfm-side-image: radial-gradient(120% 60% at 100% 0%, rgba(0, 131, 202, .35) 0%, rgba(0, 131, 202, 0) 60%),
linear-gradient(170deg, #0B3D5E 0%, #0A4A73 55%, #0B5683 100%);
--wfm-side-text: rgba(255, 255, 255, .90); /* 6.3:1 or better across the gradient */
--wfm-side-text-strong: #FFFFFF;
--wfm-side-icon: rgba(255, 255, 255, .70); /* icons: 4:1 or better */
--wfm-side-active-icon: #FFB066; /* orange icon on the current page; lighter orange keeps 3:1 on blue */
--wfm-side-hover: rgba(255, 255, 255, .08);
--wfm-side-active: rgba(255, 255, 255, .14);
--wfm-side-divider: rgba(255, 255, 255, .12);
--wfm-side-caption: rgba(255, 255, 255, .62);
--wfm-font-body: 'Open Sans', 'Segoe UI', Roboto, Arial, sans-serif;
--wfm-font-head: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
--wfm-cell-y: 11px;
--wfm-control-h: 38px;
--wfm-content-size: 14px; /* the classic look renders page text at .8em of 16px = 12.8px */
/* primary (main action) button: brand orange with white text. WCAG 2.x rates this 2.5:1, but APCA and real-world
legibility research rate white on orange as readable (uxmovement.com/buttons/the-myths-of-color-contrast-accessibility) */
--wfm-primary: #F5871F;
--wfm-primary-hover: #E57A12;
--wfm-primary-text: #FFFFFF;
/* default (secondary) buttons: soft blue so the one orange action stands out */
--wfm-secondary-bg: #E8F2FB;
--wfm-secondary-border: #C5DCF1;
--wfm-secondary-text: #005DAC; /* 5.9:1 */
--wfm-secondary-hover-bg: #D6E8F8;
--wfm-secondary-hover-text: #004E91;
}
/* ---------- base ---------- */
body.wfm { background: var(--wfm-bg); color: var(--wfm-text); font-family: var(--wfm-font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.wfm h1, body.wfm h2, body.wfm h3, body.wfm h4, body.wfm h5, body.wfm h6,
body.wfm .h1, body.wfm .h2, body.wfm .h3, body.wfm .h4 { font-family: var(--wfm-font-head); color: var(--wfm-text); letter-spacing: -.01em; }
body.wfm a { color: var(--wfm-link); }
body.wfm a:hover, body.wfm a:focus { color: var(--wfm-link-hover); }
/* the form builder's add-field buttons (Setup > Custom fields) are links on a dark blue background: keep their white text */
body.wfm a.fb-button { color: #fff; }
body.wfm a.fb-button:hover, body.wfm a.fb-button:focus { color: #eee; }
body.wfm .text-muted, body.wfm .help-block { color: var(--wfm-text-muted); }
body.wfm hr { border-top-color: var(--wfm-border); }
body.wfm :focus-visible { outline: 2px solid var(--wf-light-blue); outline-offset: 2px; }
/* ---------- top bar ---------- */
body.wfm .navbar-static-top {
background: var(--wfm-surface); border: 0; border-bottom: 1px solid var(--wfm-border);
min-height: var(--wfm-topbar-h); border-radius: 0; box-shadow: none;
}
/* the logo sits on white above the sidebar: the full-color logo needs a light background */
body.wfm .navbar-static-top .navbar-header { background: #fff; }
body.wfm .navbar-default .navbar-brand {
height: var(--wfm-topbar-h); padding: 8px 20px; display: flex; align-items: center; justify-content: center; float: none;
}
body.wfm .navbar-brand img { display: block; width: 100%; max-width: 208px; max-height: 44px; height: auto; object-fit: contain; }
body.wfm .navbar-brand .wfm-logo-legacy { display: none; }
body.wfm .navbar-brand .wfm-logo-new { display: block !important; } /* hidden inline for the classic look */
/* min-height less the bar's 1px bottom border, so the bar is exactly --wfm-topbar-h tall like the logo box and the sidebar's top
(61px left the page content starting 1px below the sidebar: a visible step beside the dashboard's colored headings) */
body.wfm .navbar-top-links { margin-right: 16px; min-height: calc(var(--wfm-topbar-h) - 1px); display: flex; align-items: center; }
body.wfm .navbar-top-links > li { float: none; }
/* top bar links (Sub-Accounts, View Site, Signature Area, My Account): brand blue, icons in the light blue, a soft blue
hover; My Account is a soft blue pill so the account menu is easy to find */
body.wfm .navbar-top-links > li { margin-left: 2px; }
body.wfm .navbar-top-links > li > a {
color: var(--wf-blue); font-weight: 600; font-size: 13.5px; padding: 8px 12px; min-height: 0; border-radius: var(--wfm-radius-sm);
display: flex; align-items: center; gap: 6px; /* 6.6:1 */
}
body.wfm .navbar-top-links > li > a:hover, body.wfm .navbar-top-links > li > a:focus, body.wfm .navbar-top-links > li.open > a { background: #E8F2FB; color: var(--wf-blue-600); }
body.wfm .navbar-top-links > li > a .fa { color: var(--wf-light-blue); font-size: 15px; }
body.wfm .navbar-top-links > li > a .fa-caret-down { color: var(--wf-blue); font-size: 12px; }
body.wfm .navbar-top-links > li.dropdown > a .fa-user { color: var(--wf-blue); }
body.wfm .navbar-top-links > li.dropdown:has(.dropdown-user) > a { background: #E8F2FB; }
body.wfm .navbar-top-links > li.dropdown:has(.dropdown-user) > a:hover, body.wfm .navbar-top-links > li.dropdown.open:has(.dropdown-user) > a { background: #D6E8F8; }
body.wfm .navbar-top-links #btnBell .fa { color: var(--wf-blue); }
body.wfm .navbar-top-links .wfm-setup-link { color: #9A4E07; background: #FFF4E8; } /* 5.6:1 */
body.wfm .navbar-top-links .wfm-setup-link:hover { background: #FFE9D2 !important; color: #7A3D04 !important; }
body.wfm .navbar-top-links .wfm-setup-link .badge { background: var(--wf-orange) !important; color: #1F2630; font-weight: 700; }
/* the notification bell (styles-admin-area.css draws the unread count) */
body.wfm .navbar-top-links #btnBell { padding: 8px 10px; }
/* dropdowns */
body.wfm .dropdown-menu { border: 1px solid var(--wfm-border); border-radius: var(--wfm-radius); box-shadow: var(--wfm-shadow-lg); padding: 6px; min-width: 210px; margin-top: 6px; }
body.wfm .dropdown-menu > li > a { padding: 8px 10px; border-radius: var(--wfm-radius-sm); color: var(--wfm-text); white-space: normal; }
/* icons a step lighter than the text but clearly active (a pale grey read as "disabled"); colored items keep their color */
body.wfm .dropdown-menu > li > a .fa { color: #4A5563; margin-right: 4px; }
body.wfm .dropdown-menu > li > a[class*="text-"] .fa { color: inherit; }
body.wfm .dropdown-menu > li > a:hover { background: #F1F4F8; }
body.wfm .dropdown-menu .divider { margin: 6px 0; background: var(--wfm-border); }
/* ---------- layout: logo box + sidebar on the left, white bar across the rest ---------- */
@media (min-width: 768px) {
body.wfm .navbar-static-top .navbar-header {
position: fixed; top: 0; left: 0; width: var(--wfm-sidebar-w); height: var(--wfm-topbar-h);
z-index: 1001; border-bottom: 1px solid var(--wfm-border); border-right: 1px solid var(--wfm-border);
}
body.wfm .navbar-static-top { margin-left: var(--wfm-sidebar-w); position: sticky; top: 0; z-index: 1000; }
body.wfm .sidebar {
position: fixed; top: var(--wfm-topbar-h); bottom: 0; left: 0; width: var(--wfm-sidebar-w); margin-top: 0;
overflow-y: auto; z-index: 1000;
}
body.wfm #page-wrapper { margin: 0 0 0 var(--wfm-sidebar-w); }
}
/* ---------- sidebar (.sidebar > .sidebar-nav > ul#side-menu) ---------- */
/* The menu scrolls on its own (the page doesn't drag it along), which is the norm for a fixed side menu. The scrollbar's space
is always kept (thin, plus scrollbar-gutter) and only its color changes on hover, so nothing in the menu moves. */
body.wfm .sidebar {
background-color: var(--wfm-side-bg); background-image: var(--wfm-side-image); border: 0;
scrollbar-width: thin; scrollbar-gutter: stable; scrollbar-color: transparent transparent;
}
body.wfm .sidebar:hover { scrollbar-color: rgba(255,255,255,.28) transparent; }
/* Safari (and older Chrome) use these instead; same idea: fixed width, see-through thumb until hover */
body.wfm .sidebar::-webkit-scrollbar { width: 6px; background: transparent; }
body.wfm .sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
body.wfm .sidebar:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }
/* things pages put in the sidebar (the dashboard's Check-in View box goes in through Admin.Master's ph1 placeholder) */
body.wfm .sidebar li.sidebar-search { padding: 10px 12px; border-bottom: 0; }
body.wfm .sidebar label, body.wfm .sidebar .help-block, body.wfm .sidebar p { color: var(--wfm-side-text); }
body.wfm .sidebar label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; color: var(--wfm-side-caption); }
body.wfm .sidebar select.form-control, body.wfm .sidebar input.form-control:not([type=text]) { background: rgba(255,255,255,.95); color: var(--wfm-text); border-color: transparent; height: 36px; }
body.wfm .sidebar > .sidebar-nav > ul.nav:not(#side-menu) { padding: 0 10px 16px; border-top: 1px solid var(--wfm-side-divider); }
body.wfm .sidebar .sidebar-nav.navbar-collapse { padding: 0; }
body.wfm .sidebar ul li { border-bottom: 0; }
body.wfm #side-menu { padding: 10px 10px 24px; }
body.wfm #side-menu > li { margin-bottom: 2px; }
body.wfm .sidebar ul li a {
color: var(--wfm-side-text); font-weight: 500; font-size: 14px; padding: 9px 12px; border-radius: var(--wfm-radius-sm);
position: relative; transition: background .12s, color .12s;
/* flex: the menus sometimes have a space between icon and label and sometimes not; this lines every label up */
display: flex; align-items: center; flex-wrap: nowrap; column-gap: 4px;
}
body.wfm .sidebar ul li a > .fa-fw { flex: 0 0 auto; }
body.wfm .sidebar ul li a > .badge { flex: 0 0 auto; }
body.wfm .sidebar ul li a > .arrow { margin-left: auto; float: none; }
body.wfm .sidebar ul li a .fa-fw { color: var(--wfm-side-icon); width: 1.5em; margin-right: 6px; font-size: 15px; transition: color .12s; }
body.wfm .sidebar ul li a:hover, body.wfm .sidebar ul li a:focus { background: var(--wfm-side-hover); color: var(--wfm-side-text-strong); }
body.wfm .sidebar ul li a:hover .fa-fw { color: var(--wfm-side-text-strong); }
/* the current page: highlighted, bold, orange icon and an orange marker */
body.wfm .sidebar ul li a.active, body.wfm .sidebar ul li.active > a {
background: var(--wfm-side-active) !important; color: var(--wfm-side-text-strong); font-weight: 700;
}
body.wfm .sidebar ul li a.active .fa-fw, body.wfm .sidebar ul li.active > a .fa-fw { color: var(--wfm-side-active-icon); }
body.wfm .sidebar ul li a.active::before {
content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--wf-orange);
}
/* an open section heading is only brighter; the page inside it carries the highlight */
body.wfm .sidebar ul li.active > a:not(.active) { background: transparent !important; }
body.wfm .sidebar ul li.active > a:not(.active):hover { background: var(--wfm-side-hover) !important; }
body.wfm .sidebar .arrow { margin-top: 0; color: var(--wfm-side-icon); font-size: 12px; transition: transform .15s; }
body.wfm .sidebar .fa.arrow:before, body.wfm .sidebar .active > a > .fa.arrow:before { content: "\f105"; } /* chevron right, turns down when open */
body.wfm .sidebar .active > a > .fa.arrow { transform: rotate(90deg); }
/* second level: indented with a thin guide line; sub-item icons are hidden */
body.wfm .sidebar .nav-second-level { margin: 2px 0 6px 21px; padding-left: 10px; border-left: 1px solid var(--wfm-side-divider); background: transparent; }
body.wfm .sidebar .nav-second-level li a { padding: 7px 10px; font-size: 13.5px; font-weight: 400; }
body.wfm .sidebar .nav-second-level li a .fa-fw { display: none; }
body.wfm .sidebar .nav-second-level li a.active::before { left: -11px; top: 6px; bottom: 6px; }
body.wfm .sidebar a .badge { background: var(--wf-orange) !important; color: #1F2630 !important; font-size: 10.5px; font-weight: 700; padding: 2px 7px; margin-left: 4px; }
body.wfm .sidebar li a.featured { color: #FFC285; font-weight: 600; }
/* section captions (booking menu: Today) */
body.wfm .sidebar .nav-caption {
color: var(--wfm-side-caption); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 16px 12px 6px;
}
/* search at the top of the sidebar (AdminSearchBox.ascx) */
body.wfm .sidebar .sidebar-search-top { padding: 4px 2px 0; border-bottom: 0 !important; }
body.wfm .sidebar-search-top .input-group { display: flex; width: 100%; background: rgba(255,255,255,.10); border-radius: var(--wfm-radius-sm); overflow: hidden; margin: 0; border: 1px solid rgba(255,255,255,.10); }
body.wfm .sidebar-search-top input[type=text] { flex: 1 1 auto; background: transparent; color: #fff; height: 36px; box-shadow: none; border: 0; padding-left: 10px; font-size: 13.5px; }
body.wfm .sidebar-search-top input[type=text]::placeholder { color: rgba(255,255,255,.70); }
body.wfm .sidebar-search-top .input-group-btn { width: auto; display: flex; }
body.wfm .sidebar-search-top .input-group-btn .btn { background: transparent; border: 0; color: var(--wfm-side-icon); height: 36px; padding: 0 12px; box-shadow: none; display: flex; align-items: center; }
body.wfm .sidebar-search-top .input-group-btn .btn:hover { color: var(--wfm-side-text-strong); }
body.wfm .advanced_search_link { text-align: right; padding: 3px 4px 8px; font-size: 11.5px; }
body.wfm .sidebar .advanced_search_link a { color: var(--wfm-side-text); display: inline; padding: 0; text-decoration: none; }
body.wfm .sidebar .advanced_search_link a:hover { color: var(--wfm-side-text-strong); background: transparent; text-decoration: none; }
/* sb-admin-2.js marks the link for the current page "active"; on the Advanced Search page this small link keeps its plain look */
body.wfm .sidebar .advanced_search_link a.active { background: transparent !important; font-weight: inherit; color: var(--wfm-side-text); }
body.wfm .sidebar .advanced_search_link a.active::before { content: none; }
/* utility links (Switch to Classic Menu / Show Booking Menu) */
body.wfm .sidebar li.nav-utility { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--wfm-side-divider); }
body.wfm .sidebar li.nav-utility > a { font-size: 12.5px; color: var(--wfm-side-text); padding-top: 9px; padding-bottom: 9px; }
body.wfm .sidebar li.nav-utility > a i { font-size: 15px; }
/* ---------- page area ---------- */
/* min-height: sb-admin-2.js writes an inline min-height of (window - 51px) for the old 50px top bar on load and resize; ours is 60px,
so that left every short page 10px too tall (a small scroll). !important beats the inline style. */
body.wfm #page-wrapper { background: var(--wfm-bg); border: 0; padding: 24px 32px 48px; min-height: calc(100vh - var(--wfm-topbar-h)) !important; }
body.wfm #page-wrapper.nopadding { padding: 0; }
body.wfm #main-content-area { max-width: 1400px; }
/* styles-admin-area.css shrinks page text with ID selectors (#page-wrapper p/label, #main-content-area: .8em). Same weight here so these win. */
body.wfm #main-content-area { font-size: var(--wfm-content-size); }
body.wfm #page-wrapper p, body.wfm #main-content-area p { font-size: 1em; }
body.wfm #page-wrapper label, body.wfm #main-content-area label { font-size: .965em; }
body.wfm #main-content-area .checkbox label, body.wfm #main-content-area .radio label { font-size: 1em; }
body.wfm #main-content-area .help-block { font-size: .93em; }
/* the page header pattern used everywhere: buttons
Title
*/
/* keep Bootstrap's 20px top margin: header button groups are floated with style="margin-top:20px" to line up with it */
body.wfm #main-content-area h3:first-of-type, body.wfm .wfm-page-title { font-size: 24px; font-weight: 600; margin: 20px 0 20px; }
/* the standard page header: title left, buttons right, centered on each other, wrapping under the title on narrow screens.
*/
body.wfm .wfm-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 20px 0; }
body.wfm #main-content-area .wfm-page-head h3 { margin: 0; }
body.wfm .wfm-page-head .wfm-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
body.wfm .wfm-page-head .wfm-page-actions .btn { float: none; margin: 0; }
/* the form button bar (docs/admin-pages-and-nav.md section 6): under the form, Save first, Cancel next to it, Delete at the far end.
Save (btn-primary) Cancel (btn-default)Delete
Add wfm-sticky on forms longer than a screen: the bar stays at the bottom of the window, then settles under the form at the end. */
body.wfm .wfm-save-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 20px; }
body.wfm .wfm-save-bar .btn { float: none; margin: 0; }
/* the save result next to the button ("Settings saved." / "Not saved..."): the page keeps its scroll, so the top message may be out of sight */
body.wfm .wfm-save-bar .wfm-save-status { font-size: 13.5px; font-weight: 600; margin-left: 4px; }
body.wfm .wfm-save-bar .wfm-save-bar-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.wfm .wfm-save-bar.wfm-sticky {
position: sticky; bottom: 0; z-index: 900; padding: 12px 16px;
background: rgba(255, 255, 255, .97); border: 1px solid var(--wfm-border); border-radius: var(--wfm-radius);
box-shadow: 0 -6px 16px rgba(16, 24, 40, .08);
}
/* a short line of context under a page title (what the page is for) */
body.wfm .wfm-page-intro { color: var(--wfm-text-muted); margin: -12px 0 16px; }
/* waiver search results (WaiverSearchResults4.xslt) sit in a panel: clip so the header row follows the rounded corners */
body.wfm .panel.wf-search-results { overflow: clip; }
body.wfm .panel.wf-search-results > .table-responsive { margin-bottom: 0; border: 0; }
/* a few pages use h1/h2 for section titles inside the page (e.g. "Search Results"): bring them down to the page's scale */
body.wfm #main-content-area h1 { font-size: 26px; font-weight: 600; margin: 28px 0 10px; }
body.wfm #main-content-area h2 { font-size: 21px; font-weight: 600; }
body.wfm .wfm-breadcrumb { font-size: 12.5px; color: var(--wfm-text-muted); margin-bottom: 2px; }
body.wfm .wfm-breadcrumb a { color: var(--wfm-text-muted); }
body.wfm .page-header { border-bottom-color: var(--wfm-border); }
/* ---------- panels ---------- */
body.wfm .panel { border: 1px solid var(--wfm-border); border-radius: var(--wfm-radius); box-shadow: var(--wfm-shadow); margin-bottom: 20px; background: var(--wfm-surface); }
body.wfm .panel > .panel-heading {
background: var(--wfm-surface); border-bottom: 1px solid var(--wfm-border); border-radius: var(--wfm-radius) var(--wfm-radius) 0 0;
padding: 14px 20px; color: var(--wfm-text); font-weight: 600;
}
body.wfm .panel-heading h4, body.wfm .panel-title { font-size: 15.5px; font-weight: 600; margin: 0; }
body.wfm .panel-heading .wfm-sub { display: block; font-family: var(--wfm-font-body); font-weight: 400; font-size: 13px; color: var(--wfm-text-muted); margin-top: 2px; }
body.wfm .panel-body { padding: 20px; }
body.wfm .panel-body.nopadding { padding: 0; } /* the old .nopadding helper: a grid or table sits flush in the panel */
body.wfm .panel-footer { background: #FAFBFC; border-top: 1px solid var(--wfm-border); border-radius: 0 0 var(--wfm-radius) var(--wfm-radius); padding: 12px 20px; }
/* colored panels keep a quiet header with a colored top edge instead of a solid block */
body.wfm .panel-primary { border-color: var(--wfm-border); border-top: 3px solid var(--wf-blue); }
body.wfm .panel-primary > .panel-heading { background: var(--wfm-surface); color: var(--wfm-text); border-color: var(--wfm-border); }
/* plan cards on Renew (Renew Change Plan Form 4.xslt, SMSPlanSelect.xslt): a solid brand-blue heading, like a price card */
body.wfm .panel-primary.wf-plan-card { border: 1px solid var(--wf-blue); overflow: clip; }
body.wfm .panel-primary.wf-plan-card > .panel-heading { background: var(--wf-blue); border-color: var(--wf-blue); color: #fff; }
body.wfm .panel-primary.wf-plan-card > .panel-heading h4 { color: #fff; }
body.wfm .panel-info { border-top: 3px solid var(--wf-light-blue); } body.wfm .panel-info > .panel-heading { background: #fff; color: var(--wfm-text); }
body.wfm .panel-warning { border-top: 3px solid var(--wf-orange); } body.wfm .panel-warning > .panel-heading { background: #fff; color: var(--wfm-text); }
body.wfm .panel-success { border-top: 3px solid #13804B; } body.wfm .panel-success > .panel-heading { background: #fff; color: var(--wfm-text); }
body.wfm .panel-danger { border-top: 3px solid #D14343; } body.wfm .panel-danger > .panel-heading { background: #fff; color: var(--wfm-text); }
/* ---------- forms ---------- */
body.wfm label { font-weight: 600; color: #333C48; margin-bottom: 6px; }
body.wfm .checkbox label, body.wfm .radio label { font-weight: 400; }
body.wfm .form-group { margin-bottom: 18px; }
body.wfm .form-control {
height: var(--wfm-control-h); border: 1px solid var(--wfm-border-strong); border-radius: var(--wfm-radius-sm); box-shadow: none;
font-size: 14px; color: var(--wfm-text); padding: 6px 12px; transition: border-color .12s, box-shadow .12s;
}
body.wfm textarea.form-control, body.wfm select[multiple].form-control { height: auto; }
body.wfm .form-control:focus { border-color: var(--wf-light-blue); box-shadow: 0 0 0 3px rgba(0, 131, 202, .18); outline: 0; }
body.wfm .form-control::placeholder { color: #7A8594; }
body.wfm .form-control[disabled], body.wfm .form-control[readonly] { background: #F4F6F9; }
/* Phone number boxes (intl-tel-input v29, /site/includes/iti/, set up by wf-phone.js). v29 sets the input's padding-left itself
(inline, measured from the flag), so only make the box fill its form-group like every other input. */
body.wfm .iti { width: 100%; }
body.wfm .input-group-addon { background: #F4F6F9; border-color: var(--wfm-border-strong); color: var(--wfm-text-muted); border-radius: var(--wfm-radius-sm); }
body.wfm .input-group .form-control:first-child, body.wfm .input-group-addon:first-child { border-radius: var(--wfm-radius-sm) 0 0 var(--wfm-radius-sm); }
body.wfm .input-group .form-control:last-child, body.wfm .input-group-addon:last-child, body.wfm .input-group-btn:last-child > .btn { border-radius: 0 var(--wfm-radius-sm) var(--wfm-radius-sm) 0; }
body.wfm .has-error .form-control { border-color: #D14343; }
body.wfm .has-error .help-block, body.wfm .has-error .control-label { color: #B42318; }
body.wfm input[type=checkbox], body.wfm input[type=radio] { accent-color: var(--wf-blue); }
/* fields without .form-control (Telerik inputs, bare selects): the same soft ring as .form-control:focus instead of the
page-wide 2px offset outline, which draws outside their box */
body.wfm select:focus-visible, body.wfm textarea:focus-visible,
body.wfm input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus-visible {
outline: 0; border-color: var(--wf-light-blue); box-shadow: 0 0 0 3px rgba(0, 131, 202, .18);
}
/* ---------- WFDatePicker (Bootstrap 3 mode): one bordered box with borderless month / day / year fields inside.
styles-admin-area.css gives the inner fields their own height and padding and the wrapper gets .form-control padding,
which misaligns them under this theme: lay the box out as a row and let the fields fill it. The focus ring goes on the box. */
body.wfm .wfdatepicker.form-control { display: flex; align-items: stretch; padding: 0; height: var(--wfm-control-h); overflow: hidden; }
body.wfm .wfdatepicker [class*='col-'] { float: none; display: flex; padding: 0; border-right: 1px solid var(--wfm-border-strong); border-radius: 0; }
body.wfm .wfdatepicker [class*='col-'].lastone { border-right: 0; }
body.wfm .wfdatepicker input, body.wfm .wfdatepicker select, body.wfm .wfdatepicker input[type=number] {
height: auto; min-height: 0; margin: 0; padding: 0 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none;
font-size: 14px; color: var(--wfm-text); line-height: normal; width: 100%;
}
body.wfm .wfdatepicker select { padding-right: 6px; }
body.wfm .wfdatepicker :focus-visible, body.wfm .wfdatepicker input:focus, body.wfm .wfdatepicker select:focus { outline: 0; box-shadow: none; border: 0; }
body.wfm .wfdatepicker.form-control:focus-within { border-color: var(--wf-light-blue); box-shadow: 0 0 0 3px rgba(0, 131, 202, .18); }
/* ---------- buttons (every variant sets its own text color; a.btn otherwise inherits the link blue) ---------- */
body.wfm .btn {
border-radius: var(--wfm-radius-sm); font-weight: 600; font-size: 13.5px; padding: 8px 14px; line-height: 1.4; box-shadow: none;
transition: background .12s, border-color .12s, box-shadow .12s; text-shadow: none; background-image: none;
}
body.wfm .btn .fa { margin-right: 3px; }
/* a row of buttons that wraps: space between the lines (not inside button groups). :where keeps it weak, so page rules still win */
body.wfm :where(:not(.btn-group, .btn-group-vertical, .input-group, .input-group-btn, .btn-toolbar)) > :where(.btn ~ .btn, .btn:has(~ .btn)) { margin-bottom: 4px; }
body.wfm .btn:focus, body.wfm .btn:active:focus { outline: 0; box-shadow: 0 0 0 3px rgba(0, 131, 202, .30); }
body.wfm .btn-sm { padding: 5px 10px; font-size: 12.5px; }
body.wfm .btn-xs { padding: 2px 8px; font-size: 12px; border-radius: 5px; }
body.wfm .btn-lg { padding: 11px 20px; font-size: 15px; }
body.wfm .btn-primary, body.wfm a.btn-primary { background: var(--wfm-primary); border-color: var(--wfm-primary); color: var(--wfm-primary-text); }
body.wfm .btn-primary:hover, body.wfm .btn-primary:focus, body.wfm .btn-primary:active, body.wfm .btn-primary.active,
body.wfm .open > .dropdown-toggle.btn-primary { background: var(--wfm-primary-hover); border-color: var(--wfm-primary-hover); color: var(--wfm-primary-text); }
body.wfm .btn-default, body.wfm a.btn-default { background: var(--wfm-secondary-bg); border-color: var(--wfm-secondary-border); color: var(--wfm-secondary-text); }
body.wfm .btn-default:hover, body.wfm .btn-default:focus, body.wfm .btn-default:active,
body.wfm .open > .dropdown-toggle.btn-default { background: var(--wfm-secondary-hover-bg); border-color: var(--wfm-secondary-border); color: var(--wfm-secondary-hover-text); }
body.wfm .btn-default.active { background: var(--wf-blue); border-color: var(--wf-blue); color: #fff; }
body.wfm .btn-success, body.wfm a.btn-success { background: #13804B; border-color: #13804B; color: #fff; } /* 5.0:1 */
body.wfm .btn-success:hover, body.wfm .btn-success:focus, body.wfm .btn-success:active { background: #0F6B3E; border-color: #0F6B3E; color: #fff; }
body.wfm .btn-info, body.wfm a.btn-info { background: #0074B8; border-color: #0074B8; color: #fff; } /* 5.0:1 */
body.wfm .btn-info:hover, body.wfm .btn-info:focus, body.wfm .btn-info:active { background: #005DAC; border-color: #005DAC; color: #fff; }
body.wfm .btn-warning, body.wfm a.btn-warning, body.wfm .btn-orange, body.wfm a.btn-orange { background: var(--wfm-primary); border-color: var(--wfm-primary); color: var(--wfm-primary-text); }
body.wfm .btn-warning:hover, body.wfm .btn-orange:hover { background: var(--wfm-primary-hover); border-color: var(--wfm-primary-hover); color: var(--wfm-primary-text); }
body.wfm .btn-danger, body.wfm a.btn-danger { background: #fff; border-color: #EBB4AF; color: #B42318; } /* 5.9:1 */
body.wfm .btn-danger:hover, body.wfm .btn-danger:focus, body.wfm .btn-danger:active { background: #B42318; border-color: #B42318; color: #fff; }
body.wfm .btn-danger.wfm-solid { background: #B42318; border-color: #B42318; color: #fff; }
body.wfm .btn-link { font-weight: 600; color: var(--wfm-link); }
body.wfm .btn-link:hover { color: var(--wfm-link-hover); }
/* ---------- labels, badges, alerts (all text/background pairs 5.4:1 or better) ---------- */
body.wfm .label { font-family: var(--wfm-font-body); font-weight: 600; font-size: 11.5px; padding: 3px 8px; border-radius: 999px; letter-spacing: .01em; display: inline-block; line-height: 1.4; }
body.wfm .label-default { background: #EEF1F5; color: #4A5563; }
body.wfm .label-primary { background: #E6F0FA; color: #004E91; }
body.wfm .label-success { background: #E3F5EC; color: #0E6B3E; }
body.wfm .label-info { background: #E3F3FB; color: #00659C; }
body.wfm .label-warning { background: #FFF1E1; color: #9A4E07; }
body.wfm .label-danger { background: #FDECEA; color: #B42318; }
body.wfm .badge { font-weight: 700; border-radius: 999px; }
body.wfm .badge:not([class*="bg-"]) { background: #EEF1F5; color: #4A5563; }
/* Bootstrap 5: labels also carry "badge text-bg-*" (docs/bootstrap5-migration.md); text-bg-* is !important, so the label colors are pinned here */
body.wfm .label.badge { font-weight: 600; font-size: 11.5px; padding: 3px 8px; line-height: 1.4; }
body.wfm .label.label-default { background: #EEF1F5 !important; color: #4A5563 !important; }
body.wfm .label.label-primary { background: #E6F0FA !important; color: #004E91 !important; }
body.wfm .label.label-success { background: #E3F5EC !important; color: #0E6B3E !important; }
body.wfm .label.label-info { background: #E3F3FB !important; color: #00659C !important; }
body.wfm .label.label-warning { background: #FFF1E1 !important; color: #9A4E07 !important; }
body.wfm .label.label-danger { background: #FDECEA !important; color: #B42318 !important; }
body.wfm .alert { border-radius: var(--wfm-radius); border: 1px solid; border-left-width: 4px; padding: 12px 16px; font-size: 14px; box-shadow: none; }
body.wfm .alert-success { background: #F0FAF5; border-color: #BFE6D1; border-left-color: #13804B; color: #0E5A35; }
body.wfm .alert-info { background: #F0F8FD; border-color: #BFE0F2; border-left-color: var(--wf-light-blue); color: #0B4F78; }
body.wfm .alert-warning { background: #FFF8EF; border-color: #FBD9B3; border-left-color: var(--wf-orange); color: #7A3D04; }
body.wfm .alert-danger { background: #FEF3F2; border-color: #F7C9C4; border-left-color: #D14343; color: #912018; }
/* dismissible alerts: Bootstrap's close button is placed against 35px of right padding, which the padding above takes away */
body.wfm .alert-dismissible, body.wfm .alert-dismissable { padding-right: 40px; }
body.wfm .alert-dismissible .close, body.wfm .alert-dismissable .close { top: 0; right: -24px; }
body.wfm .alert a:not(.btn) { font-weight: 600; text-decoration: underline; color: inherit; }
/* the framework's WPERR_ messages, same treatment. Spacing set here too: pages without styles-admin-area.css (AdminLogin.Master) had none */
body.wfm .WPERR_Error, body.wfm .WPERR_Validation, body.wfm .WPERR_Information, body.wfm .WPERR_Warning, body.wfm .WPERR_Fatal, body.wfm .WPERR_Login, body.wfm .WPERR_Success { display: block; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
body.wfm .nopadding .WPERR_Warning { margin: 0; }
body.wfm .WPERR_Error, body.wfm .WPERR_Validation, body.wfm .WPERR_Fatal, body.wfm .WPERR_Login { border-radius: var(--wfm-radius); border: 1px solid #F7C9C4; border-left: 4px solid #D14343; background-color: #FEF3F2; color: #912018; font-weight: 600; }
body.wfm .WPERR_Warning { border-radius: var(--wfm-radius); border: 1px solid #FBD9B3; border-left: 4px solid var(--wf-orange); background-color: #FFF8EF; color: #7A3D04; }
body.wfm .WPERR_Information { border-radius: var(--wfm-radius); border: 1px solid #BFE0F2; border-left: 4px solid var(--wf-light-blue); background-color: #F0F8FD; color: #0B4F78; }
body.wfm .WPERR_Success { border-radius: var(--wfm-radius); border: 1px solid #BFE6D1; border-left: 4px solid #13804B; background-color: #F0FAF5; color: #0E5A35; }
/* ---------- plain tables ---------- */
body.wfm .table > thead > tr > th {
border-bottom: 1px solid var(--wfm-border); color: var(--wfm-text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: .04em; padding: 10px 14px; background: #FAFBFC; white-space: nowrap;
}
body.wfm .table > tbody > tr > td { border-top: 1px solid #EEF1F5; padding: var(--wfm-cell-y) 14px; vertical-align: middle; }
body.wfm .table-hover > tbody > tr:hover { background: #F7F9FC; }
body.wfm .table-striped > tbody > tr:nth-of-type(odd) { background: #FBFCFD; }
/* table-condensed means "lots of rows": keep it tight */
body.wfm .table-condensed > thead > tr > th { padding: 6px 8px; }
body.wfm .table-condensed > tbody > tr > td { padding: 5px 8px; }
/* the waiver dashboard (DashboardV5: General Admission / Events / Signed In Advance boxes) shows a lot of rows: keep its own
compact layout and colored box headers; only the font changes. Same specificity trick as above (#dashmain is an id). */
body.wfm #dashmain { font-size: 13px; }
body.wfm #dashmain .table > thead > tr > th, body.wfm #dashmain .table > tbody > tr > td {
padding: 2px 4px 2px 0; line-height: 1.45; text-transform: none; letter-spacing: 0; font-size: inherit; white-space: normal; border-top: 1px solid #EEF1F5;
}
body.wfm #dashmain .table > thead > tr > th { line-height: 25px; font-weight: 600; border-bottom: 0; background: transparent; color: inherit; }
body.wfm #dashmain .table > thead > tr > th:first-of-type, body.wfm #dashmain .table > tbody > tr > td:first-of-type { padding-left: 6px; }
body.wfm #dashmain .dashboxmain thead, body.wfm #dashmain .dasheventinner thead { background-color: #EEF1F5; }
body.wfm #dashmain .dashboxeventsubhead, body.wfm #dashmain .table > thead > tr > th.dashboxeventsubhead { background-color: var(--wf-blue); color: #fff; padding: 4px 8px; }
body.wfm #dashmain .dashboxeventsubhead a { color: #fff; }
body.wfm #dashmain .dashboxfooter { padding: 3px; }
/* box headings: two shades of the brand blue and the brand orange. General Admission (Bootstrap's green before) takes the dark logo
blue, Events keeps the lighter blue, Signed in Advance keeps orange. White text on the dark blue is 7:1. */
body.wfm .dashboxhead.GENADM thead { background-color: var(--wf-blue); }
/* the colored box headings run right up to the top bar: no light top border on their cells (it showed as a 1px step beside the sidebar) */
body.wfm #dashmain .table.dashboxhead > thead > tr > th { border-top: 0; }
body.wfm .dashboxhead.GENADM { border-bottom-color: #7FAAD6; }
body.wfm .dashboxfooter.GENADM { background-color: #E8F1FA; }
/* white heading text on all three (box title, labels and links like "Check In") */
body.wfm .dashboxhead thead, body.wfm .dashboxhead thead th, body.wfm .dashboxhead thead h4, body.wfm .dashboxhead thead label,
body.wfm .dashboxhead thead a, body.wfm .dashboxhead thead a:hover, body.wfm .dashboxhead thead a:focus { color: #fff; }
/* the dashboard fills the screen: no content max-width (it would leave a strip on the right of wide windows) */
body.wfm #main-content-area:has(#dashmain) { max-width: none; }
/* ---------- RadGrid: every skin (Bootstrap, Default/no skin, ...). Telerik's own skin rules are .RadGrid_Skin .x (two classes);
these are body.wfm .RadGrid .x and up, so they win without per-grid changes. Background images are cleared because the
classic skins draw header gradients with them. ---------- */
/* A grid wider than the page scrolls sideways inside its frame (overflow-x: auto; it used to be overflow: clip, which cut the
right-hand columns off on desktop). clear: both because overflow auto makes the grid avoid floats: many pages put a floated
of buttons beside an inline-block
, and without clear the grid would shrink to sit beside that
float. With it the grid starts below the buttons. */
body.wfm .RadGrid { border: 1px solid var(--wfm-border); border-radius: var(--wfm-radius); overflow-x: auto; -webkit-overflow-scrolling: touch; clear: both; background: #fff; font-family: var(--wfm-font-body); font-size: 14px; color: var(--wfm-text); box-shadow: var(--wfm-shadow); }
body.wfm .RadGrid .rgMasterTable, body.wfm .RadGrid .rgDetailTable { width: 100%; border-collapse: separate; border-spacing: 0; font-family: inherit; font-size: inherit; line-height: 1.45; color: inherit; }
/* GridLines="Both" etc. put border="1" on the table, which draws a dark frame inside the grid's own frame */
body.wfm .RadGrid table.rgMasterTable, body.wfm .RadGrid table.rgDetailTable { border: 0; }
body.wfm .RadGrid .rgHeader, body.wfm .RadGrid th.rgHeader {
background: #FAFBFC; background-image: none; color: var(--wfm-text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
border: 0; border-bottom: 1px solid var(--wfm-border); padding: 11px 14px; text-align: left; white-space: nowrap; line-height: 1.3;
}
body.wfm .RadGrid .rgHeader a { color: var(--wfm-text-muted); text-decoration: none; }
body.wfm .RadGrid th.rgSorted { background: #F1F5FA; background-image: none; color: var(--wf-blue); }
body.wfm .RadGrid th.rgSorted a { color: var(--wf-blue); }
body.wfm .RadGrid .rgRow > td, body.wfm .RadGrid .rgAltRow > td, body.wfm .RadGrid .rgEditRow > td {
border: 0; border-top: 1px solid #EEF1F5; padding: var(--wfm-cell-y) 14px; background: #fff; background-image: none; vertical-align: middle; color: var(--wfm-text);
}
body.wfm .RadGrid .rgRow > td.rgSorted, body.wfm .RadGrid .rgAltRow > td.rgSorted { background: #fff; } /* classic skins shade the sorted column */
body.wfm .RadGrid tbody tr:first-child > td { border-top: 0; }
body.wfm .RadGrid .rgRow:hover > td, body.wfm .RadGrid .rgAltRow:hover > td { background: #F7F9FC; }
body.wfm .RadGrid .rgSelectedRow > td { background: #E8F1FA !important; }
body.wfm .RadGrid .rgRow a:not(.btn), body.wfm .RadGrid .rgAltRow a:not(.btn) { color: var(--wfm-link); font-weight: 600; text-decoration: none; }
body.wfm .RadGrid .rgRow a:not(.btn):hover, body.wfm .RadGrid .rgAltRow a:not(.btn):hover { color: var(--wfm-link-hover); text-decoration: underline; }
body.wfm .RadGrid .rgFilterRow > td { background: #fff; background-image: none; border: 0; border-bottom: 1px solid var(--wfm-border); padding: 8px 10px; }
body.wfm .RadGrid .rgFilterRow input[type=text] { height: 32px; border: 1px solid var(--wfm-border-strong); border-radius: var(--wfm-radius-sm); padding: 4px 8px; }
body.wfm .RadGrid .rgFooter > td, body.wfm .RadGrid .rgCommandRow > td { background: #FAFBFC; background-image: none; border: 0; border-top: 1px solid var(--wfm-border); padding: 10px 14px; }
body.wfm .RadGrid .rgPager > td { background: #FAFBFC; background-image: none; border: 0; border-top: 1px solid var(--wfm-border); padding: 10px 14px; color: var(--wfm-text-muted); font-size: 13px; }
body.wfm .RadGrid .rgNumPart a {
display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; margin: 0 2px;
border-radius: var(--wfm-radius-sm); border: 1px solid transparent; color: #4A5563; text-decoration: none; background: transparent; font-weight: 600;
}
body.wfm .RadGrid .rgNumPart a:hover { background: #fff; border-color: var(--wfm-border-strong); }
body.wfm .RadGrid .rgNumPart a.rgCurrentPage { background: var(--wf-blue); color: #fff; border-color: var(--wf-blue); }
body.wfm .RadGrid .rgNoRecords > td { padding: 40px 14px; text-align: center; color: var(--wfm-text-muted); background: #fff; }
/* a grid inside a panel loses its own frame */
body.wfm .panel .RadGrid { border: 0; border-radius: 0 0 var(--wfm-radius) var(--wfm-radius); box-shadow: none; }
/* ---------- building blocks for new pages (see the mockup) ---------- */
body.wfm .wfm-filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--wfm-border); }
body.wfm .wfm-filterbar .form-control { width: auto; }
body.wfm .wfm-filterbar .wfm-search { position: relative; flex: 1 1 260px; max-width: 360px; }
body.wfm .wfm-filterbar .wfm-search .form-control { width: 100%; padding-left: 34px; }
body.wfm .wfm-filterbar .wfm-search .fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #7A8594; }
body.wfm .wfm-filterbar .wfm-spacer { flex: 1; }
body.wfm .wfm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
body.wfm .wfm-stat { background: #fff; border: 1px solid var(--wfm-border); border-radius: var(--wfm-radius); box-shadow: var(--wfm-shadow); padding: 16px 18px; }
body.wfm .wfm-stat .wfm-stat-label { font-size: 12.5px; font-weight: 600; color: var(--wfm-text-muted); display: flex; align-items: center; gap: 8px; }
body.wfm .wfm-stat .wfm-stat-value { font-family: var(--wfm-font-head); font-size: 26px; font-weight: 700; margin-top: 8px; letter-spacing: -.02em; }
body.wfm .wfm-stat .wfm-stat-note { font-size: 12.5px; color: var(--wfm-text-muted); }
body.wfm .wfm-empty { text-align: center; padding: 48px 20px; }
body.wfm .wfm-empty .wfm-empty-icon { width: 56px; height: 56px; border-radius: 14px; background: #E8F1FA; color: var(--wf-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; }
body.wfm .wfm-empty h4 { margin: 0 0 6px; }
body.wfm .wfm-empty p { color: var(--wfm-text-muted); max-width: 420px; margin: 0 auto 16px; }
/* ---------- tabs, modal, wells ---------- */
body.wfm .nav-tabs { border-bottom: 1px solid var(--wfm-border); }
body.wfm .nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--wfm-text-muted); font-weight: 600; padding: 10px 14px; margin-right: 4px; }
body.wfm .nav-tabs > li > a:hover { background: transparent; color: var(--wfm-text); border-bottom-color: var(--wfm-border-strong); }
body.wfm .nav-tabs > li.active > a, body.wfm .nav-tabs > li.active > a:hover, body.wfm .nav-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--wf-blue); color: var(--wf-blue); background: transparent; }
/* tabs in a panel heading (panel with-nav-tabs): the same underline tabs, sitting on the heading's bottom line. Beats the old grey
tab-box rules in styles-admin-area.css (.with-nav-tabs.panel-default ...), which are more specific than the plain tab rules above. */
body.wfm .panel.with-nav-tabs > .panel-heading { padding: 0 12px; background: var(--wfm-surface); }
body.wfm .panel.with-nav-tabs .nav-tabs { border-bottom: 0; margin-bottom: -1px; }
body.wfm .panel.with-nav-tabs.panel-default .nav-tabs > li > a,
body.wfm .panel.with-nav-tabs.panel-default .nav-tabs > li > a:focus { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--wfm-text-muted); padding: 14px 12px 12px; margin-right: 2px; }
body.wfm .panel.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
body.wfm .panel.with-nav-tabs.panel-default .nav-tabs > .open > a { background: transparent; color: var(--wfm-text); border-bottom-color: var(--wfm-border-strong); }
body.wfm .panel.with-nav-tabs.panel-default .nav-tabs > li.active > a,
body.wfm .panel.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
body.wfm .panel.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--wf-blue); background: transparent; color: var(--wf-blue); }
body.wfm .modal-content { border: 0; border-radius: 12px; box-shadow: var(--wfm-shadow-lg); }
body.wfm .modal-header { border-bottom: 1px solid var(--wfm-border); padding: 16px 20px; }
body.wfm .modal-title { font-weight: 600; font-size: 17px; }
body.wfm .modal-body { padding: 20px; }
body.wfm .modal-footer { border-top: 1px solid var(--wfm-border); padding: 12px 20px; background: #FAFBFC; border-radius: 0 0 12px 12px; }
body.wfm .modal-backdrop.in, body.wfm .modal-backdrop.show { opacity: .45; }
body.wfm .well { background: #F7F9FB; border: 1px solid var(--wfm-border); border-radius: var(--wfm-radius); box-shadow: none; }
/* ---------- phones ---------- */
@media (max-width: 767px) {
body.wfm .navbar-static-top .navbar-header { border-bottom: 1px solid var(--wfm-border); }
body.wfm .navbar-default .navbar-brand { float: left; justify-content: flex-start; padding-left: 14px; }
body.wfm .navbar-brand img { max-width: 180px; max-height: 38px; }
body.wfm .navbar-default .navbar-toggle { border: 0; margin-top: 13px; }
body.wfm .navbar-default .navbar-toggle .icon-bar { background: #4A5563; }
body.wfm .navbar-default .navbar-toggle:hover, body.wfm .navbar-default .navbar-toggle:focus { background: #F1F4F8; }
body.wfm .navbar-top-links { min-height: 0; flex-wrap: wrap; padding: 6px 8px; margin: 0; background: #fff; }
body.wfm .navbar-top-links .wfm-hide-xs { display: none; }
/* the opened menu is a panel that scrolls on its own (a long menu no longer pushes the page a few screens down);
admin-sidebar-scroll.js keeps the current page's item in view inside it */
body.wfm .sidebar .sidebar-nav.navbar-collapse { max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.wfm #page-wrapper { padding: 16px 14px 40px; }
body.wfm .wfm-filterbar .wfm-search { max-width: none; }
body.wfm .wfm-filterbar .form-control { flex: 1 1 140px; }
body.wfm .wfm-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
}