Refactor dashboard card classes to use 'content-card' instead of 'dashboard-card'

- Updated various views to replace 'dashboard-card' with 'content-card' for consistency in styling.
- Modified filter and table card classes across multiple pages including applications, campaigns, commands, datasets, dayparts, displays, display groups, display profiles, fonts, layouts, libraries, menu boards, modules, player software, playlists, resolutions, schedules, settings, sync groups, tags, tasks, templates, transitions, users, and user groups.

SIDEBAR_DESIGN_REVIEW.md

@@ -1,320 +0,0 @@
-# Comprehensive Sidebar Design Review - OTS Signage Theme
-
-## Executive Summary
-The sidebar is well-structured with a modern dark-mode design, but has several areas for refinement:
-- **Padding**: Generally good, but can be more consistent
-- **Icon Arrangement**: Icons are properly centered and sized, but scaling between states could be improved
-- **Overall Style**: Cohesive and modern, with good dark mode aesthetics
-
----
-
-## 1. SIDEBAR DIMENSIONS & STRUCTURE
-
-### CSS Variables (in `override.css`):
-```css
---ots-sidebar-width: 256px                  /* Full width */
---ots-sidebar-collapsed-width: 64px         /* Collapsed width */
---ots-sidebar-header-height: 64px           /* Header section */
---ots-sidebar-item-height: 44px             /* Nav item height */
---ots-sidebar-item-radius: 10px             /* Border radius */
---ots-sidebar-item-padding-x: 12px          /* Horizontal padding */
-```
-
-### Layout Analysis:
-- **Full Width**: 256px (reasonable for desktop, matches common patterns)
-- **Collapsed Width**: 64px (good for icon-only display)
-- **Responsive Break**: Changes to overlay at 768px (mobile-first, good)
-
-**Issue #1**: When collapsed, icons still have adequate space (20px icon + padding), but text labels are 100% hidden. Consider adding a tooltip system for discoverability.
-
----
-
-## 2. PADDING ANALYSIS
-
-### Sidebar Header (`.sidebar-header`)
-```css
-padding: 20px 16px;           /* Vertical: 20px | Horizontal: 16px */
-```
-- **Assessment**: ✅ Good - balanced and symmetrical
-- **Component**: Contains logo (32px icon) + brand text + toggle button
-- **Vertical Alignment**: Properly centered with `align-items: center`
-
-### Sidebar Content (`.sidebar-content`)
-```css
-padding: 12px 0;              /* Vertical: 12px | Horizontal: 0 */
-```
-- **Assessment**: ⚠️ Inconsistent - no horizontal padding here
-- **Issue**: Padding is applied at the list item level instead (see nav items)
-
-### Sidebar Navigation (`.sidebar-nav`)
-```css
-padding: 72px 0 120px;        /* Top: 72px | Bottom: 120px | Sides: 0 */
-```
-- **Assessment**: ⚠️ **PROBLEM AREA** - padding is excessive for top/bottom
-  - 72px top padding assumes a fixed header height, could be dynamic
-  - 120px bottom padding creates large blank space (mobile unfriendly)
-  - No horizontal padding means nav items extend to edge
-
-### Navigation Items (`.ots-sidebar li.sidebar-list > a`)
-```css
-padding: 6px 10px;            /* Item content padding */
-margin: 3px 10px;             /* Outer margin/spacing */
-border-radius: 12px;
-min-height: 40px;
-```
-- **Assessment**: ⚠️ Mixed padding/margin approach
-  - **Inner padding (6px 10px)**: Good for text breathing room
-  - **Outer margin (3px 10px)**: Creates 10px left/right space from sidebar edge
-  - **Min-height (40px)**: Good touch target size
-
-**Recommendation**: The left margin (10px) combined with border-radius (12px) creates a nice inset look. Could be intentional and good.
-
----
-
-## 3. ICON ARRANGEMENT
-
-### Icon Container (`.ots-nav-icon`)
-```css
-width: 24px;
-height: 24px;
-display: flex;
-align-items: center;
-justify-content: center;
-font-size: 16px;
-color: currentColor;
-justify-self: center;
-```
-- **Assessment**: ✅ Excellent
-  - Square container with centered content
-  - `justify-self: center` ensures centering in CSS Grid layout
-  - `color: currentColor` inherits link color for active/hover states
-
-### Nav Item Grid Layout
-```css
-display: grid;
-grid-template-columns: 20px 1fr;        /* Icon: 20px fixed | Text: flex */
-align-items: center;
-column-gap: 12px;
-```
-- **Assessment**: ✅ Good grid-based approach
-  - Consistent 12px gap between icon and text
-  - Icon column is tight (20px), text is flexible
-  - **Issue**: 20px icon container is narrower than 24px icon element - could cause slight misalignment
-
-**Recommendation**: Change to `grid-template-columns: 24px 1fr` to match the icon container size.
-
-### Active Item Styling
-```css
-.ots-sidebar li.sidebar-list.active > a {
-  color: #0b1221;           /* Dark text on light bg */
-  background-color: #ffffff;
-  font-weight: 600;
-  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
-}
-```
-- **Assessment**: ✅ Strong visual feedback
-  - High contrast (white background + dark text)
-  - Shadow adds depth
-  - Icon inherits dark color via `currentColor`
-
----
-
-## 4. OVERALL STYLE & DESIGN CONSISTENCY
-
-### Color Palette (Dark Mode)
-```css
---ots-sidebar-bg: #08132a;                    /* Very dark blue */
---ots-sidebar-link: #f9fbff;                  /* Nearly white text */
---ots-sidebar-link-hover-bg: rgba(255,255,255,0.08);
---ots-sidebar-active-bg: rgba(255,255,255,0.06);
---ots-sidebar-active-text: #ffffff;
---ots-sidebar-muted-text: #8ea4c7;            /* Muted section headers */
-```
-- **Assessment**: ✅ Excellent contrast and hierarchy
-  - Background: Deep navy (#08132a)
-  - Primary text: Nearly white (#f9fbff)
-  - Hover: 8% white overlay (subtle)
-  - Active: 6% white overlay (subtle)
-  - Section headers: Medium blue (#8ea4c7)
-  - **Accessibility**: WCAG AA compliant (>4.5:1 contrast)
-
-### Section Headers (`.sidebar-title`)
-```css
-display: block;
-font-size: 10px;
-font-weight: 700;
-text-transform: uppercase;
-color: #8ea4c7;
-letter-spacing: 0.12em;
-padding: 12px 14px 4px;
-```
-- **Assessment**: ✅ Good hierarchy
-  - Small, uppercase, muted color clearly distinguishes from regular nav items
-  - Letter spacing adds visual interest
-  - Adequate padding separates sections
-
-### Sidebar Footer (`.sidebar-footer`)
-```css
-border-top: 1px solid var(--color-border);
-padding: 16px;
-background-color: rgba(59, 130, 246, 0.05);   /* Slight blue tint */
-```
-- **Assessment**: ✅ Good
-  - Separated with border
-  - Subtle background color differentiates from main nav
-  - 16px padding consistent with other components
-
----
-
-## 5. RESPONSIVE BEHAVIOR
-
-### Mobile Override (@media max-width: 768px)
-```css
-.ots-sidebar {
-  transform: translateX(-100%);
-  transition: transform var(--transition-base);
-  width: 280px;
-}
-.ots-sidebar.active {
-  transform: translateX(0);
-  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
-}
-.ots-main {
-  margin-left: 0;
-}
-```
-- **Assessment**: ✅ Good mobile experience
-  - Slides in from left (drawer pattern)
-  - Shadow adds depth when open
-  - Content isn't pushed aside (overlay instead)
-  - **Issue**: Sidebar width changes from 256px → 280px on mobile (should be 280px, maybe even narrower for mobile)
-
----
-
-## 6. COLLAPSED STATE STYLING
-
-### Collapsed Class
-```css
-.ots-sidebar.collapsed {
-  /* No explicit width override - uses CSS variable */
-}
-```
-- **Assessment**: ⚠️ Lacks dedicated styling
-  - When `.collapsed` is added, only width changes (via CSS variable)
-  - No visual indicator (badge, animation) that it's collapsed
-  - Icon-only display works but lacks affordance
-
-### Collapsed Item Styling (`.sidebar-collapsed-item-bg`)
-```css
---ots-sidebar-collapsed-item-bg: rgba(255, 255, 255, 0.08);
---ots-sidebar-collapsed-item-hover-bg: rgba(255, 255, 255, 0.16);
-```
-- **Assessment**: ⚠️ Variables defined but not actively used in CSS rules
-  - These variables exist but I don't see them applied to `.collapsed` state styling
-  - **Action Item**: Verify if collapsed items have proper styling
-
----
-
-## 7. KEY ISSUES & RECOMMENDATIONS
-
-### 🔴 HIGH PRIORITY
-
-1. **Icon/Grid Mismatch**
-   - Icon container: 24px, but grid column: 20px
-   - **Fix**: Change `grid-template-columns: 20px 1fr` → `grid-template-columns: 24px 1fr`
-
-2. **Excessive Nav Padding**
-   - `.sidebar-nav { padding: 72px 0 120px }` is too much
-   - **Fix**: Use dynamic sizing based on header height (JavaScript or CSS custom property)
-   - **Suggestion**: `padding: var(--ots-sidebar-header-height) 0 60px` (60px is enough for footer breathing room)
-
-3. **Collapsed State Styling**
-   - Collapsed items have CSS variables defined but not used
-   - **Fix**: Add active rules like:
-     ```css
-     .ots-sidebar.collapsed li.sidebar-list.active > a {
-       background-color: rgba(255, 255, 255, 0.12);
-     }
-     ```
-
-### 🟡 MEDIUM PRIORITY
-
-4. **Icon Discoverability When Collapsed**
-   - No tooltips or labels appear when sidebar is collapsed
-   - **Suggestion**: Add `title` attributes to nav items or implement CSS tooltips
-
-5. **Sidebar Header Button Spacing**
-   - Header has "toggle" button but spacing could be tighter on mobile
-   - **Suggestion**: When collapsed, header could be more compact
-
-6. **Mobile Width Inconsistency**
-   - Sidebar is 256px full-width but 280px on mobile (why wider?)
-   - **Suggestion**: Keep consistent at 256px or make it responsive (e.g., 90vw max 280px on small phones)
-
-### 🟢 LOW PRIORITY
-
-7. **Brand Icon & Text**
-   - Logo + text look good but could use more breathing room
-   - **Current**: `gap: 12px` - consider `gap: 16px` for more visual separation
-
----
-
-## 8. VISUAL SPACING SUMMARY
-
-| Component | Padding | Margin | Assessment |
-|-----------|---------|--------|------------|
-| Header | 20px V, 16px H | — | ✅ Good |
-| Content Wrapper | 12px V, 0 H | — | ⚠️ Inconsistent |
-| Nav List | 72px T, 120px B | — | 🔴 Excessive |
-| Nav Items | 6px V, 10px H | 3px V, 10px H | ✅ Good |
-| Section Headers | 12px T, 14px H | — | ✅ Good |
-| Footer | 16px | — | ✅ Consistent |
-
----
-
-## 9. ICON SIZING CONSISTENCY
-
-| Element | Width | Height | Font Size | Usage |
-|---------|-------|--------|-----------|-------|
-| Nav Icon | 24px | 24px | 16px | Primary nav items |
-| Brand Icon | 32px | 32px | 24px | Logo in header |
-| Topbar Icon | 20px | 20px | 16px | Topbar controls |
-
-**Assessment**: ✅ Good hierarchy and clarity
-
----
-
-## 10. RECOMMENDATIONS FOR NEXT PHASE
-
-1. ✅ Fix grid column width mismatch (20px → 24px)
-2. ✅ Refactor `.sidebar-nav` padding (use CSS variables or dynamic)
-3. ✅ Add collapsed state active item styling
-4. ✅ Add `title` attributes to nav items for tooltip support
-5. ⚠️ Consider adding a visual "collapse indicator" (e.g., chevron or light pulsing border)
-6. ⚠️ Standardize mobile sidebar width
-7. ⚠️ Add more breathing room in header (gap: 16px instead of 12px for brand icon)
-
----
-
-## Summary
-
-**Overall Grade: B+ (85/100)**
-
-### Strengths:
-- ✅ Modern, cohesive dark-mode aesthetic
-- ✅ Good color contrast and accessibility
-- ✅ Proper icon sizing and centering
-- ✅ Responsive mobile overlay pattern
-- ✅ Clear visual hierarchy (headers, active states, hover)
-
-### Weaknesses:
-- ⚠️ Excessive bottom padding in nav list
-- ⚠️ Grid icon column width mismatch
-- ⚠️ Lacking visual affordance when collapsed
-- ⚠️ Icon discoverability issues
-
-### Quick Wins (implement first):
-1. Change `grid-template-columns: 20px 1fr` → `24px 1fr`
-2. Change `.sidebar-nav padding: 72px 0 120px` → `64px 0 60px`
-3. Add collapsed state styling for active items
-

custom/otssignange/css/override-dark.css

@@ -485,7 +485,7 @@ html::before, html::after, body::before, body::after, #page-wrapper::before, #pa
 }
 
 /* Defensive: override any explicit white panel backgrounds that leak outside their container */
-.card, .panel, .panel-body, .dashboard-card, .ots-sidebar li.sidebar-list.active > a {
+.card, .panel, .panel-body, .dashboard-card, .content-card, .ots-sidebar li.sidebar-list.active > a {
   background-color: var(--color-surface) !important;
   color: var(--color-text-primary) !important;
 }
@@ -1341,7 +1341,7 @@ body.login-page *::after {
 
 
 /* EXTRA DEFENSIVE: ensure no white background shows through on long pages */
-html, body, #page-wrapper, .ots-shell, .ots-main, #content-wrapper, .content-wrapper, .ots-content, .page-content, .container, .container-fluid, .dashboard-page, .dashboard, .dashboard-card, .page {
+html, body, #page-wrapper, .ots-shell, .ots-main, #content-wrapper, .content-wrapper, .ots-content, .page-content, .container, .container-fluid, .dashboard-page, .dashboard, .dashboard-card, .content-card, .page {
   background-color: var(--color-background) !important;
   background-image: none !important;
   background-repeat: no-repeat !important;

custom/otssignange/css/override.css

@@ -438,7 +438,8 @@ body.ots-light-mode .ots-topbar .nav-link:hover {
   color: #2563eb;
 }
 
-body.ots-light-mode .dashboard-card {
+body.ots-light-mode .dashboard-card,
+body.ots-light-mode .content-card {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.95));
   border-color: #e2e8f0;
 }
@@ -480,6 +481,7 @@ html, body, #page-wrapper, .ots-main, .ots-content, .page-content {
 .ots-topbar,
 .ots-footer,
 .dashboard-card,
+.content-card,
 .dropdown-menu,
 .dropdown-right,
 .modal-content {
@@ -3772,16 +3774,20 @@ body.ots-sidebar-open .ots-topbar {
    DASHBOARD PAGE
    ============================================================================ */
 
-.dashboard-card {
+.dashboard-card,
+.content-card {
   background: linear-gradient(180deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.92));
   border: 1px solid rgba(148, 163, 184, 0.18);
   border-radius: 16px;
   box-shadow: 0 18px 40px rgba(8, 15, 30, 0.35);
   backdrop-filter: blur(6px);
-  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
   overflow: hidden;
 }
 
+.dashboard-card {
+  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
+}
+
 .dashboard-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 22px 50px rgba(8, 15, 30, 0.45);
@@ -3789,7 +3795,9 @@ body.ots-sidebar-open .ots-topbar {
 }
 
 .dashboard-card .panel-header,
-.dashboard-card .widget-title {
+.dashboard-card .widget-title,
+.content-card .panel-header,
+.content-card .widget-title {
   background: linear-gradient(90deg, rgba(59, 130, 246, 0.16), rgba(99, 102, 241, 0.12));
   border-bottom: 1px solid rgba(148, 163, 184, 0.2);
   padding: 18px 20px;
@@ -3799,13 +3807,19 @@ body.ots-sidebar-open .ots-topbar {
 .dashboard-card .panel-header h3,
 .dashboard-card .widget-title h3,
 .dashboard-card .panel-header h4,
-.dashboard-card .widget-title h4 {
+.dashboard-card .widget-title h4,
+.content-card .panel-header h3,
+.content-card .widget-title h3,
+.content-card .panel-header h4,
+.content-card .widget-title h4 {
   color: var(--color-text-primary);
   font-weight: 700;
 }
 
 .dashboard-card .panel-body,
-.dashboard-card .widget-body {
+.dashboard-card .widget-body,
+.content-card .panel-body,
+.content-card .widget-body {
   padding: 20px;
   min-width: 0;
   width: 100%;
@@ -4320,7 +4334,8 @@ body.ots-sidebar-open .ots-topbar {
 .panel.panel-white,
 .panel.box,
 .widget,
-.dashboard-card {
+.dashboard-card,
+.content-card {
   background-color: var(--color-surface) !important;
   color: var(--color-text-primary) !important;
   border: 1px solid var(--color-border) !important;
@@ -6809,6 +6824,17 @@ body.ots-light-mode .ots-displays-page #datatable-container .XiboData table.data
   will-change: auto !important;
 }
 
+/* Content cards are static – no hover animation */
+.content-card {
+  transition: none !important;
+}
+
+.content-card:hover {
+  transform: none !important;
+  box-shadow: 0 18px 40px rgba(8, 15, 30, 0.35) !important;
+  border-color: rgba(148, 163, 184, 0.18) !important;
+}
+
 /* Ensure the very bottom of the page follows the theme variables (light/dark)
    by forcing html/body and shell containers to use the variable-driven
    background. This prevents residual dark bars under the footer. */

custom/otssignange/views/applications-page.twig

@@ -18,10 +18,10 @@
             <p class="text-muted">{% trans "Manage API applications and connectors." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Applications" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -37,7 +37,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add an Application" %}" href="{{ url_for("application.add.form") }}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
                             <button class="btn btn-sm btn-primary ots-toolbar-btn" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>
@@ -59,7 +59,7 @@
             </div>
         </div>
     </div>
-    <div class="widget dashboard-card ots-displays-card mt-2">
+    <div class="widget content-card ots-displays-card mt-2">
         <div class="widget-body ots-displays-body">
             <div class="page-header ots-page-header">
                 <h1>{% trans "Connectors" %}</h1>

custom/otssignange/views/campaign-page.twig

@@ -34,10 +34,10 @@
             <p class="text-muted">{% trans "Manage your campaigns and ad campaigns." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="campaignView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Campaigns" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -92,7 +92,7 @@
                     </div>
 
                 <div class="grid-with-folders-container ots-grid-with-folders">
-                    <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                    <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                         <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                         <div class="form-check">
                             <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -104,7 +104,7 @@
                         <div id="container-folder-tree"></div>
                     </div>
                     <div id="datatable-container">
-                        <div class="XiboData card py-3 dashboard-card ots-table-card">
+                        <div class="XiboData card py-3 content-card ots-table-card">
                             <div class="ots-table-toolbar">
                                 <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
                                 <div id="breadcrumbs"></div>

custom/otssignange/views/command-page.twig

@@ -35,10 +35,10 @@
             <p class="text-muted">{% trans "Create and manage commands for Displays." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Commands" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -57,7 +57,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             {% if currentUser.featureEnabled("command.add") %}
                                 <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add Command" %}" href="{{ url_for("command.add.form") }}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>

custom/otssignange/views/dataset-page.twig

@@ -35,10 +35,10 @@
             <p class="text-muted">{% trans "Manage structured data sources." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="dataSetView">
-                <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                     <div class="ots-filter-header">
                         <h3 class="ots-filter-title">{% trans "Filter DataSets" %}</h3>
                         <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -77,7 +77,7 @@
                 </div>
 
                 <div class="grid-with-folders-container ots-grid-with-folders">
-                    <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                    <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                         <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                         <div class="form-check">
                             <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -89,7 +89,7 @@
                         <div id="container-folder-tree"></div>
                     </div>
                     <div id="datatable-container">
-                        <div class="XiboData card py-3 dashboard-card ots-table-card">
+                        <div class="XiboData card py-3 content-card ots-table-card">
                             <div class="ots-table-toolbar">
                                 <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
                                 <div id="breadcrumbs"></div>

custom/otssignange/views/daypart-page.twig

@@ -34,10 +34,10 @@
             <p class="text-muted">{% trans "Manage time-based scheduling rules." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Dayparts" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -59,7 +59,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             {% if currentUser.featureEnabled("daypart.add") %}
                                 <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new Daypart" %}" href="{{ url_for("daypart.add.form") }}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>

custom/otssignange/views/display-page.twig

@@ -71,10 +71,10 @@
             <p class="text-muted">{% trans "Manage your player fleet and status." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="displayView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Displays" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -245,7 +245,7 @@
                         </div>
                     </div>
                     <div class="grid-with-folders-container ots-grid-with-folders">
-                        <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                        <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                             <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                             <div class="form-check">
                                 <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -257,7 +257,7 @@
                             <div id="container-folder-tree"></div>
                         </div>
                         <div id="datatable-container">
-                            <div class="XiboData card py-3 dashboard-card ots-table-card">
+                            <div class="XiboData card py-3 content-card ots-table-card">
                                 <div class="ots-table-toolbar">
                                     <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{{ "Open / Close Folder Search options"|trans }}"><i class="fas fa-folder"></i></button>
                                     <div id="breadcrumbs"></div>
@@ -352,7 +352,7 @@
                                                 <div><img style="width: 15%" src='{{ theme.rootUri() }}dist/assets/map-marker-red-cross.png'/> - Downloading/Unknown</div>
                                             </div>
                                         </div>
-                                        <div id="display-map" class="dashboard-card ots-map-card" data-displays-url="{{ url_for("display.map") }}">
+                                        <div id="display-map" class="content-card ots-map-card" data-displays-url="{{ url_for("display.map") }}">
                                         </div>
                                     </div>
                                 </div>

custom/otssignange/views/displaygroup-page.twig

@@ -34,10 +34,10 @@
             <p class="text-muted">{% trans "Organize Displays into logical groups." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="displayGroupGridView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Display Groups" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -91,7 +91,7 @@
                     </div>
 
                     <div class="grid-with-folders-container ots-grid-with-folders">
-                        <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                        <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                             <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                             <div class="form-check">
                                 <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -103,7 +103,7 @@
                             <div id="container-folder-tree"></div>
                         </div>
                         <div id="datatable-container">
-                            <div class="XiboData card py-3 dashboard-card ots-table-card">
+                            <div class="XiboData card py-3 content-card ots-table-card">
                                 <div class="ots-table-toolbar">
                                     <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
                                     <div id="breadcrumbs"></div>

custom/otssignange/views/displayprofile-page.twig

@@ -34,10 +34,10 @@
             <p class="text-muted">{% trans "Manage Display settings profiles." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Display Settings" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -57,7 +57,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             {% if currentUser.featureEnabled("displayprofile.add") %}
                                 <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new Display Settings Profile" %}" href="{{ url_for("displayProfile.add.form") }}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>

custom/otssignange/views/fonts-page.twig

@@ -18,10 +18,10 @@
             <p class="text-muted">{% trans "Manage fonts for your signage content." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="fontView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Fonts" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -40,7 +40,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             {% if currentUser.featureEnabled("font.add") %}
                                 <button class="btn btn-sm btn-success ots-toolbar-btn" href="#" id="fontUploadForm" title="{% trans "Add a new Font" %}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>

custom/otssignange/views/layout-page.twig

@@ -12,10 +12,10 @@
             <p class="text-muted">{% trans "Manage and design your layouts." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-type="layout" data-grid-name="layoutView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Layouts" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -145,7 +145,7 @@
                     </div>
 
                 <div class="grid-with-folders-container ots-grid-with-folders">
-                    <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                    <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                         <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                         <div class="form-check">
                             <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -158,7 +158,7 @@
                     </div>
 
                     <div id="datatable-container">
-                        <div class="XiboData card py-3 dashboard-card ots-table-card">
+                        <div class="XiboData card py-3 content-card ots-table-card">
                             <div class="ots-table-toolbar">
                                 <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
                                 <div id="breadcrumbs"></div>

custom/otssignange/views/library-page.twig

@@ -35,10 +35,10 @@
             <p class="text-muted">{% trans "Manage your media library." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="libraryView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Media" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -122,7 +122,7 @@
                         </div>
                     </div>
                     <div class="grid-with-folders-container ots-grid-with-folders">
-                        <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                        <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                             <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                             <div class="form-check">
                                 <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -134,7 +134,7 @@
                             <div id="container-folder-tree"></div>
                         </div>
                         <div id="datatable-container">
-                            <div class="XiboData card py-3 dashboard-card ots-table-card">
+                            <div class="XiboData card py-3 content-card ots-table-card">
                                 <div class="ots-table-toolbar">
                                     <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
                                     <div id="breadcrumbs"></div>

custom/otssignange/views/menuboard-page.twig

@@ -34,10 +34,10 @@
             <p class="text-muted">{% trans "Manage your menu boards and content." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-type="menuBoard" data-grid-name="menuBoardView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Menu Boards" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -78,7 +78,7 @@
                         </div>
                     </div>
                 <div class="grid-with-folders-container ots-grid-with-folders">
-                    <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                    <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                         <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                         <div class="form-check">
                             <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -90,7 +90,7 @@
                         <div id="container-folder-tree"></div>
                     </div>
                     <div id="datatable-container">
-                        <div class="XiboData card py-3 dashboard-card ots-table-card">
+                        <div class="XiboData card py-3 content-card ots-table-card">
                             <div class="ots-table-toolbar">
                                 <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
                                 <div id="breadcrumbs"></div>

custom/otssignange/views/module-page.twig

@@ -18,10 +18,10 @@
             <p class="text-muted">{% trans "Manage installed modules." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Modules" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -37,7 +37,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             <button class="btn btn-sm btn-primary ots-toolbar-btn" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>
                         </div>

custom/otssignange/views/playersoftware-page.twig

@@ -34,10 +34,10 @@
             <p class="text-muted">{% trans "Manage player software versions and downloads." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="playerSoftwareView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Player Versions" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -59,7 +59,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             {% if currentUser.featureEnabled("playersoftware.add") %}
                                 <button class="btn btn-sm btn-success ots-toolbar-btn" href="#" id="playerSoftwareUploadForm" title="{% trans "Upload a new Player Software file" %}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>

custom/otssignange/views/playlist-page.twig

@@ -32,10 +32,10 @@
             <p class="text-muted">{% trans "Create and manage content playlists." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="playlistView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Playlists" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -121,7 +121,7 @@
                     </div>
 
                     <div class="grid-with-folders-container ots-grid-with-folders">
-                        <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                        <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                             <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                             <div class="form-check">
                                 <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -133,7 +133,7 @@
                             <div id="container-folder-tree"></div>
                         </div>
                         <div id="datatable-container">
-                            <div class="XiboData card py-3 dashboard-card ots-table-card">
+                            <div class="XiboData card py-3 content-card ots-table-card">
                                 <div class="ots-table-toolbar">
                                     <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
                                     <div id="breadcrumbs"></div>

custom/otssignange/views/resolution-page.twig

@@ -35,10 +35,10 @@
             <p class="text-muted">{% trans "Manage display resolutions." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="resolutionView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Resolutions" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -57,7 +57,7 @@
                             </div>
                         </div>
                     </div>
-                <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                <div class="XiboData card pt-3 content-card ots-table-card">
                     <div class="ots-table-toolbar">
                         {% if currentUser.featureEnabled("resolution.add") %}
                             <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new resolution for use on layouts" %}" href="{{ url_for("resolution.add.form") }}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>

custom/otssignange/views/schedule-page.twig

@@ -35,10 +35,10 @@
             <p class="text-muted">{% trans "Schedule content to your displays." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="scheduleGridView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Schedule" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -196,7 +196,7 @@
                         </div>
                     </div>
                 
-                <div class="XiboSchedule card dashboard-card ots-table-card">
+                <div class="XiboSchedule card content-card ots-table-card">
                     <div class="ots-table-toolbar">
                         {% if currentUser.featureEnabled("schedule.add") %}
                             <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new Scheduled event" %}" href="{{ url_for("schedule.add.form") }}"><i class="fa fa-plus" aria-hidden="true"></i></button>

custom/otssignange/views/settings-page.twig

@@ -19,7 +19,7 @@
             <p class="text-muted">{% trans "Configure CMS settings." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="ots-table-toolbar">
                     {% if settings.SETTING_LIBRARY_TIDY_ENABLED %}

custom/otssignange/views/syncgroup-page.twig

@@ -34,10 +34,10 @@
             <p class="text-muted">{% trans "Create and manage synchronized Display groups." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="syncGroupGridView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Sync Groups" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -63,7 +63,7 @@
                     </div>
 
                     <div class="grid-with-folders-container ots-grid-with-folders">
-                        <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                        <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                             <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                             <div class="form-check">
                                 <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -75,7 +75,7 @@
                             <div id="container-folder-tree"></div>
                         </div>
                         <div id="datatable-container">
-                            <div class="XiboData card py-3 dashboard-card ots-table-card">
+                            <div class="XiboData card py-3 content-card ots-table-card">
                                 <div class="ots-table-toolbar">
                                     <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
                                     <div id="breadcrumbs"></div>

custom/otssignange/views/tag-page.twig

@@ -18,10 +18,10 @@
             <p class="text-muted">{% trans "Manage content tags." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="tagView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Tags" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -46,7 +46,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new Tag" %}" href="{{ url_for("tag.add.form") }}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
                             <button class="btn btn-sm btn-primary ots-toolbar-btn" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>

custom/otssignange/views/task-page.twig

@@ -18,16 +18,16 @@
             <p class="text-muted">{% trans "Manage scheduled system tasks." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card" style="display:none;">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card" style="display:none;">
                         <div class="FilterDiv card-body" id="Filter">
                             <form class="form-inline">
                             </form>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             {% if settings.TASK_CONFIG_LOCKED_CHECKB == 0 or settings.TASK_CONFIG_LOCKED_CHECKB == "Unchecked" %}
                                 <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" href="{{ url_for("task.add.form") }}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>

custom/otssignange/views/template-page.twig

@@ -34,10 +34,10 @@
             <p class="text-muted">{% trans "Manage your reusable templates." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="templateView">
-                <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                     <div class="ots-filter-header">
                         <h3 class="ots-filter-title">{% trans "Filter Templates" %}</h3>
                         <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -63,7 +63,7 @@
                     </div>
                 </div>
                 <div class="grid-with-folders-container ots-grid-with-folders">
-                    <div class="grid-folder-tree-container p-3 dashboard-card ots-folder-tree" id="grid-folder-filter">
+                    <div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
                         <input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
                         <div class="form-check">
                             <input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
@@ -75,7 +75,7 @@
                         <div id="container-folder-tree"></div>
                     </div>
                     <div id="datatable-container">
-                        <div class="XiboData card py-3 dashboard-card ots-table-card">
+                        <div class="XiboData card py-3 content-card ots-table-card">
                             <div class="ots-table-toolbar">
                                 <button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
                                 <div id="breadcrumbs"></div>

custom/otssignange/views/transition-page.twig

@@ -18,16 +18,16 @@
             <p class="text-muted">{% trans "Manage display transitions." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card" style="display:none;">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card" style="display:none;">
                         <div class="FilterDiv card-body" id="Filter">
                             <form class="form-inline">
                             </form>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             <button class="btn btn-sm btn-primary ots-toolbar-btn" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>
                         </div>

custom/otssignange/views/user-page.twig

@@ -18,10 +18,10 @@
             <p class="text-muted">{% trans "Manage system users and permissions." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="usersView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter Users" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -50,7 +50,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             {% if currentUser.isSuperAdmin() or (currentUser.isGroupAdmin() and currentUser.featureEnabled("users.add")) %}
                                 {% if currentUser.getOptionValue("isAlwaysUseManualAddUserForm", 0) %}

custom/otssignange/views/usergroup-page.twig

@@ -18,10 +18,10 @@
             <p class="text-muted">{% trans "Manage user groups and permissions." %}</p>
         </div>
 
-        <div class="widget dashboard-card ots-displays-card">
+        <div class="widget content-card ots-displays-card">
             <div class="widget-body ots-displays-body">
                 <div class="XiboGrid" id="{{ random() }}" data-grid-name="userGroupView">
-                    <div class="XiboFilter card mb-3 bg-light dashboard-card ots-filter-card">
+                    <div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
                         <div class="ots-filter-header">
                             <h3 class="ots-filter-title">{% trans "Filter User Groups" %}</h3>
                             <button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
@@ -37,7 +37,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="XiboData card pt-3 dashboard-card ots-table-card">
+                    <div class="XiboData card pt-3 content-card ots-table-card">
                         <div class="ots-table-toolbar">
                             {% if currentUser.isSuperAdmin() %}
                                 <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new User Group" %}" href="{{ url_for("group.add.form") }}"><i class="fa fa-users" aria-hidden="true"></i></button>