.elementor-1344630 .elementor-element.elementor-element-75c07ff{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-71bdb67 *//*
 * ===================================================================
 * CPS Theme Override for System Check Component
 * - Add this to your site's stylesheet.
 * ===================================================================
*/

/* 1. Redefine all component variables on its root element (#cps-syscheck-root)
      to apply the CPS theme colors and styles. */
#cps-syscheck-root {
    /* Main Theme Colors */
    --brand: #00515D;
    --brand-hover: #003F47;
    --text: #333;
    --muted: #555;
    --border: #e9ecef;
    --panel-bg: #fff;

    /* Status Colors */
    --ok: #0f5132;
    --ok-bg: #d1e7dd;
    --warn: #664d03;
    --warn-bg: #fff3cd;
    --bad: #842029;
    --bad-bg: #f8d7da;
    --info: #00515D;
    --info-bg: #e6f4f1;
    
    /* Green color for the 'done' checkmark dot */
    --ok-dot: #198754; 
}

/* 2. Override main wrapper: font, border-radius, and shadow. */
#cps-syscheck-root .cps-wrap {
    font-family: 'Roboto', sans-serif;
    border-radius: 8px;
    box-shadow: none;
    border-color: var(--border);
}

/* 3. Override button styles to match the site's theme. */
#cps-syscheck-root .cps-btn {
    background-image: none; /* Remove the default gradient */
    background-color: var(--brand);
    border-radius: 6px;
    font-weight: 500;
    padding: 12px 25px;
    box-shadow: none;
    transition: background-color 0.15s ease;
}

#cps-syscheck-root .cps-btn:hover {
    background-color: var(--brand-hover);
    transform: none; /* Remove the default hover animation */
    box-shadow: none;
}

/* Secondary button override */
#cps-syscheck-root .cps-btn.secondary {
    background-image: none;
    background-color: #e9ecef;
    color: #333;
}
#cps-syscheck-root .cps-btn.secondary:hover {
    background-color: #ced4da;
}

/* 4. Unify border-radius on all internal elements. */
#cps-syscheck-root .steps,
#cps-syscheck-root .panel,
#cps-syscheck-root .status,
#cps-syscheck-root .preview-card {
    border-radius: 8px;
}

#cps-syscheck-root .steps li {
    border-radius: 6px;
}

#cps-syscheck-root .preview-card video {
    border-radius: 6px;
}

/* 5. Ensure status panel colors use the new variables. */
#cps-syscheck-root .ok { background: var(--ok-bg); color: var(--ok); }
#cps-syscheck-root .bad { background: var(--bad-bg); color: var(--bad); }
#cps-syscheck-root .info { background: var(--info-bg); color: var(--info); }
#cps-syscheck-root .warn { background: var(--warn-bg); color: var(--warn); }

/* 6. Restyle step indicator colors to match the theme. */
#cps-syscheck-root .steps li.active {
    background-color: var(--info-bg);
    color: var(--brand);
}
#cps-syscheck-root .steps li.active .dot {
    background-color: var(--brand);
}
#cps-syscheck-root .steps li.done .dot {
    background-color: var(--ok-dot);
}

/* 7. Restyle audio meter bar colors. */
#cps-syscheck-root .meter {
    background: #e9ecef;
}
#cps-syscheck-root .meter .bar.ok { background-color: var(--ok-dot); }
#cps-syscheck-root .meter .bar.warn { background-color: #ffc107; }
#cps-syscheck-root .meter .bar.bad { background-color: #dc3545; }

/* 8. Minor adjustment for keyboard hint style. */
#cps-syscheck-root .kbd {
    background-color: #333;
    border-radius: 4px;
}/* End custom CSS */