/* ========================================
SMART SQUAD MENU MODERNIZATION
Version: 2.0 - Dashboard Layout
Include this file AFTER:
- jquery.mobile.theme.css
- jquery.mobile.structure.css
- custom.css
This provides CSS-only upgrades to the
main menu while preserving all existing
functionality and jQuery Mobile compatibility.
======================================== */
/* === CSS VARIABLES ===
Customize these to match your brand colors */
:root {
/* Light Mode Colors */
--menu-bg-primary: #f0f4f8;
--menu-bg-card: rgba(255, 255, 255, 0.85);
--menu-bg-card-hover: rgba(255, 255, 255, 0.95);
--menu-text-primary: #1a202c;
--menu-text-secondary: #4a5568;
--menu-border-color: rgba(0, 0, 0, 0.08);
--menu-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--menu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--menu-shadow-glow: 0 0 0 3px rgba(51, 136, 204, 0.15);
/* Icon Container */
--menu-icon-bg: rgba(51, 136, 204, 0.1);
--menu-icon-bg-hover: rgba(51, 136, 204, 0.15);
/* Accent Colors (match your existing color classes) */
--menu-accent-blue: #3388cc;
--menu-accent-red: #dc3545;
--menu-accent-yellow: #f0ad4e;
--menu-accent-green: #28a745;
--menu-accent-dull: #6c757d;
/* Badge */
--menu-badge-bg: #3388cc;
--menu-badge-text: #ffffff;
/* Spacing */
--menu-spacing-sm: 8px;
--menu-spacing-md: 12px;
--menu-spacing-lg: 16px;
--menu-spacing-xl: 20px;
/* Radius */
--menu-radius-sm: 8px;
--menu-radius-md: 12px;
--menu-radius-lg: 16px;
--menu-radius-icon: 10px;
}
/* === DARK MODE (Theme B) ===
Applied when using jQuery Mobile theme B */
.ui-page-theme-b,
.ui-page-theme-b #menu,
#menu.ui-page-theme-b {
--menu-bg-primary: #0d1117;
--menu-bg-card: rgba(30, 35, 42, 0.85);
--menu-bg-card-hover: rgba(40, 46, 54, 0.95);
--menu-text-primary: #e6edf3;
--menu-text-secondary: #8b949e;
--menu-border-color: rgba(255, 255, 255, 0.08);
--menu-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--menu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--menu-shadow-glow: 0 0 0 3px rgba(51, 136, 204, 0.25);
--menu-icon-bg: rgba(51, 136, 204, 0.15);
--menu-icon-bg-hover: rgba(51, 136, 204, 0.25);
}
/* ========================================
HEADER ICON BARS
Theme-specific backgrounds set in the
MENU PAGE section below (~line 840+)
======================================== */
#mainMenuIcon,
#secondMenuIcon,
#offlineMenuIcon {
border: none !important;
}
/* ========================================
MENU ITEM ORDERING (All breakpoints)
Dashboard layout: Heroes first, then secondary
======================================== */
/* Hero items - order 1-3 */
#mainmenu.ui-listview > li#item_recentOcc { order: 1 !important; }
#mainmenu.ui-listview > li#item_citation { order: 2 !important; }
#mainmenu.ui-listview > li#item_notebook { order: 3 !important; }
/* Secondary items - order 4-13 */
#mainmenu.ui-listview > li#item_aichat { order: 4 !important; }
#mainmenu.ui-listview > li#item_searchRMS { order: 5 !important; }
#mainmenu.ui-listview > li#item_situational { order: 6 !important; }
#mainmenu.ui-listview > li#item_squad { order: 7 !important; }
#mainmenu.ui-listview > li#item_shifts { order: 8 !important; }
#mainmenu.ui-listview > li#item_interviews { order: 9 !important; }
#mainmenu.ui-listview > li#item_searchIntel { order: 10 !important; }
#mainmenu.ui-listview > li#item_favorites { order: 11 !important; }
#mainmenu.ui-listview > li#item_tasks { order: 12 !important; }
#mainmenu.ui-listview > li#item_form { order: 13 !important; }
/* Bottom items */
#mainmenu.ui-listview > li#item_glasses { order: 97 !important; }
#mainmenu.ui-listview > li#logout2 { order: 99 !important; }
/* ========================================
MOBILE MENU STYLES (Default / < 768px)
======================================== */
/* Mobile dark mode: Give #menu page a dark background */
@media only screen and (max-width: 1024px) {
#menu.ui-page-theme-b,
div#menu.ui-page-theme-b {
background-color: #1c1c1e !important;
}
/* Mobile light mode: Light background - cool blue-gray */
#menu.ui-page-theme-a,
div#menu.ui-page-theme-a {
background-color: #f0f4f8 !important;
}
}
/* Content area should be transparent to show page background */
@media only screen and (max-width: 1024px) {
html div#menu .ui-content,
html div#menu .ui-body-inherit,
html #menu .ui-content,
html #menu .ui-body-inherit,
html .ui-page-theme-a #menu .ui-content,
html .ui-page-theme-b #menu .ui-content,
div#menu .ui-content,
div#menu .ui-body-inherit,
div#menu.ui-page .ui-content,
div#menu.ui-page .ui-body-inherit,
div#menu.ui-page-theme-a .ui-content,
div#menu.ui-page-theme-a .ui-body-inherit,
div#menu.ui-page-theme-b .ui-content,
div#menu.ui-page-theme-b .ui-body-inherit,
div#menu > .ui-panel-wrapper > .ui-content,
div#menu > .ui-panel-wrapper > [data-role="content"],
div#menu .ui-panel-wrapper,
.ui-page-theme-a div#menu .ui-body-inherit,
.ui-page-theme-b div#menu .ui-body-inherit,
#menu .ui-content,
#menu .ui-body-inherit,
#menu .ui-panel-wrapper,
#menu .ui-body-b,
#menu .ui-body-a,
#menu [data-role="content"] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
}
/* Ensure listview container is transparent */
#mainmenu.ui-listview,
#menu #mainmenu,
#menu [data-role="content"] > ul {
background: transparent !important;
background-color: transparent !important;
}
/* Aggressive reset for any jQuery Mobile generated wrappers - mobile only */
@media only screen and (max-width: 1024px) {
#menu .ui-listview-outer,
#menu .ui-content > *:not(#mainmenu),
#menu > .ui-content,
#menu > .ui-panel-wrapper,
#menu > .ui-panel-wrapper > .ui-content,
div#menu > div.ui-panel-wrapper,
div#menu > div.ui-panel-wrapper > div.ui-content,
div#menu > div.ui-panel-wrapper > div[data-role="content"] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
}
/* Dark mode specific - ensure no white backgrounds leak through on mobile */
@media only screen and (max-width: 1024px) {
div#menu.ui-page-theme-b .ui-content,
div#menu.ui-page-theme-b > .ui-panel-wrapper > .ui-content,
div.ui-page-theme-b#menu .ui-content,
.ui-page-theme-b#menu .ui-content,
.ui-page-theme-b#menu .ui-body-inherit,
.ui-page-theme-b #menu .ui-content,
#menu.ui-page-theme-b .ui-content,
#menu.ui-page-theme-b > [data-role="content"] {
background: transparent !important;
background-color: transparent !important;
}
}
/* Reset jQuery Mobile listview defaults for #mainmenu */
/* 2-column grid on mobile with tighter side margins */
#mainmenu.ui-listview {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--menu-spacing-sm) !important;
margin: 0 !important;
padding: var(--menu-spacing-sm) !important;
}
#mainmenu.ui-listview,
#mainmenu.ui-listview > li {
border: none !important;
background: transparent !important;
}
/* === MENU ITEM CARD === */
#mainmenu.ui-listview > li {
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: auto !important;
height: auto !important;
}
#mainmenu.ui-listview > li > a,
#mainmenu.ui-listview > li > a.ui-btn {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
padding: var(--menu-spacing-md) !important;
min-height: 70px !important;
margin: 0 !important;
background: var(--menu-bg-card) !important;
border-radius: var(--menu-radius-md) !important;
border: 1px solid var(--menu-border-color) !important;
box-shadow: var(--menu-shadow-sm) !important;
transition: all 0.25s ease !important;
text-decoration: none !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-sizing: border-box !important;
height: 100% !important;
position: relative !important;
}
#mainmenu.ui-listview > li > a:hover,
#mainmenu.ui-listview > li > a.ui-btn:hover {
background: var(--menu-bg-card-hover) !important;
box-shadow: var(--menu-shadow-md) !important;
transform: translateY(-2px);
border-color: var(--menu-accent-blue) !important;
}
#mainmenu.ui-listview > li > a:active,
#mainmenu.ui-listview > li > a.ui-btn:active {
transform: translateY(0);
box-shadow: var(--menu-shadow-sm) !important;
}
#mainmenu.ui-listview > li > a:focus,
#mainmenu.ui-listview > li > a.ui-btn:focus {
outline: none !important;
box-shadow: var(--menu-shadow-glow), var(--menu-shadow-md) !important;
}
/* === ICON CONTAINER === */
#mainmenu .menuicon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
background: var(--menu-icon-bg) !important;
border-radius: var(--menu-radius-icon) !important;
margin-right: var(--menu-spacing-md) !important;
margin-bottom: 0 !important;
transition: all 0.25s ease !important;
float: none !important;
}
#mainmenu.ui-listview > li > a:hover .menuicon {
background: var(--menu-icon-bg-hover) !important;
transform: scale(1.05);
}
#mainmenu .menuicon i,
#mainmenu .menuicon i.fa {
font-size: 20px !important;
line-height: 1 !important;
float: none !important;
margin: 0 !important;
opacity: 1 !important;
}
/* Icon color classes */
#mainmenu .menuicon i.blue { color: var(--menu-accent-blue) !important; }
#mainmenu .menuicon i.red { color: var(--menu-accent-red) !important; }
#mainmenu .menuicon i.yellow { color: var(--menu-accent-yellow) !important; }
#mainmenu .menuicon i.green { color: var(--menu-accent-green) !important; }
#mainmenu .menuicon i.dull { color: var(--menu-accent-dull) !important; }
/* Icon-specific tinted backgrounds */
#mainmenu .menuicon:has(i.red) { background: rgba(220, 53, 69, 0.1) !important; }
#mainmenu .menuicon:has(i.yellow) { background: rgba(240, 173, 78, 0.1) !important; }
#mainmenu .menuicon:has(i.green) { background: rgba(40, 167, 69, 0.1) !important; }
#mainmenu .menuicon:has(i.dull) { background: rgba(108, 117, 125, 0.1) !important; }
/* Dark mode icon tints */
.ui-page-theme-b #mainmenu .menuicon:has(i.red) { background: rgba(220, 53, 69, 0.15) !important; }
.ui-page-theme-b #mainmenu .menuicon:has(i.yellow) { background: rgba(240, 173, 78, 0.15) !important; }
.ui-page-theme-b #mainmenu .menuicon:has(i.green) { background: rgba(40, 167, 69, 0.15) !important; }
.ui-page-theme-b #mainmenu .menuicon:has(i.dull) { background: rgba(108, 117, 125, 0.15) !important; }
/* === DARK MODE CARD OVERRIDES (Theme B) ===
Explicit overrides since CSS variables don't always inherit through jQuery Mobile structure */
.ui-page-theme-b #mainmenu.ui-listview > li > a,
.ui-page-theme-b #mainmenu.ui-listview > li > a.ui-btn {
background: rgba(30, 35, 42, 0.85) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
.ui-page-theme-b #mainmenu.ui-listview > li > a:hover,
.ui-page-theme-b #mainmenu.ui-listview > li > a.ui-btn:hover {
background: rgba(40, 46, 54, 0.95) !important;
border-color: var(--menu-accent-blue) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
.ui-page-theme-b #mainmenu .menutext {
color: #e6edf3 !important;
}
.ui-page-theme-b #mainmenu .menuicon {
background: rgba(51, 136, 204, 0.2) !important;
}
/* === LIGHT MODE CARD OVERRIDES (Theme A) ===
Crisp white cards with visible borders and shadows on a cool-toned background */
.ui-page-theme-a #mainmenu.ui-listview > li > a,
.ui-page-theme-a #mainmenu.ui-listview > li > a.ui-btn {
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08),
0 0 1px rgba(0, 0, 0, 0.05) !important;
}
.ui-page-theme-a #mainmenu.ui-listview > li > a:hover,
.ui-page-theme-a #mainmenu.ui-listview > li > a.ui-btn:hover {
background: #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
border-color: var(--menu-accent-blue) !important;
}
.ui-page-theme-a #mainmenu .menutext {
color: #1a202c !important;
}
/* === MENU TEXT === */
#mainmenu .menutext {
flex: 1 !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--menu-text-primary) !important;
text-shadow: none !important;
letter-spacing: 0.02em !important;
padding: 0 !important;
margin: 0 !important;
position: static !important;
white-space: normal !important;
overflow: visible !important;
overflow-wrap: break-word !important;
word-break: keep-all !important;
text-align: left !important;
line-height: 1.3 !important;
text-transform: uppercase !important;
}
/* === BADGE COUNT === */
/* Using maximum specificity to override jQuery Mobile theme styles */
html body #mainmenu .ui-li-count,
html body .ui-page-theme-a #mainmenu .ui-li-count,
html body .ui-page-theme-b #mainmenu .ui-li-count,
html body #mainmenu.ui-listview .ui-li-count,
html body .ui-listview#mainmenu .ui-li-count,
html .ui-page-theme-a #mainmenu .ui-li-count,
html .ui-page-theme-b #mainmenu .ui-li-count,
html #menu #mainmenu .ui-li-count,
#menu #mainmenu .ui-li-count,
#mainmenu .ui-li-count,
.ui-page-theme-a #mainmenu .ui-li-count,
.ui-page-theme-b #mainmenu .ui-li-count,
#mainmenu.ui-listview .ui-li-count,
#mainmenu.ui-listview li .ui-li-count,
#mainmenu.ui-listview > li .ui-li-count,
#mainmenu.ui-listview > li > a .ui-li-count,
#mainmenu.ui-listview > li > a span.ui-li-count,
html body div#menu #mainmenu span.ui-li-count,
html body .ui-page #mainmenu span.ui-li-count,
.ui-page-theme-a #mainmenu span.ui-li-count,
.ui-page-theme-b #mainmenu span.ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #fff !important;
color: #ffffff !important;
text-shadow: none !important;
font-size: 10px !important;
font-weight: 600 !important;
padding: 2px 6px !important;
border-radius: 20px !important;
min-width: 20px !important;
text-align: center !important;
border: none !important;
box-shadow: none !important;
position: absolute !important;
top: 6px !important;
right: 6px !important;
margin: 0 !important;
}
/* Hide jQuery Mobile default arrow icons */
#mainmenu.ui-listview .ui-btn-icon-right:after,
#mainmenu.ui-listview .ui-icon-carat-r:after {
display: none !important;
}
/* ========================================
TABLET LAYOUT (768px - 1024px)
4-column grid that fits within viewport
======================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
#mainmenu.ui-listview {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--menu-spacing-md) !important;
padding: var(--menu-spacing-md) !important;
}
/* Reset all items to span 1 column by default */
#mainmenu.ui-listview > li {
grid-column: span 1 !important;
}
/* Hero tiles span 2 columns on tablet (2+2 = 4 cols, third wraps) */
#mainmenu.ui-listview > li#item_recentOcc,
#mainmenu.ui-listview > li#item_citation,
#mainmenu.ui-listview > li#item_notebook {
grid-column: span 2 !important;
}
/* Hero count adjustments for tablet */
#mainmenu.ui-listview.heroes-2 > li#item_recentOcc,
#mainmenu.ui-listview.heroes-2 > li#item_citation,
#mainmenu.ui-listview.heroes-2 > li#item_notebook {
grid-column: span 2 !important;
}
#mainmenu.ui-listview.heroes-1 > li#item_recentOcc,
#mainmenu.ui-listview.heroes-1 > li#item_citation,
#mainmenu.ui-listview.heroes-1 > li#item_notebook {
grid-column: span 4 !important;
max-width: 400px !important;
justify-self: center !important;
}
/* Hero cards on tablet */
#mainmenu.ui-listview > li#item_recentOcc > a,
#mainmenu.ui-listview > li#item_recentOcc > a.ui-btn,
#mainmenu.ui-listview > li#item_citation > a,
#mainmenu.ui-listview > li#item_citation > a.ui-btn,
#mainmenu.ui-listview > li#item_notebook > a,
#mainmenu.ui-listview > li#item_notebook > a.ui-btn {
height: 140px !important;
background: rgba(42, 42, 42, 0.6) !important;
}
/* Hero icon containers on tablet */
#mainmenu.ui-listview > li#item_recentOcc .menuicon,
#mainmenu.ui-listview > li#item_citation .menuicon,
#mainmenu.ui-listview > li#item_notebook .menuicon {
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
border-radius: 12px !important;
}
#mainmenu.ui-listview > li#item_recentOcc .menuicon i.fa,
#mainmenu.ui-listview > li#item_citation .menuicon i.fa,
#mainmenu.ui-listview > li#item_notebook .menuicon i.fa {
font-size: 28px !important;
}
/* Hero text on tablet */
#mainmenu.ui-listview > li#item_recentOcc .menutext,
#mainmenu.ui-listview > li#item_citation .menutext,
#mainmenu.ui-listview > li#item_notebook .menutext {
font-size: 13px !important;
}
/* Secondary cards on tablet */
#mainmenu.ui-listview > li > a,
#mainmenu.ui-listview > li > a.ui-btn {
height: auto !important;
min-height: 70px !important;
padding: var(--menu-spacing-md) !important;
}
#mainmenu .menuicon {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
}
#mainmenu .menuicon i,
#mainmenu .menuicon i.fa {
font-size: 20px !important;
}
#mainmenu .menutext {
font-size: 12px !important;
}
/* Light theme hero cards on tablet */
.ui-page-theme-a #mainmenu.ui-listview > li#item_recentOcc > a,
.ui-page-theme-a #mainmenu.ui-listview > li#item_recentOcc > a.ui-btn,
.ui-page-theme-a #mainmenu.ui-listview > li#item_citation > a,
.ui-page-theme-a #mainmenu.ui-listview > li#item_citation > a.ui-btn,
.ui-page-theme-a #mainmenu.ui-listview > li#item_notebook > a,
.ui-page-theme-a #mainmenu.ui-listview > li#item_notebook > a.ui-btn {
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.ui-page-theme-a #mainmenu.ui-listview > li#item_recentOcc > a:hover,
.ui-page-theme-a #mainmenu.ui-listview > li#item_citation > a:hover,
.ui-page-theme-a #mainmenu.ui-listview > li#item_notebook > a:hover {
background: #ffffff !important;
box-shadow: 0 4px 16px rgba(51, 136, 204, 0.2) !important;
}
}
/* ========================================
DESKTOP GRID LAYOUT (≥1025px)
Dashboard style: 3 heroes + 6-col secondary
======================================== */
@media only screen and (min-width: 1025px) {
/* Grid container - 6 columns for flexibility */
#mainmenu.ui-listview {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: var(--menu-spacing-lg) !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: var(--menu-spacing-xl) 40px !important;
}
/* Default: all items span 1 column */
#mainmenu.ui-listview > li {
float: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
grid-column: span 1 !important;
}
/* === HERO TILES === */
/* Default: Hero items span 2 columns each (3 heroes × 2 cols = 6 cols = full row) */
/* Using higher specificity to ensure this takes precedence */
#mainmenu.ui-listview > li#item_recentOcc:not(.forced-span),
#mainmenu.ui-listview > li#item_citation:not(.forced-span),
#mainmenu.ui-listview > li#item_notebook:not(.forced-span) {
grid-column: span 2 !important;
}
/* === HERO COUNT ADJUSTMENTS === */
/* 2 heroes visible - each spans 3 columns (only when class is explicitly set) */
#mainmenu.ui-listview.heroes-2 > li#item_recentOcc,
#mainmenu.ui-listview.heroes-2 > li#item_citation,
#mainmenu.ui-listview.heroes-2 > li#item_notebook {
grid-column: span 3 !important;
}
/* 1 hero visible - spans full width (6 columns) but with max-width */
#mainmenu.ui-listview.heroes-1 > li#item_recentOcc,
#mainmenu.ui-listview.heroes-1 > li#item_citation,
#mainmenu.ui-listview.heroes-1 > li#item_notebook {
grid-column: span 6 !important;
max-width: 600px !important;
justify-self: center !important;
}
/* 0 heroes - no special handling needed, secondary items just flow */
/* Hero card styling */
#mainmenu.ui-listview > li#item_recentOcc > a,
#mainmenu.ui-listview > li#item_recentOcc > a.ui-btn,
#mainmenu.ui-listview > li#item_citation > a,
#mainmenu.ui-listview > li#item_citation > a.ui-btn,
#mainmenu.ui-listview > li#item_notebook > a,
#mainmenu.ui-listview > li#item_notebook > a.ui-btn {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
height: 240px !important;
padding: var(--menu-spacing-xl) !important;
border-radius: var(--menu-radius-lg) !important;
background: rgba(42, 42, 42, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
position: relative !important;
}
#mainmenu.ui-listview > li#item_recentOcc > a:hover,
#mainmenu.ui-listview > li#item_citation > a:hover,
#mainmenu.ui-listview > li#item_notebook > a:hover {
background: rgba(50, 55, 60, 0.75) !important;
border-color: var(--menu-accent-blue) !important;
box-shadow: 0 0 30px rgba(51, 136, 204, 0.35) !important;
transform: translateY(-4px) !important;
}
/* Hero icon containers - larger */
#mainmenu.ui-listview > li#item_recentOcc .menuicon,
#mainmenu.ui-listview > li#item_citation .menuicon,
#mainmenu.ui-listview > li#item_notebook .menuicon {
width: 110px !important;
height: 110px !important;
min-width: 110px !important;
margin-right: 0 !important;
margin-bottom: var(--menu-spacing-lg) !important;
border-radius: 18px !important;
}
#mainmenu.ui-listview > li#item_recentOcc .menuicon i,
#mainmenu.ui-listview > li#item_recentOcc .menuicon i.fa,
#mainmenu.ui-listview > li#item_citation .menuicon i,
#mainmenu.ui-listview > li#item_citation .menuicon i.fa,
#mainmenu.ui-listview > li#item_notebook .menuicon i,
#mainmenu.ui-listview > li#item_notebook .menuicon i.fa {
font-size: 52px !important;
}
/* Hero text - larger */
#mainmenu.ui-listview > li#item_recentOcc .menutext,
#mainmenu.ui-listview > li#item_citation .menutext,
#mainmenu.ui-listview > li#item_notebook .menutext {
font-size: 16px !important;
font-weight: 600 !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
/* === SECONDARY TILES === */
/* Secondary card styling - smaller, compact */
#mainmenu.ui-listview > li > a,
#mainmenu.ui-listview > li > a.ui-btn {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
height: 150px !important;
padding: var(--menu-spacing-md) !important;
border-radius: var(--menu-radius-md) !important;
background: rgba(42, 42, 42, 0.45) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
position: relative !important;
}
#mainmenu.ui-listview > li > a:hover,
#mainmenu.ui-listview > li > a.ui-btn:hover {
background: rgba(50, 50, 50, 0.65) !important;
border-color: var(--menu-accent-blue) !important;
box-shadow: 0 0 20px rgba(51, 136, 204, 0.25) !important;
transform: translateY(-3px) !important;
}
/* Secondary icon container */
#mainmenu.ui-listview .menuicon {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
margin-right: 0 !important;
margin-bottom: var(--menu-spacing-sm) !important;
border-radius: var(--menu-radius-sm) !important;
}
#mainmenu.ui-listview .menuicon i,
#mainmenu.ui-listview .menuicon i.fa {
font-size: 24px !important;
}
/* Secondary text styling */
#mainmenu.ui-listview .menutext {
font-size: 12px !important;
font-weight: 600 !important;
color: #ffffff !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
padding-top: 0 !important;
margin-left: 0 !important;
text-align: center !important;
width: 100% !important;
}
/* Badge positioning for desktop tiles */
#mainmenu.ui-listview .ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #ffffff !important;
text-shadow: none !important;
position: absolute !important;
top: var(--menu-spacing-sm) !important;
right: var(--menu-spacing-sm) !important;
margin: 0 !important;
}
/* Hero badge - slightly larger positioning */
#mainmenu.ui-listview > li#item_recentOcc .ui-li-count,
#mainmenu.ui-listview > li#item_citation .ui-li-count,
#mainmenu.ui-listview > li#item_notebook .ui-li-count {
top: var(--menu-spacing-md) !important;
right: var(--menu-spacing-md) !important;
font-size: 12px !important;
padding: 4px 10px !important;
}
/* === LOGOUT ON DESKTOP - subtle red styling === */
#mainmenu.ui-listview > li#logout2 {
display: block !important;
}
#mainmenu.ui-listview > li#logout2 > a,
#mainmenu.ui-listview > li#logout2 > a.ui-btn {
background: rgba(220, 53, 69, 0.15) !important;
border: 1px solid rgba(220, 53, 69, 0.25) !important;
}
#mainmenu.ui-listview > li#logout2 > a:hover {
background: rgba(220, 53, 69, 0.25) !important;
border-color: rgba(220, 53, 69, 0.4) !important;
}
/* === LIGHT MODE DESKTOP OVERRIDES (Theme A) === */
/* Hero cards - white with subtle shadow */
.ui-page-theme-a #mainmenu.ui-listview > li#item_recentOcc > a,
.ui-page-theme-a #mainmenu.ui-listview > li#item_recentOcc > a.ui-btn,
.ui-page-theme-a #mainmenu.ui-listview > li#item_citation > a,
.ui-page-theme-a #mainmenu.ui-listview > li#item_citation > a.ui-btn,
.ui-page-theme-a #mainmenu.ui-listview > li#item_notebook > a,
.ui-page-theme-a #mainmenu.ui-listview > li#item_notebook > a.ui-btn {
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.ui-page-theme-a #mainmenu.ui-listview > li#item_recentOcc > a:hover,
.ui-page-theme-a #mainmenu.ui-listview > li#item_citation > a:hover,
.ui-page-theme-a #mainmenu.ui-listview > li#item_notebook > a:hover {
background: #ffffff !important;
box-shadow: 0 4px 16px rgba(51, 136, 204, 0.2) !important;
border-color: var(--menu-accent-blue) !important;
}
/* Hero text - dark for readability */
.ui-page-theme-a #mainmenu.ui-listview > li#item_recentOcc .menutext,
.ui-page-theme-a #mainmenu.ui-listview > li#item_citation .menutext,
.ui-page-theme-a #mainmenu.ui-listview > li#item_notebook .menutext {
color: #1a202c !important;
}
/* Secondary cards - white with visible borders */
.ui-page-theme-a #mainmenu.ui-listview > li > a,
.ui-page-theme-a #mainmenu.ui-listview > li > a.ui-btn {
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08),
0 0 1px rgba(0, 0, 0, 0.05) !important;
}
.ui-page-theme-a #mainmenu.ui-listview > li > a:hover,
.ui-page-theme-a #mainmenu.ui-listview > li > a.ui-btn:hover {
background: #ffffff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
border-color: var(--menu-accent-blue) !important;
}
/* Secondary text - dark */
.ui-page-theme-a #mainmenu.ui-listview .menutext {
color: #1a202c !important;
}
/* Logout button - light theme */
.ui-page-theme-a #mainmenu.ui-listview > li#logout2 > a,
.ui-page-theme-a #mainmenu.ui-listview > li#logout2 > a.ui-btn {
background: rgba(220, 53, 69, 0.08) !important;
border: 1px solid rgba(220, 53, 69, 0.2) !important;
}
.ui-page-theme-a #mainmenu.ui-listview > li#logout2 > a:hover {
background: rgba(220, 53, 69, 0.15) !important;
border-color: rgba(220, 53, 69, 0.35) !important;
}
}
/* ========================================
HEADER & ICON BAR
Intentionally NOT restyled to preserve
existing float-based layout and branding.
The header/icon bar styles are handled
by your existing custom.css
======================================== */
/* Make icon bars semi-transparent with blur - DARK theme */
#menu.ui-page-theme-b #mainMenuIcon,
#menu.ui-page-theme-b #secondMenuIcon,
#menu.ui-page-theme-b #offlineMenuIcon,
div#menu.ui-page-theme-b #mainMenuIcon,
div#menu.ui-page-theme-b #secondMenuIcon,
div#menu.ui-page-theme-b #offlineMenuIcon {
background: rgba(42, 42, 42, 0.5) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: none !important;
}
/* Make icon bars dark navy - LIGHT theme */
#menu.ui-page-theme-a #mainMenuIcon,
#menu.ui-page-theme-a #secondMenuIcon,
#menu.ui-page-theme-a #offlineMenuIcon,
div#menu.ui-page-theme-a #mainMenuIcon,
div#menu.ui-page-theme-a #secondMenuIcon,
div#menu.ui-page-theme-a #offlineMenuIcon {
background: rgba(42, 55, 75, 0.85) !important;
background-color: rgba(42, 55, 75, 0.85) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: none !important;
}
/* ========================================
DISABLED MENU ITEMS
Styling for hidden/disabled items
======================================== */
#mainmenu.ui-listview > li.ui-state-disabled > a,
#mainmenu.ui-listview > li.ui-disabled > a {
opacity: 0.5 !important;
pointer-events: none !important;
}
/* ========================================
FALLBACK FOR :has() SELECTOR
For browsers that don't support :has()
Add these classes manually if needed
======================================== */
#mainmenu .menuicon.icon-red { background: rgba(220, 53, 69, 0.1) !important; }
#mainmenu .menuicon.icon-yellow { background: rgba(240, 173, 78, 0.1) !important; }
#mainmenu .menuicon.icon-green { background: rgba(40, 167, 69, 0.1) !important; }
#mainmenu .menuicon.icon-dull { background: rgba(108, 117, 125, 0.1) !important; }
.ui-page-theme-b #mainmenu .menuicon.icon-red { background: rgba(220, 53, 69, 0.15) !important; }
.ui-page-theme-b #mainmenu .menuicon.icon-yellow { background: rgba(240, 173, 78, 0.15) !important; }
.ui-page-theme-b #mainmenu .menuicon.icon-green { background: rgba(40, 167, 69, 0.15) !important; }
.ui-page-theme-b #mainmenu .menuicon.icon-dull { background: rgba(108, 117, 125, 0.15) !important; }
/* ========================================
GENERAL LISTVIEW STYLING
Applies to listviews across the app
Clean flat style with dividers (no cards)
Excludes: #mainmenu (dashboard style) and #sideMenu (panel)
======================================== */
/* Base listview container */
.ui-listview:not(#mainmenu):not(#sideMenu) {
padding: 0 !important;
margin: 0 !important;
}
/* Full-width listview class - use negative margins to cancel parent padding */
.ui-listview:not(#mainmenu):not(#sideMenu).listview-fullwidth,
.ui-listview.listview-fullwidth:not(#mainmenu):not(#sideMenu) {
margin-left: -16px !important;
margin-right: -16px !important;
}
/* Individual list items - flat, no cards */
.ui-listview:not(#mainmenu):not(#sideMenu) > li {
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
list-style: none !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* Divider lines between items */
.ui-listview:not(#mainmenu):not(#sideMenu) > li:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* Light mode dividers */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* Row styling - light mode */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li > a,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li > a.ui-btn {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 12px 16px !important;
min-height: auto !important;
display: block !important;
text-decoration: none !important;
transition: background 0.15s ease !important;
margin: 0 !important;
position: relative !important;
overflow: hidden !important;
}
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li > a:hover,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li > a.ui-btn:hover {
background: rgba(0, 0, 0, 0.04) !important;
}
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li > a:active,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li > a.ui-btn:active {
background: rgba(0, 0, 0, 0.08) !important;
}
/* Row styling - dark mode */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li > a,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li > a.ui-btn {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 12px 16px !important;
min-height: auto !important;
display: block !important;
text-decoration: none !important;
transition: background 0.15s ease !important;
margin: 0 !important;
position: relative !important;
overflow: hidden !important;
}
/* Static list items (no anchor) - dark mode */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-static {
background: rgba(255, 255, 255, 0.04) !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 12px 16px !important;
min-height: auto !important;
display: block !important;
margin: 0 !important;
position: relative !important;
overflow: hidden !important;
color: #ffffff !important;
}
/* Re-apply divider on static list items (overrides border:none above) */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-static:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
/* Static list items h2/p text - dark mode */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-static h2 {
color: #ffffff !important;
font-size: 1em !important;
font-weight: bold !important;
margin: 0 !important;
}
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-static p {
color: rgba(255, 255, 255, 0.6) !important;
font-size: 0.85em !important;
margin: 2px 0 0 0 !important;
}
/* Static list items (no anchor) - light mode */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-static {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 12px 16px !important;
min-height: auto !important;
display: block !important;
margin: 0 !important;
position: relative !important;
overflow: hidden !important;
color: #1a1a1a !important;
}
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li > a:hover,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li > a.ui-btn:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li > a:active,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li > a.ui-btn:active {
background: rgba(255, 255, 255, 0.1) !important;
}
/* Icon container styling for flat lists */
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
float: left !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
border-radius: 10px !important;
margin: 0 12px 0 0 !important;
gap: 0 !important;
padding: 0 !important;
position: relative !important;
}
/* ========================================
LISTVIEW WITH THUMBNAIL IMAGES
Lists with .ui-li-has-thumb items
======================================== */
/* Thumbnail image styling */
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-thumb > a > img,
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-thumb > a > img.ui-li-thumb {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
max-width: 56px !important;
max-height: 56px !important;
float: left !important;
margin: 0 12px 0 0 !important;
padding: 0 !important;
position: relative !important;
top: auto !important;
left: auto !important;
border-radius: 8px !important;
object-fit: cover !important;
}
/* Ensure proper text flow next to thumbnail */
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-thumb > a {
padding-left: 16px !important;
min-height: 56px !important;
}
/* Title text for thumbnail items - needs extra left padding removed */
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-thumb .menuTitle,
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-thumb h2,
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-thumb h3 {
margin-left: 0 !important;
padding-left: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
line-height: 1.3 !important;
padding-top: 2px !important;
}
/* Subtitle for thumbnail items */
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-thumb p,
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-thumb .ui-li-aside {
margin-left: 0 !important;
padding-left: 0 !important;
line-height: 1.3 !important;
}
/* Light mode icon container backgrounds */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon {
background: rgba(51, 136, 204, 0.1) !important;
}
/* Blue icons - light mode */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.blue),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.blue) {
background: rgba(51, 136, 204, 0.1) !important;
}
/* Red/error icons - light mode */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.error),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.error),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.red),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.red) {
background: rgba(220, 53, 69, 0.1) !important;
}
/* Yellow/warning icons - light mode */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.warning),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.warning),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.yellow),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.yellow) {
background: rgba(240, 173, 78, 0.1) !important;
}
/* Green/success icons - light mode */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.success),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.success),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.green),
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.green) {
background: rgba(40, 167, 69, 0.1) !important;
}
/* Dark mode icon container backgrounds */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon {
background: rgba(51, 136, 204, 0.15) !important;
}
/* Blue icons - dark mode */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.blue),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.blue) {
background: rgba(51, 136, 204, 0.15) !important;
}
/* Red/error icons - dark mode */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.error),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.error),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.red),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.red) {
background: rgba(220, 53, 69, 0.15) !important;
}
/* Yellow/warning icons - dark mode */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.warning),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.warning),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.yellow),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.yellow) {
background: rgba(240, 173, 78, 0.15) !important;
}
/* Green/success icons - dark mode */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.success),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.success),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon:has(.green),
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon:has(.green) {
background: rgba(40, 167, 69, 0.15) !important;
}
/* Icon sizing */
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon i.fa,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon i.fa {
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
margin: 0 !important;
padding: 0 !important;
}
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon i.fa.fa-2x,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon i.fa.fa-2x {
font-size: 26px !important;
}
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon i.fa.fa-3x,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon i.fa.fa-3x {
font-size: 24px !important;
}
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon i.fa.fa-sm,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon i.fa.fa-sm {
font-size: 10px !important;
margin-top: 2px !important;
}
/* Remove br tags effect in icon container */
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon br,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon br {
display: none !important;
}
/* ========================================
SPLIT BUTTON LISTS
Lists with delete or action buttons
======================================== */
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt {
position: relative !important;
}
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a:first-child {
padding-right: 50px !important;
}
/* Delete button container */
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-btn-icon-notext,
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-icon-delete,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-btn-icon-notext,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-btn-icon-notext,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-icon-delete,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-icon-delete {
position: absolute !important;
right: 6px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 40px !important;
height: 40px !important;
min-height: 40px !important;
border-radius: 8px !important;
background: rgba(220, 53, 69, 0.2) !important;
background-color: rgba(220, 53, 69, 0.2) !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
text-indent: 0 !important;
z-index: 20 !important;
}
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-btn-icon-notext:hover,
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-icon-delete:hover,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-btn-icon-notext:hover,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-btn-icon-notext:hover {
background: rgba(220, 53, 69, 0.4) !important;
background-color: rgba(220, 53, 69, 0.4) !important;
border: none !important;
box-shadow: none !important;
z-index: 20 !important;
}
/* Hide jQuery Mobile icon - both ::before and ::after */
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-btn-icon-notext::before,
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-icon-delete::before {
content: '\f014' !important;
font-family: 'FontAwesome' !important;
font-weight: normal !important;
font-size: 18px !important;
color: #dc3545 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
display: block !important;
opacity: 1 !important;
border: none !important;
width: auto !important;
height: auto !important;
background: transparent !important;
background-color: transparent !important;
text-indent: 0 !important;
}
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-btn-icon-notext::after,
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a.ui-icon-delete::after {
display: none !important;
content: none !important;
}
/* Hide the regular arrow on split button items */
.ui-listview:not(#mainmenu):not(#sideMenu) > li.ui-li-has-alt > a:first-child::after {
display: none !important;
content: none !important;
}
/* Text content wrapper */
.ui-listview:not(#mainmenu):not(#sideMenu) > li > a {
/* Already set to display: block above */
}
/* Title text styling */
.ui-listview:not(#mainmenu):not(#sideMenu) .menuTitle,
.ui-listview:not(#mainmenu):not(#sideMenu) span.menuTitle,
.ui-listview:not(#mainmenu):not(#sideMenu) .menutext,
.ui-listview:not(#mainmenu):not(#sideMenu) span.menutext {
font-size: 14px !important;
font-weight: 600 !important;
display: block !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
padding-right: 40px !important;
text-align: left !important;
line-height: 48px !important; /* Match icon height for vertical centering */
overflow: hidden !important;
/* Preserve existing colors - don't override */
}
/* When there IS a subtitle, reset line-height for proper stacking */
.ui-listview:not(#mainmenu):not(#sideMenu) > li > a:has(p) .menuTitle,
.ui-listview:not(#mainmenu):not(#sideMenu) > li > a:has(p) .menutext {
line-height: 1.4 !important;
padding-top: 4px !important;
}
/* Light mode text colors */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuTitle,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menutext {
color: #1a1a1a !important;
}
/* Popups manage their own theming via data-theme — the rule above is for in-page
listviews and would otherwise force black text on dark popups (e.g. the
"Select Attachment Type" popup in noteDetails). Restore white text inside
any dark-themed popup. Selector mirrors the rule above (including the
:not(#mainmenu):not(#sideMenu) IDs) so this beats it on specificity. */
.ui-page-theme-a .ui-popup.ui-body-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuTitle,
.ui-page-theme-a .ui-popup.ui-body-b .ui-listview:not(#mainmenu):not(#sideMenu) .menutext {
color: #fff !important;
}
/* Preserve colored titles */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuTitle.error,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) .menuTitle.red,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuTitle.error,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuTitle.red {
color: #dc3545 !important;
}
/* Dark mode - default text white, but preserve colored classes */
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuTitle,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menutext {
color: #ffffff !important;
}
/* Subtitle/description text (p tags) - below title */
.ui-listview:not(#mainmenu):not(#sideMenu) > li > a p {
font-size: 12px !important;
margin: 2px 0 0 0 !important;
padding: 0 !important;
padding-right: 40px !important;
line-height: 1.3 !important;
text-align: left !important;
overflow: hidden !important;
display: block !important;
clear: none !important;
}
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li > a p {
color: #666666 !important;
}
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) > li > a p {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Arrow styling moved to nuclear override at end of file */
/* Fallback classes for browsers without :has() support */
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon.icon-blue,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon.icon-blue { background: rgba(51, 136, 204, 0.1) !important; }
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon.icon-red,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon.icon-red { background: rgba(220, 53, 69, 0.1) !important; }
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon.icon-yellow,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon.icon-yellow { background: rgba(240, 173, 78, 0.1) !important; }
.ui-listview:not(#mainmenu):not(#sideMenu) .list_icon.icon-green,
.ui-listview:not(#mainmenu):not(#sideMenu) .menuicon.icon-green { background: rgba(40, 167, 69, 0.1) !important; }
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon.icon-blue,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon.icon-blue { background: rgba(51, 136, 204, 0.15) !important; }
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon.icon-red,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon.icon-red { background: rgba(220, 53, 69, 0.15) !important; }
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon.icon-yellow,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon.icon-yellow { background: rgba(240, 173, 78, 0.15) !important; }
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .list_icon.icon-green,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) .menuicon.icon-green { background: rgba(40, 167, 69, 0.15) !important; }
/* ========================================
BADGE NUCLEAR OVERRIDE
This section MUST remain at the very end
of this file to ensure maximum priority
======================================== */
.ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #fff !important;
text-shadow: none !important;
text-shadow: 0 0 0 transparent !important;
-webkit-text-shadow: none !important;
}
span.ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #fff !important;
text-shadow: none !important;
text-shadow: 0 0 0 transparent !important;
}
#mainmenu .ui-li-count,
#mainmenu span.ui-li-count,
#mainmenu li .ui-li-count,
#mainmenu li a .ui-li-count,
#mainmenu li a span.ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #fff !important;
text-shadow: none !important;
text-shadow: 0 0 0 transparent !important;
}
/* Light mode badge override */
.ui-page-theme-a .ui-li-count,
.ui-page-theme-a span.ui-li-count,
.ui-page-theme-a #mainmenu .ui-li-count,
.ui-page-theme-a #mainmenu span.ui-li-count,
.ui-page-theme-a #mainmenu li .ui-li-count,
.ui-page-theme-a #mainmenu li a .ui-li-count,
.ui-page-theme-a #mainmenu li a span.ui-li-count,
.ui-page-theme-a .ui-btn .ui-li-count,
.ui-page-theme-a .ui-listview .ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #fff !important;
text-shadow: none !important;
text-shadow: 0 0 0 transparent !important;
}
/* Dark mode badge override */
.ui-page-theme-b .ui-li-count,
.ui-page-theme-b span.ui-li-count,
.ui-page-theme-b #mainmenu .ui-li-count,
.ui-page-theme-b #mainmenu span.ui-li-count,
.ui-page-theme-b #mainmenu li .ui-li-count,
.ui-page-theme-b #mainmenu li a .ui-li-count,
.ui-page-theme-b #mainmenu li a span.ui-li-count,
.ui-page-theme-b .ui-btn .ui-li-count,
.ui-page-theme-b .ui-listview .ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #fff !important;
text-shadow: none !important;
text-shadow: 0 0 0 transparent !important;
}
/* Mobile-specific badge override */
@media only screen and (max-width: 767px) {
.ui-li-count,
span.ui-li-count,
#mainmenu .ui-li-count,
.ui-page-theme-a .ui-li-count,
.ui-page-theme-b .ui-li-count,
.ui-page-theme-a #mainmenu .ui-li-count,
.ui-page-theme-b #mainmenu .ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #fff !important;
text-shadow: none !important;
text-shadow: 0 0 0 transparent !important;
}
}
/* Tablet-specific badge override */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.ui-li-count,
span.ui-li-count,
#mainmenu .ui-li-count,
.ui-page-theme-a .ui-li-count,
.ui-page-theme-b .ui-li-count,
.ui-page-theme-a #mainmenu .ui-li-count,
.ui-page-theme-b #mainmenu .ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #fff !important;
text-shadow: none !important;
text-shadow: 0 0 0 transparent !important;
}
}
/* Desktop-specific badge override */
@media only screen and (min-width: 1025px) {
.ui-li-count,
span.ui-li-count,
#mainmenu .ui-li-count,
.ui-page-theme-a .ui-li-count,
.ui-page-theme-b .ui-li-count,
.ui-page-theme-a #mainmenu .ui-li-count,
.ui-page-theme-b #mainmenu .ui-li-count {
background: #3388cc !important;
background-color: #3388cc !important;
color: #fff !important;
text-shadow: none !important;
text-shadow: 0 0 0 transparent !important;
}
}
/* ========================================
GLOBAL DARK MODE FORM FIELDS
Applies to all inputs, selects, textareas
across all pages in dark theme
======================================== */
/* Input text containers */
.ui-page-theme-b .ui-input-text,
.ui-page-theme-b .ui-input-search {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.ui-page-theme-b .ui-input-text:focus-within,
.ui-page-theme-b .ui-input-search:focus-within {
border-color: var(--menu-accent-blue, #4a9eff) !important;
background: rgba(255, 255, 255, 0.12) !important;
}
/* Text inputs, password, tel, number, date, etc. */
.ui-page-theme-b input[type="text"],
.ui-page-theme-b input[type="password"],
.ui-page-theme-b input[type="tel"],
.ui-page-theme-b input[type="number"],
.ui-page-theme-b input[type="date"],
.ui-page-theme-b input[type="email"],
.ui-page-theme-b input[type="search"] {
background: transparent !important;
border: none !important;
color: #ffffff !important;
}
.ui-page-theme-b input::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
/* Textareas */
.ui-page-theme-b textarea {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 8px !important;
color: #ffffff !important;
}
.ui-page-theme-b textarea:focus {
border-color: var(--menu-accent-blue, #4a9eff) !important;
background: rgba(255, 255, 255, 0.12) !important;
}
/* Select dropdowns (JQM wraps in .ui-select > .ui-btn) */
.ui-page-theme-b .ui-select .ui-btn {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 8px !important;
color: rgba(255, 255, 255, 0.9) !important;
}
/* Clear button on inputs */
.ui-page-theme-b .ui-input-clear {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 50% !important;
}
/* Labels */
.ui-page-theme-b label {
color: rgba(255, 255, 255, 0.85) !important;
}
/* Disabled fields - more visible than JQM's default 0.3 opacity */
.ui-page-theme-b .ui-state-disabled .ui-input-text,
.ui-page-theme-b .ui-state-disabled .ui-select .ui-btn,
.ui-page-theme-b .ui-state-disabled textarea,
.ui-page-theme-b .ui-disabled .ui-input-text,
.ui-page-theme-b .ui-disabled .ui-select .ui-btn,
.ui-page-theme-b .ui-disabled textarea {
opacity: 1 !important;
background: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
color: rgba(255, 255, 255, 0.35) !important;
}
.ui-page-theme-b .ui-state-disabled input,
.ui-page-theme-b .ui-disabled input {
color: rgba(255, 255, 255, 0.35) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.35) !important;
}
/* Flipswitch - inactive (off) state */
.ui-page-theme-b .ui-flipswitch {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}
/* Flipswitch - "Off" label text */
.ui-page-theme-b .ui-flipswitch .ui-flipswitch-off {
color: rgba(255, 255, 255, 0.7) !important;
text-shadow: none !important;
}
/* Flipswitch - knob (the toggle button) */
.ui-page-theme-b .ui-flipswitch .ui-btn.ui-flipswitch-on {
background: #cccccc !important;
border-color: rgba(255, 255, 255, 0.3) !important;
color: rgba(255, 255, 255, 0.9) !important;
text-shadow: none !important;
}
/* Flipswitch - active (on) state */
.ui-page-theme-b .ui-flipswitch-active {
background-color: var(--menu-accent-blue, #4a9eff) !important;
border-color: rgba(74, 158, 255, 0.5) !important;
}
/* Flipswitch - knob when active */
.ui-page-theme-b .ui-flipswitch-active .ui-btn.ui-flipswitch-on {
background: #ffffff !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Wellness flipswitch - label and toggle on one line */
#userSettings_Wellness .ui-field-contain {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
#userSettings_Wellness .ui-field-contain label {
width: auto !important;
max-width: calc(100% - 7em) !important;
overflow: visible !important;
white-space: normal !important;
text-overflow: clip !important;
margin: 0 !important;
flex-shrink: 1 !important;
}
#userSettings_Wellness .ui-field-contain .ui-flipswitch {
flex-shrink: 0 !important;
margin: 0 0 0 15px !important;
}
/* ========================================
LISTVIEW ARROW NUCLEAR OVERRIDE
This section MUST remain at the very end
======================================== */
/* Hide all jQuery Mobile arrows on general listviews */
.ui-listview:not(#mainmenu):not(#sideMenu) li a.ui-btn-icon-right:after,
.ui-listview:not(#mainmenu):not(#sideMenu) li a .ui-icon-carat-r:after,
.ui-listview:not(#mainmenu):not(#sideMenu) li a.ui-btn:after {
display: none !important;
content: none !important;
visibility: hidden !important;
}
/* Font Awesome chevron arrow for general listviews */
.ui-listview:not(#mainmenu):not(#sideMenu):not(#Citation_submissionSteps):not(#IRS_submissionSteps):not(#Favorites_List) > li > a::after,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu):not(#Citation_submissionSteps):not(#IRS_submissionSteps):not(#Favorites_List) > li > a::after,
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu):not(#Citation_submissionSteps):not(#IRS_submissionSteps):not(#Favorites_List) > li > a::after {
content: '\f054' !important;
font-family: 'FontAwesome' !important;
font-weight: normal !important;
font-style: normal !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
display: block !important;
visibility: visible !important;
font-size: 14px !important;
opacity: 0.5 !important;
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
border-left: none !important;
width: auto !important;
height: auto !important;
}
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu):not(#Citation_submissionSteps):not(#IRS_submissionSteps) > li > a::after {
color: #666666 !important;
}
.ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu):not(#Citation_submissionSteps):not(#IRS_submissionSteps) > li > a::after {
color: #888888 !important;
}
/* ========================================
LEFT SIDE MENU (#sideMenu in #menuPanel)
Compact list with colored icon containers
======================================== */
/* Ensure the panel itself scrolls - only the inner container */
#menuPanel {
overflow: hidden !important;
}
/* Panel inner scrolls */
#menuPanel > .ui-panel-inner {
overflow-y: auto !important;
overflow-x: hidden !important;
height: 100% !important;
-webkit-overflow-scrolling: touch !important;
box-sizing: border-box !important;
}
/* Logout button container - sticky at bottom */
#menuPanel .logout-container,
#menuPanel .panel-footer,
#menuPanel .sticky-footer {
position: sticky !important;
bottom: 0 !important;
background-color: inherit !important;
z-index: 100 !important;
padding-left: 1em !important;
padding-right: 1em !important;
padding-bottom: 10px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
box-sizing: border-box !important;
}
/* Logout button styling */
#menuPanel .logout-container > a,
#menuPanel .logout-container #logout,
#menuPanel .logout-container #menu_item_logout,
#menuPanel .panel-footer > a,
#menuPanel .panel-footer #logout,
#menuPanel .panel-footer #menu_item_logout,
#menuPanel .sticky-footer > a,
#menuPanel .sticky-footer #logout,
#menuPanel .sticky-footer #menu_item_logout {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
padding: 14px 20px !important;
border-radius: 10px !important;
background: rgba(220, 53, 69, 0.12) !important;
color: #dc3545 !important;
font-size: 15px !important;
font-weight: 500 !important;
text-decoration: none !important;
border: none !important;
cursor: pointer !important;
transition: background 0.15s ease !important;
list-style: none !important;
margin: 0 !important;
box-sizing: border-box !important;
}
#menuPanel .logout-container > a:hover,
#menuPanel .logout-container #logout:hover,
#menuPanel .logout-container #menu_item_logout:hover,
#menuPanel .panel-footer > a:hover,
#menuPanel .panel-footer #logout:hover,
#menuPanel .panel-footer #menu_item_logout:hover,
#menuPanel .sticky-footer > a:hover,
#menuPanel .sticky-footer #logout:hover,
#menuPanel .sticky-footer #menu_item_logout:hover {
background: rgba(220, 53, 69, 0.2) !important;
}
#menuPanel .logout-container > a i,
#menuPanel .logout-container #logout i,
#menuPanel .logout-container #menu_item_logout i,
#menuPanel .panel-footer > a i,
#menuPanel .panel-footer #logout i,
#menuPanel .panel-footer #menu_item_logout i,
#menuPanel .sticky-footer > a i,
#menuPanel .sticky-footer #logout i,
#menuPanel .sticky-footer #menu_item_logout i {
color: #dc3545 !important;
font-size: 18px !important;
}
/* Hide logout from sideMenu if it's still there */
#sideMenu > li#menu_item_logout,
#menuPanel #sideMenu > li#menu_item_logout {
display: none !important;
}
/* ========================================
STICKY HEADER BUTTONS (Back & Menu)
Style menu_item_back and menu_item_menu when in sticky-header
======================================== */
/* Button container in sticky header - horizontal layout */
#menuPanel .sticky-header .header-buttons {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
width: 100% !important;
padding: 12px 0 !important;
list-style: none !important;
margin: 0 !important;
}
/* Style the li elements as flex items */
#menuPanel .sticky-header .header-buttons > li,
#menuPanel .sticky-header .header-buttons > li#menu_item_back,
#menuPanel .sticky-header .header-buttons > li#menu_item_menu {
flex: 1 !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
display: block !important;
}
/* Common button styling for links inside */
#menuPanel .sticky-header .header-buttons > li > a,
#menuPanel .sticky-header .header-buttons > li > a.ui-btn,
#menuPanel .sticky-header .header-buttons #menu_item_back > a,
#menuPanel .sticky-header .header-buttons #menu_item_menu > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
padding: 12px 16px !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
border: none !important;
cursor: pointer !important;
transition: background 0.15s ease !important;
min-height: auto !important;
height: auto !important;
box-sizing: border-box !important;
}
/* Back button - coral/red tint */
#menuPanel .sticky-header .header-buttons > li#menu_item_back > a,
#menuPanel .sticky-header .header-buttons > li#menu_item_back > a.ui-btn,
#menuPanel .sticky-header .header-buttons #menu_item_back > a {
background: rgba(220, 83, 69, 0.15) !important;
color: #e05a4d !important;
}
#menuPanel .sticky-header .header-buttons > li#menu_item_back > a:hover,
#menuPanel .sticky-header .header-buttons #menu_item_back > a:hover {
background: rgba(220, 83, 69, 0.25) !important;
}
#menuPanel .sticky-header .header-buttons > li#menu_item_back .menuicon,
#menuPanel .sticky-header .header-buttons #menu_item_back .menuicon {
background: transparent !important;
width: auto !important;
height: auto !important;
min-width: auto !important;
min-height: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
#menuPanel .sticky-header .header-buttons > li#menu_item_back .menuicon i,
#menuPanel .sticky-header .header-buttons #menu_item_back .menuicon i,
#menuPanel .sticky-header .header-buttons > li#menu_item_back i {
color: #e05a4d !important;
font-size: 16px !important;
}
#menuPanel .sticky-header .header-buttons > li#menu_item_back .panelMenutext,
#menuPanel .sticky-header .header-buttons #menu_item_back .panelMenutext,
#menuPanel .sticky-header .header-buttons > li#menu_item_back span:not(.menuicon) {
color: #e05a4d !important;
line-height: 1 !important;
}
/* Menu button - blue accent */
#menuPanel .sticky-header .header-buttons > li#menu_item_menu > a,
#menuPanel .sticky-header .header-buttons > li#menu_item_menu > a.ui-btn,
#menuPanel .sticky-header .header-buttons #menu_item_menu > a {
background: rgba(77, 171, 247, 0.15) !important;
color: #4dabf7 !important;
}
#menuPanel .sticky-header .header-buttons > li#menu_item_menu > a:hover,
#menuPanel .sticky-header .header-buttons #menu_item_menu > a:hover {
background: rgba(77, 171, 247, 0.25) !important;
}
#menuPanel .sticky-header .header-buttons > li#menu_item_menu .menuicon,
#menuPanel .sticky-header .header-buttons #menu_item_menu .menuicon {
background: transparent !important;
width: auto !important;
height: auto !important;
min-width: auto !important;
min-height: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
#menuPanel .sticky-header .header-buttons > li#menu_item_menu .menuicon i,
#menuPanel .sticky-header .header-buttons #menu_item_menu .menuicon i,
#menuPanel .sticky-header .header-buttons > li#menu_item_menu i {
color: #4dabf7 !important;
font-size: 16px !important;
}
#menuPanel .sticky-header .header-buttons > li#menu_item_menu .panelMenutext,
#menuPanel .sticky-header .header-buttons #menu_item_menu .panelMenutext,
#menuPanel .sticky-header .header-buttons > li#menu_item_menu span:not(.menuicon) {
color: #4dabf7 !important;
line-height: 1 !important;
}
/* Alternative: Direct link styling (no li wrapper) */
#menuPanel .sticky-header .header-buttons > a#menu_back,
#menuPanel .sticky-header .header-buttons > a#menu_item_back,
#menuPanel .sticky-header .header-buttons > a.header-btn-back {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 12px 16px !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
background: rgba(220, 83, 69, 0.15) !important;
color: #e05a4d !important;
}
#menuPanel .sticky-header .header-buttons > a#menu_back:hover,
#menuPanel .sticky-header .header-buttons > a#menu_item_back:hover,
#menuPanel .sticky-header .header-buttons > a.header-btn-back:hover {
background: rgba(220, 83, 69, 0.25) !important;
}
#menuPanel .sticky-header .header-buttons > a#menu_back i,
#menuPanel .sticky-header .header-buttons > a#menu_item_back i,
#menuPanel .sticky-header .header-buttons > a.header-btn-back i {
color: #e05a4d !important;
}
#menuPanel .sticky-header .header-buttons > a#menu_item_menu,
#menuPanel .sticky-header .header-buttons > a.header-btn-menu {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 12px 16px !important;
border-radius: 10px !important;
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
background: rgba(77, 171, 247, 0.15) !important;
color: #4dabf7 !important;
}
#menuPanel .sticky-header .header-buttons > a#menu_item_menu:hover,
#menuPanel .sticky-header .header-buttons > a.header-btn-menu:hover {
background: rgba(77, 171, 247, 0.25) !important;
}
#menuPanel .sticky-header .header-buttons > a#menu_item_menu i,
#menuPanel .sticky-header .header-buttons > a.header-btn-menu i {
color: #4dabf7 !important;
}
/* Right panel - remove left/right padding */
.ui-panel.ui-panel-position-right > .ui-panel-inner {
padding-left: 0 !important;
padding-right: 0 !important;
}
#sideMenu,
#sideMenu.ui-listview,
#menuPanel .ui-listview,
#menuPanel .menuList,
.ui-page-theme-a #sideMenu,
.ui-page-theme-b #sideMenu,
.ui-page-theme-a #menuPanel .ui-listview,
.ui-page-theme-b #menuPanel .ui-listview,
.ui-page-theme-a #menuPanel .menuList,
.ui-page-theme-b #menuPanel .menuList {
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
#sideMenu > li,
#menuPanel #sideMenu > li,
.ui-page-theme-a #sideMenu > li,
.ui-page-theme-b #sideMenu > li {
margin: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* Remove border from last item */
#sideMenu > li:last-child,
#menuPanel #sideMenu > li:last-child {
border-bottom: none !important;
}
#sideMenu > li > a,
#sideMenu > li > a.ui-btn,
#menuPanel #sideMenu > li > a,
#menuPanel #sideMenu > li > a.ui-btn,
.ui-page-theme-a #sideMenu > li > a,
.ui-page-theme-b #sideMenu > li > a,
.ui-page-theme-a #sideMenu > li > a.ui-btn,
.ui-page-theme-b #sideMenu > li > a.ui-btn {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
min-height: auto !important;
box-shadow: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
padding: 10px 12px !important;
transition: background 0.15s ease !important;
}
#sideMenu > li > a:hover,
#sideMenu > li > a.ui-btn:hover,
#menuPanel #sideMenu > li > a:hover,
.ui-page-theme-a #sideMenu > li > a:hover,
.ui-page-theme-b #sideMenu > li > a:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
/* Hide arrows on side menu */
#sideMenu > li > a::after,
#menuPanel #sideMenu > li > a::after,
.ui-page-theme-a #sideMenu > li > a::after,
.ui-page-theme-b #sideMenu > li > a::after {
display: none !important;
content: none !important;
}
/* Icon container styling for side menu */
#sideMenu .menuicon,
#menuPanel #sideMenu .menuicon,
.ui-page-theme-a #sideMenu .menuicon,
.ui-page-theme-b #sideMenu .menuicon {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
margin: 0 !important;
margin-right: 12px !important;
padding: 0 !important;
background: rgba(255, 255, 255, 0.08) !important;
flex-shrink: 0 !important;
}
/* Color-matched icon backgrounds */
#sideMenu .menuicon:has(.blue),
#menuPanel #sideMenu .menuicon:has(.blue),
.ui-page-theme-a #sideMenu .menuicon:has(.blue),
.ui-page-theme-b #sideMenu .menuicon:has(.blue) {
background: rgba(74, 158, 255, 0.15) !important;
}
#sideMenu .menuicon:has(.red),
#menuPanel #sideMenu .menuicon:has(.red),
.ui-page-theme-a #sideMenu .menuicon:has(.red),
.ui-page-theme-b #sideMenu .menuicon:has(.red) {
background: rgba(220, 53, 69, 0.15) !important;
}
#sideMenu .menuicon:has(.yellow),
#menuPanel #sideMenu .menuicon:has(.yellow),
.ui-page-theme-a #sideMenu .menuicon:has(.yellow),
.ui-page-theme-b #sideMenu .menuicon:has(.yellow) {
background: rgba(255, 193, 7, 0.15) !important;
}
#sideMenu .menuicon:has(.green),
#menuPanel #sideMenu .menuicon:has(.green),
.ui-page-theme-a #sideMenu .menuicon:has(.green),
.ui-page-theme-b #sideMenu .menuicon:has(.green) {
background: rgba(40, 167, 69, 0.15) !important;
}
#sideMenu .menuicon:has(.dull),
#menuPanel #sideMenu .menuicon:has(.dull),
.ui-page-theme-a #sideMenu .menuicon:has(.dull),
.ui-page-theme-b #sideMenu .menuicon:has(.dull) {
background: rgba(255, 255, 255, 0.08) !important;
}
/* Icon sizing in side menu */
#sideMenu .menuicon i.fa,
#menuPanel #sideMenu .menuicon i.fa,
.ui-page-theme-a #sideMenu .menuicon i.fa,
.ui-page-theme-b #sideMenu .menuicon i.fa {
font-size: 18px !important;
line-height: 1 !important;
}
/* Override fa-2x in side menu */
#sideMenu .menuicon i.fa.fa-2x,
#menuPanel #sideMenu .menuicon i.fa.fa-2x,
.ui-page-theme-a #sideMenu .menuicon i.fa.fa-2x,
.ui-page-theme-b #sideMenu .menuicon i.fa.fa-2x {
font-size: 18px !important;
}
/* Text styling for side menu */
#sideMenu .panelMenutext,
#menuPanel #sideMenu .panelMenutext,
.ui-page-theme-a #sideMenu .panelMenutext,
.ui-page-theme-b #sideMenu .panelMenutext {
display: block !important;
position: static !important;
flex: 1 !important;
font-size: 16px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.9) !important;
line-height: 1.3 !important;
}
/* ========================================
DELETE BUTTON NUCLEAR OVERRIDE
Must be at end for maximum specificity
======================================== */
/* Ensure the li properly contains the absolute positioned delete button */
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt,
html body .ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt,
html body .ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt {
position: relative !important;
display: block !important;
}
/* First anchor needs right padding to not overlap delete button */
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt > a:first-child,
html body .ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt > a:first-child,
html body .ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt > a:first-child {
padding-right: 55px !important;
}
/* Hide arrow on first link of split button items */
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt > a:first-child::after,
html body .ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt > a:first-child::after,
html body .ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt > a:first-child::after {
display: none !important;
content: none !important;
}
/* Delete button styling */
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext,
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-icon-delete,
html body .ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext,
html body .ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext {
position: absolute !important;
right: 6px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 40px !important;
height: 40px !important;
min-height: 40px !important;
border-radius: 8px !important;
background: rgba(220, 53, 69, 0.2) !important;
background-color: rgba(220, 53, 69, 0.2) !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
z-index: 20 !important;
}
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext:hover,
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-icon-delete:hover,
html body .ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext:hover,
html body .ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext:hover {
background: rgba(220, 53, 69, 0.4) !important;
background-color: rgba(220, 53, 69, 0.4) !important;
border: none !important;
box-shadow: none !important;
transform: translateY(-50%) !important;
z-index: 20 !important;
}
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext::before,
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-icon-delete::before,
html body .ui-page-theme-b .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext::before,
html body .ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext::before {
content: '\f014' !important;
font-family: 'FontAwesome' !important;
font-weight: normal !important;
font-size: 18px !important;
color: #dc3545 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
display: block !important;
opacity: 1 !important;
border: none !important;
width: auto !important;
height: auto !important;
background: transparent !important;
background-color: transparent !important;
text-indent: 0 !important;
}
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-btn-icon-notext::after,
html body .ui-listview:not(#mainmenu):not(#sideMenu) li.ui-li-has-alt a.ui-icon-delete::after {
display: none !important;
content: none !important;
}
/* ========================================
ACTION PANEL RESET (Right-side panels)
Minimal dividers style - clean and compact
Using :not(#_) to boost specificity above main card styling
======================================== */
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview {
padding: 0 !important;
margin: 0 !important;
}
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview > li {
margin: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li:last-child,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview > li:last-child,
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li.ui-last-child,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview > li.ui-last-child {
border-bottom: none !important;
}
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a,
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a.ui-btn,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview > li > a,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview > li > a.ui-btn,
html body .ui-page-theme-a div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a,
html body .ui-page-theme-b div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a,
html body .ui-page-theme-a div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a.ui-btn,
html body .ui-page-theme-b div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a.ui-btn {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
min-height: auto !important;
box-shadow: none !important;
display: block !important;
padding: 14px 35px 14px 12px !important;
margin: 0 !important;
position: relative !important;
transition: background 0.15s ease !important;
}
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a:hover,
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a.ui-btn:hover,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview > li > a:hover,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview > li > a.ui-btn:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a::after,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview > li > a::after,
html body .ui-page-theme-a div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a::after,
html body .ui-page-theme-b div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview > li > a::after {
content: '\f054' !important;
font-family: 'FontAwesome' !important;
font-size: 11px !important;
color: rgba(255, 255, 255, 0.3) !important;
position: absolute !important;
right: 12px !important;
top: 0 !important;
bottom: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
width: auto !important;
height: auto !important;
background: transparent !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* Reset any icon containers in action panels */
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview .list_icon,
html body div[data-role="panel"][data-position="right"]:not(#_):not(#__) .ui-listview .menuicon,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview .list_icon,
html body .ui-panel[data-position="right"]:not(#_):not(#__) .ui-listview .menuicon {
display: none !important;
}
/* ========================================
EDITOR HEADER TOOLBAR
Touch-friendly icon toolbar for editors
======================================== */
.fixHeader[data-role="header"] {
display: flex;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 6px 8px !important;
background: #1a1a1a !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
min-height: 52px !important;
box-sizing: border-box !important;
}
/* Preserve status header colors (warning/error/offline/etc.) */
.fixHeader[data-role="header"].warning {
background-color: #eaaf51 !important;
border-color: #d99a36 !important;
}
.fixHeader[data-role="header"].error {
background-color: #de4343 !important;
border-color: #c43d3d !important;
}
.fixHeader[data-role="header"].offline {
background-color: #4ea5cd !important;
border-color: #3b8eb5 !important;
}
.fixHeader[data-role="header"].pause {
background-color: #eaaf51 !important;
border-color: #d99a36 !important;
}
.fixHeader[data-role="header"].success {
background-color: #61b832 !important;
border-color: #55a12c !important;
}
.fixHeader[data-role="header"].info {
background-color: #4ea5cd !important;
border-color: #3b8eb5 !important;
}
/* Reset floats - we're using flexbox */
.fixHeader[data-role="header"] .floatLeft,
.fixHeader[data-role="header"] .floatRight {
float: none !important;
}
/* Icon link styling - 44px touch targets */
.fixHeader[data-role="header"] a.icon-space,
.fixHeader[data-role="header"] a.nostyle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
border-radius: 8px !important;
margin: 0 !important;
margin-right: 4px !important;
padding: 0 !important;
background: transparent !important;
transition: background 0.15s ease !important;
text-decoration: none !important;
-webkit-tap-highlight-color: transparent !important;
}
/* Push first floatRight icon to the right */
.fixHeader[data-role="header"] a.floatRight.icon-space,
.fixHeader[data-role="header"] a.floatRight.nostyle {
margin-left: auto !important;
margin-right: 0 !important;
}
/* Subsequent floatRight items */
.fixHeader[data-role="header"] a.floatRight ~ a.floatRight {
margin-left: 4px !important;
}
.fixHeader[data-role="header"] a.icon-space:hover,
.fixHeader[data-role="header"] a.nostyle:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
.fixHeader[data-role="header"] a.icon-space:active,
.fixHeader[data-role="header"] a.nostyle:active {
background: rgba(255, 255, 255, 0.15) !important;
}
/* Icon sizing - 22px for visibility */
.fixHeader[data-role="header"] a i.fa {
font-size: 22px !important;
line-height: 1 !important;
}
/* Override fa-2x */
.fixHeader[data-role="header"] a i.fa.fa-2x {
font-size: 22px !important;
}
/* Save button - subtle green tint on hover */
.fixHeader[data-role="header"] a[id$="_saveMenu"]:hover {
background: rgba(40, 167, 69, 0.2) !important;
}
.fixHeader[data-role="header"] a[id$="_saveMenu"]:active {
background: rgba(40, 167, 69, 0.3) !important;
}
/* Cancel button - subtle red tint on hover */
.fixHeader[data-role="header"] a[id$="_cancelMenu"]:hover {
background: rgba(220, 53, 69, 0.15) !important;
}
.fixHeader[data-role="header"] a[id$="_cancelMenu"]:active {
background: rgba(220, 53, 69, 0.25) !important;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
.fixHeader[data-role="header"] {
padding: 4px 4px !important;
min-height: 48px !important;
}
.fixHeader[data-role="header"] a.icon-space,
.fixHeader[data-role="header"] a.nostyle {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
margin: 0 1px !important;
}
.fixHeader[data-role="header"] a i.fa,
.fixHeader[data-role="header"] a i.fa.fa-2x {
font-size: 20px !important;
}
.fixHeader[data-role="header"] a.floatRight ~ a.floatRight {
margin-left: 1px !important;
}
}
/* ========================================
SERVICES LOADING SCREEN
Card treatment matching login & settings
======================================== */
/* Services page content area - center the card */
#services .ui-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 20px !important;
}
/* Services loading card */
#services .ui-content > .center-wrapper {
max-width: 400px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 28px 24px !important;
background: rgba(30, 35, 42, 0.72) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* Headings inside services loading card */
#services .ui-content > .center-wrapper h2 {
font-size: 22px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.85) !important;
margin: 0 !important;
text-shadow: none !important;
}
/* Remove excessive
spacing */
#services .ui-content > .center-wrapper br {
display: none !important;
}
/* Add controlled spacing between elements */
#services .ui-content > .center-wrapper #services_loadStatus {
margin-top: 48px !important;
}
#services .ui-content > .center-wrapper a[data-role="button"] {
margin-top: 16px !important;
}
/* ========================================
LOGIN STATUS SCREENS (Loader / Load Failed / Version Failed)
Card treatment matching login & settings
======================================== */
/* Card container for loader, loadFailed, and versionFailed */
#index #loader,
#index #loadFailed,
#index #versionFailed {
max-width: 400px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 28px 24px !important;
background: rgba(30, 35, 42, 0.72) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* Heading inside status cards */
#index #loader h2,
#index #loadFailed h2,
#index #versionFailed h2 {
font-size: 22px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.85) !important;
margin: 0 !important;
text-shadow: none !important;
}
/* Button inside loadFailed */
#index #loadFailed a[data-role="button"] {
margin-top: 16px !important;
}
/* ========================================
LOGIN SCREEN MODERNIZATION
Clean, centered card with transparency
======================================== */
/* Login page content area - center the card */
#index[data-role="page"] > .ui-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 20px !important;
}
/* Login form container - the card */
#index #systemLogin.loginForm {
max-width: 400px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 28px 24px !important;
background: rgba(30, 35, 42, 0.72) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Make sure all children stay within card */
#index #systemLogin.loginForm * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Inner form - no extra width */
#index #systemLogin form.loginForm {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Center the heading */
#index #systemLogin .center-wrapper h2 {
font-size: 16px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.85) !important;
margin: 0 0 20px 0 !important;
text-align: center !important;
text-shadow: none !important;
}
/* Labels - don't force display, let inline styles work */
#index #systemLogin label {
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.7) !important;
margin-bottom: 6px !important;
text-shadow: none !important;
}
/* Remove text shadow from all login form text */
#index #systemLogin,
#index #systemLogin * {
text-shadow: none !important;
}
/* Input containers - jQuery Mobile wrapper */
#index #systemLogin .ui-input-text {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 8px !important;
margin-bottom: 14px !important;
box-shadow: none !important;
width: 100% !important;
}
#index #systemLogin .ui-input-text:focus-within {
border-color: var(--menu-accent-blue, #4a9eff) !important;
background: rgba(255, 255, 255, 0.1) !important;
}
/* Input fields */
#index #systemLogin input[type="text"],
#index #systemLogin input[type="password"],
#index #systemLogin input[type="tel"] {
background: transparent !important;
border: none !important;
color: #ffffff !important;
font-size: 15px !important;
padding: 12px 14px !important;
width: 100% !important;
}
#index #systemLogin input::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
/* Clear button in inputs */
#index #systemLogin .ui-input-clear {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 50% !important;
}
/* Login button - green like reference image */
#index #systemLogin button.ui-btn,
#index #systemLogin #login_UserSubmit,
#index #systemLogin #login_CertSubmit {
width: 100% !important;
padding: 14px !important;
margin: 16px 0 12px 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #ffffff !important;
background: #4CAF50 !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-shadow: none !important;
box-shadow: none !important;
}
#index #systemLogin button.ui-btn:hover,
#index #systemLogin #login_UserSubmit:hover,
#index #systemLogin #login_CertSubmit:hover {
background: #5cb860 !important;
}
#index #systemLogin button.ui-btn:active,
#index #systemLogin #login_UserSubmit:active,
#index #systemLogin #login_CertSubmit:active {
background: #43a047 !important;
}
/* Forgot password link */
#index #systemLogin #confirmForgotPassword {
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 14px !important;
padding: 8px !important;
text-align: center !important;
box-shadow: none !important;
margin: 0 !important;
width: 100% !important;
}
#index #systemLogin #confirmForgotPassword:hover {
color: rgba(255, 255, 255, 0.9) !important;
background: transparent !important;
}
/* ===== ADVANCED COLLAPSIBLE SECTION ===== */
#index #systemLogin .ui-collapsible {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
margin: 14px 0 !important;
width: 100% !important;
}
/* Collapsible header */
#index #systemLogin .ui-collapsible-heading {
margin: 0 !important;
padding: 0 !important;
}
#index #systemLogin .ui-collapsible-heading a,
#index #systemLogin .ui-collapsible-heading a.ui-btn {
background: transparent !important;
color: rgba(255, 255, 255, 0.7) !important;
font-size: 13px !important;
font-weight: 500 !important;
border: none !important;
border-radius: 8px 8px 0 0 !important;
padding: 12px 14px 12px 38px !important; /* Extra left padding for icon */
box-shadow: none !important;
margin: 0 !important;
}
/* Collapsed state - full rounded corners */
#index #systemLogin .ui-collapsible-collapsed .ui-collapsible-heading a {
border-radius: 8px !important;
}
/* Position the +/- icon properly */
#index #systemLogin .ui-collapsible-heading .ui-icon {
left: 12px !important;
margin-top: -9px !important;
}
/* Collapsible content */
#index #systemLogin .ui-collapsible-content {
background: rgba(255, 255, 255, 0.03) !important;
border: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 0 0 8px 8px !important;
padding: 14px !important;
margin: 0 !important;
}
/* Inputs inside collapsible */
#index #systemLogin .ui-collapsible-content .ui-input-text {
margin-bottom: 12px !important;
}
#index #systemLogin .ui-collapsible-content label {
margin-top: 8px !important;
}
/* ===== FLIPSWITCH (Use Windows user) ===== */
#index #systemLogin .ui-flipswitch {
background-color: rgba(255, 255, 255, 0.25) !important;
border: none !important;
border-radius: 14px !important;
height: 28px !important;
width: 70px !important;
margin: 8px 0 12px 0 !important;
position: relative !important;
}
#index #systemLogin .ui-flipswitch.ui-flipswitch-active {
background-color: #4a9eff !important;
}
/* Hide the Yes/No text */
#index #systemLogin .ui-flipswitch .ui-flipswitch-on,
#index #systemLogin .ui-flipswitch .ui-flipswitch-off {
display: none !important;
}
/* The toggle handle - target the input's visual representation */
#index #systemLogin .ui-flipswitch .ui-btn.ui-flipswitch-on {
display: block !important;
background: #ffffff !important;
border-radius: 50% !important;
width: 24px !important;
height: 24px !important;
position: absolute !important;
top: 2px !important;
left: 2px !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
text-indent: -9999px !important;
border: none !important;
}
#index #systemLogin .ui-flipswitch.ui-flipswitch-active .ui-btn.ui-flipswitch-on {
left: auto !important;
right: 2px !important;
}
/* ===== SSO DETECTION CONTAINER ===== */
#ssoDetectionContainer {
margin: 8px 0 !important;
}
#ssoDetectionContainer label {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 14px !important;
}
/* ===== CHECKBOX (Force Offline) ===== */
#index #systemLogin .ui-checkbox {
margin: 8px 0 !important;
}
#index #systemLogin .ui-checkbox label {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
color: rgba(255, 255, 255, 0.8) !important;
box-shadow: none !important;
padding: 10px 14px 10px 40px !important;
font-size: 14px !important;
}
#index #systemLogin .ui-checkbox label.ui-checkbox-on {
background: rgba(74, 158, 255, 0.15) !important;
border-color: rgba(74, 158, 255, 0.4) !important;
}
/* ===== NAVBAR TABS (Std. User / Cert.) ===== */
#index #systemLogin .ui-navbar {
margin-top: 16px !important;
width: 100% !important;
}
#index #systemLogin .ui-navbar ul {
display: flex !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
#index #systemLogin .ui-navbar li {
width: auto !important;
flex: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
#index #systemLogin .ui-navbar a,
#index #systemLogin .ui-navbar a.ui-btn {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
color: rgba(255, 255, 255, 0.7) !important;
font-size: 13px !important;
padding: 10px 12px !important;
text-align: center !important;
margin: 0 !important;
box-shadow: none !important;
width: 100% !important;
}
#index #systemLogin .ui-navbar a.ui-btn-active {
background: rgba(74, 158, 255, 0.2) !important;
border-color: var(--menu-accent-blue, #4a9eff) !important;
color: #ffffff !important;
}
#index #systemLogin .ui-navbar a.ui-disabled {
opacity: 0.4 !important;
}
/* ===== SELECT DROPDOWN ===== */
#index #systemLogin .ui-select .ui-btn {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 8px !important;
color: rgba(255, 255, 255, 0.9) !important;
box-shadow: none !important;
}
/* Manage certificates button */
#index #systemLogin #login_CertManage {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: rgba(255, 255, 255, 0.8) !important;
margin-top: 12px !important;
box-shadow: none !important;
}
/* ===== VERSION & PRIVACY FOOTER ===== */
#index #versionNumber,
#index #privacyInfo {
color: rgba(255, 255, 255, 0.6) !important;
font-size: 14px !important;
text-align: center !important;
margin-top: 12px !important;
}
#index #privacyInfo {
cursor: pointer !important;
}
#index #privacyInfo:hover {
color: rgba(255, 255, 255, 0.85) !important;
}
/* ===== HEADER ON LOGIN PAGE ===== */
#index[data-role="page"] > [data-role="header"] {
background: transparent !important;
border: none !important;
}
/* Gear/settings button */
#index #loadSettings {
background: rgba(255, 255, 255, 0.1) !important;
border: none !important;
border-radius: 8px !important;
}
/* ========================================
SYSTEM STATUS PANEL FIX
======================================== */
/* Fix the staircase layout issue */
ul.tester_status.ui-listview {
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
ul.tester_status.ui-listview li {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
float: none !important;
clear: both !important;
width: 100% !important;
padding: 12px 16px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
background: transparent !important;
position: relative !important;
}
ul.tester_status.ui-listview li:last-child {
border-bottom: none !important;
}
ul.tester_status.ui-listview li .menuicon {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
flex-shrink: 0 !important;
margin-right: 12px !important;
float: none !important;
background: rgba(40, 167, 69, 0.15) !important;
border-radius: 8px !important;
}
ul.tester_status.ui-listview li .menuicon i {
font-size: 20px !important;
position: relative !important;
left: auto !important;
top: auto !important;
}
ul.tester_status.ui-listview li .panelMenutext {
font-size: 15px !important;
color: rgba(255, 255, 255, 0.9) !important;
float: none !important;
position: relative !important;
left: auto !important;
flex: 1 !important;
}
/* ========================================
AUDIO RECORDING SCREEN
Modern recording interface
======================================== */
/* Recording page background */
#NoteDetailsAddAudio_BG {
background: #1a1a1a !important;
}
#NoteDetailsAddAudio_BG.redbg {
background: linear-gradient(180deg, rgba(220, 53, 69, 0.3) 0%, #1a1a1a 50%) !important;
}
/* Recorder container */
#NoteDetailsAddAudio_recorder {
padding: 20px !important;
}
/* Fix inline height:40% causing issues */
#NoteDetailsAudioRecording_recorderHolder {
height: auto !important;
min-height: 200px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 30px 20px !important;
overflow: visible !important;
}
/* ===== RECORDING BUTTONS ===== */
/* Common button styles */
#NoteDetailsAddAudio_startRecord,
#NoteDetailsAddAudio_stopRecord,
#NoteDetailsAddAudio_pauseRecord,
#NoteDetailsAddAudio_resumeRecord {
cursor: pointer !important;
transition: transform 0.2s ease !important;
}
#NoteDetailsAddAudio_startRecord:hover,
#NoteDetailsAddAudio_stopRecord:hover,
#NoteDetailsAddAudio_pauseRecord:hover,
#NoteDetailsAddAudio_resumeRecord:hover {
transform: scale(1.08) !important;
}
#NoteDetailsAddAudio_startRecord:active,
#NoteDetailsAddAudio_stopRecord:active,
#NoteDetailsAddAudio_pauseRecord:active,
#NoteDetailsAddAudio_resumeRecord:active {
transform: scale(0.95) !important;
}
/* Modern circular button base - outlined ring style */
#NoteDetailsAddAudio_startRecord .fa-stack,
#NoteDetailsAddAudio_stopRecord .fa-stack,
#NoteDetailsAddAudio_pauseRecord .fa-stack,
#NoteDetailsAddAudio_resumeRecord .fa-stack {
width: 80px !important;
height: 80px !important;
line-height: 80px !important;
border-radius: 50% !important;
background: transparent !important;
border: 3px solid currentColor !important;
}
/* Hide the old stacked circle icons */
#NoteDetailsAddAudio_startRecord .fa-circle,
#NoteDetailsAddAudio_startRecord .fa-circle-thin,
#NoteDetailsAddAudio_stopRecord .fa-circle,
#NoteDetailsAddAudio_stopRecord .fa-circle-thin,
#NoteDetailsAddAudio_pauseRecord .fa-circle,
#NoteDetailsAddAudio_pauseRecord .fa-circle-thin,
#NoteDetailsAddAudio_resumeRecord .fa-circle,
#NoteDetailsAddAudio_resumeRecord .fa-circle-thin {
display: none !important;
}
/* Inner icon styling */
#NoteDetailsAddAudio_startRecord .fa-stack-1x,
#NoteDetailsAddAudio_stopRecord .fa-stack-1x,
#NoteDetailsAddAudio_pauseRecord .fa-stack-1x,
#NoteDetailsAddAudio_resumeRecord .fa-stack-1x {
font-size: 32px !important;
line-height: 80px !important;
}
/* Record/Resume button - green ring with semi-transparent green fill */
#NoteDetailsAddAudio_startRecord .fa-stack,
#NoteDetailsAddAudio_resumeRecord .fa-stack {
border-color: #28a745 !important;
background: rgba(40, 167, 69, 0.08) !important;
}
#NoteDetailsAddAudio_startRecord .fa-microphone,
#NoteDetailsAddAudio_resumeRecord .fa-microphone {
color: #28a745 !important;
}
/* Stop button - red ring with semi-transparent red fill */
#NoteDetailsAddAudio_stopRecord .fa-stack {
border-color: #dc3545 !important;
background: rgba(220, 53, 69, 0.08) !important;
}
#NoteDetailsAddAudio_stopRecord .fa-square {
color: #dc3545 !important;
font-size: 28px !important;
}
/* Pause button - orange ring with semi-transparent orange fill */
#NoteDetailsAddAudio_pauseRecord .fa-stack {
border-color: #d68910 !important;
background: rgba(214, 137, 16, 0.08) !important;
}
#NoteDetailsAddAudio_pauseRecord .fa-pause {
color: #d68910 !important;
}
/* Recording active container - DO NOT override display to allow JS hide/show */
#NoteDetailsAddAudio_recordingActiveHolder.ui-grid-a {
justify-content: center !important;
align-items: center !important;
gap: 60px !important;
overflow: visible !important;
padding: 20px 0 !important;
}
#NoteDetailsAddAudio_recordingActiveHolder .ui-block-a,
#NoteDetailsAddAudio_recordingActiveHolder .ui-block-b {
width: auto !important;
overflow: visible !important;
margin: 0 15px !important;
}
/* ===== RECORDING ANIMATION ===== */
/* Pulsing glow animation - green */
@keyframes recording-pulse-green {
0% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6);
}
70% {
box-shadow: 0 0 0 18px rgba(40, 167, 69, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
}
}
/* Pulsing glow animation - red */
@keyframes recording-pulse-red {
0% {
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6);
}
70% {
box-shadow: 0 0 0 18px rgba(220, 53, 69, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
}
}
/* Pulsing glow animation - orange */
@keyframes recording-pulse-orange {
0% {
box-shadow: 0 0 0 0 rgba(214, 137, 16, 0.6);
}
70% {
box-shadow: 0 0 0 18px rgba(214, 137, 16, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(214, 137, 16, 0);
}
}
/* Apply green pulse to start/record and resume buttons */
#NoteDetailsAddAudio_startRecord .fa-stack {
animation: recording-pulse-green 1.5s ease-out infinite !important;
}
#NoteDetailsAddAudio_resumeRecord .fa-stack {
animation: recording-pulse-green 1.5s ease-out infinite !important;
}
/* Apply red pulse to stop button */
#NoteDetailsAddAudio_stopRecord .fa-stack {
animation: recording-pulse-red 1.5s ease-out infinite !important;
}
/* Apply orange pulse to pause button */
#NoteDetailsAddAudio_pauseRecord .fa-stack {
animation: recording-pulse-orange 1.5s ease-out infinite !important;
}
/* ===== RECORDING STATUS ===== */
#NoteDetailsAudioRecording_RecordingStatus {
margin-top: 16px !important;
text-align: center !important;
}
#NoteDetailsAudioRecording_RecordingStatus h2 {
font-size: 16px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.9) !important;
margin: 0 !important;
}
#NoteDetailsAddAudio_recordTime {
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
color: #dc3545 !important;
}
/* ===== HELPER TEXT / PROMPTS SECTION ===== */
#NoteDetailsAudioRecording_HelpderTextHolder {
height: auto !important;
margin-top: 20px !important;
padding: 16px !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 12px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#NoteDetailsAudioRecording_HelperText {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 15px !important;
line-height: 1.6 !important;
padding: 12px !important;
background: rgba(0, 0, 0, 0.2) !important;
border-radius: 8px !important;
margin-top: 12px !important;
}
/* ===== RECORDING DETAILS FORM ===== */
#NoteDetailsAddAudio_recordingDetails {
padding: 20px !important;
}
/* Form should be full width like other screens */
#NoteDetailsAddAudio_form {
width: 100% !important;
}
#NoteDetailsAddAudio_form label {
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.7) !important;
margin-bottom: 6px !important;
margin-top: 16px !important;
}
#NoteDetailsAddAudio_form .ui-input-text {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
}
#NoteDetailsAddAudio_form textarea {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 15px !important;
padding: 12px 14px !important;
width: 100% !important;
box-sizing: border-box !important;
}
#NoteDetailsAddAudio_form .ui-input-text:focus-within,
#NoteDetailsAddAudio_form textarea:focus {
border-color: #4a9eff !important;
background: rgba(255, 255, 255, 0.1) !important;
}
#NoteDetailsAddAudio_form .ui-select .ui-btn {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 8px !important;
color: rgba(255, 255, 255, 0.9) !important;
}
/* Action buttons */
#NoteDetailsAddAudio_form .center-wrapper {
margin-top: 24px !important;
}
#NoteDetailsAddAudio_cancel {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: rgba(255, 255, 255, 0.9) !important;
border-radius: 8px !important;
}
#NoteDetailsAddAudio_save {
background: #4CAF50 !important;
border: none !important;
color: #ffffff !important;
border-radius: 8px !important;
}
/* ===== HEADER ===== */
#NoteDetailsAddAudio_header {
background: #1a1a1a !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#NoteDetailsAddAudio_header h2 {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 18px !important;
font-weight: 500 !important;
}
/* ========================================
FLAT LISTVIEW STYLE
Add class "listview-flat" to any listview to disable card styling
Excluded from card styling via :not(.listview-flat) on card selectors
======================================== */
ul.ui-listview.listview-flat,
.ui-listview.listview-flat {
padding: 0 !important;
margin: 0 !important;
}
ul.ui-listview.listview-flat > li,
.ui-listview.listview-flat > li {
margin: 0 !important;
padding: 0 !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
border-top: none !important;
background: transparent !important;
}
/* Divider between items */
ul.ui-listview.listview-flat > li + li,
.ui-listview.listview-flat > li + li {
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
ul.ui-listview.listview-flat > li > a,
ul.ui-listview.listview-flat > li > a.ui-btn,
.ui-listview.listview-flat > li > a,
.ui-listview.listview-flat > li > a.ui-btn {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 14px 16px !important;
min-height: auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 14px !important;
text-shadow: none !important;
position: relative !important;
}
/* ========================================
SECONDARY MENU LISTS (.menuList except main menu)
Clean flat style with dividers - no cards
======================================== */
/* Remove card styling from non-main menu lists */
.menuList.ui-listview:not(#mainmenu) > li,
.menuList.ui-listview:not(#mainmenu) > li.ui-first-child,
.menuList.ui-listview:not(#mainmenu) > li.ui-last-child {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
/* Divider lines between items - full width */
.menuList.ui-listview:not(#mainmenu) > li:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}
/* Row styling - tighter height */
.menuList.ui-listview:not(#mainmenu) > li > a,
.menuList.ui-listview:not(#mainmenu) > li > a.ui-btn {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 14px 16px !important;
min-height: auto !important;
height: auto !important;
display: block !important;
position: relative !important;
overflow: hidden !important;
}
/* Hover state - subtle highlight */
.menuList.ui-listview:not(#mainmenu) > li > a:hover,
.menuList.ui-listview:not(#mainmenu) > li > a.ui-btn:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
/* Active/pressed state */
.menuList.ui-listview:not(#mainmenu) > li > a:active,
.menuList.ui-listview:not(#mainmenu) > li > a.ui-btn:active {
background: rgba(255, 255, 255, 0.1) !important;
}
/* Icon container */
.menuList.ui-listview:not(#mainmenu) .menuicon {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
margin: 0 16px 0 0 !important;
padding: 0 !important;
float: left !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(77, 171, 247, 0.15) !important;
border-radius: 10px !important;
}
/* Icon size and centering */
.menuList.ui-listview:not(#mainmenu) .menuicon i,
.menuList.ui-listview:not(#mainmenu) .menuicon i.fa {
font-size: 24px !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Text styling - left aligned */
.menuList.ui-listview:not(#mainmenu) .menutext {
font-size: 16px !important;
font-weight: 500 !important;
color: #ffffff !important;
text-transform: none !important;
text-align: left !important;
padding: 0 !important;
margin: 0 !important;
position: static !important;
float: none !important;
display: block !important;
line-height: 48px !important; /* Match icon height for vertical centering */
}
/* Chevron/arrow indicators */
.menuList.ui-listview:not(#mainmenu) > li > a::after {
content: '\f105' !important;
font-family: 'FontAwesome' !important;
position: absolute !important;
right: 16px !important;
color: rgba(255, 255, 255, 0.35) !important;
font-size: 18px !important;
}
/* Container - no padding for full-width dividers */
.menuList.ui-listview:not(#mainmenu) {
padding: 0 !important;
margin: 0 !important;
}
ul.ui-listview.listview-flat > li > a:hover,
.ui-listview.listview-flat > li > a:hover {
background: rgba(255, 255, 255, 0.06) !important;
}
/* Icon containers - must override jQuery Mobile defaults */
ul.ui-listview.listview-flat .menuicon,
ul.ui-listview.listview-flat .list_icon,
.ui-listview.listview-flat .menuicon,
.ui-listview.listview-flat .list_icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
border-radius: 10px !important;
background: rgba(74, 158, 255, 0.12) !important;
float: none !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
left: auto !important;
top: auto !important;
}
/* Icon sizing - override fa-3x */
ul.ui-listview.listview-flat .menuicon i.fa,
ul.ui-listview.listview-flat .menuicon i.fa.fa-3x,
ul.ui-listview.listview-flat .list_icon i.fa,
ul.ui-listview.listview-flat .list_icon i.fa.fa-3x,
.ui-listview.listview-flat .menuicon i.fa,
.ui-listview.listview-flat .menuicon i.fa.fa-3x,
.ui-listview.listview-flat .list_icon i.fa,
.ui-listview.listview-flat .list_icon i.fa.fa-3x {
font-size: 22px !important;
line-height: 1 !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Menu text */
ul.ui-listview.listview-flat .menutext,
.ui-listview.listview-flat .menutext {
font-size: 17px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.9) !important;
flex: 1 !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide arrows */
ul.ui-listview.listview-flat > li > a::after,
.ui-listview.listview-flat > li > a::after {
display: none !important;
content: none !important;
}
/* ========================================
ATTACHMENT TYPE POPUP
Container styling only - listview uses .listview-flat class
======================================== */
#NoteDetail_popupAddAttachment {
background: rgba(30, 35, 42, 0.98) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
padding: 0 !important;
min-width: 280px !important;
overflow: hidden !important;
}
#NoteDetail_popupAddAttachment h3 {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 16px !important;
font-weight: 500 !important;
padding: 16px 20px !important;
margin: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(255, 255, 255, 0.03) !important;
}
/* Menu text color */
#NoteDetail_popupAddAttachment .menutext {
font-size: 15px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.9) !important;
}
/* ========================================
SETTINGS PAGE MODERNIZATION
Match login screen card treatment
======================================== */
/* Settings page content area - center the card */
#settings[data-role="page"] > .ui-content {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 20px !important;
}
/* Settings form container - the card */
#settings #settingsForm {
max-width: 400px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 28px 24px !important;
background: rgba(30, 35, 42, 0.72) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Make sure all children stay within card */
#settings #settingsForm * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Remove text shadow from all settings form text */
#settings #settingsForm,
#settings #settingsForm * {
text-shadow: none !important;
}
/* Settings heading */
#settings #settingsForm h2,
#settings #settingsForm .center-wrapper h2 {
font-size: 16px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.85) !important;
margin: 0 0 20px 0 !important;
text-align: center !important;
text-shadow: none !important;
}
/* Labels */
#settings #settingsForm label {
font-size: 13px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.7) !important;
margin-bottom: 6px !important;
text-shadow: none !important;
}
/* Input containers - jQuery Mobile wrapper */
#settings #settingsForm .ui-input-text {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 8px !important;
margin-bottom: 14px !important;
box-shadow: none !important;
width: 100% !important;
}
#settings #settingsForm .ui-input-text:focus-within {
border-color: var(--menu-accent-blue, #4a9eff) !important;
background: rgba(255, 255, 255, 0.1) !important;
}
/* Input fields */
#settings #settingsForm input[type="text"],
#settings #settingsForm input[type="password"] {
background: transparent !important;
border: none !important;
color: #ffffff !important;
font-size: 15px !important;
padding: 12px 14px !important;
width: 100% !important;
}
#settings #settingsForm input::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
/* Clear button in inputs */
#settings #settingsForm .ui-input-clear {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 50% !important;
}
/* Save button - green like login */
#settings #settingsForm #settings_save {
width: 100% !important;
padding: 14px !important;
margin: 16px 0 12px 0 !important;
font-size: 16px !important;
font-weight: 600 !important;
color: #ffffff !important;
background: #4CAF50 !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-shadow: none !important;
box-shadow: none !important;
}
#settings #settingsForm #settings_save:hover {
background: #5cb860 !important;
}
#settings #settingsForm #settings_save:active {
background: #43a047 !important;
}
/* Cancel button - transparent outline style */
#settings #settingsForm #settings_back {
width: 100% !important;
padding: 12px !important;
margin: 8px 0 !important;
font-size: 14px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.7) !important;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-shadow: none !important;
box-shadow: none !important;
}
#settings #settingsForm #settings_back:hover {
color: rgba(255, 255, 255, 0.9) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
background: rgba(255, 255, 255, 0.05) !important;
}
/* Button container - stack vertically like login */
#settings #settingsForm .center-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
width: 100% !important;
}
/* Override inline button styles from jQuery Mobile */
#settings #settingsForm .ui-btn-inline {
display: block !important;
text-align: center !important;
}
/* Settings page header - logo like login screen */
#settings[data-role="page"] > [data-role="header"] {
background: transparent !important;
border: none !important;
padding: 12px 0 !important;
}
#settings[data-role="page"] > [data-role="header"] .center-wrapper {
text-align: center !important;
}
#settings[data-role="page"] > [data-role="header"] img {
display: inline-block !important;
max-width: 198px !important;
height: auto !important;
}
/* ========================================
APP VERSION POPUP FIX
Fix black text on dark popup background
======================================== */
#login_appVersion {
background: rgba(30, 35, 42, 0.92) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 16px !important;
padding: 24px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
#login_appVersion h2 {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 18px !important;
font-weight: 500 !important;
text-shadow: none !important;
margin-bottom: 12px !important;
}
/* Listview items */
#login_appVersion .ui-listview li {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* All labels in the popup */
#login_appVersion label {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 14px !important;
text-shadow: none !important;
}
/* Value labels */
#login_appVersion label.detailGroup {
color: #ffffff !important;
font-weight: 600 !important;
}
/* Close button */
#login_appVersion #login_appVersionClose {
background: var(--menu-accent-blue, #4a9eff) !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 600 !important;
padding: 12px !important;
margin-top: 16px !important;
text-shadow: none !important;
box-shadow: none !important;
}
#login_OfflineHolder {
max-width: 300px !important;
}
/* ========================================
PRIVACY POLICY POPUP
======================================== */
#login_PrivacyPolicy {
background: rgba(30, 35, 42, 0.92) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 16px !important;
padding: 24px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
min-width: 300px !important;
width: 85vw !important;
max-width: 400px !important;
}
#login_PrivacyPolicy h2 {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 18px !important;
font-weight: 500 !important;
text-shadow: none !important;
margin-bottom: 12px !important;
}
#login_PrivacyPolicy .popupTextarea {
color: rgba(255, 255, 255, 0.8) !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 12px !important;
font-size: 13px !important;
line-height: 1.5 !important;
overflow-y: auto !important;
}
#login_PrivacyPolicy #login_closePolicy {
background: var(--menu-accent-blue, #4a9eff) !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 600 !important;
padding: 12px !important;
margin-top: 8px !important;
text-shadow: none !important;
box-shadow: none !important;
}
/* ========================================
CITATION & IRS SUBMISSION STEPS
Fix icon/text layout - single row per item
Override jQuery Mobile's .ui-btn block/overflow defaults
======================================== */
/* Slide-up panel background - distinguish from page content */
#Citation_navmenu,
#IRS_navmenu {
background: rgba(70, 75, 85, 0.97) !important;
border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* Anchor: use relative positioning so menuiconright can be absolute */
#Citation_submissionSteps li > a,
#IRS_submissionSteps li > a,
#Citation_submissionSteps li > a.ui-btn,
#IRS_submissionSteps li > a.ui-btn,
.ui-listview#Citation_submissionSteps li > a.ui-btn,
.ui-listview#IRS_submissionSteps li > a.ui-btn {
position: relative !important;
padding: 10px 40px 10px 12px !important;
overflow: visible !important;
white-space: normal !important;
min-height: auto !important;
}
/* Hide the jQuery Mobile arrow chevron on all anchors in submission steps */
#Citation_submissionSteps a:after,
#IRS_submissionSteps a:after,
#Citation_submissionSteps a.ui-btn:after,
#IRS_submissionSteps a.ui-btn:after,
#Citation_submissionSteps .ui-btn:after,
#IRS_submissionSteps .ui-btn:after {
display: none !important;
content: none !important;
}
/* Left icon: inline beside text */
#Citation_submissionSteps li > a .menuicon,
#IRS_submissionSteps li > a .menuicon {
display: inline-block !important;
width: 35px !important;
text-align: center !important;
vertical-align: middle !important;
}
#Citation_submissionSteps li > a .menuicon i,
#IRS_submissionSteps li > a .menuicon i {
font-size: 1.4em !important;
}
/* Text: inline beside icons */
#Citation_submissionSteps li > a .menutext,
#IRS_submissionSteps li > a .menutext {
display: inline-block !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
/* Right icon (X/check): absolutely position to right side of anchor */
#Citation_submissionSteps li > a .menuiconright,
#IRS_submissionSteps li > a .menuiconright {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
float: none !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
#Citation_submissionSteps li > a .menuiconright i,
#IRS_submissionSteps li > a .menuiconright i {
font-size: 2em !important;
}
/* Ensure the first li (alert grid) is not affected */
#Citation_submissionSteps li:first-child > div,
#IRS_submissionSteps li:first-child > div {
width: 100% !important;
}
/* ========================================
FACIAL RECOGNITION SEARCH SCREEN
Two-column responsive layout with tips
======================================== */
/* Main container - two column on desktop, single on mobile */
.facial-search-container {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
@media (min-width: 768px) {
.facial-search-container {
flex-direction: row;
align-items: flex-start;
}
}
/* Left column: Photo */
.facial-photo-column {
flex: 0 0 auto;
width: 100%;
max-width: 400px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
}
@media (min-width: 768px) {
.facial-photo-column {
flex: 0 0 340px;
width: 340px;
margin: 0;
}
}
@media (min-width: 1024px) {
.facial-photo-column {
flex: 0 0 400px;
width: 400px;
}
}
/* Photo card container - shows placeholder or captured photo */
.facial-photo-card {
background: rgba(30, 35, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
overflow: hidden;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Camera container - separate from photo card, shown when capturing */
#PersonSearch_cameraContainer {
background: rgba(30, 35, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
#PersonSearch_cameraContainer video {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
background: #000;
display: block;
}
.camera-actions {
padding: 12px;
display: flex;
gap: 10px;
background: rgba(0, 0, 0, 0.3);
}
.camera-actions a {
flex: 1;
margin: 0 !important;
}
/* Placeholder when no photo */
.facial-placeholder {
text-align: center;
color: rgba(255, 255, 255, 0.4);
}
.facial-placeholder i {
font-size: 80px;
margin-bottom: 12px;
display: block;
}
.facial-placeholder p {
font-size: 14px;
margin: 0;
}
/* Photo preview */
#PersonSearch_FacialPreview img,
.facial-photo-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Capture button */
.facial-capture-btn {
margin-top: 16px !important;
text-align: center;
}
.facial-capture-btn i {
margin-right: 8px;
}
/* Right column: Controls & Tips */
.facial-controls-column {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Controls card */
.facial-controls-card {
background: rgba(30, 35, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 20px;
}
.facial-controls-card h3 {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 16px 0;
display: flex;
align-items: center;
gap: 10px;
}
.facial-controls-card h3 i {
color: #4dabf7;
font-size: 18px;
}
.facial-controls-card label {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 8px;
display: block;
}
.confidence-hint {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
margin: 8px 0 16px 0;
font-style: italic;
}
.facial-search-btn {
margin-top: 8px !important;
font-size: 16px !important;
}
.facial-search-btn i {
margin-right: 8px;
}
/* Tips card */
.facial-tips-card {
background: rgba(30, 35, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 20px;
}
.facial-tips-card h3 {
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 16px 0;
display: flex;
align-items: center;
gap: 10px;
}
.facial-tips-card h3 i {
color: #f0ad4e;
font-size: 20px;
}
/* Tips list */
.tips-list {
list-style: none;
padding: 0;
margin: 0;
}
.tips-list li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tips-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.tips-list li:first-child {
padding-top: 0;
}
.tip-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(74, 158, 255, 0.12);
border-radius: 8px;
color: #4dabf7;
font-size: 16px;
}
.tips-list li div {
flex: 1;
min-width: 0;
}
.tips-list li strong {
display: block;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2px;
}
.tips-list li span {
display: block;
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.4;
}
/* Different tip icon colors */
.tips-list li:nth-child(1) .tip-icon {
background: rgba(240, 173, 78, 0.15);
color: #f0ad4e;
}
.tips-list li:nth-child(2) .tip-icon {
background: rgba(74, 158, 255, 0.12);
color: #4dabf7;
}
.tips-list li:nth-child(3) .tip-icon {
background: rgba(40, 167, 69, 0.15);
color: #28a745;
}
.tips-list li:nth-child(4) .tip-icon {
background: rgba(220, 53, 69, 0.12);
color: #dc3545;
}
.tips-list li:nth-child(5) .tip-icon {
background: rgba(111, 66, 193, 0.15);
color: #6f42c1;
}
/* Mobile: Tips collapse to more compact */
@media (max-width: 767px) {
.facial-tips-card {
padding: 16px;
}
.tips-list li {
padding: 10px 0;
gap: 12px;
}
.tip-icon {
width: 32px;
height: 32px;
font-size: 14px;
}
.tips-list li strong {
font-size: 13px;
}
.tips-list li span {
font-size: 12px;
}
}
/* ========================================
SMART GLASSES PAIRING PAGE
Card styling matching app design system
======================================== */
/* Glasses page — lock page height to viewport so only the activity feed scrolls.
jQuery Mobile wraps content in .ui-panel-wrapper, so we constrain the full
hierarchy: page → panel-wrapper → ui-content → activity_feed. */
#GlassesPairing.ui-page {
overflow: hidden !important;
height: 100vh !important;
max-height: 100vh !important;
}
#GlassesPairing > .ui-panel-wrapper {
height: 100% !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
#GlassesPairing .ui-content {
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
flex: 1 !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Prevent the pairing/connected cards from shrinking when activity feed grows */
#GlassesPairing .glasses-card,
#GlassesPairing .glasses-section-label,
#GlassesPairing #glasses_pairing_section {
flex-shrink: 0;
}
/* Glasses page card — standard card treatment */
.glasses-card {
background: var(--menu-bg-card, rgba(255, 255, 255, 0.85));
border: 1px solid var(--menu-border-color, rgba(0, 0, 0, 0.08));
border-radius: var(--menu-radius-md, 12px);
padding: var(--menu-spacing-lg, 16px);
margin-bottom: var(--menu-spacing-md, 12px);
box-shadow: var(--menu-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
text-shadow: none;
}
/* Glasses connected card — success accent */
.glasses-card.glasses-card-connected {
border-left: 3px solid var(--menu-accent-green, #28a745);
}
/* Card heading row */
.glasses-card-heading {
display: flex;
align-items: center;
gap: 10px;
}
.glasses-card-heading .glasses-card-icon {
font-size: 20px;
color: var(--menu-accent-blue, #3388cc);
}
.glasses-card-heading .glasses-card-icon.success {
color: var(--menu-accent-green, #28a745);
}
.glasses-card-heading .glasses-card-title {
flex: 1;
}
.glasses-card-heading .glasses-card-title h3 {
font-size: 14px;
font-weight: 600;
color: var(--menu-text-primary, #1a202c);
margin: 0;
text-shadow: none;
}
.glasses-card-heading .glasses-card-title p {
font-size: 12px;
color: var(--menu-text-secondary, #4a5568);
margin: 2px 0 0 0;
}
/* Pairing card body (button area) */
.glasses-card-body {
text-align: center;
margin-top: var(--menu-spacing-md, 12px);
}
.glasses-card-body p {
font-size: 12px;
color: var(--menu-text-secondary, #4a5568);
margin: 0 0 8px 0;
}
/* Glasses section label — lightweight heading that matches the card aesthetic */
.glasses-section-label {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 4px 6px 4px;
margin-top: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--menu-text-secondary, #4a5568);
border-bottom: 1px solid var(--menu-border-color, rgba(0, 0, 0, 0.08));
text-shadow: none;
}
.glasses-section-label i {
font-size: 13px;
color: var(--menu-text-secondary, #4a5568);
}
/* Glasses activity accordion items */
.glasses-activity-item {
border-bottom: 1px solid var(--menu-border-color, rgba(0, 0, 0, 0.08));
}
.glasses-activity-header {
display: flex;
align-items: center;
padding: 10px 0;
cursor: pointer;
}
.glasses-activity-header:active {
background: var(--menu-bg-card-hover, rgba(255, 255, 255, 0.95));
}
.glasses-activity-detail {
padding: 0 0 10px 38px;
}
/* ===== FORMBUILDER CHECKBOX / RADIO OVERRIDES ===== */
/* Remove JQM button styling from checkbox/radio labels inside form-rendered groups */
.formbuilder-checkbox-group .ui-checkbox label.ui-btn,
.formbuilder-checkbox-group .ui-checkbox label.ui-btn:visited,
.formbuilder-checkbox-group .ui-checkbox label.ui-btn:hover,
.formbuilder-checkbox-group .ui-checkbox label.ui-btn:active,
.formbuilder-radio-group .ui-radio label.ui-btn,
.formbuilder-radio-group .ui-radio label.ui-btn:visited,
.formbuilder-radio-group .ui-radio label.ui-btn:hover,
.formbuilder-radio-group .ui-radio label.ui-btn:active {
background: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
text-shadow: none !important;
border-radius: 0 !important;
}
/* Hide native checkbox input — JQM renders its own icon via ::after */
.formbuilder-checkbox-group .ui-checkbox input[type="checkbox"],
.formbuilder-radio-group .ui-radio input[type="radio"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
opacity: 0 !important;
}
/* Tighten vertical spacing between checkboxes */
.formbuilder-checkbox-group .formbuilder-checkbox {
margin-bottom: 0 !important;
}
/* Make unchecked checkbox icon visible in dark mode */
.ui-page-theme-b .formbuilder-checkbox-group .ui-checkbox label.ui-checkbox-off:after,
.ui-page-theme-b .formbuilder-radio-group .ui-radio label.ui-radio-off:after {
background-color: rgba(255, 255, 255, 0.4) !important;
opacity: 0.6 !important;
}
/* ===== SITUATIONAL / LOCATION AWARENESS PANEL ===== */
/* Use JQM default 17em width so panel positioning works correctly. */
/* Hide icons only in the Map Settings section (not Data Layers) */
#Situational_squad_layers > .situational_source .situationalIcon {
display: none !important;
}
/* Map Settings section: full-width stacked layout */
#Situational_squad_layers > .situational_source > .ui-grid-a .ui-block-a,
#Situational_squad_layers > .situational_source > .ui-grid-a .ui-block-b {
width: 100% !important;
float: none !important;
text-align: center !important;
}
/* Data Layers: icon + label on the left, flip switch on the right */
#Situational_data_layers .situational_source .ui-grid-a {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
}
#Situational_data_layers .situational_source .ui-grid-a .ui-block-a {
width: auto !important;
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
gap: 0.5em !important;
}
#Situational_data_layers .situational_source .ui-grid-a .ui-block-b {
width: auto !important;
text-align: right !important;
flex-shrink: 0 !important;
}
#Situational_data_layers .situationalIcon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
flex-shrink: 0 !important;
}
#Situational_data_layers .situationalIcon .fa {
font-size: 1.25em !important;
}
#Situational_data_layers .situationalText {
position: static !important;
margin: 0 !important;
}
/* Tighten inner padding slightly */
#Situational_actionPanel .ui-panel-inner {
padding: 0.8em !important;
}
/* Style section headings with subtle divider */
#Situational_actionPanel h3.center-wrapper {
margin: 0.6em 0 0.4em !important;
font-size: 1em !important;
border-bottom: 1px solid rgba(255,255,255,0.15) !important;
padding-bottom: 0.4em !important;
}
/* Center the controlgroup (None/Squad/Agency) */
#Situational_actionPanel .ui-controlgroup-horizontal {
display: inline-block !important;
}
#Situational_actionPanel .ui-controlgroup-horizontal .ui-controlgroup-controls {
display: inline-block !important;
}
/* Hide radio circle icons on horizontal controlgroup toggles */
/* Target ::after pseudo-element via multiple selector strategies */
.ui-controlgroup-horizontal .ui-radio .ui-btn:after,
.ui-controlgroup-horizontal .ui-btn.ui-radio-off:after,
.ui-controlgroup-horizontal .ui-btn.ui-radio-on:after,
#Situational_actionPanel .ui-radio .ui-btn:after,
#Situational_actionPanel .ui-btn.ui-radio-off:after,
#Situational_actionPanel .ui-btn.ui-radio-on:after,
label[for="squadSelector_Off"]:after,
label[for="squadSelector_Squad"]:after,
label[for="squadSelector_Agency"]:after {
content: none !important;
display: none !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Hide the native radio input circle in horizontal controlgroups */
.ui-controlgroup-horizontal .ui-radio input[type="radio"],
#Situational_actionPanel .ui-radio input[type="radio"],
input[name="squadSelector"] {
opacity: 0 !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Remove left padding that JQM adds for the radio icon */
.ui-controlgroup-horizontal .ui-radio .ui-btn,
#Situational_actionPanel .ui-btn.ui-radio-off,
#Situational_actionPanel .ui-btn.ui-radio-on {
padding-left: 10px !important;
}
/* ===== QUICK INSERT POPUP ===== */
/* Make the listview scrollable within the popup */
#NoteEdit_popupInsert ul[data-role="listview"] {
max-height: 65vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Compact the list items */
#NoteEdit_popupInsert .ui-listview > li > a {
padding: 0.4em 0.8em !important;
min-height: auto !important;
}
#NoteEdit_popupInsert .menuicon {
width: 35px !important;
}
#NoteEdit_popupInsert .menuicon .fa-2x {
font-size: 1.3em !important;
}
#NoteEdit_popupInsert .menutextSmall {
margin-top: 2px !important;
font-size: 14px !important;
}
/* Make form validation error labels visible (red) in both themes */
.ui-body-inherit label.error,
.ui-input-text label.error {
color: #e74c3c !important;
text-shadow: none !important;
}
/* Large desktop: Constrain max width more */
@media (min-width: 1200px) {
.facial-search-container {
max-width: 900px;
}
}
/* ========================================
SMART PULSE WELLNESS TAB
======================================== */
#userSettings_Wellness h3 {
color: inherit !important;
}
#userSettings_Wellness h4 {
margin-top: 15px !important;
margin-bottom: 8px !important;
color: inherit !important;
}
#wellnessDisclosure,
#wellnessNonPunitive {
background: rgba(0, 0, 0, 0.15) !important;
color: inherit !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.ui-page-theme-a #wellnessDisclosure,
.ui-page-theme-a #wellnessNonPunitive {
background: rgba(0, 0, 0, 0.05) !important;
}
#wellnessDisabledMsg {
background: rgba(234, 175, 81, 0.15) !important;
font-size: 14px !important;
}
/* ========================================
CAD EVENTS STYLES
======================================== */
/* --- Menu Item Order --- */
#item_cadEvents {
order: 7 !important;
}
/* --- CAD Events Page Layout --- */
#CADEvents {
overflow: hidden !important;
max-height: 100vh !important;
}
#CADEvents .ui-panel-wrapper {
position: relative !important;
height: 100vh !important;
}
#CADEvents .ui-content {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
padding: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
max-height: calc(100vh - 42px) !important;
}
.cad-sticky-area {
position: sticky !important;
top: 0 !important;
z-index: 10 !important;
background: #1a1a1a !important;
}
.ui-page-theme-a .cad-sticky-area {
background: #f0f0f0 !important;
}
#CADEvents_tabs.ui-navbar {
margin: 0 !important;
}
/* --- CAD Tabs Active State --- */
#CADEvents .ui-navbar a.ui-btn-active,
#CADEventDetails .ui-navbar a.ui-btn-active {
background: rgba(51, 136, 204, 0.25) !important;
color: #fff !important;
border-bottom: 3px solid #3388cc !important;
}
#CADEvents .ui-navbar a,
#CADEventDetails .ui-navbar a {
border-bottom: 3px solid transparent !important;
}
.ui-page-theme-a #CADEvents .ui-navbar a.ui-btn-active,
.ui-page-theme-a #CADEventDetails .ui-navbar a.ui-btn-active {
background: rgba(51, 136, 204, 0.12) !important;
color: #1a202c !important;
border-bottom: 3px solid #3388cc !important;
}
/* --- CAD Event List --- */
.cad-event-listview.ui-listview {
margin: 0 !important;
}
.cad-event-listview.ui-listview > li {
margin: 0 !important;
border: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.cad-event-listview.ui-listview > li > a,
.cad-event-listview.ui-listview > li > a.ui-btn {
padding: 12px 14px !important;
border: none !important;
white-space: normal !important;
min-height: auto !important;
}
/* Address line */
.cad-event-address {
font-size: 14px !important;
font-weight: bold !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
padding-right: 40px !important;
line-height: 1.3 !important;
margin: 0 0 4px 0 !important;
}
/* Type line */
.cad-event-type {
font-size: 13px !important;
white-space: normal !important;
overflow: visible !important;
margin: 2px 0 !important;
}
/* Subtype line (italic) */
.cad-event-subtype {
font-size: 13px !important;
font-style: italic !important;
color: #a3a3a3 !important;
white-space: normal !important;
overflow: visible !important;
margin: 2px 0 !important;
}
/* Priority badge (top-right) */
.cad-priority-badge {
display: inline-block !important;
font-size: 14px !important;
font-weight: bold !important;
padding: 2px 6px !important;
border-radius: 3px !important;
min-width: auto !important;
}
.cad-priority-red {
color: #ed1c24 !important;
}
.cad-priority-orange {
color: #eaaf51 !important;
}
.cad-priority-default {
color: #a3a3a3 !important;
}
/* ui-li-aside override for priority badge position */
.cad-event-listview .ui-li-aside {
position: absolute !important;
top: 12px !important;
right: 14px !important;
margin: 0 !important;
font-size: 14px !important;
max-width: none !important;
}
/* Footer divider + meta info */
.cad-event-footer {
border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
margin-top: 8px !important;
padding-top: 8px !important;
}
.cad-event-footer-info {
font-size: 12px !important;
color: #a3a3a3 !important;
}
.cad-event-footer-info .fa-map-marker {
margin-right: 4px !important;
}
/* --- Light mode adjustments --- */
.ui-page-theme-a .cad-event-listview.ui-listview > li {
border-color: rgba(0, 0, 0, 0.1) !important;
}
.ui-page-theme-a .cad-event-footer {
border-top-color: rgba(0, 0, 0, 0.1) !important;
}
/* ========================================
CAD EVENT DETAIL STYLES
======================================== */
/* --- Detail Tabs --- */
.cad-detail-tabs .ui-navbar ul li a {
font-size: 12px !important;
padding: 8px 5px !important;
line-height: 1.2 !important;
}
.cad-detail-tabs .ui-navbar ul li a .fa {
font-size: 18px !important;
display: block !important;
margin-bottom: 2px !important;
}
/* --- Summary Card --- */
.cad-detail-summary-card {
border: 1px solid rgba(255, 255, 255, 0.15) !important;
border-left: 4px solid #3388cc !important;
border-radius: 6px !important;
padding: 12px 14px !important;
margin-bottom: 16px !important;
background: rgba(255, 255, 255, 0.05) !important;
}
.cad-detail-summary-body {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
}
.cad-detail-summary-text {
flex: 1 !important;
padding-right: 10px !important;
}
.cad-detail-address {
font-size: 14px !important;
font-weight: bold !important;
line-height: 1.3 !important;
margin-bottom: 4px !important;
}
.cad-detail-typecode {
font-size: 13px !important;
margin-bottom: 2px !important;
}
.cad-detail-subtype {
font-size: 13px !important;
font-style: italic !important;
color: #a3a3a3 !important;
}
.cad-detail-summary-right {
flex-shrink: 0 !important;
}
.cad-detail-summary-footer {
border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
margin-top: 10px !important;
padding-top: 8px !important;
font-size: 12px !important;
color: #a3a3a3 !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
}
.cad-nav-icon {
margin-left: auto !important;
font-size: 18px !important;
color: #3388cc !important;
cursor: pointer !important;
}
/* --- Light mode summary card --- */
.ui-page-theme-a .cad-detail-summary-card {
border-color: rgba(0, 0, 0, 0.1) !important;
border-left-color: #3388cc !important;
background: rgba(0, 0, 0, 0.03) !important;
}
.ui-page-theme-a .cad-detail-summary-footer {
border-top-color: rgba(0, 0, 0, 0.1) !important;
}
/* --- Section Headers --- */
.cad-detail-section {
display: flex !important;
align-items: center !important;
background-color: transparent !important;
padding: 10px 0 !important;
margin-top: 8px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.cad-detail-section-title {
font-size: 15px !important;
font-weight: bold !important;
color: #eaaf51 !important;
}
.cad-detail-section-count {
font-size: 14px !important;
color: #a3a3a3 !important;
margin-left: 8px !important;
}
.cad-detail-section-icon {
margin-left: auto !important;
font-size: 16px !important;
color: #a3a3a3 !important;
}
.cad-detail-section-content {
padding: 8px 0 !important;
}
/* --- Light mode section headers --- */
.ui-page-theme-a .cad-detail-section {
border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}
.ui-page-theme-a .cad-detail-section-title {
color: #c88e2e !important;
}
/* --- Assigned Units --- */
.cad-units-list.ui-listview > li,
.cad-units-list.ui-listview > li.ui-li-static {
padding: 10px 14px !important;
border: none !important;
background: transparent !important;
}
.cad-unit-row {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.cad-unit-id {
font-size: 14px !important;
font-weight: bold !important;
min-width: 70px !important;
}
.cad-unit-status-badge {
display: inline-block !important;
background: #eaaf51 !important;
color: #1a1a1a !important;
font-size: 12px !important;
font-weight: bold !important;
padding: 3px 10px !important;
border-radius: 4px !important;
text-transform: uppercase !important;
}
.cad-unit-type {
font-size: 13px !important;
color: #a3a3a3 !important;
}
/* --- Comments --- */
.cad-comment-item {
padding: 10px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.cad-comment-item:last-child {
border-bottom: none !important;
}
.cad-comment-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 4px !important;
}
.cad-comment-author {
font-size: 13px !important;
font-weight: bold !important;
font-style: italic !important;
}
.cad-comment-date {
font-size: 12px !important;
color: #a3a3a3 !important;
}
.cad-comment-text {
font-size: 13px !important;
line-height: 1.4 !important;
color: inherit !important;
}
/* --- Light mode comments --- */
.ui-page-theme-a .cad-comment-item {
border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
/* --- Case Numbers List --- */
.cad-case-list.ui-listview > li > a {
padding: 10px 14px !important;
}
.cad-case-list.ui-listview > li > a h2 {
font-size: 13px !important;
color: #a3a3a3 !important;
font-weight: normal !important;
}
.cad-case-list.ui-listview > li > a p {
font-size: 14px !important;
font-weight: bold !important;
}
/* ========================================
CAD EVENTS - UNIT BANNER & MY CALL
======================================== */
/* --- Unit Banner (shown on Active tab) --- */
#CADEvents .cad-unit-banner,
.ui-page .cad-unit-banner {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 8px 16px !important;
margin: 0 !important;
background: #1e3a52 !important;
border-left: 4px solid #3388cc !important;
font-size: 14px !important;
color: #ccc !important;
}
#CADEvents .cad-unit-banner span,
.ui-page .cad-unit-banner span {
color: #ccc !important;
}
#CADEvents .cad-unit-banner strong,
.ui-page .cad-unit-banner strong {
color: #fff !important;
font-size: 15px !important;
}
#CADEvents .cad-unit-banner .fa-shield,
.ui-page .cad-unit-banner .fa-shield {
color: #3388cc !important;
font-size: 16px !important;
}
#CADEvents .cad-unit-banner .cad-unit-banner-change,
.ui-page .cad-unit-banner .cad-unit-banner-change {
margin-left: auto !important;
color: #a3a3a3 !important;
font-size: 14px !important;
text-decoration: none !important;
}
#CADEvents .cad-unit-banner .cad-unit-banner-change:hover,
#CADEvents .cad-unit-banner .cad-unit-banner-change:active {
color: #3388cc !important;
}
/* --- Light mode unit banner --- */
.ui-page-theme-a .cad-unit-banner {
background: #e8f0f8 !important;
color: #555 !important;
text-shadow: none !important;
}
.ui-page-theme-a .cad-unit-banner span {
color: #555 !important;
}
.ui-page-theme-a .cad-unit-banner strong {
color: #1a202c !important;
}
/* --- MY CALL highlight (must match .ui-listview:not(#mainmenu):not(#sideMenu) specificity) --- */
.ui-listview:not(#mainmenu):not(#sideMenu) > li.cad-my-call {
background: #1a3350 !important;
border-left: 4px solid #3388cc !important;
}
.ui-listview:not(#mainmenu):not(#sideMenu) > li.cad-my-call > a,
.ui-listview:not(#mainmenu):not(#sideMenu) > li.cad-my-call > a.ui-btn {
background: #1a3350 !important;
}
/* MY CALL badge */
.cad-my-call-badge {
display: inline-block !important;
background: #3388cc !important;
color: #fff !important;
font-size: 10px !important;
font-weight: bold !important;
padding: 2px 8px !important;
border-radius: 3px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-bottom: 4px !important;
}
/* --- MY CALL highlight (light mode) --- */
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li.cad-my-call {
background: #d6e9f8 !important;
border-left: 4px solid #3388cc !important;
}
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li.cad-my-call > a,
.ui-page-theme-a .ui-listview:not(#mainmenu):not(#sideMenu) > li.cad-my-call > a.ui-btn {
background: #d6e9f8 !important;
}
/* -------------------------------------------------------
Add Comment Area
------------------------------------------------------- */
.cad-add-comment-area {
padding: 10px 12px !important;
border-top: 1px solid rgba(255,255,255,0.08) !important;
margin-top: 8px !important;
}
.cad-add-comment-area label {
font-size: 13px !important;
font-weight: bold !important;
color: #eaaf51 !important;
margin-bottom: 4px !important;
}
.cad-comment-input {
width: 100% !important;
background: rgba(255,255,255,0.08) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 6px !important;
padding: 8px 10px !important;
font-size: 14px !important;
resize: vertical !important;
min-height: 60px !important;
}
.cad-comment-input:focus {
border-color: #3388cc !important;
outline: none !important;
}
.cad-add-comment-actions {
text-align: right !important;
margin-top: 6px !important;
}
/* --- Light mode Add Comment --- */
.ui-page-theme-a .cad-add-comment-area {
border-top: 1px solid rgba(0,0,0,0.1) !important;
}
.ui-page-theme-a .cad-comment-input {
background: #fff !important;
color: #333 !important;
border: 1px solid #ccc !important;
}
.ui-page-theme-a .cad-comment-input:focus {
border-color: #3388cc !important;
}
/* === SEARCH RESULTS COUNT === */
.search-result-count {
padding: 6px 15px;
font-size: 13px;
color: #999;
display: none;
}
.ui-page-theme-a .search-result-count {
color: #666;
}
/* === BROWSER AUTOFILL TEXT-SHADOW FIX ===
JQM applies a text-shadow to inputs that looks bad when the browser
autofills a field (Chrome/Safari use their own light-blue background).
Remove the shadow on autofilled inputs only — leave the browser's
autofill background alone. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill {
text-shadow: none !important;
}
/* ---------------------------------------------------------------------------
Video capture preview sizing (Add Video page, browser/PWA path)
---------------------------------------------------------------------------
default.css forces .liveVideoFeed to 80% × min 450px and the .box parent
has background:black + 20px padding — together that produced wide black
margins around webcam feeds smaller than the slot. Override to size to
content with sensible maxes so the video element wraps the actual frame.
ID + class doubles specificity over the default.css rule. */
@media (min-width: 768px) {
#liveVideoFeed.liveVideoFeed {
width: auto;
height: auto;
min-width: 0;
min-height: 0;
max-width: 100%;
max-height: 60vh;
margin: 0 auto;
display: block;
}
}
/* Same fix for any .videoHolder playback wrapper (post-record on Add Video,
saved-video playback on Edit Video, and Previous Interview).
default.css caps .videoHolder at 80% × 60% which left a black gutter around
the inner