/**
* EdgeMetrics — Fluent Forms Pro dark-theme overrides (3.5.205)
*
* Targets FFPro's form classes with the EdgeMetrics palette so the
* upload form (and any other FFPro form on the site) reads as dark UI
* instead of FFPro's default light theme. Enqueued globally.
*
* Palette:
* #0B0F14 page background
* #1A1F26 card / panel background
* #2A2F36 borders / dividers
* #367EE4 link / focus blue
* #1A6FE8 primary button blue
* #AAB4BE muted text
* #FFFFFF primary text
*/
/* ── Text inputs, selects, textareas ────────────────────────── */
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="number"],
.frm-fluent-form input[type="url"],
.frm-fluent-form input[type="tel"],
.frm-fluent-form input[type="password"],
.frm-fluent-form input[type="date"],
.frm-fluent-form input[type="time"],
.frm-fluent-form input[type="datetime-local"],
.frm-fluent-form input[type="search"],
.frm-fluent-form select,
.frm-fluent-form textarea,
.frm-fluent-form .ff-el-form-control {
background: #0B0F14 !important;
border: 1px solid #2A2F36 !important;
color: #FFFFFF !important;
color-scheme: dark;
}
.frm-fluent-form input:focus,
.frm-fluent-form select:focus,
.frm-fluent-form textarea:focus,
.frm-fluent-form .ff-el-form-control:focus {
border-color: #367EE4 !important;
outline: none !important;
box-shadow: 0 0 0 1px #367EE4 inset !important;
}
.frm-fluent-form ::placeholder,
.frm-fluent-form input::placeholder,
.frm-fluent-form textarea::placeholder {
color: #6A737D !important;
opacity: 1;
}
/* Native select option list */
.frm-fluent-form select option {
background: #1A1F26 !important;
color: #FFFFFF !important;
}
/* ── Labels + help text ─────────────────────────────────────── */
.frm-fluent-form label,
.frm-fluent-form .ff-el-input--label label,
.frm-fluent-form .ff-el-input--label > label {
color: #FFFFFF !important;
}
.frm-fluent-form .ff-el-help-message,
.frm-fluent-form .ff-el-form-control + small,
.frm-fluent-form .ff-el-input--help {
color: #AAB4BE !important;
}
/* ── Checkboxes + radios ────────────────────────────────────── */
.frm-fluent-form input[type="checkbox"],
.frm-fluent-form input[type="radio"] {
accent-color: #367EE4;
}
.frm-fluent-form .ff-el-form-check label,
.frm-fluent-form .ff_item_panel_content label {
color: #FFFFFF !important;
}
/* ── File upload ────────────────────────────────────────────── */
.frm-fluent-form input[type="file"] {
background: #1A1F26 !important;
border: 1px solid #2A2F36 !important;
color: #FFFFFF !important;
border-radius: 4px;
padding: 6px 8px;
}
.frm-fluent-form input[type="file"]::-webkit-file-upload-button,
.frm-fluent-form input[type="file"]::file-selector-button {
background: #1A1F26 !important;
border: 1px solid #2A2F36 !important;
color: #FFFFFF !important;
border-radius: 4px !important;
padding: 4px 10px !important;
margin-right: 8px;
cursor: pointer;
}
.frm-fluent-form input[type="file"]::-webkit-file-upload-button:hover,
.frm-fluent-form input[type="file"]::file-selector-button:hover {
background: #20262E !important;
border-color: #367EE4 !important;
}
/* FFPro custom file-uploader UI (when "ff-uploader" class is present) */
.frm-fluent-form .ff_upload_pram,
.frm-fluent-form .ff-uploader-holder,
.frm-fluent-form .ff-el-form-control.ff_upload_btn {
background: #1A1F26 !important;
border: 1px solid #2A2F36 !important;
color: #FFFFFF !important;
}
.frm-fluent-form .ff-el-progress-bar {
background: #2A2F36 !important;
}
.frm-fluent-form .ff-el-progress-bar > div {
background: #367EE4 !important;
}
/* ── Buttons (Submit / Notify Me) ───────────────────────────── */
/* Already brand-blue in your screenshots, but ensure consistency. */
.frm-fluent-form .ff-btn-submit,
.frm-fluent-form button.ff-btn-submit,
.frm-fluent-form .ff_btn_style,
.frm-fluent-form button[type="submit"] {
background: #1A6FE8 !important;
border-color: #1A6FE8 !important;
color: #FFFFFF !important;
font-weight: 600 !important;
}
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form button.ff-btn-submit:hover,
.frm-fluent-form button[type="submit"]:hover {
background: #155CC4 !important;
border-color: #155CC4 !important;
color: #FFFFFF !important;
}
/* ── Validation message states ──────────────────────────────── */
.frm-fluent-form .ff-el-form-control.ff-el-is-error,
.frm-fluent-form .has-error .ff-el-form-control {
border-color: #c25450 !important;
}
.frm-fluent-form .error,
.frm-fluent-form .text-danger,
.frm-fluent-form .ff-el-is-error-text {
color: #c25450 !important;
}
/* ── Section headers / dividers inside the form ─────────────── */
.frm-fluent-form .ff-el-section-break-title,
.frm-fluent-form .ff_section_title {
color: #FFFFFF !important;
}
.frm-fluent-form .ff-el-section-break,
.frm-fluent-form .ff_section_break {
border-top-color: #2A2F36 !important;
}
/* ── Required-asterisk red mark (keep accessible red) ───────── */
.frm-fluent-form .ff-el-input--required-mark {
color: #c25450 !important;
}
/* ── Select2 dropdown overrides (FFPro uses Select2 for some
dropdown variants — make the popup dark too) ───────────── */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
background: #0B0F14 !important;
border-color: #2A2F36 !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection__placeholder {
color: #FFFFFF !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #367EE4 !important;
}
.select2-dropdown {
background: #1A1F26 !important;
border-color: #2A2F36 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
background: #0B0F14 !important;
border-color: #2A2F36 !important;
color: #FFFFFF !important;
}
.select2-container--default .select2-results__option {
color: #FFFFFF;
background: transparent;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: #1A6FE8 !important;
color: #FFFFFF !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background: rgba(54, 126, 228, 0.18) !important;
color: #FFFFFF !important;
}
/* ────────────────────────────────────────────────────────────────────────
3.5.449 — Upload Help Panel ([em_upload_help])
Dark side-panel that swaps content based on the broker dropdown.
Renders inside #em-upload-help-root, populated by em-upload-help.js.
──────────────────────────────────────────────────────────────────────── */
#em-upload-help-root {
color: #E1E7EE;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.em-uh-card {
background: #1A1F26;
border: 1px solid #2A2F36;
border-radius: 10px;
padding: 22px 24px;
}
.em-uh-card.em-uh-placeholder {
color: #AAB4BE;
}
.em-uh-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.em-uh-title {
font-size: 18px;
font-weight: 700;
color: #FFFFFF;
letter-spacing: 0.01em;
}
.em-uh-supportlabel {
font-size: 12px;
color: #AAB4BE;
margin: 0 0 8px;
}
.em-uh-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.em-uh-chip {
background: #10151B;
border: 1px solid #2A2F36;
color: #C9CFD6;
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.em-uh-body p,
.em-uh-body ul,
.em-uh-body ol {
margin: 0 0 12px;
}
.em-uh-body .em-uh-lead {
color: #E1E7EE;
font-size: 14px;
line-height: 1.55;
margin-bottom: 18px;
}
.em-uh-body .em-uh-text {
font-size: 13px;
line-height: 1.55;
color: #C9CFD6;
}
.em-uh-body .em-uh-h {
font-size: 14px;
font-weight: 700;
color: #FFFFFF;
margin: 22px 0 10px;
letter-spacing: 0.01em;
}
.em-uh-body .em-uh-h2 {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #367EE4;
margin: 18px 0 8px;
}
.em-uh-body .em-uh-sub {
color: #AAB4BE;
font-weight: 400;
font-size: 11px;
font-style: italic;
margin-left: 6px;
}
.em-uh-body .em-uh-list {
padding-left: 22px;
counter-reset: emuh;
list-style: none;
}
.em-uh-body .em-uh-list > li {
counter-increment: emuh;
position: relative;
font-size: 13px;
line-height: 1.6;
color: #C9CFD6;
margin-bottom: 8px;
padding-left: 6px;
}
.em-uh-body .em-uh-list > li::before {
content: counter(emuh) ".";
position: absolute;
left: -22px;
width: 20px;
text-align: right;
color: #367EE4;
font-weight: 700;
}
.em-uh-body .em-uh-bullets {
padding-left: 18px;
list-style: none;
}
.em-uh-body .em-uh-bullets > li {
position: relative;
font-size: 13px;
line-height: 1.55;
color: #C9CFD6;
margin-bottom: 8px;
}
.em-uh-body .em-uh-bullets > li::before {
content: '';
position: absolute;
left: -14px;
top: 8px;
width: 5px;
height: 5px;
background: #367EE4;
border-radius: 50%;
}
.em-uh-body .em-uh-fieldgrp {
background: #10151B;
border: 1px solid #2A2F36;
border-radius: 6px;
padding: 10px 14px;
margin-bottom: 8px;
}
.em-uh-body .em-uh-fieldgrp-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #AAB4BE;
margin-bottom: 6px;
}
.em-uh-body .em-uh-fields {
margin: 0;
padding-left: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 18px;
}
.em-uh-body .em-uh-fields > li {
font-size: 12px;
color: #E1E7EE;
line-height: 1.5;
position: relative;
padding-left: 14px;
}
.em-uh-body .em-uh-fields > li::before {
content: '✓';
position: absolute;
left: 0;
color: #26a69a;
font-weight: 700;
}
.em-uh-body code {
background: #0B0F14;
border: 1px solid #2A2F36;
padding: 1px 6px;
border-radius: 3px;
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: 11.5px;
color: #AECEFC;
}
.em-uh-body b {
color: #FFFFFF;
}
.em-uh-body .em-uh-note {
font-size: 12px;
color: #AAB4BE;
line-height: 1.55;
font-style: italic;
border-top: 1px solid #2A2F36;
padding-top: 14px;
margin-top: 18px;
}
@media (max-width: 768px) {
.em-uh-body .em-uh-fields {
grid-template-columns: 1fr;
}
}
/* ────────────────────────────────────────────────────────────────────────
3.5.451 — Upload Page Tabs
Renders the "Broker Sync / Standard Import" tab strip + coming-soon
placeholder. Tab content lives in user-built Elementor sections with
IDs em-tab-standard and em-tab-broker; em-upload-tabs.js toggles them.
──────────────────────────────────────────────────────────────────────── */
.em-upload-tabbar {
display: inline-flex;
gap: 4px;
background: #1A1F26;
border: 1px solid #2A2F36;
border-radius: 8px;
padding: 4px;
margin-bottom: 16px;
}
/* 3.5.454: !important on every property so theme + Elementor button
styles can't override the active state. The inactive button is
intentionally low-contrast against the panel; the active button is
bright brand blue so the "selected" signal is unambiguous. */
.em-upload-tabbar .em-upload-tabbar-btn {
background: transparent !important;
border: none !important;
color: #AAB4BE !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 8px 16px !important;
border-radius: 5px !important;
cursor: pointer !important;
transition: background 0.15s ease, color 0.15s ease !important;
font-family: inherit !important;
box-shadow: none !important;
text-transform: none !important;
letter-spacing: normal !important;
line-height: 1.4 !important;
min-height: 0 !important;
}
.em-upload-tabbar .em-upload-tabbar-btn:hover {
color: #FFFFFF !important;
background: rgba(54, 126, 228, 0.18) !important;
}
.em-upload-tabbar .em-upload-tabbar-btn.is-active {
background: #1A6FE8 !important;
color: #FFFFFF !important;
}
.em-upload-tabbar .em-upload-tabbar-btn.is-active:hover {
background: #2580F2 !important;
}
/* 3.5.452: pane visibility is driven by a single `em-upload-hidden`
class. We DO NOT touch display when a pane is active — Elementor's
own display (usually flex) needs to stay intact so 2-column layouts
inside the pane don't collapse vertically. Hiding uses !important
to beat Elementor's section-level display rules. */
.em-upload-hidden {
display: none !important;
}
/* ── Broker Sync coming-soon placeholder card ────────────────────────── */
.em-upload-broker-placeholder {
background: #1A1F26;
border: 1px solid #2A2F36;
border-radius: 10px;
padding: 40px 32px;
text-align: center;
color: #C9CFD6;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.em-upload-broker-placeholder .em-bp-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #367EE4;
background: rgba(54, 126, 228, 0.12);
border: 1px solid rgba(54, 126, 228, 0.35);
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 16px;
}
.em-upload-broker-placeholder .em-bp-title {
font-size: 22px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.em-upload-broker-placeholder .em-bp-lead {
font-size: 14px;
line-height: 1.6;
max-width: 540px;
margin: 0 auto 22px;
color: #C9CFD6;
}
.em-upload-broker-placeholder .em-bp-list {
text-align: left;
max-width: 480px;
margin: 0 auto 26px;
padding-left: 18px;
list-style: none;
}
.em-upload-broker-placeholder .em-bp-list > li {
position: relative;
font-size: 13px;
line-height: 1.6;
color: #C9CFD6;
margin-bottom: 8px;
padding-left: 4px;
}
.em-upload-broker-placeholder .em-bp-list > li::before {
content: '';
position: absolute;
left: -14px;
top: 9px;
width: 5px;
height: 5px;
background: #367EE4;
border-radius: 50%;
}
.em-upload-broker-placeholder .em-bp-cta {
display: inline-flex;
align-items: center;
gap: 6px;
background: #1A6FE8;
color: #FFFFFF !important;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
font-family: inherit;
transition: background 0.15s ease;
}
.em-upload-broker-placeholder .em-bp-cta:hover {
background: #2580F2;
}
.em-upload-broker-placeholder .em-bp-altline {
margin-top: 18px;
font-size: 12px;
color: #AAB4BE;
}
.em-upload-broker-placeholder .em-bp-altline a {
color: #367EE4;
text-decoration: none;
font-weight: 600;
}
.em-upload-broker-placeholder .em-bp-altline a:hover {
color: #AECEFC;
}
/* ────────────────────────────────────────────────────────────────────────
3.5.467 — Help Center ([em_help_center])
Two-column layout: main body left, category sidebar right. Below 900px
the sidebar drops to the top of the body so the linear order is sidebar
→ article on mobile. AJAX swaps just the body content.
──────────────────────────────────────────────────────────────────────── */
.em-hc-root {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 32px;
align-items: start;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #E1E7EE;
}
@media (max-width: 900px) {
.em-hc-root {
grid-template-columns: 1fr;
}
.em-hc-sidebar { order: -1; }
}
.em-hc-body {
background: #1A1F26;
border: 1px solid #2A2F36;
border-radius: 10px;
padding: 32px 36px;
min-height: 400px;
transition: opacity 140ms ease;
}
.em-hc-sidebar {
background: #1A1F26;
border: 1px solid #2A2F36;
border-radius: 10px;
padding: 22px 22px;
position: sticky;
top: 24px;
align-self: start;
}
.em-hc-sidebar-inner {
color: #C9CFD6;
}
.em-hc-sidebar-title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #FFFFFF;
margin: 0 0 14px;
}
.em-hc-cat {
margin-bottom: 18px;
}
.em-hc-cat:last-child {
margin-bottom: 0;
}
/* 3.5.473: category header is a clickable toggle button.
3.5.474: !important overrides because theme/Elementor button defaults
inject background gradient, border, box-shadow, etc. We want a bare
text+chevron row. */
.em-hc-cat-toggle {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
padding: 4px 0 !important;
margin: 0 0 8px !important;
cursor: pointer !important;
text-align: left !important;
color: #367EE4 !important;
transition: color 0.12s !important;
border-radius: 0 !important;
min-height: 0 !important;
line-height: 1.2 !important;
}
.em-hc-cat-toggle:hover,
.em-hc-cat-toggle:focus,
.em-hc-cat-toggle:active {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.em-hc-cat-toggle:hover .em-hc-cat-name,
.em-hc-cat-toggle:focus-visible .em-hc-cat-name {
color: #AECEFC !important;
}
.em-hc-cat-toggle:focus {
outline: none !important;
}
.em-hc-cat-toggle:focus-visible {
outline: 2px solid #367EE4 !important;
outline-offset: 2px !important;
}
.em-hc-cat-name {
font-size: 11px;
font-weight: 700;
color: #367EE4;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: color 0.12s;
}
/* Chevron — CSS-only ▾ that rotates on collapse */
.em-hc-cat-chevron {
width: 9px;
height: 9px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.18s ease;
margin-right: 4px;
margin-top: -3px;
opacity: 0.85;
}
.em-hc-cat.is-collapsed .em-hc-cat-chevron {
transform: rotate(-45deg);
margin-top: 2px;
}
/* Collapse animation */
.em-hc-cat-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 1500px;
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.18s ease, margin-top 0.18s ease;
opacity: 1;
}
.em-hc-cat.is-collapsed .em-hc-cat-list {
max-height: 0;
opacity: 0;
margin-top: -4px;
}
.em-hc-cat-list li {
margin: 0 0 4px;
padding: 0;
}
.em-hc-link {
display: block;
padding: 6px 10px;
color: #C9CFD6;
text-decoration: none;
font-size: 13px;
line-height: 1.4;
border-radius: 5px;
transition: background 0.12s, color 0.12s;
}
.em-hc-link:hover {
background: rgba(54, 126, 228, 0.10);
color: #FFFFFF;
}
.em-hc-link.is-active {
background: rgba(54, 126, 228, 0.18);
color: #FFFFFF;
font-weight: 600;
}
.em-hc-article-title {
font-size: 26px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 22px;
letter-spacing: -0.01em;
line-height: 1.25;
}
.em-hc-article-content {
font-size: 14px;
line-height: 1.7;
color: #C9CFD6;
}
.em-hc-article-content h2,
.em-hc-article-content h3,
.em-hc-article-content h4 {
color: #FFFFFF;
margin-top: 28px;
margin-bottom: 12px;
}
.em-hc-article-content h2 { font-size: 19px; font-weight: 700; }
.em-hc-article-content h3 { font-size: 16px; font-weight: 700; }
.em-hc-article-content h4 { font-size: 14px; font-weight: 700; }
.em-hc-article-content p {
margin: 0 0 14px;
}
.em-hc-article-content a {
color: #367EE4;
text-decoration: none;
}
.em-hc-article-content a:hover {
color: #AECEFC;
text-decoration: underline;
}
.em-hc-article-content code {
background: #0B0F14;
border: 1px solid #2A2F36;
padding: 1px 6px;
border-radius: 3px;
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: 12.5px;
color: #AECEFC;
}
.em-hc-article-content pre {
background: #0B0F14;
border: 1px solid #2A2F36;
padding: 14px 16px;
border-radius: 6px;
overflow-x: auto;
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: 12.5px;
color: #E1E7EE;
line-height: 1.55;
}
.em-hc-article-content ul,
.em-hc-article-content ol {
padding-left: 22px;
margin: 0 0 14px;
}
.em-hc-article-content li {
margin-bottom: 6px;
}
.em-hc-article-content blockquote {
border-left: 3px solid #367EE4;
margin: 0 0 14px;
padding: 4px 16px;
color: #AAB4BE;
background: rgba(54, 126, 228, 0.06);
border-radius: 0 6px 6px 0;
}
.em-hc-article-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: 18px;
}
.em-hc-article-content th,
.em-hc-article-content td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid #2A2F36;
}
.em-hc-article-content th {
color: #FFFFFF;
font-weight: 700;
background: #10151B;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.em-hc-empty,
.em-hc-error,
.em-hc-sidebar-empty {
color: #AAB4BE;
font-size: 13px;
line-height: 1.6;
}
.em-hc-empty h2,
.em-hc-error h2 {
color: #FFFFFF;
margin: 0 0 12px;
font-size: 20px;
}
/* ────────────────────────────────────────────────────────────────────────
3.5.466 — Supported Brokers table ([em_supported_brokers])
Tradervue-style support matrix. Desktop: clean data table with green
checkmarks. Mobile (≤900px): horizontal scroll on the table; the
labels still appear via the column headers, not data-label collapse,
since the row-collapse pattern reads poorly with mostly-symbol cells.
──────────────────────────────────────────────────────────────────────── */
.em-sb-root {
color: #E1E7EE;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.em-sb-table-wrap {
background: #1A1F26;
border: 1px solid #2A2F36;
border-radius: 10px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-color: #4A525C #1A1F26;
scrollbar-width: thin;
}
.em-sb-table-wrap::-webkit-scrollbar {
height: 10px;
}
.em-sb-table-wrap::-webkit-scrollbar-track {
background: #1A1F26;
border-top: 1px solid #2A2F36;
}
.em-sb-table-wrap::-webkit-scrollbar-thumb {
background: #4A525C;
border-radius: 5px;
border: 2px solid #1A1F26;
}
.em-sb-table-wrap::-webkit-scrollbar-thumb:hover {
background: #6A737D;
}
.em-sb-table {
width: 100%;
min-width: 880px;
border-collapse: collapse;
}
.em-sb-table thead th {
background: #10151B;
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 14px 14px;
text-align: center;
border-bottom: 1px solid #2A2F36;
white-space: nowrap;
}
.em-sb-table thead th:first-child {
text-align: left;
}
.em-sb-table tbody td {
background: #0E1318;
padding: 12px 14px;
font-size: 13px;
color: #C9CFD6;
border-bottom: 1px solid #1A1F26;
text-align: center;
vertical-align: middle;
}
.em-sb-table tbody tr:last-child td {
border-bottom: none;
}
.em-sb-table tbody tr:hover td {
background: #131A21;
}
.em-sb-table .em-sb-name {
text-align: left;
color: #FFFFFF;
font-weight: 600;
white-space: nowrap;
}
.em-sb-yes {
color: #26a69a;
font-weight: 700;
font-size: 15px;
}
.em-sb-no {
color: #4A525C;
font-weight: 400;
}
.em-sb-partial {
color: #26a69a;
font-weight: 700;
font-size: 15px;
}
.em-sb-partial sup {
color: #AAB4BE;
font-weight: 400;
margin-left: 1px;
}
.em-sb-future {
color: #367EE4;
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(54, 126, 228, 0.12);
border: 1px solid rgba(54, 126, 228, 0.30);
padding: 2px 8px;
border-radius: 3px;
/* 3.5.687: the pill must never break across lines — an inline element
with a space in its text wraps mid-badge on narrow columns, which
rendered as two half-pills stacked on top of each other. */
display: inline-block;
white-space: nowrap;
}
/* 3.5.687: Trade Import cell — stack the method and its pill instead of
letting them wrap arbitrarily, and keep the cell from being squeezed so
narrow that "Daily sync + on-demand pull" breaks after every word. */
.em-sb-table .em-sb-import {
min-width: 150px;
line-height: 1.45;
}
.em-sb-table .em-sb-import .em-sb-future {
display: inline-block;
margin-top: 4px;
}
.em-sb-legend {
display: flex;
flex-wrap: wrap;
gap: 18px 28px;
margin-top: 16px;
padding: 14px 16px;
background: #1A1F26;
border: 1px solid #2A2F36;
border-radius: 8px;
font-size: 12px;
color: #C9CFD6;
}
.em-sb-legend > div {
display: flex;
align-items: center;
gap: 8px;
}
.em-sb-cta {
margin-top: 16px;
text-align: center;
font-size: 13px;
color: #AAB4BE;
}
.em-sb-cta a {
color: #367EE4;
text-decoration: none;
font-weight: 600;
}
.em-sb-cta a:hover {
color: #AECEFC;
}
/* ────────────────────────────────────────────────────────────────────────
3.5.455 — Recent Uploads ([em_recent_uploads])
Desktop: dense data table.
Below 880px: each row stacks into a card; | labels render via
data-label attribute.
──────────────────────────────────────────────────────────────────────── */
.em-ru-root {
color: #E1E7EE;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.em-ru-table-wrap {
background: #1A1F26;
border: 1px solid #2A2F36;
border-radius: 10px;
/* 3.5.456: overflow-x scroll so tablet-width containers don't clip
the right-side columns. Above the mobile breakpoint we still want
the full table — letting users scroll is better than hiding data. */
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
/* 3.5.457: visible scrollbar on dark background. Firefox uses the
two-value `scrollbar-color: thumb track` shorthand. */
scrollbar-color: #4A525C #1A1F26;
scrollbar-width: thin;
}
/* Webkit (Chrome / Safari / Edge) scrollbar — match Firefox styling above. */
.em-ru-table-wrap::-webkit-scrollbar {
height: 10px;
}
.em-ru-table-wrap::-webkit-scrollbar-track {
background: #1A1F26;
border-top: 1px solid #2A2F36;
}
.em-ru-table-wrap::-webkit-scrollbar-thumb {
background: #4A525C;
border-radius: 5px;
border: 2px solid #1A1F26;
}
.em-ru-table-wrap::-webkit-scrollbar-thumb:hover {
background: #6A737D;
}
.em-ru-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
/* Ensure the table doesn't squeeze below the column widths the
content needs — the wrap above will scroll horizontally instead. */
min-width: 960px;
}
.em-ru-table thead th {
background: #10151B;
color: #FFFFFF;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid #2A2F36;
white-space: nowrap;
}
.em-ru-table tbody td {
background: #0E1318;
padding: 16px;
font-size: 13px;
color: #C9CFD6;
border-bottom: 1px solid #1A1F26;
vertical-align: middle;
}
.em-ru-table tbody tr:last-child td {
border-bottom: none;
}
.em-ru-table tbody tr:hover td {
background: #131A21;
}
.em-ru-table .em-ru-num {
text-align: right;
font-variant-numeric: tabular-nums;
color: #FFFFFF;
}
.em-ru-table .em-ru-filename {
color: #FFFFFF;
word-break: break-all;
}
.em-ru-status {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
background: rgba(38, 166, 154, 0.12);
color: #26a69a;
border: 1px solid rgba(38, 166, 154, 0.35);
}
.em-ru-status.em-ru-status-failed,
.em-ru-status.em-ru-status-error {
background: rgba(194, 84, 80, 0.12);
color: #C25450;
border-color: rgba(194, 84, 80, 0.35);
}
.em-ru-status.em-ru-status-pending,
.em-ru-status.em-ru-status-processing {
background: rgba(170, 180, 190, 0.12);
color: #AAB4BE;
border-color: rgba(170, 180, 190, 0.35);
}
.em-ru-actions {
text-align: right;
white-space: nowrap;
}
.em-ru-delete {
background: transparent !important;
border: 1px solid rgba(194, 84, 80, 0.35) !important;
color: #C25450 !important;
font-size: 12px !important;
font-weight: 600 !important;
padding: 6px 12px !important;
border-radius: 5px !important;
cursor: pointer !important;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
font-family: inherit !important;
line-height: 1.2 !important;
min-height: 0 !important;
box-shadow: none !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.em-ru-delete:hover {
background: #C25450 !important;
color: #FFFFFF !important;
border-color: #C25450 !important;
}
.em-ru-loadmore-wrap {
margin-top: 16px;
/* 3.5.456: Load More button aligns left per user preference. */
text-align: left;
}
.em-ru-loadmore-btn {
background: #1A6FE8 !important;
border: none !important;
color: #FFFFFF !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 10px 24px !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: background 0.15s ease !important;
font-family: inherit !important;
box-shadow: none !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.em-ru-loadmore-btn:hover {
background: #2580F2 !important;
}
.em-ru-loadmore-btn:disabled {
opacity: 0.6;
cursor: wait;
}
.em-ru-empty-row td {
text-align: center;
color: #AAB4BE;
padding: 32px 16px !important;
}
/* Mobile: collapse to stacked cards. data-label attribute on each |
renders as the field name. Hide table headers; each row becomes a card.
3.5.456: bumped breakpoint to 1024px since the 8-column table genuinely
doesn't fit on tablets either. */
@media (max-width: 1024px) {
.em-ru-table-wrap {
background: transparent;
border: none;
border-radius: 0;
overflow: visible; /* cards don't need scroll */
}
.em-ru-table {
min-width: 0; /* override desktop min-width — cards fill viewport */
}
.em-ru-table,
.em-ru-table thead,
.em-ru-table tbody,
.em-ru-table tr,
.em-ru-table td {
display: block;
width: 100%;
}
.em-ru-table thead {
position: absolute;
left: -9999px;
top: -9999px;
visibility: hidden;
}
.em-ru-table tbody .em-ru-row {
background: #0E1318;
border: 1px solid #2A2F36;
border-radius: 10px;
padding: 6px 8px;
margin-bottom: 12px;
}
.em-ru-table tbody td {
background: transparent;
border-bottom: 1px solid #1A1F26;
padding: 10px 8px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
text-align: right;
min-width: 0; /* allow flex children to shrink */
}
.em-ru-table tbody td:last-child {
border-bottom: none;
}
.em-ru-table tbody td::before {
content: attr(data-label);
font-size: 11px;
font-weight: 700;
color: #AAB4BE;
text-transform: uppercase;
letter-spacing: 0.04em;
flex: 0 0 auto;
text-align: left;
}
.em-ru-table .em-ru-num,
.em-ru-table .em-ru-actions {
text-align: right;
}
/* 3.5.456: remove the prior max-width:60% rule that was making
the file-name cell stop short with a visible vertical edge.
Just let it wrap naturally; the flex layout handles alignment. */
.em-ru-table .em-ru-filename {
word-break: break-all;
text-align: right;
}
.em-ru-empty-row td {
display: block;
text-align: center;
background: #0E1318;
border-radius: 10px;
}
.em-ru-empty-row td::before {
display: none;
}
}
/* ─────────────────────────────────────────────────────────────────────────
* Pricing shortcodes (3.5.475)
* [em_pricing_cards] — 3-card pricing grid with monthly/annual toggle
* [em_compare_plans] — feature matrix table
* Brand colors only (no cyan).
* ───────────────────────────────────────────────────────────────────────── */
.em-pricing-root {
color: #C9CFD6;
}
/* Cycle toggle */
.em-pricing-toggle {
display: flex;
justify-content: center;
gap: 8px;
margin: 0 0 28px;
}
.em-pricing-toggle-btn {
background: #1A1F26 !important;
background-image: none !important;
color: #AAB4BE !important;
border: 1px solid #2A323D !important;
padding: 10px 22px !important;
border-radius: 8px !important;
cursor: pointer !important;
font-weight: 600 !important;
font-size: 14px !important;
transition: background 0.15s, color 0.15s, border-color 0.15s !important;
box-shadow: none !important;
line-height: 1.2 !important;
min-height: 0 !important;
}
.em-pricing-toggle-btn:hover {
color: #FFFFFF !important;
background: #232831 !important;
}
.em-pricing-toggle-btn.is-active {
background: #1A6FE8 !important;
color: #FFFFFF !important;
border-color: #1A6FE8 !important;
}
.em-pricing-toggle-save {
display: inline-block;
margin-left: 8px;
font-size: 11px;
font-weight: 700;
color: #AECEFC;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.em-pricing-toggle-btn.is-active .em-pricing-toggle-save {
color: rgba(255,255,255,0.85);
}
/* Cards grid */
.em-pricing-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
/* ── 3.5.688: teams / multi-seat band under the pricing cards ───────────
Deliberately quieter than a fourth card: it's a different motion (email,
not checkout) and most visitors should read past it. */
.em-pricing-teams {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 20px;
padding: 20px 26px;
background: #0E1318;
border: 1px solid #1F2630;
border-radius: 14px;
}
.em-pricing-teams-copy {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 260px;
flex: 1;
}
.em-pricing-teams-copy strong {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
}
.em-pricing-teams-copy span {
color: #AAB4BE;
font-size: 13px;
line-height: 1.55;
}
.em-pricing-teams-cta {
flex: 0 0 auto;
color: #367EE4;
font-size: 14px;
font-weight: 700;
text-decoration: none;
border: 1px solid #1A6FE8;
border-radius: 8px;
padding: 11px 22px;
white-space: nowrap;
transition: background .12s, color .12s;
}
.em-pricing-teams-cta:hover {
background: #1A6FE8;
color: #FFFFFF;
}
.em-pricing-card {
background: #0E1318;
border: 1px solid #1F2630;
border-radius: 14px;
padding: 30px 26px;
display: flex;
flex-direction: column;
position: relative;
transition: border-color 0.15s, transform 0.15s;
}
.em-pricing-card.is-popular {
border-color: #367EE4;
box-shadow: 0 0 0 1px rgba(54, 126, 228, 0.30);
}
.em-pricing-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.em-pricing-card-name {
font-size: 22px;
font-weight: 700;
color: #367EE4;
letter-spacing: -0.01em;
}
.em-pricing-card-badge {
font-size: 11px;
font-weight: 700;
color: #AECEFC;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.em-pricing-card-tagline {
font-size: 14px;
font-weight: 700;
color: #FFFFFF;
margin-bottom: 18px;
}
.em-pricing-card-price {
margin: 0 0 16px;
position: relative;
min-height: 56px;
}
.em-pricing-price {
display: none;
align-items: baseline;
color: #FFFFFF;
}
.em-pricing-root[data-cycle="monthly"] .em-pricing-price-monthly,
.em-pricing-root[data-cycle="annual"] .em-pricing-price-annual {
display: flex;
}
.em-pricing-price-currency {
font-size: 22px;
font-weight: 700;
margin-right: 2px;
line-height: 1;
}
.em-pricing-price-value {
font-size: 46px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
}
.em-pricing-price-period {
font-size: 14px;
color: #AAB4BE;
margin-left: 6px;
font-weight: 500;
}
.em-pricing-card-desc {
font-size: 14px;
line-height: 1.55;
color: #AAB4BE;
margin-bottom: 20px;
min-height: 64px;
}
.em-pricing-card-divider {
height: 1px;
background: #1F2630;
margin: 4px 0 18px;
}
.em-pricing-card-features {
list-style: none;
margin: 0 0 22px;
padding: 0;
flex-grow: 1;
}
.em-pricing-card-features li {
position: relative;
padding: 6px 0 6px 24px;
font-size: 14px;
color: #C9CFD6;
line-height: 1.4;
}
.em-pricing-card-features li::before {
content: '';
position: absolute;
left: 0;
top: 11px;
width: 6px;
height: 11px;
border-right: 2px solid #1A6FE8;
border-bottom: 2px solid #1A6FE8;
transform: rotate(45deg);
}
.em-pricing-card-cta {
display: none;
text-align: center;
background: #1A6FE8 !important;
color: #FFFFFF !important;
padding: 14px 18px;
border-radius: 10px;
text-decoration: none !important;
font-weight: 700;
font-size: 15px;
transition: background 0.15s, transform 0.05s;
border: 0;
cursor: pointer;
line-height: 1.2;
}
.em-pricing-root[data-cycle="monthly"] .em-pricing-cta-monthly,
.em-pricing-root[data-cycle="annual"] .em-pricing-cta-annual {
display: block;
}
.em-pricing-card-cta:hover {
background: #155BC4 !important;
color: #FFFFFF !important;
}
/* Compare table */
.em-compare-root {
margin-top: 36px;
}
.em-compare-table-wrap {
overflow-x: auto;
background: #0E1318;
border: 1px solid #1F2630;
border-radius: 14px;
padding: 0;
}
.em-compare-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: #C9CFD6;
min-width: 700px;
}
.em-compare-table thead th {
text-align: center;
font-size: 14px;
font-weight: 700;
color: #FFFFFF;
padding: 18px 16px;
border-bottom: 1px solid #2A323D;
background: #0B0F14;
}
.em-compare-table thead th.em-compare-th-feature {
text-align: left;
color: #367EE4;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.em-compare-table tbody td {
padding: 14px 16px;
text-align: center;
border-bottom: 1px solid #1A1F26;
vertical-align: middle;
}
/* 3.5.477: keep a visible bottom border on the last row so the table has
visual closure. Previously stripped, which created an unfinished look. */
.em-compare-table tbody tr:last-child td {
border-bottom: 1px solid #2A323D;
}
.em-compare-table tbody td.em-compare-feature {
text-align: left;
color: #FFFFFF;
font-weight: 500;
}
.em-compare-yes {
color: #1A6FE8;
font-size: 18px;
font-weight: 700;
}
.em-compare-no {
color: #4A525C;
font-size: 16px;
}
.em-compare-num {
color: #FFFFFF;
font-weight: 700;
font-size: 15px;
}
/* Responsive */
@media (max-width: 980px) {
.em-pricing-cards {
grid-template-columns: 1fr;
max-width: 480px;
margin: 0 auto;
}
.em-pricing-card-desc {
min-height: 0;
}
}
@media (max-width: 760px) {
.em-pricing-toggle-btn {
padding: 10px 16px !important;
font-size: 13px !important;
}
.em-pricing-toggle-save {
font-size: 10px;
}
}
/* ── 3.5.657: Simulator results table — same visible scrollbar treatment
as the other table wraps (.em-sb-table-wrap / .em-ru-table-wrap). ── */
.em-sim-table-wrap {
scrollbar-width: thin;
scrollbar-color: #4A525C #1A1F26;
}
.em-sim-table-wrap::-webkit-scrollbar {
height: 10px;
}
.em-sim-table-wrap::-webkit-scrollbar-track {
background: #1A1F26;
border-top: 1px solid #2A2F36;
}
.em-sim-table-wrap::-webkit-scrollbar-thumb {
background: #4A525C;
border-radius: 5px;
border: 2px solid #1A1F26;
}
.em-sim-table-wrap::-webkit-scrollbar-thumb:hover {
background: #6A737D;
}
|