/* =====================================================================
   M8X EMERALD - GLOBAL PHPRUNNER THEME v2.2
   Updated 2026-10-23 for M8X Customer App / PHPRunner 11.3.

   INSTALL: REPLACE the earlier complete M8X EMERALD theme block.
   Use Style Editor > Custom CSS > Global. No HTML/style tags.
   Keep unrelated project CSS outside the original marked theme block.
   Do not append this file beneath older copies of the M8X theme.

   NATIVE PROFILE: Direct header/profile styling has been removed.
   Non-login component selectors exclude .r-topheader and its descendants.
   Keep the native PHPRunner Login/Profile control in Page Designer.
   PHPRunner owns its dropdown behavior and permission-controlled actions.
   Body text defaults can still inherit; no native style reset is applied.

   LOGIN: Section 11 styles the inner form panel. Replace the previous
   M8X Login OnLoad block with the v2.2 m8x_login_onload.js.
   FIRST remove the photo column, blank spacer rows and old decorative
   heading/subtitle in Login Page Designer. See README for exact steps.

   All styles are screen-only. Print/rprint styling remains excluded.
   Prepared against the supplied CSS and documented PHPRunner hooks.
   The current generated login/profile HTML and live app were not supplied.
   ===================================================================== */

@media screen {
  :root {
    --m8x-ui-version: 2.2;
    --m8x-emerald: #047857;
    --m8x-emerald-dark: #065f46;
    --m8x-emerald-deep: #064e3b;
    --m8x-emerald-bright: #10b981;
    --m8x-emerald-soft: #e8f6ef;
    --m8x-emerald-pale: #f1faf5;
    --m8x-canvas: #f4f7f5;
    --m8x-surface: #ffffff;
    --m8x-panel: #f7faf8;
    --m8x-border: #d7e3dc;
    --m8x-border-soft: #e7eee9;
    --m8x-text: #1e322a;
    --m8x-muted: #5f7269;
    --m8x-readonly: #edf2ef;
    --m8x-danger: #b91c1c;
    --m8x-danger-soft: #fff1f2;
    --m8x-warning: #92400e;
    --m8x-warning-soft: #fff8e6;
    --m8x-focus: rgba(4, 120, 87, .18);
    --m8x-radius: 10px;
    --m8x-control-radius: 6px;
    --m8x-control-height: 42px;
    --m8x-font: "Segoe UI", Arial, Helvetica, sans-serif;
    --m8x-shadow: 0 2px 8px rgba(18, 60, 43, .045);
  }

  /* ==================================================================
     01 - APPLICATION SURFACES / TYPE
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) {
    background-color: var(--m8x-canvas) !important;
    color: var(--m8x-text) !important;
    font-family: var(--m8x-font) !important;
    font-size: 14px;
    line-height: 1.45;
  }
  html body:not(.function-print):not(.function-rprint) .r-body:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-content:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-content-col:not(:where(.r-topheader, .r-topheader *)) {
    min-width: 0;
    background-color: var(--m8x-canvas) !important;
  }
  html body:not(.function-print):not(.function-rprint) .r-page-title:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .rnr-page-title:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="page_title"] h1:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="page_title"] h2:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="page_title"] h3:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-emerald-deep) !important;
    font-family: var(--m8x-font) !important;
    font-weight: 650 !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    letter-spacing: -.35px;
    overflow-wrap: break-word;
  }
  html body:not(.function-print):not(.function-rprint) .r-body a:not(.btn):not(.label):not(.badge):not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .modal-body a:not(.btn):not(.label):not(.badge):not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-emerald);
  }
  html body:not(.function-print):not(.function-rprint) .text-muted:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .help-block:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-muted);
  }
  html body:not(.function-print):not(.function-rprint) input[type="checkbox"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) input[type="radio"]:not(:where(.r-topheader, .r-topheader *)) {
    accent-color: var(--m8x-emerald);
  }

  /* ==================================================================
     02 - SIDEBAR; NATIVE HEADER USES PHPRUNNER STYLES
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) .r-left:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-sidebar:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-surface) !important;
    border-right: 1px solid var(--m8x-border) !important;
    box-shadow: 2px 0 10px rgba(18,60,43,.035) !important;
    font-family: var(--m8x-font) !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) [data-logo-cell]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) [data-itemtype="logo"]:not(:where(.r-topheader, .r-topheader *)) {
    background: var(--m8x-surface) !important;
    color: var(--m8x-emerald-dark) !important;
    box-shadow: none !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) [data-itemtype="logo"]:not(:where(.r-topheader, .r-topheader *)) {
    font-family: var(--m8x-font) !important;
    font-weight: 700 !important;
    letter-spacing: -.3px;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) :is(.nav,.r-menu,.r-menu-inner,.rnr-b-vmenu) li > a:not(:where(.r-topheader, .r-topheader *)) {
    background-image: none !important;
    border-radius: 7px !important;
    color: #435b50 !important;
    font-family: var(--m8x-font) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) :is(.nav,.r-menu,.r-menu-inner,.rnr-b-vmenu) li > a:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) :is(.nav,.r-menu,.r-menu-inner,.rnr-b-vmenu) li > a:focus-visible:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-pale) !important;
    color: var(--m8x-emerald-dark) !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) :is(.nav,.r-menu,.r-menu-inner,.rnr-b-vmenu) li.active > a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) a[aria-current="page"]:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-soft) !important;
    color: var(--m8x-emerald-dark) !important;
    font-weight: 650 !important;
    box-shadow: inset 3px 0 0 var(--m8x-emerald) !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) :is(.nav,.r-menu,.rnr-b-vmenu) a :is(.glyphicon,.fa,.fas,.far):not(:where(.r-topheader, .r-topheader *)) {
    color: inherit !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) .panel:not(:where(.r-topheader, .r-topheader *)) {
    border-color: var(--m8x-border) !important;
    box-shadow: none !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-left,.r-sidebar) .panel > .panel-heading:not(:where(.r-topheader, .r-topheader *)) {
    background: var(--m8x-panel) !important;
    color: var(--m8x-emerald-dark) !important;
    border-color: var(--m8x-border) !important;
  }

  /* ==================================================================
     03 - BUTTONS / TOOLBARS; NEVER UNHIDE AN ACTION
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) .btn:not(:where(.r-topheader, .r-topheader *)) {
    font-family: var(--m8x-font) !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.45;
    border-radius: var(--m8x-control-radius) !important;
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease;
  }
  html body:not(.function-print):not(.function-rprint) .btn-primary:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-success:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald) !important;
    border-color: var(--m8x-emerald) !important;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn-primary:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-primary:focus:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-success:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-success:focus:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-primary:active:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-success:active:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-dark) !important;
    border-color: var(--m8x-emerald-dark) !important;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn-default:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-secondary:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #fff !important;
    border-color: #b9cdc1 !important;
    color: #2c4d3d !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn-default:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-default:focus:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-secondary:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn-secondary:focus:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-pale) !important;
    border-color: var(--m8x-emerald) !important;
    color: var(--m8x-emerald-dark) !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn-info:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #0f766e !important;
    border-color: #0f766e !important;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn-danger:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-danger) !important;
    border-color: var(--m8x-danger) !important;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn-danger:hover:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #991b1b !important;
    border-color: #991b1b !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn-warning:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #fef3c7 !important;
    border-color: #d9ae54 !important;
    color: #78350f !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn-link:not(:where(.r-topheader, .r-topheader *)) {
    background: transparent !important;
    color: var(--m8x-emerald) !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn:focus-visible:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) a:focus-visible:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) button:focus-visible:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) select:focus-visible:not(:where(.r-topheader, .r-topheader *)) {
    outline: 2px solid var(--m8x-emerald) !important;
    outline-offset: 3px;
  }
  html body:not(.function-print):not(.function-rprint) .btn:disabled:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn.disabled:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .btn[aria-disabled="true"]:not(:where(.r-topheader, .r-topheader *)) {
    opacity: .55 !important;
    cursor: not-allowed !important;
  }
  html body:not(.function-print):not(.function-rprint) :is([data-itemtype="add"],[data-itemtype="add_save"],[data-itemtype="edit_save"],[data-itemtype="search_search"],[data-itemtype="view_back_list"],[data-itemtype="add_back_list"],[data-itemtype="edit_back_list"]) > .btn:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .modal-footer > .btn:not(:where(.r-topheader, .r-topheader *)) {
    min-height: 36px;
    padding: 8px 14px;
  }
  html body:not(.function-print):not(.function-rprint) :is([data-itemtype="grid_edit"],[data-itemtype="grid_view"],[data-itemtype="grid_copy"],[data-itemtype="grid_delete"]) > a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(a,button)[data-itemtype="grid_edit"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(a,button)[data-itemtype="grid_view"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(a,button)[data-itemtype="grid_copy"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(a,button)[data-itemtype="grid_delete"]:not(:where(.r-topheader, .r-topheader *)) {
    border-radius: 5px;
    color: var(--m8x-emerald) !important;
    text-decoration: none !important;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="grid_delete"] > a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) a[data-itemtype="grid_delete"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) button[data-itemtype="grid_delete"]:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-danger) !important;
  }
  html body:not(.function-print):not(.function-rprint) .r-body > [data-location="above-grid"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-body > [data-location="below-grid"]:not(:where(.r-topheader, .r-topheader *)) {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* ==================================================================
     04 - FORM SECTIONS / ADD, EDIT AND VIEW
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) .r-edit-form:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-view-form:not(:where(.r-topheader, .r-topheader *)) {
    font-family: var(--m8x-font) !important;
    color: var(--m8x-text) !important;
    max-width: 100%;
    min-width: 0;
  }
  html body:not(.function-print):not(.function-rprint) .form-section:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="section"] > .panel:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-details-grid > .panel:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .rnr-details > .panel:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-surface) !important;
    border: 1px solid var(--m8x-border) !important;
    border-radius: var(--m8x-radius) !important;
    box-shadow: var(--m8x-shadow) !important;
  }
  html body:not(.function-print):not(.function-rprint) .form-section > .panel-heading:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="section"] > .panel-heading:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="section"] > .panel > .panel-heading:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .panel-heading[data-toggle="collapse"][aria-controls]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-details-grid .panel > .panel-heading:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .rnr-details .panel > .panel-heading:not(:where(.r-topheader, .r-topheader *)) {
    background: var(--m8x-emerald-dark) !important;
    color: #fff !important;
    border-color: var(--m8x-emerald-dark) !important;
    border-radius: 9px 9px 0 0 !important;
    padding: 12px 16px !important;
    font-family: var(--m8x-font) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.form-section > .panel-heading,[data-itemtype="section"] > .panel-heading,[data-itemtype="section"] > .panel > .panel-heading,.panel-heading[data-toggle="collapse"][aria-controls],.r-details-grid .panel > .panel-heading,.rnr-details .panel > .panel-heading) :is(.panel-title,.panel-title a,.panel-title span,.glyphicon,.fa,[data-itemtype="details_title"],[data-itemtype="details_found"]):not(:where(.r-topheader, .r-topheader *)) {
    color: #fff !important;
    text-shadow: none !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.form-section > .panel-heading,[data-itemtype="section"] > .panel-heading,[data-itemtype="section"] > .panel > .panel-heading,.panel-heading[data-toggle="collapse"][aria-controls],.r-details-grid .panel > .panel-heading,.rnr-details .panel > .panel-heading) .panel-title:not(:where(.r-topheader, .r-topheader *)) {
    margin: 0 !important;
    font-family: var(--m8x-font) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    white-space: normal;
    overflow-wrap: break-word;
  }
  html body:not(.function-print):not(.function-rprint) :is(.form-section > .panel-heading,[data-itemtype="section"] > .panel-heading,[data-itemtype="section"] > .panel > .panel-heading,.panel-heading[data-toggle="collapse"][aria-controls],.r-details-grid .panel > .panel-heading,.rnr-details .panel > .panel-heading) .panel-title a:not(:where(.r-topheader, .r-topheader *)) {
    background: transparent !important;
    text-decoration: none !important;
  }
  html body:not(.function-print):not(.function-rprint) .form-section > .panel-body:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .form-section > .panel-collapse > .panel-body:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="section"] > .panel > .panel-body:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="section"] > .panel > .panel-collapse > .panel-body:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-panel) !important;
    border-color: var(--m8x-border) !important;
    padding: 16px !important;
    border-radius: 0 0 9px 9px;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-edit-form,.r-view-form) [data-itemtype="text"] h4:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-emerald-dark) !important;
    font-family: var(--m8x-font) !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    line-height: 1.4;
  }
  html body:not(.function-print):not(.function-rprint) .r-edit-label:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-view-label:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="edit_field_label"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="view_field_label"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(.r-edit-form,.r-view-form) .control-label:not(:where(.r-topheader, .r-topheader *)) {
    color: #29483a !important;
    font-family: var(--m8x-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
  }
  html body:not(.function-print):not(.function-rprint) .r-edit-label label:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-view-label label:not(:where(.r-topheader, .r-topheader *)) {
    font: inherit !important;
    color: inherit;
  }
  html body:not(.function-print):not(.function-rprint) .r-integrated-field:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="integrated_edit_field"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="integrated_view_field"]:not(:where(.r-topheader, .r-topheader *)) {
    min-width: 0;
    max-width: 100%;
  }
  html body:not(.function-print):not(.function-rprint) .r-view-field:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-view-value:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-text) !important;
    font-family: var(--m8x-font) !important;
    font-size: 14px !important;
    line-height: 1.55;
    overflow-wrap: break-word;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="integrated_view_field"] > .r-view-field:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #fff;
    border: 1px solid var(--m8x-border-soft);
    border-radius: var(--m8x-control-radius);
    padding: 10px 12px;
    min-height: 42px;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-edit-field,.r-view-field) :is(a,a:visited):not(.btn):not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-emerald) !important;
  }
  html body:not(.function-print):not(.function-rprint) .required:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .rnr-required:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .field-required:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-danger) !important;
  }

  /* ==================================================================
     05 - INPUTS / LOOKUPS / CALENDARS; NATIVE CONTROL GEOMETRY
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)):not(:where(.r-topheader, .r-topheader *)) {
    font-family: var(--m8x-font) !important;
    font-size: 14px !important;
    color: var(--m8x-text) !important;
    background-color: var(--m8x-surface) !important;
    border: 1px solid #c9d9cf !important;
    border-radius: var(--m8x-control-radius) !important;
    box-shadow: none !important;
    max-width: 100%;
    min-width: 0;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-edit-field,[data-itemtype="edit_field"],[data-itemtype="grid_edit_field"]) :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select.form-control:not([multiple]):not([size]),select.form-control[size="1"]):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)):not(:where(.r-topheader, .r-topheader *)) {
    height: var(--m8x-control-height) !important;
    min-height: var(--m8x-control-height) !important;
    padding: 9px 12px !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-edit-field,[data-itemtype="edit_field"],[data-itemtype="grid_edit_field"]) textarea.form-control:not(:where(.r-topheader, .r-topheader *)) {
    min-height: 96px;
    padding: 10px 12px !important;
    resize: vertical;
    line-height: 1.5;
  }
  html body:not(.function-print):not(.function-rprint) :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)):focus:not(:where(.r-topheader, .r-topheader *)) {
    border-color: var(--m8x-emerald) !important;
    box-shadow: 0 0 0 3px var(--m8x-focus) !important;
    outline: 0;
  }
  html body:not(.function-print):not(.function-rprint) .form-control:not(:where(.r-topheader, .r-topheader *))::placeholder {
    color: #71867b;
    opacity: 1;
  }
  html body:not(.function-print):not(.function-rprint) :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)):is(:disabled,[readonly]):not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-edit-field input[readonly]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-edit-field textarea[readonly]:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-readonly) !important;
    border-color: #d6e0da !important;
    color: #4e6257 !important;
    box-shadow: none !important;
  }
  html body:not(.function-print):not(.function-rprint) .form-control:disabled:not(:where(.r-topheader, .r-topheader *)) {
    cursor: not-allowed;
  }
  html body:not(.function-print):not(.function-rprint) .r-edit-field > .readonly:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-edit-field > .r-readonly-control:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-readonly);
    color: #4e6257;
    border: 1px solid #d6e0da;
    border-radius: var(--m8x-control-radius);
    padding: 10px 12px;
  }
  html body:not(.function-print):not(.function-rprint) .input-group > :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)):not(:first-child):not(:where(.r-topheader, .r-topheader *)) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  html body:not(.function-print):not(.function-rprint) .input-group > :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)):not(:last-child):not(:where(.r-topheader, .r-topheader *)) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  html body:not(.function-print):not(.function-rprint) .input-group-addon:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-soft) !important;
    border-color: #c9d9cf !important;
    color: var(--m8x-emerald-dark) !important;
  }
  html body:not(.function-print):not(.function-rprint) .input-group-addon:has(.glyphicon-calendar,.glyphicon-time,.fa-calendar,.fa-clock):not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-edit-field .input-group-btn > .btn:has(.glyphicon-calendar,.glyphicon-time,.fa-calendar,.fa-clock):not(:where(.r-topheader, .r-topheader *)) {
    background: var(--m8x-emerald) !important;
    border-color: var(--m8x-emerald) !important;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .input-group-addon :is(.glyphicon-calendar,.glyphicon-time,.fa-calendar,.fa-clock):not(:where(.r-topheader, .r-topheader *)) {
    color: inherit !important;
  }
  html body:not(.function-print):not(.function-rprint) .select2-container .select2-selection--single:not(:where(.r-topheader, .r-topheader *)) {
    border: 1px solid #c9d9cf !important;
    border-radius: var(--m8x-control-radius) !important;
    background: #fff !important;
    min-height: var(--m8x-control-height);
    box-shadow: none !important;
  }
  html body:not(.function-print):not(.function-rprint) .select2-container--default .select2-selection--single .select2-selection__rendered:not(:where(.r-topheader, .r-topheader *)) {
    font-family: var(--m8x-font);
    color: var(--m8x-text) !important;
    font-size: 14px;
    line-height: 40px;
    padding-left: 12px;
  }
  html body:not(.function-print):not(.function-rprint) .select2-container--default .select2-selection--single .select2-selection__arrow:not(:where(.r-topheader, .r-topheader *)) {
    height: 40px;
  }
  html body:not(.function-print):not(.function-rprint) .select2-dropdown:not(:where(.r-topheader, .r-topheader *)) {
    border-color: #b4cebe !important;
    box-shadow: 0 8px 20px rgba(18,60,43,.13);
    font-family: var(--m8x-font);
  }
  html body:not(.function-print):not(.function-rprint) .select2-container--default .select2-results__option--highlighted[aria-selected]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .select2-container--default .select2-results__option--highlighted[aria-selected="false"]:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald) !important;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .select2-container--default.select2-container--disabled .select2-selection--single:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-readonly) !important;
    color: #4e6257 !important;
  }
  html body:not(.function-print):not(.function-rprint) .select2-container--default.select2-container--focus .select2-selection--single:not(:where(.r-topheader, .r-topheader *)) {
    border-color: var(--m8x-emerald) !important;
    box-shadow: 0 0 0 3px var(--m8x-focus) !important;
  }
  html body:not(.function-print):not(.function-rprint) .has-error :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)):not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *))[aria-invalid="true"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .has-error .select2-selection--single:not(:where(.r-topheader, .r-topheader *)) {
    border-color: var(--m8x-danger) !important;
    box-shadow: none !important;
  }
  html body:not(.function-print):not(.function-rprint) .has-error .control-label:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .has-error .help-block:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-edit-error:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-edit-validation-error:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-danger) !important;
  }
  html body:not(.function-print):not(.function-rprint) .bootstrap-datetimepicker-widget td.active:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .bootstrap-datetimepicker-widget td.active:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .datepicker td.active:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .datepicker td.active:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .ui-datepicker .ui-state-active:not(:where(.r-topheader, .r-topheader *)) {
    background: var(--m8x-emerald) !important;
    color: #fff !important;
    text-shadow: none !important;
  }

  /* ==================================================================
     06 - LISTS / MASTER-DETAIL GRIDS / HORIZONTAL SCROLL
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form):not(:where(.r-topheader, .r-topheader *)) {
    background-color: #fff !important;
    color: var(--m8x-text) !important;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--m8x-border) !important;
    font-family: var(--m8x-font) !important;
    font-size: 14px !important;
    box-shadow: none;
  }
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > :is(thead,tbody,tfoot) > tr > :is(th,td):not(:where(.r-topheader, .r-topheader *)) {
    padding: 10px 12px !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--m8x-border-soft) !important;
    line-height: 1.45 !important;
    vertical-align: middle !important;
    color: var(--m8x-text);
    font-family: var(--m8x-font) !important;
    font-size: 14px !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > thead > tr > :is(th,td):not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > tbody > .r-gridrow-header > :is(th,td):not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > tbody > tr > [data-field][data-cellid$="_head"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .r-gridrow-header > :is(th,td):not(:where(.r-topheader, .r-topheader *)) {
    background: #eaf4ee !important;
    color: #23523c !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.45 !important;
    border-bottom: 1px solid #c6dcd0 !important;
    white-space: normal;
    text-transform: none;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="grid_field_label"]:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="grid_field_label"] a:not(:where(.r-topheader, .r-topheader *)) {
    color: #23523c !important;
    font-family: var(--m8x-font) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > tbody > tr:not(.r-gridrow-header):nth-child(even) > td:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #f8fbf9;
  }
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > tbody > tr.r-gridrow:hover > td:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > tbody > tr[id^="gridRow"]:hover > td:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #eef8f2 !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > tbody > tr.active > td:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > tbody > tr.r-selected > td:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #e0f1e7 !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-grid,.rnr-gridtable-wrapper,.table-responsive):not(table):has(> table):not(:where(.r-topheader, .r-topheader *)) {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: auto;
    scrollbar-color: #9bb9a8 #edf4ef;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-grid,.rnr-gridtable-wrapper,.table-responsive):not(table):has(> table):not(:where(.r-topheader, .r-topheader *))::-webkit-scrollbar {
    height: 11px;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-grid,.rnr-gridtable-wrapper,.table-responsive):not(table):has(> table):not(:where(.r-topheader, .r-topheader *))::-webkit-scrollbar-thumb {
    background: #9bb9a8;
    border-radius: 9px;
    border: 2px solid #edf4ef;
  }
  html body:not(.function-print):not(.function-rprint) :is(.r-grid,.rnr-gridtable-wrapper,.table-responsive):not(table):has(> table):not(:where(.r-topheader, .r-topheader *))::-webkit-scrollbar-track {
    background: #edf4ef;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="grid_field"]:not(:where(.r-topheader, .r-topheader *)) {
    font-family: var(--m8x-font);
    line-height: 1.45;
  }
  html body:not(.function-print):not(.function-rprint) :is(table.r-grid, table.rnr-gridtable, table.r-data-grid, table.r-datagrid, .r-grid > table, table.bs-grid, table.table[data-location="grid"]):not(.r-edit-form):not(.r-view-form) > :is(thead,tbody,tfoot) > tr > :is([data-field$="_amount"],[data-field="amount"],[data-field="amount_due"],[data-field="line_total"],[data-field="unit_price"],[data-field="standard_price"],[data-field="standard_cost"],[data-field="quantity"]):not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="grid_field"]:is([data-field$="_amount"],[data-field="amount"],[data-field="amount_due"],[data-field="line_total"],[data-field="unit_price"],[data-field="standard_price"],[data-field="standard_cost"],[data-field="quantity"]):not(:where(.r-topheader, .r-topheader *)) {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="grid_field"]:is([data-field="invoice_no"],[data-field="credit_note_no"],[data-field="sku"],[data-field="tin"],[data-field="buyer_tin"],[data-field="seller_tin"]):not(:where(.r-topheader, .r-topheader *)) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="grid_field"]:is([data-field="item_description"],[data-field="remarks"],[data-field="error_message"],[data-field$="_address"]):not(:where(.r-topheader, .r-topheader *)) {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="grid_field"]:is([data-field="status"],[data-field="delivery_status"]):not(:where(.r-topheader, .r-topheader *)) {
    padding: 3px 8px;
    border: 1px solid #d4dfd8;
    border-radius: 999px;
    background: #f1f5f2;
    color: #435c4e !important;
    font-size: 11px !important;
    font-weight: 650;
    line-height: 1.8;
    white-space: nowrap;
  }
  html body:not(.function-print):not(.function-rprint) .r-grid table .btn:not(:where(.r-topheader, .r-topheader *)) {
    font-size: 12px;
  }

  /* ==================================================================
     07 - INVOICE FINANCIAL SUMMARY / IDENTITY (DISPLAY ONLY)
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) [data-itemtype="integrated_view_field"][data-field="invoice_no"] > .r-view-field:not(:where(.r-topheader, .r-topheader *)) {
    font-weight: 650;
    color: var(--m8x-emerald-deep) !important;
    overflow-wrap: anywhere;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="integrated_view_field"]:is([data-field$="_amount"],[data-field="amount"],[data-field="amount_due"],[data-field="line_total"],[data-field="unit_price"],[data-field="standard_price"],[data-field="standard_cost"],[data-field="quantity"]) > .r-view-field:not(:where(.r-topheader, .r-topheader *)) {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="integrated_view_field"][data-field="total_amount"] > .r-view-field:not(:where(.r-topheader, .r-topheader *)) {
    font-size: 18px !important;
    font-weight: 650 !important;
    color: var(--m8x-emerald-deep) !important;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="integrated_view_field"][data-field="amount_due"] > .r-view-field:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-soft) !important;
    border-color: #a7d5bc !important;
    color: var(--m8x-emerald-dark) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    padding: 12px 14px;
  }

  /* ==================================================================
     08 - SEARCH / PAGINATION / TABS / MENUS
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) .pagination > li > a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .pagination > li > span:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #fff !important;
    border-color: var(--m8x-border) !important;
    color: var(--m8x-emerald-dark) !important;
    font-family: var(--m8x-font);
    font-size: 13px;
    padding: 7px 12px;
    box-shadow: none !important;
  }
  html body:not(.function-print):not(.function-rprint) .pagination > .active > a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .pagination > .active > span:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .pagination > .active > a:hover:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald) !important;
    border-color: var(--m8x-emerald) !important;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .pagination > li:not(.active):not(.disabled) > a:hover:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-soft) !important;
  }
  html body:not(.function-print):not(.function-rprint) .pagination > .disabled > a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .pagination > .disabled > span:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #f5f8f6 !important;
    color: #71857a !important;
  }
  html body:not(.function-print):not(.function-rprint) [data-itemtype="page_size"] select:not(:where(.r-topheader, .r-topheader *)) {
    border: 1px solid var(--m8x-border) !important;
    border-radius: 6px;
    color: var(--m8x-emerald-dark) !important;
    background: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .nav-tabs:not(:where(.r-topheader, .r-topheader *)) {
    border-bottom-color: var(--m8x-border) !important;
  }
  html body:not(.function-print):not(.function-rprint) .nav-tabs > li > a:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-muted) !important;
    font-weight: 600;
    border-radius: 6px 6px 0 0;
  }
  html body:not(.function-print):not(.function-rprint) .nav-tabs > li.active > a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .nav-tabs > li.active > a:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .nav-tabs > li.active > a:focus:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #fff !important;
    color: var(--m8x-emerald-dark) !important;
    border-color: var(--m8x-border) !important;
    border-bottom-color: #fff !important;
    box-shadow: inset 0 3px 0 var(--m8x-emerald);
  }
  html body:not(.function-print):not(.function-rprint) .nav-tabs > li:not(.active) > a:hover:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-pale) !important;
    border-color: transparent !important;
  }
  html body:not(.function-print):not(.function-rprint) .dropdown-menu:not(:where(.r-topheader, .r-topheader *)) {
    border: 1px solid var(--m8x-border) !important;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(18,60,43,.12);
    background: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .dropdown-menu > li > a:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-text) !important;
    font-family: var(--m8x-font);
    font-size: 13px;
    padding: 8px 14px;
  }
  html body:not(.function-print):not(.function-rprint) .dropdown-menu > li > a:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .dropdown-menu > li > a:focus:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-soft) !important;
    color: var(--m8x-emerald-dark) !important;
  }
  html body:not(.function-print):not(.function-rprint) .dropdown-menu > .active > a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .dropdown-menu > .active > a:hover:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald) !important;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .dropdown-menu > .disabled > a:not(:where(.r-topheader, .r-topheader *)) {
    color: #83958b !important;
  }

  /* ==================================================================
     09 - POPUP FORMS / ALERTS; BOOTSTRAP OWNS OPEN/CLOSE
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) .modal-content:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-surface) !important;
    border: 1px solid #c7dcd0 !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 70px rgba(6,40,27,.23) !important;
  }
  html body:not(.function-print):not(.function-rprint) .modal-header:not(:where(.r-topheader, .r-topheader *)) {
    background: var(--m8x-emerald-dark) !important;
    border-bottom: 1px solid var(--m8x-emerald-dark) !important;
    border-radius: 11px 11px 0 0 !important;
    color: #fff !important;
    padding: 16px 20px;
  }
  html body:not(.function-print):not(.function-rprint) .modal-header .modal-title:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .modal-header h4:not(:where(.r-topheader, .r-topheader *)) {
    font-family: var(--m8x-font) !important;
    font-size: 19px !important;
    font-weight: 650;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .modal-header .close:not(:where(.r-topheader, .r-topheader *)) {
    color: #fff !important;
    opacity: .95;
    text-shadow: none !important;
    font-size: 26px;
  }
  html body:not(.function-print):not(.function-rprint) .modal-body:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-canvas);
    padding: 18px;
  }
  html body:not(.function-print):not(.function-rprint) .modal-footer:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #fff !important;
    border-top: 1px solid var(--m8x-border-soft) !important;
    border-radius: 0 0 11px 11px;
    padding: 14px 20px;
  }
  html body:not(.function-print):not(.function-rprint) .alert:not(:where(.r-topheader, .r-topheader *)) {
    border-radius: 8px;
    font-family: var(--m8x-font);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: none;
  }
  html body:not(.function-print):not(.function-rprint) .alert-success:not(:where(.r-topheader, .r-topheader *)) {
    color: #14532d !important;
    background-color: #edf9f0 !important;
    border-color: #bbdec5 !important;
  }
  html body:not(.function-print):not(.function-rprint) .alert-info:not(:where(.r-topheader, .r-topheader *)) {
    color: #115e59 !important;
    background-color: #effaf8 !important;
    border-color: #c4e5de !important;
  }
  html body:not(.function-print):not(.function-rprint) .alert-warning:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-warning) !important;
    background-color: var(--m8x-warning-soft) !important;
    border-color: #f1d89d !important;
  }
  html body:not(.function-print):not(.function-rprint) .alert-danger:not(:where(.r-topheader, .r-topheader *)) {
    color: #991b1b !important;
    background-color: var(--m8x-danger-soft) !important;
    border-color: #fecdd3 !important;
  }
  html body:not(.function-print):not(.function-rprint) .progress-bar:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .progress-bar-success:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald) !important;
    background-image: none !important;
  }

  /* ==================================================================
     10 - EXISTING M8X CUSTOM DASHBOARD / COMPANY SWITCHER
     ================================================================== */
  html body:not(.function-print):not(.function-rprint) .m8xd-root:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-canvas) !important;
    color: var(--m8x-text) !important;
    font-family: var(--m8x-font) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8x-topbar:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-topbar:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-panel:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-card:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8x-card:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-surface) !important;
    border-color: var(--m8x-border) !important;
    box-shadow: var(--m8x-shadow) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8x-topbar-mark:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-logo:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-btn-primary:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8x-button-primary:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald) !important;
    color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-btn-primary:hover:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8x-button-primary:hover:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-dark) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8x-topbar-plan:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-plan span:not(:where(.r-topheader, .r-topheader *)) {
    background-color: var(--m8x-emerald-soft) !important;
    color: var(--m8x-emerald-dark) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-panel-title a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-panel-link:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-table td a:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-links a b:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-links a:hover:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-emerald) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-card:hover:not(:where(.r-topheader, .r-topheader *)) {
    border-color: #9acbb0 !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-card strong:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-welcome h1:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-panel-title strong:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8x-page-title:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8x-kpi-value:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-emerald-deep) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-card span:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-welcome p:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8x-topbar-field label:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-context label:not(:where(.r-topheader, .r-topheader *)) {
    color: var(--m8x-muted) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-context select:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8x-topbar-field select:not(:where(.r-topheader, .r-topheader *)) {
    border-color: #c9d9cf !important;
    color: var(--m8x-text) !important;
    background-color: #fff !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-context select:focus:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8x-topbar-field select:focus:not(:where(.r-topheader, .r-topheader *)) {
    border-color: var(--m8x-emerald) !important;
    outline: 2px solid var(--m8x-focus) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-table th:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #eaf4ee !important;
    color: #23523c !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-track:not(:where(.r-topheader, .r-topheader *)) {
    background: var(--m8x-emerald-soft) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-bar:not(:where(.r-topheader, .r-topheader *)) {
    background: var(--m8x-emerald) !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-issued:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #dcfce7 !important;
    color: #166534 !important;
  }
  html body:not(.function-print):not(.function-rprint) .m8xd-draft:not(:where(.r-topheader, .r-topheader *)) {
    background-color: #fef3c7 !important;
    color: #854d0e !important;
  }

  /* Native .hidden, inline display:none, responsive breakpoints, collapse,
     disabled states and server permission logic are deliberately untouched.
     CSS does not create per-value DRAFT/ISSUED badges on generic grids.
     Existing m8xd-issued/m8xd-draft classes above are visual hooks only. */
}

@media screen and (max-width: 767px) {
  html body:not(.function-print):not(.function-rprint) .r-page-title:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="page_title"] :is(h1,h2,h3):not(:where(.r-topheader, .r-topheader *)) {
    font-size: 20px !important;
  }
  html body:not(.function-print):not(.function-rprint) .form-section > .panel-body:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .form-section > .panel-collapse > .panel-body:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) [data-itemtype="section"] > .panel > .panel-body:not(:where(.r-topheader, .r-topheader *)) {
    padding: 12px !important;
  }
  html body:not(.function-print):not(.function-rprint) :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)):not(:where(.r-topheader, .r-topheader *)) {
    font-size: 16px !important;
  }
  html body:not(.function-print):not(.function-rprint) .btn:not(.btn-xs):not(.btn-sm):not(:where(.r-topheader, .r-topheader *)) {
    min-height: 40px;
  }
  html body:not(.function-print):not(.function-rprint) .modal-body:not(:where(.r-topheader, .r-topheader *)) {
    padding: 12px;
  }
  html body:not(.function-print):not(.function-rprint) .modal-header:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .modal-footer:not(:where(.r-topheader, .r-topheader *)) {
    padding: 12px 16px;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  html body:not(.function-print):not(.function-rprint) .btn:not(:where(.r-topheader, .r-topheader *)),
  html body:not(.function-print):not(.function-rprint) .m8xd-card:not(:where(.r-topheader, .r-topheader *)) {
    transition: none !important;
  }
}

/* END module/grid/dashboard styles. Login additions follow. */

/* =====================================================================
   11 - LOGIN PAGE / REFERENCE LAYOUT
   Requires a single-column Login layout in Page Designer. Remove the
   decorative photo column, empty spacer rows, and old app title/subtitle.
   Styles activate after v2.2 Login OnLoad identifies the inner form panel.
   Actual authentication controls and messages remain PHPRunner-owned.
   ===================================================================== */
@media screen {
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) {
    --m8x-login-accent: var(--m8x-emerald, #047857);
    --m8x-login-accent-hover: var(--m8x-emerald-dark, #065f46);
    --m8x-login-background: #fafcfb;
    --m8x-login-field-border: #b6d7c9;
    --m8x-login-ring: rgba(4, 120, 87, .15);
    box-sizing: border-box;
    position: relative;
    margin: 0 !important;
    min-height: 100vh;
    min-height: 100svh;
    height: auto !important;
    padding: clamp(128px, 20vh, 180px) 20px 84px !important;
    background: var(--m8x-login-background) !important;
    color: #232b27 !important;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    line-height: 1.45;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) :is(.r-body, .r-content, .r-content-col) {
    background: transparent !important;
    min-width: 0;
  }

  /* The outer layout is a shell, never the fixed-width login card. */
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-shell {
    box-sizing: border-box;
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card {
    --alignment: left;
    --flex-alignment: flex-start;
    --indent-left: 0;
    --indent-right: 0;
    box-sizing: border-box;
    display: block !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    width: 440px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 34px 34px 30px !important;
    background: #fff !important;
    border: 1px solid #edf1ee !important;
    border-radius: 5px !important;
    box-shadow: 0 2px 4px rgba(22, 45, 32, .045) !important;
    color: #232b27 !important;
    overflow: visible;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-form:not(.m8x-login-card) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card .r-edit-form {
    width: 100% !important;
    min-width: 0;
    margin: 0;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-intro {
    margin: 0 0 24px;
    text-align: left;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-intro h1 {
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: #232b27 !important;
    font-family: inherit !important;
    font-size: 26px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -.7px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-intro h1 span,
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand-copy strong span {
    color: var(--m8x-login-accent) !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-intro p {
    margin: 0;
    color: #737c76;
    font-size: 12px;
    line-height: 1.6;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand {
    position: absolute;
    top: 38px;
    left: 42px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #232b27;
    user-select: none;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand-mark {
    display: grid;
    grid-template-columns: repeat(2, 21px);
    grid-template-rows: repeat(2, 21px);
    gap: 3px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand-mark i {
    background: var(--m8x-login-accent);
    border-radius: 3px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand-mark i:first-child {
    opacity: .73;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand-mark i:last-child {
    opacity: .47;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand-copy strong {
    display: block;
    font-size: 28px;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.8px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand-copy small {
    display: block;
    margin-top: 4px;
    color: #737c76;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .5px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .r-edit-label,
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) label:not(.checkbox label):not(.radio label) {
    margin-bottom: 5px;
    color: #303b34 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: left;
  }

  /* Match the existing global input selector's specificity, then add the
     login body class. This wins over its original !important properties. */
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)),
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card :is(input[type="text"], input[type="email"], input[type="password"]) {
    box-sizing: border-box;
    width: 100%;
    height: 42px !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    color: #25372d !important;
    background-color: #fcfdfc !important;
    border: 1px solid var(--m8x-login-field-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)):focus,
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card :is(input[type="text"], input[type="email"], input[type="password"]):focus {
    background: #fff !important;
    border-color: var(--m8x-login-accent) !important;
    box-shadow: 0 0 0 3px var(--m8x-login-ring) !important;
    outline: 0;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card :is(.has-error input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), input.form-control[aria-invalid="true"]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])) {
    border-color: #b91c1c !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card .form-group {
    margin-bottom: 15px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card .checkbox {
    margin: 4px 0 12px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card .checkbox label {
    color: #39473e !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--m8x-login-accent);
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) :is([data-itemtype="login_remind"], [data-itemtype="loginform_register_link"]) a {
    color: var(--m8x-login-accent) !important;
    font-size: 12px !important;
    font-weight: 400;
    text-decoration: none;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) :is([data-itemtype="login_remind"], [data-itemtype="loginform_register_link"]) a:hover {
    color: var(--m8x-login-accent-hover) !important;
    text-decoration: underline;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) [data-itemtype="login_button"] {
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0 12px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) [data-itemtype="login_button"] :is(a.btn, button, input[type="submit"]),
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) :is(a.btn, button, input[type="submit"])[data-itemtype="login_button"] {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 11px 16px !important;
    border: 1px solid var(--m8x-login-accent) !important;
    border-radius: 6px !important;
    background: var(--m8x-login-accent) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) [data-itemtype="login_button"] :is(a.btn, button, input[type="submit"]):hover,
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) :is(a.btn, button, input[type="submit"])[data-itemtype="login_button"]:hover {
    background: var(--m8x-login-accent-hover) !important;
    border-color: var(--m8x-login-accent-hover) !important;
  }

  /* Style a native Google button if configured. Google-rendered iframe
     controls keep their provider-owned rendering and behavior. */
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) [data-itemid="login_google"] {
    box-sizing: border-box;
    max-width: 100%;
    margin-top: 10px;
    margin-bottom: 16px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) [data-itemid="login_google"] :is(a.btn, button.btn),
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) :is(a.btn, button.btn)[data-itemid="login_google"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    background: #fff !important;
    color: #303b34 !important;
    border: 1px solid #b9c3bc !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: center;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) [data-itemtype="loginform_register_link"] {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) [data-itemtype="login_message"] {
    max-width: 100%;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-footer {
    position: absolute;
    right: 20px;
    bottom: 18px;
    left: 20px;
    margin: 0;
    color: #8a948d;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
  }


}

@media screen and (max-width: 600px) {
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) {
    padding: 116px 16px 74px !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card {
    padding: 28px 22px !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand {
    top: 28px;
    left: 24px;
    gap: 10px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand-mark {
    grid-template-columns: repeat(2, 18px);
    grid-template-rows: repeat(2, 18px);
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-brand-copy strong {
    font-size: 25px;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-intro h1 {
    font-size: 24px !important;
  }

  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) :is(input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select.form-control, textarea.form-control):not(:where(.bootstrap-datetimepicker-widget *, .bootstrap-timepicker-widget *, .datepicker-dropdown *, .ui-datepicker *, .ui-timepicker-wrapper *, .flatpickr-calendar *, .xdsoft_datetimepicker *, .daterangepicker *)),
  html body.function-login.m8x-login-enhanced:not(.function-print):not(.function-rprint) .m8x-login-card :is(input[type="text"], input[type="email"], input[type="password"]) {
    font-size: 16px !important;
    min-height: 44px !important;
    height: 44px !important;
  }
}

/* END M8X EMERALD GLOBAL v2.2 */