/* VARIABLES *//**
* Lucide Icons Compatibility Layer
* Provides Fomantic UI-like styling for Lucide icon font
*/
/* Base icon styles *//* ═══════════════════════════════════════════════════════════════
MODULE INFO
═══════════════════════════════════════════════════════════════
NAME: chphAccountUsage/chphAccountUsage.css
PURPOSE: Styles for harness account pool dashboard (Spec 1011, supersedes 966)
PATTERN SOURCE: christophoros.css:314 (.chph__requestList), :3425 (.chph__empty)
CSS VARIABLES: christophoros.css:9-33 (--chph-* design tokens)
LAST UPDATED: 2026-02-19
═══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────
Container
───────────────────────────────────────────────────────────────── *//* ═══════════════════════════════════════════════════════════════
MODULE: chphThought/chphThought.css
PURPOSE: THOUGHT tab styles — constellation, timeline, coverage map
SPEC: 1237 Wave 4
PATTERN SOURCE: christophoros.css:8544-8595 (tab buttons, tab panels)
═══════════════════════════════════════════════════════════════ */
/* ── View Bar ──────────────────────────────────────────────── *//* ================================================================
Forgot Password (custom Blaze template)
================================================================ *//* ============================================
Mockup List View Styles
============================================
Card-based layout for mockup projects.
Pattern source: _stylesheets/data-thumbnail.css (card grid + variables)
============================================ */
/* ============================================
1. Container
============================================ *//* ============================================
Mockup Detail View Styles
============================================
Screen tab bar, wireframe iframe, toggle button, responsive layout.
Pattern source: _stylesheets/data-thumbnail.css (variables, transitions)
============================================ */
/* ============================================
1. Container
============================================ *//* ============================================
Mockup Editor — Selection Panel Styles
============================================
Side panel for editing JMDK Mockup nodes.
Width 320px, slide-in from right, scrollable body,
fixed header/footer.
Spec 1276 Phase 2, Wave 0B (item 13)
Pattern source: mockupDetail.css (BEM, #jmkrClient scope, transitions)
============================================ */
/* ============================================
1. Panel Container & Slide-in
============================================ *//* ============================================
Phoros Cinema - Timeline Video Editor
============================================ */
/* Cinema Overlay - uses .studioOverlay base *//* ============================================
Phoros Cinema Page - Public Preview Styles
============================================ *//* ============================================
Studio Post Editor (Spec 785)
============================================ */
/* Post Editor Overlay - uses .studioOverlay base *//* ============================================
Studio Image Editor (Render Room)
============================================ *//* ============================================
CHPH Color System - Centralized Variables
Color Profile System with Multiple Themes
============================================ */
/* === DEFAULT PROFILE: MATRIX (Green) === *//* Contact Group Member Browser Styles */
/* Following BEM patterns from christophoros.css *//* Contact Prospects Page Styles */
/* Channel badges - reuses signal channel badge pattern *//* Contact Signals Page Styles */
/* Channel badges - used in both list and popup *//* ============================================ Chat Shell & Header ============================================ *//* ============================================
Invoice Page Styles
============================================
Invoice-specific styling. Generic public page wrapper
styles are in _stylesheets/publicPage.css.
Table of Contents:
------------------
1. Bill To Section
2. Print Controls
3. Payment Buttons
4. Disclaimer
5. Embedded Invoice Overrides
6. Summary Card
7. Actions Card
8. Layout
9. Responsive Styles
============================================ */
/* ============================================
1. Bill To Section
============================================ *//* Spec 1136 W1.7: Transaction Report Modal — BEM-scoped styles
Pattern: christophoros.css:800-1000 for BEM naming convention
All classes namespaced txnReport__ */
/* ═══ Overlay + Modal Shell ═══ *//* ============================================
LEGAL BILLABLE HOURS — Minimal overrides
Pattern source: Semantic UI .ui.statistics, .ui.progress, .ui.very.basic.table
Custom CSS ONLY where Semantic UI genuinely doesn't cover the need
============================================ */
/* Ratio bar — Semantic UI .ui.progress requires JS init; use simple inline bar instead *//* ============================================
LEGAL DEADLINES — Minimal overrides
Pattern source: jamaker dataRow/leftSection/rightSection, notificationGroupDate
Custom CSS ONLY where Semantic UI genuinely doesn't cover the need
============================================ */
/* Group header color variants — notificationGroupDate is the base class, these add urgency colors *//* ============================================
LEGAL MATTER DETAIL — Inline editing + Activity timeline
Pattern source: Semantic UI .ui.segment, .ui.label.mini
Custom CSS ONLY where Semantic UI genuinely doesn't cover the need
============================================ */
/* N11.3: Inline field editing — display value styling *//* PrintingSetting - Label Printing Configuration */
/* Note: Uses shared settingsSection styles from _stylesheets/settings.css *//* ============================================
SERVICE AGENT — Dashboard Module Styling
Pattern source: settings.css:77-123 (settingsSection)
============================================ */
/* Tab Navigation *//* ============================================
Studio Module Styles
============================================ *//* Trading Intelligence Module - Styles
============================================================================ *//* VSM Settings Page - Page-specific Styles *//* ============================================
Data Row Component Styles
============================================
Extracted from template.css - all selectors scoped to #jmkrClient
Reusable data row component for displaying list items, tasks, contacts, etc.
Table of Contents:
------------------
1. CSS Variables & Base Styles
2. Layout Structure
2.1 Flexbox Layout
2.2 Header Section
2.3 Left Section
2.4 Right Section
3. Row States & Backgrounds
3.1 Alternating Colors
3.2 Hover States
3.3 Hidden/Revealed Animations
4. Size Modifiers
5. Bordered Variants
5.1 Basic Bordered
5.2 Doubled Layout
5.3 Child Task List
6. Status Badges
7. Buttons
7.1 Base Button
7.2 Hover Button Overlay
7.3 Input Buttons
8. Text Styles
8.1 Base Text
8.2 SubText Tags
8.3 Text Variants
9. Interactive Elements
9.1 Links
9.2 Faded Elements
9.3 Copy Link
10. Avatars
11. Horizontal Scroll Tables
12. Grid Integration
13. Images & Media
14. Inverted Theme
15. Popup Display Modes
16. Responsive Styles
16.1 Tablet (max-width: 992px)
16.2 Mobile (max-width: 600px)
16.3 Small Mobile (max-width: 767px)
17. Animation Disable
============================================ */
/* ============================================
1. CSS Variables & Base Styles
============================================ *//* ============================================
Data Thumbnail Component Styles
============================================
Reusable thumbnail grid component for displaying items in card-based view.
Companion to data-row.css for list-based display.
Table of Contents:
------------------
1. CSS Variables & Base Styles
2. Grid Container Layout
3. Card Structure
3.1 Base Card
3.2 Card States (Hover, Active, Selected)
4. Preview Area
4.1 Base Preview
4.2 Image Preview
4.3 Icon Preview
4.4 Type-Specific Colors
5. Info Section
5.1 Card Name
5.2 Card Meta
6. Action Buttons
6.1 Positioned Actions (4 corners)
6.2 Inline Actions (above meta)
6.3 Button States
7. Responsive Styles
============================================ */
/* ============================================
1. CSS Variables & Base Styles
============================================ *//* ============================================
Empty State Component
============================================
Standardized empty state display for dashboard modules.
Usage:
Title here
Description text...
Primary Action
Secondary Action
Variants:
- (default) : Standard size, suitable for content areas
- --page : Full page welcome states (larger padding, bigger icon)
- --compact : Card/panel embedded states (smaller padding)
- --inline : Minimal inline states (dashed border style)
============================================ */
/* Base Empty State *//* ============================================
Public Document Styles
============================================
Reusable card and rich text formatting for public-facing document pages
(invoices, files, contracts, etc.)
Table of Contents:
------------------
1. Base Card Styles
1.1 Container
1.2 Variants
1.3 Section Title
2. Rich Text Formatting
2.1 Base Typography
2.2 Headings
2.3 Paragraphs
2.4 Word Processor Classes
2.5 Lists
2.6 Tables
2.7 Links
2.8 Text Emphasis
2.9 Blockquotes
3. Disclaimer
4. Responsive Styles
5. Legacy Aliases (Invoice Page)
5.1 Invoice Card Base
5.2 Invoice Rich Text
============================================ */
/* ============================================
1. Base Card Styles
============================================ */
/* ---------- 1.1 Container ---------- *//* ============================================
Public Page Styles
============================================
Base wrapper styles for public-facing document pages
(invoices, files, contracts, HTML documents, etc.)
Usage:
------
Add class="publicPage" to your outer wrapper div.
Works alongside publicDocument.css for content styling.
Table of Contents:
------------------
1. Base Container
2. Page Layout
3. Print Area
4. Loading State
5. Dividers
6. Inline Links
7. Brand Signature
8. PDF Viewer
9. File Download
10. Rich Text Content (#description)
11. Title
12. Print Label
13. Responsive Styles
14. Legacy Alias (#InvoicePage)
============================================ */
/* ============================================
1. Base Container
============================================ *//* ============================================
Settings Page Styles
============================================
Component styles for settings and configuration pages.
All selectors scoped to #jmkrClient.
Table of Contents:
------------------
1. Page Layout
2. Section Component
2.1 Base Section
2.2 Section Header
2.3 Section Icon
3. Settings Cards Grid
4. Settings Table
4.1 Table Structure
4.2 Table Cells
4.3 Remove Button
5. Settings Add Button
6. Settings Footer
7. Settings Field
8. Settings Tree
8.1 Base Tree
8.2 Tree Hint
8.3 Tree List
8.4 Tree Empty State
9. Settings Tree Node
9.1 Node Base
9.2 Node Content
9.3 Node Actions
9.4 Node Children
10. Selectize Overrides
11. Form Fields
12. Link Items
13. Accordion Component
13.1 Accordion Base
13.2 Accordion Item
13.3 Accordion Header
13.4 Accordion Content
13.5 Accordion Toggles
14. List Component
14.1 List Base
14.2 List Item
14.3 List Actions
15. Profile Header
16. Specialist Cards
17. Section Danger Variant
18. Job Card Component
18.1 Job Card Base
18.2 Job Card Header
18.3 Job Card Progress
18.4 Job Card Sections
18.5 Job Card Artifacts
18.6 Job Card Status Variants
19. Button Variants
20. Info Box
21. Responsive Styles
============================================ */
/* ============================================
1. Page Layout
============================================ *//* ==========================================================================
INTERFACE.CSS - Jamaker Dashboard Interface Styles
==========================================================================
Table of Contents:
1. CSS Variables
2. Base Styles
3. Layout Structure
3.1 Content Area
3.2 Left UI Panel (Navigation Sidebar)
3.3 Middle UI Panel (Main Content)
3.4 Right UI Panel (Right Sidebar)
3.5 Pinned Menu
4. Page Components
4.1 Page Layout
4.2 Page Title & Actions
5. Account Popup
6. Dashboard Features
7. Business Card
8. UI Components
8.1 Tabular Menu
8.2 Feed & Cards
8.3 Organization Menu
9. Scrollbar Styles
10. Third-Party Overrides
10.1 Intro.js Tour
10.2 WYSIWYG Editor
11. Form Components
11.1 Contact Search
11.2 Native Select Elements
12. Subscription Modal
========================================================================== */
/* ==========================================================================
1. CSS VARIABLES
========================================================================== *//* Data Row styles moved to stylesheets/data-row.css *//* ========================================
Patient Care Note Compact Card
======================================== */
/* Patient Care Note: compact patient card (right-hand panel) */
:root {
/* Layout & Sizing */
--login-buttons-accounts-dialog-width: 250px;
--meteor-accounts-base-padding: 8px;
--meteor-accounts-dialog-border-width: 1px;
--configure-login-service-dialog-width: 530px;
--button-border-radius: 4px;
--dialog-border-radius: 8px;
--input-border-radius: 4px;
/* Colors - Primary */
--login-buttons-color: #4e40b8;
--login-buttons-color-active: #6c5ce7;
/* Colors - Config */
--login-buttons-config-color: #cc3a1a;
--login-buttons-config-color-border: #a32e15;
--login-buttons-config-color-active: #e5532e;
--login-buttons-config-color-active-border: #cc3a1a;
/* Colors - UI */
--color-text-primary: #2d2d2d;
--color-text-secondary: #4a4a4a;
--color-text-disabled: #999;
--color-background-primary: #fff;
--color-background-secondary: #f8f9fa;
--color-background-disabled: #e0e0e0;
--color-border: #e6e6e6;
--color-input-border: #d1d1d1;
--color-input-focus-border: var(--login-buttons-color);
--color-error: #e74c3c;
--color-success: #2ecc71;
--color-overlay: rgba(0, 0, 0, 0.6);
/* Typography */
--font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-family-monospace: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
--font-size-base: 16px;
--font-size-small: 0.875rem;
--font-size-smaller: 0.8125rem;
--font-size-smallest: 0.75rem;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--line-height-base: 1.5;
/* Effects */
--box-shadow-dialog: 0 10px 25px rgba(0, 0, 0, 0.1);
--box-shadow-button-active: 0 2px 4px 0 rgba(0, 0, 0, 0.1) inset;
--box-shadow-input-focus: 0 0 0 3px rgba(78, 64, 184, 0.2);
/* Transitions */
--transition-speed-fast: 0.1s;
--transition-speed-normal: 0.2s;
--transition-speed-slow: 0.3s;
--transition-timing: cubic-bezier(0.25, 0.1, 0.25, 1);
/* Dark Theme Variables - These can be overridden by users */
--login-buttons-color-dark: #8c7ae6;
--login-buttons-color-active-dark: #a29bfe;
--color-text-primary-dark: #f5f5f5;
--color-text-secondary-dark: #d1d1d1;
--color-text-disabled-dark: #777;
--color-background-primary-dark: #121212;
--color-background-secondary-dark: #1e1e1e;
--color-background-disabled-dark: #444;
--color-border-dark: #333;
--color-input-border-dark: #444;
--color-input-focus-border-dark: var(--login-buttons-color-dark);
--color-error-dark: #ff6b6b;
--color-success-dark: #55efc4;
--color-overlay-dark: rgba(0, 0, 0, 0.8);
--box-shadow-dialog-dark: 0 10px 25px rgba(0, 0, 0, 0.3);
--box-shadow-button-active-dark: 0 2px 4px 0 rgba(0, 0, 0, 0.3) inset;
--box-shadow-input-focus-dark: 0 0 0 3px rgba(140, 122, 230, 0.3);
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
:root {
/* Colors (Dark) - Use the dark theme variables with fallbacks */
--login-buttons-color: var(--login-buttons-color-dark, #7986CB);
--login-buttons-color-active: var(--login-buttons-color-active-dark, #9FA8DA);
--color-text-primary: var(--color-text-primary-dark, #eee);
--color-text-secondary: var(--color-text-secondary-dark, #bbb);
--color-text-disabled: var(--color-text-disabled-dark, #666);
--color-background-primary: var(--color-background-primary-dark, #121212);
--color-background-secondary: var(--color-background-secondary-dark, #1e1e1e);
--color-background-disabled: var(--color-background-disabled-dark, #444);
--color-border: var(--color-border-dark, #333);
--color-input-border: var(--color-input-border-dark, #444);
--color-input-focus-border: var(--color-input-focus-border-dark, var(--login-buttons-color, #7986CB));
--color-error: var(--color-error-dark, #e57373);
--color-success: var(--color-success-dark, #81c784);
--color-overlay: var(--color-overlay-dark, rgba(0, 0, 0, 0.8));
/* Effects (Dark) */
--box-shadow-dialog: var(--box-shadow-dialog-dark, 0 4px 12px rgba(0, 0, 0, 0.5));
--box-shadow-button-active: var(--box-shadow-button-active-dark, 0 2px 3px 0 rgba(0, 0, 0, 0.4) inset);
--box-shadow-input-focus: var(--box-shadow-input-focus-dark, 0 0 0 2px rgba(121, 134, 203, 0.25));
}
}
/* LOGIN BUTTONS */
#login-buttons {
display: inline-block;
line-height: 1;
}
#login-buttons .login-button {
position: relative;
}
#login-buttons button.login-button {
width: 100%;
}
#login-buttons .login-buttons-with-only-one-button {
display: inline-block;
}
#login-buttons .login-buttons-with-only-one-button .login-button {
display: inline-block;
}
#login-buttons .login-buttons-with-only-one-button .login-text-and-button {
display: inline-block;
}
#login-buttons .login-display-name {
display: inline-block;
padding-right: 2px;
line-height: var(--line-height-base);
font-family: var(--font-family-primary);
}
#login-buttons .loading {
line-height: 1;
background-image: url(data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA);
width: 16px;
background-position: center center;
background-repeat: no-repeat;
}
#login-buttons .login-button, .accounts-dialog .login-button {
cursor: pointer;
-webkit-user-select: none; /* Safari support */
user-select: none;
padding: 0.625rem 1.25rem;
font-size: var(--font-size-small);
font-family: var(--font-family-primary);
line-height: var(--line-height-base);
font-weight: var(--font-weight-medium);
text-align: center;
color: var(--color-background-primary);
background: var(--login-buttons-color);
border: none;
border-radius: var(--button-border-radius);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: background-color var(--transition-speed-normal) var(--transition-timing),
box-shadow var(--transition-speed-normal) var(--transition-timing),
transform var(--transition-speed-fast) var(--transition-timing);
}
#login-buttons .login-button:hover, .accounts-dialog .login-button:hover {
background: var(--login-buttons-color-active);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
#login-buttons .login-button:active, .accounts-dialog .login-button:active {
background: var(--login-buttons-color-active);
transform: translateY(1px);
box-shadow: var(--box-shadow-button-active);
}
#login-buttons .login-button.login-button-disabled,
#login-buttons .login-button.login-button-disabled:active,
.accounts-dialog .login-button.login-button-disabled,
.accounts-dialog .login-button.login-button-disabled:active {
color: var(--color-text-disabled);
background: var(--color-background-disabled);
border: none;
box-shadow: none;
transform: none;
cursor: not-allowed;
opacity: 0.7;
}
/* Reset styles for dialog elements */
.accounts-dialog * {
padding: 0;
margin: 0;
line-height: inherit;
color: inherit;
font: inherit;
font-family: var(--font-family-primary);
}
.accounts-dialog .login-button {
width: auto;
margin-bottom: 4px;
}
#login-buttons .login-buttons-padding {
display: inline-block;
width: 30px;
}
#login-buttons .login-display-name {
margin-right: 4px;
}
#login-buttons .configure-button {
background: var(--login-buttons-config-color);
border-color: var(--login-buttons-config-color-border);
}
#login-buttons .configure-button:active,
#login-buttons .configure-button:hover {
background: var(--login-buttons-config-color-active);
border-color: var(--login-buttons-config-color-active-border);
}
#login-buttons .login-image {
display: inline-block;
position: absolute;
left: 6px;
top: 6px;
width: 16px;
height: 16px;
}
#login-buttons .text-besides-image {
margin-left: 18px;
}
#login-buttons .no-services {
color: red;
}
#login-buttons .login-link-and-dropdown-list {
position: relative;
}
#login-buttons .login-close-text {
float: left;
position: relative;
padding-bottom: 8px;
}
#login-buttons .login-text-and-button .loading,
#login-buttons .login-link-and-dropdown-list .loading {
display: inline-block;
}
#login-buttons.login-buttons-dropdown-align-left #login-dropdown-list .loading {
float: right;
}
#login-buttons.login-buttons-dropdown-align-right #login-dropdown-list .loading {
float: left;
}
#login-buttons .login-close-text-clear {
clear: both;
}
#login-buttons .or {
text-align: center;
}
#login-buttons .hline {
text-decoration: line-through;
color: lightgrey;
}
#login-buttons .or-text {
font-weight: bold;
}
#login-buttons #signup-link {
float: right;
}
#login-buttons #forgot-password-link,
#login-buttons #resend-passwordless-code {
float: left;
}
#login-buttons #back-to-login-link {
float: right;
}
#login-buttons a, .accounts-dialog a {
cursor: pointer;
text-decoration: none;
color: var(--login-buttons-color);
transition: color var(--transition-speed-normal) var(--transition-timing);
}
#login-buttons a:hover, .accounts-dialog a:hover {
color: var(--login-buttons-color-active);
text-decoration: underline;
}
#login-buttons.login-buttons-dropdown-align-right .login-close-text {
float: right;
}
.accounts-dialog {
border: var(--meteor-accounts-dialog-border-width) solid var(--color-border);
z-index: 1000;
background: var(--color-background-primary);
border-radius: var(--dialog-border-radius);
padding: 24px;
margin: -8px -12px 0 -12px;
width: var(--login-buttons-accounts-dialog-width);
box-shadow: var(--box-shadow-dialog);
font-size: var(--font-size-base);
color: var(--color-text-primary);
}
.accounts-dialog > * {
line-height: 1.6;
}
.accounts-dialog > .login-close-text {
line-height: inherit;
font-size: inherit;
font-family: inherit;
}
.accounts-dialog label, .accounts-dialog .title {
font-size: var(--font-size-small);
margin-top: 1rem;
margin-bottom: 0.375rem;
display: block;
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
letter-spacing: 0.01em;
}
.accounts-dialog input[type=text],
.accounts-dialog input[type=email],
.accounts-dialog input[type=password] {
box-sizing: border-box;
width: 100%;
height: auto;
font-size: 1rem;
padding: 0.5rem;
border-radius: 4px;
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#login-buttons input[type=text]:focus,
#login-buttons input[type=email]:focus,
#login-buttons input[type=password]:focus,
.accounts-dialog input[type=text]:focus,
.accounts-dialog input[type=email]:focus,
.accounts-dialog input[type=password]:focus {
outline: none;
border-color: var(--color-input-focus-border);
box-shadow: var(--box-shadow-input-focus);
}
.accounts-dialog .login-button-form-submit {
margin-top: 8px;
}
.accounts-dialog .message {
font-size: var(--font-size-smaller);
margin-top: 10px;
line-height: 1.4;
padding: 0.375rem 0;
}
.accounts-dialog .error-message {
color: var(--color-error);
padding: 0.375rem 0.625rem;
background-color: rgba(231, 76, 60, 0.1);
border-radius: 4px;
margin-bottom: 0.75rem;
}
.accounts-dialog .info-message {
color: var(--color-success);
padding: 0.375rem 0.625rem;
background-color: rgba(46, 204, 113, 0.1);
border-radius: 4px;
margin-bottom: 0.75rem;
}
.accounts-dialog .additional-link {
font-size: var(--font-size-smallest);
margin-top: 1rem;
display: inline-block;
}
.accounts-dialog .accounts-close {
position: absolute;
top: 12px;
right: 16px;
font-size: 18px;
font-weight: var(--font-weight-bold);
line-height: 18px;
text-decoration: none;
color: var(--color-text-secondary);
opacity: 0.6;
transition: opacity var(--transition-speed-normal) var(--transition-timing);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.accounts-dialog .accounts-close:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.05);
}
.accounts-dialog #login-buttons-cancel-reset-password {
float: right;
}
.accounts-dialog #login-buttons-cancel-enroll-account {
float: right;
}
#login-dropdown-list {
position: absolute;
top: calc(-1 * var(--meteor-accounts-dialog-border-width));
left: calc(-1 * var(--meteor-accounts-dialog-border-width));
}
#login-buttons.login-buttons-dropdown-align-right #login-dropdown-list {
left: auto;
right: calc(-1 * var(--meteor-accounts-dialog-border-width));
}
#login-buttons-message-dialog .message {
/* we intentionally want it bigger on this dialog since it's the only thing displayed */
font-size: 100%;
}
.accounts-centered-dialog {
font-family: var(--font-family-primary);
z-index: 1001;
position: fixed;
/* Modern centering approach using transform */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: var(--login-buttons-accounts-dialog-width);
}
#configure-login-service-dialog {
width: var(--configure-login-service-dialog-width);
/* Using transform for centering instead of negative margins */
}
#configure-login-service-dialog table {
width: 100%;
}
#configure-login-service-dialog input[type=text] {
width: 100%;
font-family: var(--font-family-monospace);
}
#configure-login-service-dialog ol {
margin-top: 10px;
margin-bottom: 10px;
}
#configure-login-service-dialog ol li {
margin-left: 30px;
}
#configure-login-service-dialog .configuration_labels {
width: 30%;
}
#configure-login-service-dialog .configuration_inputs {
width: 70%;
}
#configure-login-service-dialog .new-section {
margin-top: 10px;
}
#configure-login-service-dialog .url {
font-family: var(--font-family-monospace);
}
#configure-login-service-dialog-save-configuration {
float: right;
}
.configure-login-service-dismiss-button {
float: left;
}
#just-verified-dismiss-button, #messages-dialog-dismiss-button {
margin-top: 8px;
}
.hide-background {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
background-color: var(--color-overlay);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
#login-buttons input[type=text],
#login-buttons input[type=email],
#login-buttons input[type=password],
.accounts-dialog input[type=text],
.accounts-dialog input[type=email],
.accounts-dialog input[type=password] {
padding: 0.625rem 0.75rem;
border: 1px solid var(--color-input-border);
border-radius: var(--input-border-radius);
line-height: var(--line-height-base);
font-size: var(--font-size-base);
color: var(--color-text-primary);
background-color: var(--color-background-primary);
width: 100%;
box-sizing: border-box;
transition: border-color var(--transition-speed-normal) var(--transition-timing),
box-shadow var(--transition-speed-normal) var(--transition-timing);
}/* Import the CSS from accounts-ui-unstyled */
@import url("{accounts-ui-unstyled}/login_buttons.import.css");.at-title {
margin-bottom: 1rem;
}
.at-social-btn {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.at-wrap {
text-align: center;
}
.at-left {
text-align: left !important;
}
.at-grid {
height: 100%;
}
.at-column {
max-width: 520px;
}
.at-input.validating * {
cursor: progress;
}
.at-pwd-link {
margin-bottom: 1rem;
}
.at-signin-link,
.at-signup-link {
margin-top: 1rem;
}#popupPayment #createPaymentMethod_stripe button {
float: left;
display: block;
background-color: #ffffff;
color: #4c4e4e;
border-radius: 4px;
border: 0;
margin-top: 10px;
font-size: 17px;
font-weight: bold;
width: 100%;
line-height: 50px;
outline: none;
}
#popupPayment #createPaymentMethod_stripe button:focus {
background: none;
color: #ffffff;
border: 1px solid #ffffff;
}
#popupPayment #createPaymentMethod_stripe button:active {
background: none;
color: #ffffff;
border: 1px solid #ffffff;
}
#popupPayment #createPaymentMethod_stripe .outcome {
float: left;
width: 100%;
padding-top: 21px;
padding-bottom: 0px;
min-height: 20px;
}
#popupPayment #createPaymentMethod_stripe .success,
#popupPayment #createPaymentMethod_stripe .error {
display: none;
font-size: 15px;
}
#popupPayment #createPaymentMethod_stripe .success.visible,
#popupPayment #createPaymentMethod_stripe .error.visible {
display: inline;
}
#popupPayment #createPaymentMethod_stripe .error {
color: #E4584C;
}
#popupPayment #createPaymentMethod_stripe .success {
color: #34D08C;
}
#popupPayment #createPaymentMethod_stripe .success .token {
font-weight: 500;
font-size: 15px;
}
#popupPayment #createPaymentMethod_stripe .outcome * {
font-size: 17px;
letter-spacing: 0.17px;
color: black;
font-weight: bold;
}
#popupPayment #createPaymentMethod_stripe input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px #1eadd3 inset;
-webkit-text-fill-color: white !important;
}
/* General styles */
#inventoryInCartForm #createPaymentMethod_stripe button {
display: none;
}
#inventoryInCartForm #createPaymentMethod_stripe .outcome {
float: left;
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
min-height: 20px;
}
#inventoryInCartForm #createPaymentMethod_stripe .success,
#inventoryInCartForm #createPaymentMethod_stripe .error {
display: none;
font-size: 15px;
}
#inventoryInCartForm #createPaymentMethod_stripe .success.visible,
#inventoryInCartForm #createPaymentMethod_stripe .error.visible {
display: inline;
}
#inventoryInCartForm #createPaymentMethod_stripe .error {
color: #E4584C;
}
#inventoryInCartForm #createPaymentMethod_stripe .success {
color: #34D08C;
}
#inventoryInCartForm #createPaymentMethod_stripe .success .token {
font-weight: 500;
font-size: 15px;
}
#inventoryInCartForm #createPaymentMethod_stripe .outcome * {
font-size: 17px;
letter-spacing: 0.17px;
color: black;
font-weight: bold;
}
#inventoryInCartForm #createPaymentMethod_stripe input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px white inset;
-webkit-text-fill-color: #333 !important;
}
#inventoryInCartForm .ElementsApp,
#inventoryInCartForm .ElementsApp .InputElement {
color: black !important;
}
#inventoryInCartForm #card-element {
border: none !important;
color: black !important;
border-radius: 5px !important;
margin-top: 10px !important;
padding: 10px !important;
padding-left: 15px !important;
padding-right: 15px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.177) !important;
letter-spacing: 0.75px !important;
background: var(--jmkr-color-1) !important;
}
#stripe-checkout-container {
z-index: 10000 !important;
width: calc(100% - 2em) !important;
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-width: 400px !important;
max-height: calc(100vh - 2em) !important;
height: 100% !important;
border-radius: 10px !important;
padding: 10px !important;
background-color: white !important;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
overflow: auto;
}
#stripe-checkout-container iframe {}
#stripe-checkout-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
z-index: 9900;
}
#stripe-checkout-container {
display: none;
}#conversationAttachment #picture {
border-radius: 4px;
background-color: rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(50% - 17px);
padding-bottom: calc(50% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#conversationAttachment #clickHere {
margin-top: 11px;
border-radius: 4px;
background-color: rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(5% - 17px);
padding-bottom: calc(5% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#conversationAttachment img {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#conversationAttachment #progressBar {
border-radius: 7px;
background-color: rgba(0,0,0,0.1);
width: 177px;
height: 7px;
margin-left: auto;
margin-right: auto;
margin-top: 17px;
}
#conversationAttachment #progress {
border-radius: 7px;
background-color: var(--jmkr-color-1);
height: 7px;
}#picture___ {
border-radius: 4px;
border: 2px dashed var(--jmkr-color-1);
background-color: #22b1cd17;
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(17% - 17px);
padding-bottom: calc(17% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
}
.delete_picture___ {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: var(--jmkr-color-1);
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.delete_picture___ i {
margin: 0 !important;
}
/* Download button styling to match delete button pattern */
.download_contentFile {
position: absolute;
bottom: 10px;
left: 7.5px;
cursor: pointer;
height: 30px;
line-height: 30px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.download_contentFile:hover {
background-color: var(--jmkr-color-1);
color: white;
transform: scale(1.05);
}
.download_contentFile a {
display: block;
color: var(--jmkr-color-1);
text-decoration: none;
width: 100%;
height: 100%;
line-height: inherit;
}
.download_contentFile:hover a {
color: white;
}
.download_contentFile i {
margin: 0 !important;
font-size: 14px;
}
/* Ensure parent column can contain absolutely positioned buttons */
.display_contentFile .ui.grid .column {
position: relative;
padding-bottom: 45px !important;
}
.display_contentFile__preview {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
background: #f9fbfc;
padding: 12px;
margin-bottom: 12px;
max-height: calc(100vh - 370px);
overflow: auto;
}
.display_contentFile__preview--html {
background: #f4f8ff;
}
.display_contentFile__preview--csv {
background: #f6fbf4;
}
.display_contentFile__preview--markdown {
background: #fdf8f2;
}
.display_contentFile__preview--docx {
background: #f5f3ff;
}
.display_contentFile__preview--text {
background: #f8f9fa;
}
.display_contentFile__preview--transcript {
background: #f4f9f4;
border-left: 3px solid #4caf50;
}
.display_contentFile__transcriptHeader {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: #334155;
margin-bottom: 10px;
}
.display_contentFile__transcriptHeader i {
color: #4caf50;
font-size: 15px;
}
.display_contentFile__transcriptMeta {
font-weight: 400;
font-size: 11px;
color: rgba(0, 0, 0, 0.45);
margin-left: auto;
}
.display_contentFile__transcriptToggle {
border: none;
background: rgba(0, 0, 0, 0.04);
border-radius: 4px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: rgba(0, 0, 0, 0.5);
transition: background 0.15s ease, color 0.15s ease;
}
.display_contentFile__transcriptToggle:hover {
background: rgba(0, 0, 0, 0.08);
color: rgba(0, 0, 0, 0.7);
}
.display_contentFile__transcriptContent {
margin: 0;
padding: 0;
background: transparent;
color: #334155;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
line-height: 1.7;
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
border: none;
}
.display_contentFile__loading,
.display_contentFile__error,
.display_contentFile__empty,
.display_contentFile__truncated {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: rgba(0, 0, 0, 0.65);
}
.display_contentFile__error {
color: #d93f3f;
}
.display_contentFile__htmlIframe {
width: 100%;
min-height: 400px;
height: calc(100vh - 370px);
border: none;
border-radius: 4px;
background: #fff;
}
/* ============================================
Markdown Preview Rich Text Styling
Based on publicDocument.css patterns
============================================ */
.display_contentFile__markdownContent {
line-height: 1.7;
color: #334155;
font-size: 15px;
}
/* ---------- Headings ---------- */
.display_contentFile__markdownContent h1 {
font-size: 1.75rem;
font-weight: 700;
color: #0f172a;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--jmkr-color-1);
line-height: 1.3;
}
.display_contentFile__markdownContent h1:first-child {
margin-top: 0;
}
.display_contentFile__markdownContent h2 {
font-size: 1.35rem;
font-weight: 700;
color: #1e293b;
margin-top: 1.5rem;
margin-bottom: 0.6rem;
line-height: 1.3;
}
.display_contentFile__markdownContent h2:first-child {
margin-top: 0;
}
.display_contentFile__markdownContent h3 {
font-size: 1.1rem;
font-weight: 600;
color: #334155;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.display_contentFile__markdownContent h3:first-child {
margin-top: 0;
}
.display_contentFile__markdownContent h4,
.display_contentFile__markdownContent h5,
.display_contentFile__markdownContent h6 {
font-size: 1rem;
font-weight: 600;
color: #475569;
margin-top: 1rem;
margin-bottom: 0.4rem;
line-height: 1.4;
}
/* ---------- Paragraphs ---------- */
.display_contentFile__markdownContent p {
margin-bottom: 1rem;
line-height: 1.7;
}
.display_contentFile__markdownContent p:last-child {
margin-bottom: 0;
}
/* ---------- Lists ---------- */
.display_contentFile__markdownContent ul,
.display_contentFile__markdownContent ol {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.display_contentFile__markdownContent li {
margin-bottom: 0.35rem;
line-height: 1.6;
}
.display_contentFile__markdownContent li p {
margin-bottom: 0.15rem;
}
.display_contentFile__markdownContent ul ul,
.display_contentFile__markdownContent ul ol,
.display_contentFile__markdownContent ol ul,
.display_contentFile__markdownContent ol ol {
margin-top: 0.35rem;
margin-bottom: 0.35rem;
}
/* ---------- Links ---------- */
.display_contentFile__markdownContent a {
color: var(--jmkr-color-1);
text-decoration: none;
font-weight: 500;
}
.display_contentFile__markdownContent a:hover {
text-decoration: underline;
}
/* ---------- Text Emphasis ---------- */
.display_contentFile__markdownContent strong,
.display_contentFile__markdownContent b {
font-weight: 600;
color: #1e293b;
}
.display_contentFile__markdownContent em,
.display_contentFile__markdownContent i {
font-style: italic;
color: #64748b;
}
.display_contentFile__markdownContent del {
text-decoration: line-through;
color: #94a3b8;
}
/* ---------- Blockquotes ---------- */
.display_contentFile__markdownContent blockquote {
border-left: 4px solid var(--jmkr-color-1);
margin: 1rem 0;
padding: 0.75rem 1rem;
color: #475569;
font-style: italic;
background: rgba(0, 0, 0, 0.02);
border-radius: 0 4px 4px 0;
}
.display_contentFile__markdownContent blockquote p {
margin-bottom: 0.5rem;
}
.display_contentFile__markdownContent blockquote p:last-child {
margin-bottom: 0;
}
/* ---------- Code ---------- */
.display_contentFile__markdownContent code {
background: #f1f5f9;
padding: 0.15rem 0.4rem;
border-radius: 4px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 0.875em;
color: #0f172a;
}
.display_contentFile__markdownContent pre {
background: #1e293b;
color: #e2e8f0;
padding: 1rem;
border-radius: 6px;
overflow-x: auto;
margin: 1rem 0;
font-size: 0.875rem;
line-height: 1.5;
}
.display_contentFile__markdownContent pre code {
background: none;
padding: 0;
color: inherit;
font-size: inherit;
}
/* ---------- Tables ---------- */
.display_contentFile__markdownContent table {
width: 100%;
border-collapse: collapse;
margin: 1.25rem 0;
font-size: 14px;
border: 1px solid #e2e8f0;
border-radius: 4px;
overflow: hidden;
}
.display_contentFile__markdownContent th {
background-color: #f8fafc;
font-weight: 600;
color: #1e293b;
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 2px solid #e2e8f0;
}
.display_contentFile__markdownContent td {
padding: 0.65rem 1rem;
border-bottom: 1px solid #e2e8f0;
vertical-align: top;
}
.display_contentFile__markdownContent tr:last-child td {
border-bottom: none;
}
.display_contentFile__markdownContent tr:nth-child(even) {
background-color: #f8fafc;
}
/* ---------- Horizontal Rule ---------- */
.display_contentFile__markdownContent hr {
border: none;
border-top: 2px solid #e2e8f0;
margin: 1.5rem 0;
}
/* ---------- Images ---------- */
.display_contentFile__markdownContent img {
max-width: 100%;
height: auto;
border-radius: 6px;
margin: 0.5rem 0;
}
/* ---------- Task Lists (Checkboxes) ---------- */
.display_contentFile__markdownContent input[type="checkbox"] {
margin-right: 0.5rem;
vertical-align: middle;
}
/* Legacy class support */
.display_contentFile__markdownHeading {
margin-top: 12px;
font-weight: 600;
}
.display_contentFile__markdownList {
margin-left: 20px;
padding-left: 12px;
}
.display_contentFile__markdownParagraph {
margin: 6px 0;
}
.display_contentFile__textContent {
margin: 0;
padding: 0;
background: transparent;
color: #334155;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
}
/* Edit Button and Editor Styles */
.display_contentFile__editAction {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.display_contentFile__editButton {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--jmkr-color-1);
color: #ffffff;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.display_contentFile__editButton:hover {
background: var(--jmkr-color-1-dark, #1a8eb8);
box-shadow: 0 4px 12px rgba(30, 171, 211, 0.25);
}
.display_contentFile__editButton i {
font-size: 12px;
}
.display_contentFile__editorWrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
.display_contentFile__textEditor {
width: 100%;
min-height: 300px;
padding: 16px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
font-size: 13px;
line-height: 1.6;
color: #334155;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.15);
border-radius: 6px;
resize: vertical;
box-sizing: border-box;
}
.display_contentFile__textEditor:focus {
outline: none;
border-color: var(--jmkr-color-1);
box-shadow: 0 0 0 3px rgba(30, 171, 211, 0.12);
}
.display_contentFile__editorActions {
display: flex;
gap: 10px;
justify-content: flex-start;
}
.display_contentFile__editorButton {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.display_contentFile__editorButton i {
font-size: 12px;
}
.display_contentFile__editorButton--save {
background: var(--jmkr-color-1);
color: #ffffff;
}
.display_contentFile__editorButton--save:hover {
background: var(--jmkr-color-1-dark, #1a8eb8);
box-shadow: 0 4px 12px rgba(30, 171, 211, 0.25);
}
.display_contentFile__editorButton--cancel {
background: #f1f5f9;
color: #475569;
}
.display_contentFile__editorButton--cancel:hover {
background: #e2e8f0;
}
.display_contentFile__docxContent {
min-height: 160px;
color: rgba(0, 0, 0, 0.8);
}
.display_contentFile__docxContent p {
margin: 6px 0;
}
.display_contentFile__tableWrapper {
max-height: 260px;
overflow: auto;
}
.display_contentFile__table {
width: 100%;
border-collapse: collapse;
background: white;
}
.display_contentFile__table td {
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 6px 8px;
font-size: 12px;
white-space: nowrap;
}
.display_contentFile__table tr:nth-child(even) td {
background: rgba(0, 0, 0, 0.02);
}
.display_contentFile__thumbnailGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
padding: 4px 0;
}
.display_contentFile__thumbnailCard {
position: relative;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 8px;
background: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 160px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.display_contentFile__thumbnailCard:hover {
transform: translateY(-3px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.display_contentFile__thumbnailInner {
display: flex;
flex-direction: column;
height: 100%;
padding: 12px;
}
.display_contentFile__thumbnailPreview {
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.02);
border-radius: 6px;
height: 90px;
margin-bottom: 10px;
}
.display_contentFile__thumbnailPreview img {
max-height: 88px;
max-width: 100%;
border-radius: 4px;
object-fit: cover;
}
.display_contentFile__thumbnailPreview i {
font-size: 32px;
color: rgba(0, 0, 0, 0.35);
}
.display_contentFile__thumbnailMeta {
flex: 1;
}
.display_contentFile__thumbnailName {
font-size: 13px;
font-weight: 600;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.display_contentFile__thumbnailType {
font-size: 11px;
color: rgba(0, 0, 0, 0.45);
margin-top: 2px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.display_contentFile__thumbnailActions {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 12px;
}
.display_contentFile__thumbnailButton {
border: 0;
background: rgba(0, 0, 0, 0.04);
border-radius: 5px;
width: 32px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(0, 0, 0, 0.55);
transition: background 0.2s ease, color 0.2s ease;
cursor: pointer;
}
.display_contentFile__thumbnailButton:hover {
background: var(--jmkr-color-1);
color: white;
}
.display_contentFile__thumbnailButton i {
margin: 0;
font-size: 13px;
}
.display_contentFile__thumbnailInner.is-readonly {
border-left: 3px solid rgba(0, 0, 0, 0.1);
}
.display_contentFile__thumbnailInner.is-editable {
border-left: 3px solid var(--jmkr-color-1);
}
#audio___ {
width: 100%;
}
#video___ {
width: 100%;
}
#pdf___ {
width: 100%;
}
#contentForm #clickHere {
margin-top: 11px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.1);
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(5% - 17px);
padding-bottom: calc(5% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#contentForm img {
padding-top: 0px !important;
padding-bottom: 0px !important;
height: 200px;
object-fit: contain;
}
#contentForm #progressBar {
border-radius: 7px;
background-color: rgba(0, 0, 0, 0.1);
width: 177px;
height: 7px;
margin-left: auto;
margin-right: auto;
margin-top: 17px;
}
#contentForm #progress {
border-radius: 7px;
background-color: var(--jmkr-color-1);
height: 7px;
}
/* ============================================
Public File Page Overrides
When display_contentFile renders on the public file page (FileFolderPage),
remove the constrained preview box and match the inline HTML Document
gold standard: full-width, white background, generous padding.
Pattern source: fileFolderPreview_webText publicDocument__richText
============================================ */
.publicPage .display_contentFile__preview {
max-height: none;
border: none;
border-radius: 0;
background: #fff;
padding: 20px 0;
margin-bottom: 0;
}
.publicPage .display_contentFile__preview--markdown {
background: #fff;
}
.publicPage .display_contentFile__preview--html {
background: #fff;
}
.publicPage .display_contentFile__markdownContent {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 16px;
line-height: 1.7;
color: #1e293b;
}
/* On file page, the 3-column grid wrapper is unnecessary for a single file.
Override to full width for better readability. */
.publicPage .display_contentFile .ui.grid .column {
width: 100% !important;
padding-bottom: 12px !important;
}
/* Hide the inline download button on file page — FileFolderPage has its own download section */
.publicPage .download_contentFile {
display: none;
}
/* ============================================
Embed Mode File Type Renderers (Spec 1196 W2)
Type-specific styles for files displayed inside the
embed iframe. All rules scoped under .fileFolderPage--embed.
Pattern source: fileFolder.css:1268-1284 (W1 embed selectors)
============================================ */
/* Grid layout: remove extra padding for edge-to-edge media content */
.fileFolderPage--embed .display_contentFile .ui.grid .column {
padding-bottom: 0 !important;
}
/* Images: clean embed appearance, fill viewport, maintain aspect ratio */
/* Overrides base #picture___ (line 1): removes dashed border, tinted bg, and proportional padding */
.fileFolderPage--embed #picture___ {
border: none;
border-radius: 0;
background-color: transparent;
padding-top: 0;
padding-bottom: 0;
max-height: 100vh;
object-fit: contain;
display: block;
}
/* PDF: full viewport height viewer */
.fileFolderPage--embed #pdf___ {
height: calc(100vh - 20px);
}
/* Video: responsive player, maintain aspect ratio */
.fileFolderPage--embed #video___ {
width: 100%;
height: auto;
max-height: 100vh;
object-fit: contain;
display: block;
}
/* Audio: compact centered player */
.fileFolderPage--embed #audio___ {
width: 90%;
margin: auto;
display: block;
}
/* Text-based previews: embed-optimized layout */
/* Overrides base .display_contentFile__preview (line 92): removes max-height constraint, */
/* border/border-radius chrome, and adjusts padding for compact embed readability. */
/* Self-sufficient — does not rely on .publicPage overrides (line 790) for correctness. */
.fileFolderPage--embed .display_contentFile__preview {
max-height: none;
border: none;
border-radius: 0;
background: #fff;
padding: 12px 16px;
margin-bottom: 0;
}
/* HTML iframe: viewport-sized, override min-height for small embeds */
.fileFolderPage--embed .display_contentFile__htmlIframe {
min-height: 0;
height: calc(100vh - 40px);
border-radius: 0;
}#conversationAttachment #picture {
border-radius: 4px;
background-color: rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(50% - 17px);
padding-bottom: calc(50% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#conversationAttachment #clickHere {
margin-top: 11px;
border-radius: 4px;
background-color: rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(5% - 17px);
padding-bottom: calc(5% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#conversationAttachment img {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#conversationAttachment #progressBar {
border-radius: 7px;
background-color: rgba(0,0,0,0.1);
width: 177px;
height: 7px;
margin-left: auto;
margin-right: auto;
margin-top: 17px;
}
#conversationAttachment #progress {
border-radius: 7px;
background-color: var(--jmkr-color-1);
height: 7px;
}#emailForm #uploadFile {
background: var(--jmkr-color-1);
color: white;
padding: 11px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
letter-spacing: 0.7px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
}#FormPage #uploadFile,
.formFieldListRow #uploadFile {
background: var(--jmkr-color-1);
color: white;
margin-top: 11px;
padding: 11px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
letter-spacing: 0.7px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
}#serviceTypeForm #picture {
border-radius: 4px;
border: 2px dashed var(--jmkr-color-1);
background-color: rgba(0,0,0,0.1);
background-size: 90%;
background-position: center;
width: 100%;
padding-top: calc(50% - 17px);
padding-bottom: calc(50% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#serviceTypeForm #clickHere {
margin-top: 11px;
border-radius: 4px;
background-color: rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(5% - 17px);
padding-bottom: calc(5% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#serviceTypeForm img {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#serviceTypeForm #progressBar {
border-radius: 7px;
background-color: rgba(0,0,0,0.1);
width: 177px;
height: 7px;
margin-left: auto;
margin-right: auto;
margin-top: 17px;
}
#serviceTypeForm #progress {
border-radius: 7px;
background-color: var(--jmkr-color-1);
height: 7px;
}#Dashboard #picture,
#AccountInformation #picture {
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.1);
background-size: cover;
background-position: center;
width: 350px;
padding-top: calc(350px/2 - 17px);
padding-bottom: calc(350px/2 - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
cursor: pointer;
}
#Dashboard #clickHere {
margin-top: 11px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.1);
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(5% - 17px);
padding-bottom: calc(5% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#Dashboard img,
#AccountInformation img {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#Dashboard #progressBar {
border-radius: 7px;
background-color: rgba(0, 0, 0, 0.1);
max-width: 350px;
height: 7px;
margin-top: 17px;
}
#Dashboard #progress {
border-radius: 7px;
background-color: var(--jmkr-color-1);
height: 7px;
}#accountSetting #picture {
border-radius: 4px;
background-color: rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(50% - 17px);
padding-bottom: calc(50% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#accountSetting #clickHere {
margin-top: 11px;
border-radius: 4px;
background-color: rgba(0,0,0,0.1);
background-size: cover;
background-position: center;
width: 100%;
padding-top: calc(5% - 17px);
padding-bottom: calc(5% - 17px);
text-align: center;
letter-spacing: 0.75px;
color: var(--jmkr-color-1) !important;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#accountSetting img {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#accountSetting #progressBar {
border-radius: 7px;
background-color: rgba(0,0,0,0.1);
width: 177px;
height: 7px;
margin-left: auto;
margin-right: auto;
margin-top: 17px;
}
#accountSetting #progress {
border-radius: 7px;
background-color: var(--jmkr-color-1);
height: 7px;
}#popupPaymentBG {
z-index: 111;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
}
#popupPayment .form input,
#popupPayment .form label {
color: white !important;
}
#popupPayment .form input {
background: none !important;
border: none !important;
border-bottom: 1px solid white !important;
}
#popupPayment {
z-index: 112;
position: fixed;
background-color: var(--jmkr-color-1);
left: 0px;
top: calc(50% - 510px/2);
max-height: calc(100% - 17px*2);
left: calc(50% - 500px/2);
width: 500px;
padding: 34px;
padding-bottom: 17px;
border-radius: 5px;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#popupPayment #title {
text-align: center;
padding-bottom: 17px;
font-size: 20px;
color: white;
line-height: 25px;
font-weight: bold;
letter-spacing: 1px;
}
@media screen and (max-width: 767px) {
#popupPayment {
left: 11px;
width: calc(100% - 22px);
padding: 17px;
}
#popupPayment #title {
text-align: left;
padding-bottom: 0px;
font-size: 13px;
color: white;
text-transform: uppercase;
letter-spacing: 2px;
}
}
.mobile #popupPayment {
top: 60px;
max-height: calc(100% - 60px);
left: 0px;
width: calc(100% - 0px);
border-radius: 0px;
padding: 17px;
}
#popupPayment #close {
margin-top: 11px;
text-align: center;
width: 100%;
font-size: 27px;
color: white;
line-height: 60px;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
}
#popupPayment #disclaimer {
letter-spacing: 0.5px;
color: white;
font-size: 12px;
padding-bottom: 11px;
text-align: center;
width: 190px;
margin-left: auto;
margin-right: auto;
}
#popupPayment #poweredBy {
background-image: url('jmkr/poweredbystripe.png');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 28px;
margin-top: 0px;
}#pdf-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #f0f0f0;
overflow: hidden;
font-family: Arial, sans-serif;
}
#pdf-overlay {
position: absolute;
top: calc(60px + 1.7em);
left: 50%;
transform: translateX(-50%);
pointer-events: none;
width: auto;
height: calc(100% - 40px);
}
.pdf-field-highlight,
.pdf-field-link {
z-index: 1;
position: absolute;
border: 1px solid #00f;
background-color: rgba(0, 0, 255, 0.1);
cursor: pointer;
pointer-events: auto;
transform-origin: top left;
}
.pdf-field-link {
z-index: 2;
border: 1px solid rgb(0, 255, 98);
background-color: rgba(0, 255, 102, 0.35);
position: absolute;
overflow: hidden;
}
.pdf-field-link-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0px;
border-radius: 3px;
font-size: 11px;
letter-spacing: -0.05em;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90%;
}
#pdf-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
background: #fafafa;
border-bottom: 1px solid #ccc;
padding: 0.5rem 1rem;
}
#pdf-toolbar .toolbar-section {
display: flex;
align-items: center;
gap: 1rem;
}
#pdf-page-refresh,
#pdf-page-previousButton,
#pdf-page-nextButton,
#pdf-page-rotate {
cursor: pointer;
user-select: none;
}
#pdf-page-refresh {
opacity: 0.5;
}
#pdf-page-info {
font-weight: bold;
}
.zoom-container {
display: flex;
align-items: center;
gap: 0.5rem;
}
#pdf-zoom-slider {
width: 100px;
cursor: pointer;
}
#zoom-value {
min-width: 2em;
}
#pdf-canvas {
flex: 1 1 auto;
background: #fff;
display: block;
margin: 1.7em auto !important;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100% - 40px);
}
.lucide-icon {
font-family: 'lucide' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.125em;
speak: never;
}
/* Size variants (matching Fomantic) */
.lucide-icon.mini { font-size: 0.4em; }
.lucide-icon.tiny { font-size: 0.5em; }
.lucide-icon.small { font-size: 0.75em; }
.lucide-icon.large { font-size: 1.5em; }
.lucide-icon.big { font-size: 2em; }
.lucide-icon.huge { font-size: 4em; }
.lucide-icon.massive { font-size: 8em; }
/* Color modifiers */
.lucide-icon.red { color: #db2828; }
.lucide-icon.orange { color: #f2711c; }
.lucide-icon.yellow { color: #fbbd08; }
.lucide-icon.olive { color: #b5cc18; }
.lucide-icon.green { color: #21ba45; }
.lucide-icon.teal { color: #00b5ad; }
.lucide-icon.blue { color: #2185d0; }
.lucide-icon.violet { color: #6435c9; }
.lucide-icon.purple { color: #a333c8; }
.lucide-icon.pink { color: #e03997; }
.lucide-icon.brown { color: #a5673f; }
.lucide-icon.grey, .lucide-icon.gray { color: #767676; }
.lucide-icon.black { color: #1b1c1d; }
.lucide-icon.white { color: #ffffff; }
/* Loading animation */
.lucide-icon.loading {
animation: lucide-spin 1s linear infinite;
}
@keyframes lucide-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* State modifiers */
.lucide-icon.disabled {
opacity: 0.45;
pointer-events: none;
}
.lucide-icon.fitted {
width: auto;
margin: 0;
}
/* Link icons */
.lucide-icon.link {
cursor: pointer;
opacity: 0.8;
transition: opacity 0.1s ease;
}
.lucide-icon.link:hover {
opacity: 1;
}
/* Circular icons */
.lucide-icon.circular {
border-radius: 500em;
line-height: 1;
padding: 0.5em;
box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
width: 2em;
height: 2em;
}
/* Bordered icons */
.lucide-icon.bordered {
line-height: 1;
vertical-align: baseline;
width: 2em;
height: 2em;
padding: 0.5em;
box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
border-radius: 0.25em;
}
/* Inverted icons */
.lucide-icon.inverted {
color: #ffffff;
}
.lucide-icon.inverted.red { background-color: #db2828; }
.lucide-icon.inverted.orange { background-color: #f2711c; }
.lucide-icon.inverted.yellow { background-color: #fbbd08; }
.lucide-icon.inverted.green { background-color: #21ba45; }
.lucide-icon.inverted.teal { background-color: #00b5ad; }
.lucide-icon.inverted.blue { background-color: #2185d0; }
.lucide-icon.inverted.purple { background-color: #a333c8; }
.lucide-icon.inverted.pink { background-color: #e03997; }
.lucide-icon.inverted.grey, .lucide-icon.inverted.gray { background-color: #767676; }
.lucide-icon.inverted.black { background-color: #1b1c1d; }
/* Flipped icons */
.lucide-icon.horizontally.flipped {
transform: scaleX(-1);
}
.lucide-icon.vertically.flipped {
transform: scaleY(-1);
}
/* Rotated icons */
.lucide-icon.clockwise.rotated {
transform: rotate(90deg);
}
.lucide-icon.counterclockwise.rotated {
transform: rotate(-90deg);
}
/* Corner icons in groups */
.lucide-icon.corner {
position: absolute;
top: auto;
right: auto;
bottom: 0;
left: auto;
font-size: 0.45em;
}
/* Stacked icons container (replaces Fomantic's .icons) */
.lucide-stacked {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.2em;
height: 1.2em;
vertical-align: middle;
}
.lucide-stacked .lucide-icon {
position: absolute;
}
.lucide-stacked .lucide-icon:first-child {
position: relative;
font-size: 1em;
}
.lucide-stacked .lucide-icon:last-child {
font-size: 0.5em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Verified badge variant */
.lucide-stacked.verified .lucide-icon:first-child {
color: var(--jmkr-color-1, #5AB3FF);
}
.lucide-stacked.verified .lucide-icon:last-child {
color: white;
font-size: 0.45em;
}
/* Cancelled/void variant */
.lucide-stacked.cancelled .lucide-icon:first-child {
opacity: 0.5;
}
.lucide-stacked.cancelled .lucide-icon:last-child {
color: var(--jmkr-color-danger, #db2828);
font-size: 0.7em;
}.mc-calendar--inline {
max-width: 400px !important;
box-shadow: 1px 1px 17px rgba(0, 0, 0, 0.17);
}
.mc-select__data--month,
.mc-select__data--month span {
width: 7em !important;
max-width: 7em !important;
}
.mc-calendar--inline .mc-select__data--month,
.mc-calendar--inline .mc-select__data--month span {
width: 8em !important;
max-width: 8em !important;
text-align: left !important;
}.mdtimepicker .mdtp__wrapper .mdtp__clock_holder .mdtp__clock .mdtp__digit.active:before,
.mdtimepicker .mdtp__wrapper .mdtp__clock_holder .mdtp__clock .mdtp__digit.active span,
.mdtimepicker .mdtp__wrapper .mdtp__clock_holder .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover,
.mdtimepicker .mdtp__wrapper .mdtp__clock_holder .mdtp__clock .mdtp__clock_dot,
.mdtimepicker .mdtp__wrapper .mdtp__clock_holder .mdtp__clock .mdtp__am.active,
.mdtimepicker .mdtp__wrapper .mdtp__clock_holder .mdtp__clock .mdtp__pm.active,
.mdtp__wrapper[data-theme='jmkr'] .mdtp__clock .mdtp__digit.active span,
.mdtp__wrapper[data-theme='jmkr'] .mdtp__clock .mdtp__digit:not(.digit--disabled) span:hover,
.mdtp__wrapper[data-theme='jmkr'] .mdtp__time_holder {
background-color: var(--jmkr-color-1) !important;
}
.mdtp__wrapper[data-theme='dark'] .mdtp__button,
.mdtp__wrapper[data-theme='jmkr'] .mdtp__button {
color: var(--jmkr-color-1) !important;
padding: 0px 3.5px !important;
text-align: right !important;
}
.mdtp__wrapper[data-theme='dark'] .mdtp__button:hover,
.mdtp__wrapper[data-theme='jmkr'] .mdtp__button:hover {
background-color: #fff !important;
}
.mdtimepicker .mdtp__wrapper .mdtp__button.cancel {
float: left;
}
.mdtimepicker .mdtp__wrapper {
bottom: calc(50% - 420px/2);
box-shadow: 1px 1px 17px rgba(0, 0, 0, 0.17);
}
.mdtimepicker .mdtp__clock_holder {
background-color: #F5F5F6;
}
.mdtimepicker {
background-color: rgba(0, 0, 0, 0) !important;
}#gtthrAddPaymentMethod_stripe #poweredByStripe {
background-image: url('entrzn/poweredByStripe.png');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 170px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
#gtthrAddPaymentMethod_stripe * {
font-size: 19px;
font-variant: normal;
padding: 0;
margin: 0;
}
#gtthrAddPaymentMethod_stripe html {
height: 100%;
}
#gtthrAddPaymentMethod_stripe body {
background: #424770;
display: flex;
align-items: center;
min-height: 100%;
}
#gtthrAddPaymentMethod_stripe form {
width: auto;
margin: 20px auto;
margin-bottom: 0px;
margin-top: 0px;
}
#gtthrAddPaymentMethod_stripe label {
height: 35px;
position: relative;
color: black;
display: block;
margin-top: 30px;
margin-bottom: 20px;
}
#gtthrAddPaymentMethod_stripe label>span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-weight: 300;
line-height: 32px;
color: black;
border-bottom: 1px solid black;
transition: border-bottom-color 200ms ease-in-out;
cursor: text;
pointer-events: none;
}
#gtthrAddPaymentMethod_stripe label>span span {
position: absolute;
top: 0;
left: 0;
transform-origin: 0% 50%;
transition: transform 200ms ease-in-out;
cursor: text;
}
#gtthrAddPaymentMethod_stripe .ElementsApp,
#gtthrAddPaymentMethod_stripe .ElementsApp .InputElement {
color: black;
}
#gtthrAddPaymentMethod_stripe label .field.is-focused+span span,
#gtthrAddPaymentMethod_stripe label .field:not(.is-empty)+span span {
transform: scale(0.68) translateY(-36px);
cursor: default;
}
#gtthrAddPaymentMethod_stripe label .field.is-focused+span {
border-bottom-color: black;
}
#gtthrAddPaymentMethod_stripe .field {
background: transparent;
font-weight: 300;
border: 0;
color: black;
outline: none;
cursor: text;
display: block;
width: 100%;
line-height: 32px;
padding-bottom: 3px;
transition: opacity 200ms ease-in-out;
}
#gtthrAddPaymentMethod_stripe .field::-webkit-input-placeholder {
color: grey;
}
#gtthrAddPaymentMethod_stripe .field::-moz-placeholder {
color: grey;
}
/* IE doesn't show placeholders when empty+focused */
#gtthrAddPaymentMethod_stripe .field:-ms-input-placeholder {
color: grey;
}
#gtthrAddPaymentMethod_stripe .field.is-empty:not(.is-focused) {
opacity: 0;
}
#gtthrAddPaymentMethod_stripe button {
float: left;
display: block;
background-color: var(--gtthr-dark-color-1);
color: white !important;
border-radius: 4px;
letter-spacing: 0.75px;
border: 0;
margin-top: 0px;
font-size: 19px;
font-weight: bold;
width: 100%;
height: 57px;
line-height: 55px;
outline: none;
}
#gtthrAddPaymentMethod_stripe button:focus {
background: none;
color: black;
border: 1px solid black;
}
#gtthrAddPaymentMethod_stripe button:active {
background: none;
color: black;
border: 1px solid black;
}
#gtthrAddPaymentMethod_stripe .outcome {
float: left;
width: 100%;
padding-top: 21px;
padding-bottom: 17px;
min-height: 20px;
text-align: center;
}
#gtthrAddPaymentMethod_stripe .success,
#gtthrAddPaymentMethod_stripe .error {
display: none;
font-size: 15px;
}
#gtthrAddPaymentMethod_stripe .success.visible,
#gtthrAddPaymentMethod_stripe .error.visible {
display: inline;
}
#gtthrAddPaymentMethod_stripe .error {
color: #E4584C;
}
#gtthrAddPaymentMethod_stripe .success {
color: #34D08C;
}
#gtthrAddPaymentMethod_stripe .success .token {
font-weight: 500;
font-size: 15px;
}
#gtthrAddPaymentMethod_stripe .outcome * {
font-size: 17px;
letter-spacing: 0.17px;
color: #E58D1F;
font-weight: bold;
text-align: center;
}
#gtthrAddPaymentMethod_stripe input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px #1eadd3 inset;
-webkit-text-fill-color: black !important;
}
.chph__accountUsage {
margin-bottom: 10px;
border-bottom: 1px solid var(--chph-border-default);
padding-top: 0px;
}
.chph__accountUsage__loading,
.chph__accountUsage__empty {
padding: 8px 0;
font-size: 12px;
color: var(--chph-text-muted);
text-align: center;
}
.chph__accountUsage__error {
padding: 8px;
font-size: 12px;
color: #e56060;
border-radius: 6px;
background: rgba(229, 96, 96, 0.1);
}
/* ─────────────────────────────────────────────────────────────────
Account Row
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__row {
padding: 6px 0;
}
.chph__accountUsage__row + .chph__accountUsage__row {
border-top: 1px solid var(--chph-border-subtle);
margin-top: 8px;
padding-top: 6px;
}
.chph__accountUsage__row--cartridge {
background: rgba(99, 102, 241, 0.06);
border-radius: 6px;
padding: 6px 8px;
margin: 0px;
border-left: 2px solid rgba(99, 102, 241, 0.5);
}
.chph__accountUsage__row--active {
background: rgba(99, 102, 241, 0.06);
border-radius: 6px;
padding: 6px 8px;
margin: 0px;
border-left: 2px solid rgba(99, 102, 241, 0.5);
}
/* ─────────────────────────────────────────────────────────────────
Header (indicator + name + badges)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
font-size: 12px;
line-height: 1;
}
.chph__accountUsage__indicator {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.chph__accountUsage__indicator--active {
background: #22c55e;
box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
}
.chph__accountUsage__indicator--idle {
background: var(--chph-text-faint);
}
.chph__accountUsage__indicator--error {
background: #e56060;
}
.chph__accountUsage__name {
font-weight: 600;
color: var(--chph-text-primary);
}
.chph__accountUsage__badge {
color: var(--chph-text-muted);
font-size: 11px;
}
.chph__accountUsage__cartridgeBadge {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--chph-accent);
background: rgba(99, 102, 241, 0.12);
border: 1px solid rgba(99, 102, 241, 0.25);
border-radius: 3px;
padding: 1px 5px;
}
.chph__accountUsage__row--error {
opacity: 0.7;
border-left: 2px solid rgba(249, 115, 22, 0.5);
border-radius: 6px;
padding: 6px 8px;
margin: 0 -8px;
}
/* ─────────────────────────────────────────────────────────────────
Action row (Spec 1257) — beneath the name so buttons don't compete
with the name/badges for horizontal space.
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 4px 0 6px 15px; /* align with text after indicator dot */
font-size: 11px;
line-height: 1;
}
.chph__accountUsage__actionBtn {
background: transparent;
border: 1px solid var(--chph-border-default);
color: var(--chph-text-muted);
font-size: 11px;
padding: 3px 8px;
border-radius: 3px;
cursor: pointer;
line-height: 1;
white-space: nowrap;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.chph__accountUsage__actionBtn:hover {
background: rgba(99, 102, 241, 0.08);
border-color: var(--chph-accent);
color: var(--chph-text-primary);
}
.chph__accountUsage__probeBtn {
border-color: rgba(99, 102, 241, 0.4);
color: var(--chph-accent);
}
.chph__accountUsage__probeBtn:hover {
background: rgba(99, 102, 241, 0.12);
border-color: var(--chph-accent);
color: var(--chph-accent);
}
/* The standalone delete-cancel button used in the add-flow header keeps its
legacy bare-glyph styling (no action-button chrome around it). */
.chph__accountUsage__deleteBtn--visible {
background: none;
border: none;
color: var(--chph-text-faint);
font-size: 11px;
cursor: pointer;
padding: 0 2px;
line-height: 1;
opacity: 1;
}
.chph__accountUsage__deleteBtn--visible:hover {
color: #e56060;
}
.chph__accountUsage__errorMsg {
font-size: 11px;
color: #e56060;
padding: 2px 0 2px 13px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.chph__accountUsage__errorCount {
font-size: 10px;
font-weight: 600;
color: #f97316;
font-family: monospace;
}
.chph__accountUsage__cooldown {
font-size: 10px;
color: var(--chph-text-faint);
font-family: monospace;
}
/* ─────────────────────────────────────────────────────────────────
Re-login Button — recovery action, red accent so it stands apart
from the benign Probe button when both sit side-by-side.
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__reloginBtn {
border-color: rgba(229, 96, 96, 0.4);
color: #e56060;
}
.chph__accountUsage__reloginBtn:hover {
background: rgba(229, 96, 96, 0.1);
border-color: #e56060;
color: #ff7070;
}
/* Delete button when it lives in the action row (Spec 1257): hostile-action
tint so it reads as destructive even at a glance. */
.chph__accountUsage__actions .chph__accountUsage__deleteBtn {
border-color: rgba(229, 96, 96, 0.2);
color: var(--chph-text-muted);
}
.chph__accountUsage__actions .chph__accountUsage__deleteBtn:hover {
background: rgba(229, 96, 96, 0.08);
border-color: rgba(229, 96, 96, 0.6);
color: #e56060;
}
/* ─────────────────────────────────────────────────────────────────
Login Flow (auth link + code input)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__loginFlow {
padding: 6px 0 4px 13px;
display: flex;
flex-direction: column;
gap: 6px;
}
.chph__accountUsage__authLink {
font-size: 11px;
color: var(--chph-accent);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.15s ease;
}
.chph__accountUsage__authLink:hover {
color: var(--chph-text-primary);
text-decoration: underline;
}
.chph__accountUsage__codeInput {
display: flex;
gap: 4px;
align-items: center;
}
.chph__accountUsage__codeField {
flex: 1;
font-size: 11px;
font-family: monospace;
padding: 4px 8px;
border: 1px solid var(--chph-border-default);
border-radius: 4px;
background: var(--chph-bg-input, rgba(0, 0, 0, 0.05));
color: var(--chph-text-primary);
outline: none;
min-width: 0;
transition: border-color 0.15s ease;
}
.chph__accountUsage__codeField:focus {
border-color: var(--chph-accent);
}
.chph__accountUsage__codeField::placeholder {
color: var(--chph-text-faint);
font-family: inherit;
}
.chph__accountUsage__codeSubmit {
background: var(--chph-accent);
border: none;
color: white;
font-size: 12px;
width: 24px;
height: 24px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: opacity 0.15s ease;
}
.chph__accountUsage__codeSubmit:hover {
opacity: 0.85;
}
.chph__accountUsage__codeCancel {
background: transparent;
border: 1px solid rgba(229, 96, 96, 0.4);
color: #e56060;
font-size: 12px;
width: 24px;
height: 24px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s ease, border-color 0.15s ease;
}
.chph__accountUsage__codeCancel:hover {
background: rgba(229, 96, 96, 0.1);
border-color: #e56060;
}
/* Inline login error — sits directly underneath the code input so the user
sees feedback next to where they just clicked, not at the top of the panel. */
.chph__accountUsage__loginError {
margin-top: 4px;
padding: 4px 8px;
font-size: 11px;
color: #e56060;
background: rgba(229, 96, 96, 0.08);
border: 1px solid rgba(229, 96, 96, 0.3);
border-radius: 3px;
line-height: 1.35;
}
.chph__accountUsage__loginError--stale {
color: #f97316;
background: rgba(249, 115, 22, 0.08);
border-color: rgba(249, 115, 22, 0.3);
}
.chph__accountUsage__loginErrorHint {
color: var(--chph-text-muted);
font-style: italic;
margin-left: 4px;
}
/* Dead paste-box — the subprocess handle is gone, the field is inert. */
.chph__accountUsage__codeField--stale {
opacity: 0.55;
text-decoration: line-through;
cursor: not-allowed;
}
.chph__accountUsage__codeSubmit[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
/* "Starting wrapped claude auth login…" / "Submitting code…" status rows — shown
while a wrapped-CLI call is in flight. The spinner gives the operator clear
feedback that the click registered; the italic copy explains what is
happening without hijacking the whole panel. */
.chph__accountUsage__loginStatus {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--chph-text-muted);
font-style: italic;
padding: 4px 0;
line-height: 1.35;
}
.chph__accountUsage__loginStatus--submitting {
margin-top: 4px;
color: var(--chph-accent);
font-weight: 500;
}
.chph__accountUsage__spinner {
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid rgba(99, 102, 241, 0.2);
border-top-color: var(--chph-accent);
border-radius: 50%;
animation: chph__accountUsage__spin 0.8s linear infinite;
flex-shrink: 0;
}
@keyframes chph__accountUsage__spin {
to { transform: rotate(360deg); }
}
/* ─────────────────────────────────────────────────────────────────
Gauge Bar
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__gauge {
display: flex;
align-items: center;
gap: 6px;
padding: 1px 0 1px 13px;
}
.chph__accountUsage__label {
font-size: 11px;
color: var(--chph-text-muted);
width: 20px;
flex-shrink: 0;
font-family: monospace;
}
.chph__accountUsage__bar {
flex: 1;
height: 6px;
background: var(--chph-border-default);
border-radius: 3px;
overflow: hidden;
min-width: 0;
}
.chph__accountUsage__fill {
height: 100%;
border-radius: 3px;
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
min-width: 0;
}
.chph__accountUsage__fill--ok {
background: #22c55e;
}
.chph__accountUsage__fill--warning {
background: #eab308;
}
.chph__accountUsage__fill--danger {
background: #e56060;
}
.chph__accountUsage__pct {
font-size: 11px;
color: var(--chph-text-secondary);
width: 28px;
text-align: right;
flex-shrink: 0;
font-family: monospace;
}
/* ─────────────────────────────────────────────────────────────────
Countdown
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__countdown {
font-size: 10px;
color: var(--chph-text-faint);
padding: 0 0 2px 39px;
}
.chph__accountUsage__polledAt {
font-size: 9px;
color: var(--chph-text-faint);
padding: 2px 0 0 39px;
opacity: 0.6;
}
/* ─────────────────────────────────────────────────────────────────
Pool Health Summary (Spec 1011)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__poolHealth {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0 6px;
font-size: 11px;
flex-wrap: wrap;
}
.chph__accountUsage__poolStat {
font-weight: 600;
}
.chph__accountUsage__poolStat--total {
color: var(--chph-text-primary);
font-size: 14px;
margin-right: -2px;
}
.chph__accountUsage__poolStat--total::after {
content: " accts";
font-size: 10px;
font-weight: 400;
color: var(--chph-text-faint);
}
.chph__accountUsage__poolStat--ready {
color: #22c55e;
}
.chph__accountUsage__poolStat--emergency {
color: #d97706;
}
.chph__accountUsage__poolStat--inuse {
color: var(--chph-accent);
}
.chph__accountUsage__poolStat--limited {
color: #ef4444;
}
.chph__accountUsage__poolStat--expired {
color: #e56060;
}
.chph__accountUsage__poolStat--cooling {
color: #eab308;
}
.chph__accountUsage__poolStat--errored {
color: #f97316;
}
.chph__accountUsage__poolLabel {
color: var(--chph-text-faint);
font-weight: 400;
font-size: 10px;
}
.chph__accountUsage__coolingThreshold {
margin-left: auto;
color: var(--chph-text-faint);
font-family: monospace;
font-size: 10px;
cursor: pointer;
}
.chph__accountUsage__coolingThreshold:hover,
.chph__accountUsage__coolingThreshold:focus {
color: var(--chph-text);
outline: none;
}
/* ─────────────────────────────────────────────────────────────────
Aggregate Summary (Collapsed View)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__aggregate {
padding: 2px 0 6px;
display: flex;
flex-direction: column;
gap: 6px;
}
.chph__accountUsage__aggHeader {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0 6px;
font-size: 11px;
flex-wrap: wrap;
}
.chph__accountUsage__aggStats,
.chph__accountUsage__aggFacts {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.chph__accountUsage__aggFacts {
gap: 6px;
}
.chph__accountUsage__aggFact {
font-size: 10px;
font-weight: 600;
border-radius: 999px;
padding: 2px 7px;
background: rgba(148, 163, 184, 0.12);
color: var(--chph-text-secondary);
}
.chph__accountUsage__aggFact--primary {
background: rgba(99, 102, 241, 0.12);
color: var(--chph-accent);
}
.chph__accountUsage__aggFact--cooling {
background: rgba(234, 179, 8, 0.14);
color: #d97706;
}
.chph__accountUsage__aggFact--emergency {
background: rgba(234, 179, 8, 0.2);
color: #eab308;
}
.chph__accountUsage__aggFact--danger {
background: rgba(229, 96, 96, 0.14);
color: #e56060;
}
.chph__accountUsage__aggFact--muted {
background: rgba(148, 163, 184, 0.1);
color: var(--chph-text-faint);
}
.chph__accountUsage__aggGauges {
display: flex;
flex-direction: column;
gap: 4px;
}
.chph__accountUsage__aggGauge {
display: flex;
align-items: center;
gap: 6px;
}
/* ─────────────────────────────────────────────────────────────────
Status Badge + Type Badge (Spec 1011)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__statusBadge {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.5px;
border-radius: 3px;
padding: 1px 5px;
text-transform: uppercase;
}
.chph__accountUsage__status--ready {
color: #22c55e;
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.25);
}
.chph__accountUsage__status--inuse {
color: var(--chph-accent);
background: rgba(99, 102, 241, 0.12);
border: 1px solid rgba(99, 102, 241, 0.25);
}
.chph__accountUsage__status--cooling {
color: #eab308;
background: rgba(234, 179, 8, 0.12);
border: 1px solid rgba(234, 179, 8, 0.25);
}
.chph__accountUsage__status--emergency {
color: #d97706;
background: rgba(217, 119, 6, 0.14);
border: 1px solid rgba(217, 119, 6, 0.3);
}
.chph__accountUsage__status--limited {
color: #ef4444;
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.28);
}
.chph__accountUsage__status--expired {
color: #e56060;
background: rgba(229, 96, 96, 0.12);
border: 1px solid rgba(229, 96, 96, 0.25);
}
.chph__accountUsage__status--errored {
color: #f97316;
background: rgba(249, 115, 22, 0.12);
border: 1px solid rgba(249, 115, 22, 0.25);
}
.chph__accountUsage__typeBadge {
font-size: 9px;
color: var(--chph-text-faint);
font-family: monospace;
text-transform: lowercase;
}
/* ─────────────────────────────────────────────────────────────────
Controls (Toggle + Add + Migrate)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__controls {
display: flex;
align-items: center;
margin-top: 4px;
}
.chph__accountUsage__toggle {
flex: 1;
padding: 3px 0;
background: none;
border: none;
color: var(--chph-text-faint);
font-size: 11px;
cursor: pointer;
text-align: center;
transition: color 0.15s ease;
}
.chph__accountUsage__toggle:hover {
color: var(--chph-text-secondary);
}
@keyframes chphRefreshSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.chph__accountUsage__refreshBtn--spinning {
animation: chphRefreshSpin 1s linear infinite;
}
.chph__accountUsage__refreshBtn,
.chph__accountUsage__addBtn,
.chph__accountUsage__migrateBtn,
.chph__accountUsage__emergencyBtn {
background: none;
border: none;
color: var(--chph-text-faint);
font-size: 14px;
cursor: pointer;
padding: 2px 6px;
line-height: 1;
transition: color 0.15s ease;
flex-shrink: 0;
}
.chph__accountUsage__refreshBtn:hover,
.chph__accountUsage__addBtn:hover,
.chph__accountUsage__migrateBtn:hover {
color: var(--chph-accent);
}
/* ─────────────────────────────────────────────────────────────────
Emergency Mode Button + Badge (Spec 1011)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__emergencyBtn:hover {
color: #eab308;
}
.chph__accountUsage__emergencyBtn--active {
color: #eab308;
text-shadow: 0 0 6px rgba(234, 179, 8, 0.4);
}
.chph__accountUsage__emergencyBadge {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.5px;
color: #eab308;
background: rgba(234, 179, 8, 0.15);
border: 1px solid rgba(234, 179, 8, 0.4);
border-radius: 3px;
padding: 1px 6px;
box-shadow: 0 0 6px rgba(234, 179, 8, 0.3), 0 0 12px rgba(234, 179, 8, 0.15);
animation: chphEmergencyGlow 2s ease-in-out infinite;
}
.chph__accountUsage__emergencyBadge--inline {
animation: none;
box-shadow: none;
}
@keyframes chphEmergencyGlow {
0%, 100% {
box-shadow: 0 0 6px rgba(234, 179, 8, 0.3), 0 0 12px rgba(234, 179, 8, 0.15);
text-shadow: 0 0 4px rgba(234, 179, 8, 0.4);
}
50% {
box-shadow: 0 0 10px rgba(234, 179, 8, 0.5), 0 0 20px rgba(234, 179, 8, 0.25);
text-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
}
}
/* ─────────────────────────────────────────────────────────────────
Add Account Flow
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__addFlow {
border-top: 1px solid var(--chph-border-subtle);
margin-top: 8px;
padding-top: 6px;
}
.chph__accountUsage__addHeader {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
font-size: 12px;
line-height: 1;
}
/* ─────────────────────────────────────────────────────────────────
Token Health Indicator (Spec 1167)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__tokenHealth {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
margin-bottom: 6px;
font-size: 11px;
flex-wrap: wrap;
}
.chph__accountUsage__tokenHealth--collapsed {
margin-top: 2px;
margin-bottom: 2px;
}
.chph__accountUsage__tokenHealth--ok {
background: rgba(34, 197, 94, 0.06);
border: 1px solid rgba(34, 197, 94, 0.2);
}
.chph__accountUsage__tokenHealth--expired {
background: rgba(229, 96, 96, 0.06);
border: 1px solid rgba(229, 96, 96, 0.2);
}
.chph__accountUsage__tokenHealth--emergency {
background: rgba(234, 179, 8, 0.08);
border: 1px solid rgba(234, 179, 8, 0.24);
}
.chph__accountUsage__tokenHealth--limited {
background: rgba(239, 68, 68, 0.07);
border: 1px solid rgba(239, 68, 68, 0.22);
}
.chph__accountUsage__tokenIndicator {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.chph__accountUsage__tokenHealth--ok .chph__accountUsage__tokenIndicator {
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}
.chph__accountUsage__tokenHealth--expired .chph__accountUsage__tokenIndicator {
background: #e56060;
}
.chph__accountUsage__tokenHealth--emergency .chph__accountUsage__tokenIndicator {
background: #eab308;
box-shadow: 0 0 6px rgba(234, 179, 8, 0.45);
}
.chph__accountUsage__tokenHealth--limited .chph__accountUsage__tokenIndicator {
background: #ef4444;
box-shadow: 0 0 6px rgba(239, 68, 68, 0.35);
}
.chph__accountUsage__tokenProfile {
font-weight: 600;
color: var(--chph-text-primary);
}
.chph__accountUsage__tokenStatus {
font-size: 10px;
font-family: monospace;
}
.chph__accountUsage__tokenStatus--ok {
color: #22c55e;
}
.chph__accountUsage__tokenStatus--expired {
color: #e56060;
}
.chph__accountUsage__tokenStatus--emergency {
color: #eab308;
}
.chph__accountUsage__tokenStatus--limited {
color: #ef4444;
}
.chph__accountUsage__tokenMode {
margin-left: auto;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--chph-accent);
background: rgba(99, 102, 241, 0.08);
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 3px;
padding: 1px 5px;
}
/* ─────────────────────────────────────────────────────────────────
Account Pinning (Spec 1167 Wave 4)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__pinBtn {
background: none;
border: none;
cursor: pointer;
padding: 0 2px;
font-size: 11px;
opacity: 0.25;
transition: opacity 0.2s ease;
line-height: 1;
}
.chph__accountUsage__pinBtn:hover {
opacity: 0.7;
}
.chph__accountUsage__pinBtn--active {
opacity: 1;
}
.chph__accountUsage__pinBtn--active:hover {
opacity: 0.6;
}
.chph__accountUsage__pinnedBadge {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #d97706;
background: rgba(217, 119, 6, 0.1);
border: 1px solid rgba(217, 119, 6, 0.25);
border-radius: 3px;
padding: 1px 4px;
}
/* ─────────────────────────────────────────────────────────────────
Current Cartridge Indicator (Spec 1151 — fallback)
───────────────────────────────────────────────────────────────── */
.chph__accountUsage__cartridge {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0 6px;
font-size: 11px;
flex-wrap: wrap;
border-bottom: 1px solid var(--chph-border-subtle);
margin-bottom: 4px;
}
.chph__accountUsage__cartridge--collapsed {
padding-bottom: 2px;
margin-top: 2px;
margin-bottom: 2px;
border-bottom: none;
}
.chph__accountUsage__cartridgeLabel {
color: var(--chph-text-faint);
font-weight: 400;
}
.chph__accountUsage__cartridgeProfile {
color: var(--chph-text-primary);
font-weight: 600;
}
.chph__accountUsage__cartridgeMeta {
color: var(--chph-text-faint);
}
.thought {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.thought__viewBar {
display: flex;
gap: 4px;
padding: 8px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: #161b22;
flex-shrink: 0;
}
.thought__viewBtn {
padding: 6px 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 3.5px;
background: transparent;
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.thought__viewBtn:hover {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.85);
}
.thought__viewBtn--active {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-color: rgba(255, 255, 255, 0.2);
}
/* ── Filters ───────────────────────────────────────────────── */
.thought__filters {
display: flex;
gap: 12px;
padding: 8px 12px;
background: #161b22;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-wrap: wrap;
flex-shrink: 0;
}
.thought__filterGroup {
display: flex;
align-items: center;
gap: 6px;
}
.thought__filterLabel {
font-size: 11px;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.thought__filterInput {
padding: 4px 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 3.5px;
background: rgba(255, 255, 255, 0.04);
color: #e6edf3;
font-size: 12px;
outline: none;
min-width: 120px;
}
.thought__filterInput:focus {
border-color: rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.07);
}
.thought__filterSelect {
appearance: none;
-webkit-appearance: none;
background: rgba(255, 255, 255, 0.06);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
padding: 6px 8px;
padding-right: 28px;
outline: none;
cursor: pointer;
}
.thought__filterSelect:focus {
border-color: rgba(66, 165, 245, 0.5);
}
.thought__filterSelect option {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.85);
}
/* ── Loading / Empty States ────────────────────────────────── */
.thought__loading,
.thought__empty {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
color: rgba(255, 255, 255, 0.4);
font-size: 13px;
font-style: italic;
}
/* ── Constellation View ────────────────────────────────────── */
.thought__constellation {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
position: relative;
}
.thought__canvasWrap {
position: relative;
flex: 1;
min-height: 400px;
background: #0d1117;
overflow: hidden;
}
.thought__canvasWrap canvas:not(.thought__minimap) {
display: block;
width: 100% !important;
height: 100% !important;
}
.thought__legend {
position: absolute;
top: 12px;
left: 12px;
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
padding: 6px 12px;
background: rgba(13, 17, 23, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 3.5px;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
pointer-events: auto;
cursor: pointer;
max-height: calc(50% - 12px);
overflow-y: auto;
z-index: 2;
}
.thought__legendItem {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
transition: background 0.15s;
white-space: nowrap;
}
.thought__legendItem:hover {
background: rgba(255, 255, 255, 0.1);
}
.thought__legendDot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
.thought__legendDot--vocab {
background: #ffd700;
}
.thought__legendDot--ktp {
background: #4488ff;
}
.thought__legendGroup {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(255, 255, 255, 0.35);
margin-top: 4px;
padding: 0 4px;
}
.thought__legendGroup:first-child {
margin-top: 0;
}
.thought__legendSep {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.12);
margin: 2px 0;
}
.thought__legendLine {
display: inline-block;
width: 12px;
height: 2px;
}
.thought__legendLine--ref {
background: rgba(255, 255, 255, 0.5);
}
.thought__legendLine--causal {
background: #ffd700;
}
.thought__legendLine--ap {
background: #ff4444;
border-top: 1px dashed #ff4444;
height: 0;
}
.thought__stats {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 10px;
background: rgba(13, 17, 23, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 3.5px;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
z-index: 2;
pointer-events: none;
}
/* ── Hover Tooltip ─────────────────────────────────────────── */
.thought__tooltip {
position: absolute;
padding: 4px 10px;
background: rgba(22, 27, 34, 0.95);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
pointer-events: none;
z-index: 4;
opacity: 0;
transition: opacity 0.15s ease;
}
/* ── Node Detail Panel ─────────────────────────────────────── */
.thought__detail {
position: absolute;
bottom: 12px;
left: 12px;
background: #161b22;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
max-height: 300px;
max-width: calc(100% - 24px);
overflow-y: auto;
z-index: 3;
}
.thought__detailHeader {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.thought__detailType {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 3.5px;
font-size: 11px;
font-weight: 700;
}
.thought__detailType--vocab {
background: rgba(255, 215, 0, 0.15);
color: #ffd700;
}
.thought__detailType--ktp {
background: rgba(68, 136, 255, 0.15);
color: #4488ff;
}
.thought__detailName {
font-size: 14px;
font-weight: 600;
color: #e6edf3;
}
.thought__detailDomain {
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
}
.thought__detailClose {
margin-left: auto;
padding: 2px 6px;
border: none;
background: none;
color: rgba(255, 255, 255, 0.4);
font-size: 16px;
cursor: pointer;
}
.thought__detailClose:hover {
color: rgba(255, 255, 255, 0.8);
}
.thought__detailBody {
padding: 10px 14px;
}
.thought__detailField {
margin-bottom: 8px;
}
.thought__detailLabel {
display: inline;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-right: 6px;
}
.thought__detailValue {
font-size: 13px;
color: #e6edf3;
line-height: 1.5;
}
.thought__detailAction {
display: inline-block;
margin-top: 6px;
margin-right: 8px;
padding: 4px 10px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 3.5px;
background: transparent;
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.thought__detailAction:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.thought__detailExpanded {
margin-top: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 3.5px;
}
.thought__detailExpandTitle {
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 8px 0;
}
.thought__detailExpandBody {
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
.thought__detailExpandBody--ktp p {
margin: 0 0 6px 0;
}
/* ── Timeline View ─────────────────────────────────────────── */
.thought__timeline {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow-y: auto;
background: #0d1117;
}
.thought__timelineTrack {
padding: 16px;
}
.thought__timelineEvent {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.thought__timelineEvent:last-child {
border-bottom: none;
}
.thought__timelineDate {
flex-shrink: 0;
width: 110px;
font-size: 11px;
color: rgba(255, 255, 255, 0.4);
font-family: monospace;
padding-top: 2px;
}
.thought__timelineDot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 4px;
}
.thought__timelineDot--ADDED {
background: #3fb950;
}
.thought__timelineDot--UPDATED {
background: #58a6ff;
}
.thought__timelineDot--DEPRECATED {
background: #f85149;
}
.thought__timelineContent {
flex: 1;
min-width: 0;
}
.thought__timelineAction {
font-size: 13px;
color: #e6edf3;
font-weight: 500;
}
.thought__timelineDomain {
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
margin-top: 2px;
}
.thought__timelineTraceBtn {
display: inline-block;
margin-top: 4px;
padding: 2px 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 3.5px;
background: transparent;
color: rgba(255, 255, 255, 0.45);
font-size: 10px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.thought__timelineTraceBtn:hover {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
}
/* ── Decision Trace Panel ──────────────────────────────────── */
.thought__tracePanel {
flex-shrink: 0;
background: #161b22;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 12px 16px;
}
.thought__traceHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.thought__traceTitle {
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.thought__traceBody {
font-size: 13px;
color: #e6edf3;
}
.thought__traceField {
margin-bottom: 4px;
line-height: 1.4;
}
.thought__traceField strong {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
margin-right: 4px;
}
/* ── Coverage Map View ─────────────────────────────────────── */
.thought__coverageMap {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow-y: auto;
background: #0d1117;
}
.thought__coverageTable {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.thought__coverageTh {
padding: 8px 12px;
text-align: left;
font-size: 11px;
font-weight: 600;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: #161b22;
position: sticky;
top: 0;
z-index: 1;
}
.thought__coverageTh--num {
text-align: right;
width: 60px;
}
.thought__coverageRow {
cursor: pointer;
transition: background 0.15s;
}
.thought__coverageRow:hover {
background: rgba(255, 255, 255, 0.04);
}
.thought__coverageTd {
padding: 8px 12px;
color: #e6edf3;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.thought__coverageTd--num {
text-align: right;
font-family: monospace;
font-size: 12px;
}
.thought__coverageBar {
font-family: monospace;
font-size: 14px;
letter-spacing: 1px;
}
.thought__coverageBar--high {
color: #3fb950;
}
.thought__coverageBar--med {
color: #d29922;
}
.thought__coverageBar--low {
color: #db6d28;
}
.thought__coverageBar--none {
color: #f85149;
}
.thought__coverageHint {
padding: 12px 16px;
font-size: 11px;
color: rgba(255, 255, 255, 0.3);
font-style: italic;
}
/* W5 Item 5: Family coverage section header */
.thought__coverageFamilyHeader {
padding: 14px 12px 6px;
font-size: 12px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
margin-top: 8px;
}
/* ── Reduced Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.thought__viewBtn,
.thought__filterInput,
.thought__filterSelect,
.thought__detailAction,
.thought__timelineTraceBtn,
.thought__coverageRow {
transition: none;
}
}
/* ── Sidebar Mount (Spec 1237 THOUGHT relocation) ────────── */
.chph__thoughtMain {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}
/* ── Sidebar Panel (Christopher's sidebar correction) ───── */
.thought__sidebar {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow-y: auto;
}
.thought__sidebarViewBar {
display: flex;
gap: 4px;
padding: 8px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
flex-wrap: wrap;
}
.thought__sidebarViewBar .thought__viewBtn {
flex: 1;
min-width: 0;
padding: 5px 6px;
font-size: 11px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thought__sidebarFilters {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
}
.thought__sidebarFilterGroup {
display: flex;
flex-direction: column;
gap: 4px;
}
.thought__sidebarFilterGroup .thought__filterLabel {
font-size: 10px;
}
.thought__sidebarFilterGroup .thought__filterInput,
.thought__sidebarFilterGroup .thought__filterSelect {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* ── Minimap (inset overview) ────────────────────────────── */
.thought__minimap {
position: absolute;
bottom: 12px;
right: 12px;
width: 150px;
height: 150px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
pointer-events: none;
z-index: 2;
}
/* ── Domain Toggle Checkboxes ────────────────────────────── */
.thought__domainToggles {
max-height: 200px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 2px;
}
.thought__domainToggle {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
padding: 2px 0;
}
.thought__domainToggle input[type="checkbox"] {
width: 12px;
height: 12px;
margin: 0;
accent-color: rgba(66, 165, 245, 0.8);
flex-shrink: 0;
}
.thought__domainToggleDot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}.firstAction {
font-family: 'questrialregular';
padding: 21px;
padding-top: 11px;
border-radius: 5px;
border: 1px solid var(--jmkr-color-1);
cursor: pointer;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
font-size: 30px;
letter-spacing: 0.75px;
line-height: 50px;
color: var(--jmkr-color-1);
font-weight: bolder;
background: rgba(37, 37, 37, 0.017);
}
.firstAction i {
color: var(--jmkr-color-1);
}
.firstAction .description {
padding-top: 7px;
font-size: 17px;
letter-spacing: 0.75px;
line-height: 25px;
color: black;
}
.nightMode .firstAction .description {
color: white;
}
#Account .newAccountMessage {
position: relative;
width: 100%;
height: 100%;
max-width: 700px;
margin: auto;
}
#Account .newAccountMessage .image {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
background-image: url('https://jamaker.s3.amazonaws.com/flfldr/Gss9svYzqkKzLjaSo.webp');
background-position: center 77px;
background-size: 77%;
background-repeat: no-repeat;
filter: grayscale(100%);
width: 100%;
height: 100%;
}
#Account .newAccountMessage .wrapButtons {
position: absolute;
bottom: 35px;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 450px;
text-align: center;
padding: 10px;
padding-bottom: 0px;
}
#Account .newAccountMessage .message {
padding: 21px;
padding-top: 11px;
}
#Account .newAccountMessage .button {
display: inline-block;
padding: 15px 25px;
margin: 5px;
margin-top: 0px;
border-radius: 5px;
background: var(--jmkr-color-1);
color: #fff;
font-size: 15px;
font-weight: 500;
text-align: center;
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
cursor: pointer;
border: none;
}
#Account .newAccountMessage .button.right {
background: var(--jmkr-color-2);
color: black;
font-size: 14px;
font-weight: 400;
}
#Account .newAccountMessage .button:hover {
background: black;
color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transform: scale(1.05);
}#addressThumbnail {
padding: 17px;
margin-bottom: 17px;
letter-spacing: 0.7px;
font-size: 14px;
line-height: 20px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
cursor: pointer;
}
#addressThumbnail i {
letter-spacing: 0.7px;
font-size: 11px;
}
#addressThumbnail b {
letter-spacing: 0.7px;
font-size: 17px;
}
#forgotpassword {
background: none;
border: none;
box-shadow: none;
padding-top: 1em;
}
#forgotpassword label {
font-size: 14px;
}
#forgotpassword a {
color: var(--jmkr-color-1);
}
#forgotPasswordEmail {
padding: 7px !important;
padding-left: 11px !important;
border-radius: 1px;
font-size: 14px;
}
/* ================================================================
Meteor Accounts-UI Dialogs
These dialogs are rendered at body level by the accounts-ui
package. They appear for:
- Reset flow (_resetPasswordDialog)
- Enrollment (_enrollAccountDialog)
- Just-reset (_justResetPasswordDialog)
- Just-verified (_justVerifiedEmailDialog)
- Messages (_loginButtonsMessagesDialog)
Pattern source: register.css:154-167 (btn-submit styling)
================================================================ */
/* -- Backdrop overlay ------------------------------------------- */
body > .hide-background {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 9998;
}
/* -- Dialog container ------------------------------------------- */
body > .accounts-dialog.accounts-centered-dialog,
body > form.accounts-dialog.accounts-centered-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 90%;
max-width: 400px;
background: #1a1a1a;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 36px 32px 28px;
box-shadow:
0 24px 48px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.04);
color: #f0f0f0;
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
box-sizing: border-box;
}
/* -- Labels ----------------------------------------------------- */
body > .accounts-dialog #reset-password-new-password-label,
body > .accounts-dialog #enroll-account-password-label,
body > .accounts-dialog #reset-password-username-email-label {
display: block;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.65);
letter-spacing: 0.3px;
margin-bottom: 6px;
text-transform: uppercase;
}
/* -- Input fields ----------------------------------------------- */
body > .accounts-dialog input[type="password"],
body > .accounts-dialog input[type="text"] {
display: block;
width: 100%;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
color: #f0f0f0;
font-size: 15px;
font-family: inherit;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
margin-bottom: 16px;
}
body > .accounts-dialog input[type="password"]:focus,
body > .accounts-dialog input[type="text"]:focus {
border-color: var(--jmkr-color-1, #cfa74e);
box-shadow: 0 0 0 3px rgba(207, 167, 78, 0.15);
}
body > .accounts-dialog input[type="password"]::placeholder,
body > .accounts-dialog input[type="text"]::placeholder {
color: rgba(255, 255, 255, 0.25);
}
/* -- Input wrappers --------------------------------------------- */
body > .accounts-dialog .reset-password-new-password-wrapper,
body > .accounts-dialog .reset-password-username-email-wrapper,
body > .accounts-dialog .enroll-account-password-wrapper,
body > .accounts-dialog .enroll-account-username-email-wrapper {
margin-bottom: 4px;
}
/* -- Primary action buttons ------------------------------------- */
body > .accounts-dialog .login-button.login-button-form-submit,
body > .accounts-dialog #login-buttons-reset-password-button,
body > .accounts-dialog #login-buttons-enroll-account-button {
display: block;
width: 100%;
padding: 13px 20px;
background: var(--jmkr-color-1, #cfa74e);
color: #0d0c0a;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.5px;
text-align: center;
text-transform: uppercase;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
margin-top: 8px;
font-family: inherit;
}
body > .accounts-dialog .login-button.login-button-form-submit:hover,
body > .accounts-dialog #login-buttons-reset-password-button:hover,
body > .accounts-dialog #login-buttons-enroll-account-button:hover {
background: #d4af5a;
transform: translateY(-1px);
}
body > .accounts-dialog .login-button.login-button-form-submit:active,
body > .accounts-dialog #login-buttons-reset-password-button:active,
body > .accounts-dialog #login-buttons-enroll-account-button:active {
transform: translateY(0);
}
/* -- Close button ----------------------------------------------- */
body > .accounts-dialog .accounts-close,
body > .accounts-dialog #login-buttons-cancel-reset-password,
body > .accounts-dialog #login-buttons-cancel-enroll-account {
position: absolute;
top: 12px;
right: 16px;
font-size: 22px;
line-height: 1;
color: rgba(255, 255, 255, 0.35);
text-decoration: none;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: color 0.15s ease, background 0.15s ease;
}
body > .accounts-dialog .accounts-close:hover,
body > .accounts-dialog #login-buttons-cancel-reset-password:hover,
body > .accounts-dialog #login-buttons-cancel-enroll-account:hover {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.06);
}
/* -- Dismiss / secondary buttons -------------------------------- */
body > .accounts-dialog #just-verified-dismiss-button,
body > .accounts-dialog #messages-dialog-dismiss-button {
display: block;
width: 100%;
padding: 11px 20px;
background: rgba(255, 255, 255, 0.08);
color: #f0f0f0;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.4px;
text-align: center;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease;
margin-top: 16px;
font-family: inherit;
}
body > .accounts-dialog #just-verified-dismiss-button:hover,
body > .accounts-dialog #messages-dialog-dismiss-button:hover {
background: rgba(255, 255, 255, 0.12);
}
/* -- Error / info messages -------------------------------------- */
body > .accounts-dialog .message.error-message {
background: rgba(220, 38, 38, 0.12);
border: 1px solid rgba(220, 38, 38, 0.3);
border-radius: 8px;
color: #fca5a5;
font-size: 13px;
padding: 10px 14px;
margin: 12px 0;
line-height: 1.5;
}
body > .accounts-dialog .message.info-message {
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 8px;
color: #93c5fd;
font-size: 13px;
padding: 10px 14px;
margin: 12px 0;
line-height: 1.5;
}
/* -- Success / confirmation dialog text ------------------------- */
body > .accounts-dialog {
font-size: 15px;
line-height: 1.6;
}
/* -- Disabled button state -------------------------------------- */
body > .accounts-dialog .login-button.login-button-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* -- Mobile responsive ------------------------------------------ */
@media (max-width: 480px) {
body > .accounts-dialog.accounts-centered-dialog,
body > form.accounts-dialog.accounts-centered-dialog {
width: 94%;
padding: 28px 20px 24px;
border-radius: 10px;
}
}#jmkrClient #signup>div,
#jmkrClient #signin>div {
border: none;
box-shadow: none;
padding-bottom: 0px !important;
}
#jmkrClient #at-pwd-form>div {
background: none;
}
#jmkrClient #signup .at-title,
#jmkrClient #signin .at-title {
display: none;
}
#jmkrClient #at-google {
display: block;
}
#jmkrClient #googlesignin {
background-color: #dc4a38;
color: #ffffff;
font-size: 1.14285714rem;
text-shadow: none;
background-image: none;
box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
border-radius: 0.28571429rem;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: bold;
}
#jmkrClient #googlesignin #icon {
float: left;
width: 40px;
text-align: center;
line-height: 42px;
}
#jmkrClient #googlesignin #text {
float: left;
width: calc(100% - 40px);
text-align: center;
line-height: 42px;
}
#jmkrClient #appstorebadges {
margin-right: auto;
margin-left: auto;
}
#jmkrClient #appstorebadges #google {
float: left;
background: url('jmkr/google.png');
width: calc(50% - 0px);
padding-bottom: 20%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-right: 0px;
}
#jmkrClient #appstorebadges #apple {
float: left;
background: url('jmkr/apple.png');
width: calc(50% - 0px);
padding-bottom: 20%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-left: 0px;
}
#jmkrClient div.at-error.ui.large.icon.error.message>i {
font-size: 17px;
color: #d93636;
}
#jmkrClient div.at-error.ui.large.icon.error.message>div {
color: #d93636;
text-transform: uppercase;
}
#jmkrClient #signup>div.ui.large.message>div.at-signin-link.at-wrap,
#jmkrClient #signin>div.ui.large.message>div.at-signup-link.at-wrap {
font-size: 14px;
}
#jmkrClient .ui.stacked.segment {
box-shadow: none;
}
#jmkrClient .ui.stacked.segment:after {
border-top: none;
display: none;
}
#jmkrClient #signup>div.ui.large.message>div.at-terms-link.at-wrap {
display: none;
}
#jmkrClient #signup>div.at-title>h2,
#jmkrClient #signin>div.at-title>h2 {
text-transform: uppercase;
font-size: 17px;
}
#jmkrClient #signup>div.ui.large.message {
padding-top: 0px;
}
#jmkrClient #signup label,
#jmkrClient #signin label {
font-size: 11px;
}
#jmkrClient #signup>div.at-sep.ui.horizontal.divider,
#jmkrClient #signin>div.at-sep.ui.horizontal.divider,
#jmkrClient #signup>div>div.at-sep.ui.horizontal.divider,
#jmkrClient #signin>div>div.at-sep.ui.horizontal.divider {
display: none;
}
#jmkrClient #signup #at-pwd-form>div>div:nth-child(4) {
float: left;
width: calc(50% - 5px);
clear: none;
}
#jmkrClient #signup #at-pwd-form>div>div:nth-child(5) {
float: right;
width: calc(50% - 5px);
clear: none;
}
#jmkrClient #signup>div>div.at-terms-link.at-wrap {
margin-top: 17px;
font-size: 12px;
}
#jmkrClient #at-field-username_and_email,
#jmkrClient #at-field-email,
#jmkrClient #at-field-password,
#jmkrClient #at-field-password_again,
#jmkrClient #at-field-firstname,
#jmkrClient #at-field-lastname,
#jmkrClient #at-field-username,
#jmkrClient #at-field-username_and_email {
padding: 7px !important;
padding-left: 11px !important;
border-radius: 1px;
}
#jmkrClient #at-btn,
#jmkrClient .btn-submit {
border: none;
width: 100%;
background: var(--jmkr-color-1);
color: white;
font-weight: normal;
letter-spacing: 0.75px;
font-size: 17px;
padding-top: 15px !important;
padding-bottom: 15px !important;
border-radius: 5px !important;
margin-top: 17px;
}
#jmkrClient.btn-submit {
margin-top: 7px;
}
#jmkrClient #signup #at-btn {
margin-top: 107px;
}
#jmkrClient #signin>div>div.at-error.ui.icon.error.message {
border: none;
-webkit-box-shadow: none;
}
#jmkrClient #signin>div.at-form.ui.large.fluid.form.segment.error {
border: none;
}
#jmkrClient #signin>div.at-form.ui.large.fluid.form.segment.error>div.at-error.ui.icon.error.message {
padding: 7px;
border-radius: 0px;
padding-left: 11px;
padding-right: 11px;
border: none;
background: white;
}
#jmkrClient #signin>div.at-form.ui.large.fluid.form.segment.error>div.at-error.ui.icon.error.message>div {
text-align: center;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: white !important;
}
#jmkrClient #signin>div.at-form.ui.large.fluid.form.segment.error>div.at-error.ui.icon.error.message>i {
font-size: 20px;
color: white !important;
}
#jmkrClient #signin>div.at-error.ui.icon.error.message>div>p {
color: white;
}
#jmkrClient #signup a,
#jmkrClient #signin a {
color: #404040;
letter-spacing: 0.4px;
font-size: 16px;
}
#jmkrClient #signin>div>div.at-title,
#jmkrClient #signup>div>div.at-title {
display: none;
}
#jmkrClient div>div.ui.large.message,
#jmkrClient div>div.ui.large.message>div.at-signin-link.at-wrap {
margin-top: 0px;
margin-left: 17px;
width: calc(100% - 34px);
background: none;
}
#jmkrClient #signup>div.ui.large.message,
#jmkrClient #signin>div.ui.large.message {
padding-left: 0px;
padding-right: 0px;
padding-top: 11px;
}
.ui.message {
background: none;
}
.ui.divider {
margin: 0px;
height: 7px;
}
#jmkrClient #signin>div:nth-child(3),
#jmkrClient #signup>div:nth-child(3) {
padding-left: 11px;
padding-right: 11px;
padding-bottom: 11px;
}
.isCordova #jmkrClient #at-facebook,
.isCordova #jmkrClient #at-google,
.isCordova #jmkrClient #at-twitter {
display: none;
}
#jmkrClient #at-facebook,
#jmkrClient #at-google,
#jmkrClient #at-twitter {
font-weight: normal;
margin-top: 0px !important;
margin-bottom: 17px !important;
letter-spacing: 0.75px;
font-size: 17px;
margin-left: 0px;
width: 100%;
}
#jmkrClient #at-facebook {
margin-top: 0px !important;
}
#jmkrClient #at-twitter {
margin-bottom: 10px !important;
}
#jmkrClient #signin>div.at-error.ui.large.icon.error.message {
background: none;
margin-bottom: 0px;
padding-left: 17px;
padding-bottom: 0px;
}
#jmkrClient #signin>div.at-error.ui.large.icon.error.message {
display: none;
}
#jmkrClient #at-pwd-form>div {
padding-top: 0px;
padding-bottom: 0px;
border: none;
}
#jmkrClient .at-oauth {
padding: 0px !important;
margin-bottom: 11px !important;
}
#jmkrClient .at-oauth .icon::before {
line-height: 43px !important;
}#contentFilterForm {
float: left;
width: calc(100% - var(--line-height));
}
#inputContentSearch input,
#inputContentTransactionSearch input {
border-radius: 0px !important;
border-top: 0px !important;
border-color: rgba(30, 173, 211, 0.35) !important;
}
#searchContentToggle,
#searchContentTransactionToggle {
float: left;
background: var(--jmkr-color-1);
color: white;
width: var(--line-height);
text-align: center;
height: var(--line-height);
line-height: var(--line-height);
cursor: pointer;
}
#contentForm hr {
opacity: 0.5;
}
#contentForm .addToSectionListButton {
float: right;
background: black;
text-align: center;
color: white;
letter-spacing: 0.37px;
font-size: 17px;
padding: 25px;
padding-top: 14px;
padding-bottom: 14px;
border-radius: 4px;
cursor: pointer;
}
#contentForm .deleteSection {
float: right;
cursor: pointer;
z-index: 100;
position: relative;
margin-top: -7px;
margin-bottom: -21px;
margin-right: -7px;
font-size: 14px;
color: white;
background: var(--jmkr-color-1);
width: 25px;
height: 25px;
line-height: 25px;
border-radius: 50%;
text-align: center;
padding-left: 1px;
}
#contentForm .contentSignaturePreview {
position: relative;
width: 100%;
}
#contentForm .contentSignatureCanvas {
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 8px;
background: #fff;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
#contentForm .contentSignaturePlaceholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 13px;
color: rgba(0, 0, 0, 0.45);
pointer-events: none;
}
/* Column headers */
.contentTableHeader {
display: flex;
align-items: center;
padding: 8px 12px;
background: rgba(0, 0, 0, 0.03);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: rgba(0, 0, 0, 0.5);
}
.contentTableHeader__column {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 12px;
}
.contentTableHeader__actions {
flex-shrink: 0;
text-align: right;
min-width: 280px;
}
/* Display columns in data row */
#contentDataRow.hasColumns .leftSection {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0;
overflow: hidden;
}
#contentDataRow.hasColumns .leftSection .text.columnCell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 12px;
}
#contentDataRow .leftSection .text.full {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}#contentTypeForm #addContentField {
background: var(--jmkr-color-1);
color: white;
margin-bottom: 11px;
padding: 11px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
letter-spacing: 0.7px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
}
.contentField {
padding: 11px;
padding-top: 7px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-bottom: 11px;
background: rgba(0, 0, 0, 0.017);
}
.deleteContentField {
float: right;
cursor: pointer;
margin-top: -15px;
margin-right: -21px;
font-size: 12px;
color: white;
background: var(--jmkr-color-1);
width: 21px;
height: 21px;
line-height: 20px;
border-radius: 50%;
text-align: center;
padding-top: 1px;
}
#contentFormUploadButton {
line-height: var(--line-height);
text-align: center;
font-size: 21px;
cursor: pointer;
}.performanceAdvisorLoading {
display: flex;
align-items: center;
gap: 8px;
color: rgba(0, 0, 0, 0.67);
font-size: 14px;
}
.performanceAdvisorError {
color: #ce5252;
}
.performanceAdvisorErrorPanel {
padding: 14px;
background: rgba(206, 82, 82, 0.1);
color: #8e251f;
border-radius: 6px;
}
.analysisDataTable tbody tr.hasRecommendation {
background: rgba(27, 165, 126, 0.08);
}
.analysisDataTable tbody tr.needsAttention {
background: rgba(255, 165, 0, 0.12);
}
.signatureHeading {
font-weight: 600;
color: #1b1c1d;
}
.signatureMeta {
font-size: 12px;
color: rgba(0, 0, 0, 0.47);
margin-top: 4px;
}
.recommendationStatus {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 6px;
color: white;
}
.recommendationStatus.new {
background: #2185d0;
}
.recommendationStatus.queued {
background: #f2711c;
}
.recommendationStatus.dismissed {
background: rgba(112, 125, 134, 0.5);
}
.recommendationMeta {
font-size: 12px;
color: rgba(0, 0, 0, 0.55);
}
.recommendationActions {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.recommendationActions .miniAction {
background: rgba(0, 0, 0, 0.05);
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
cursor: pointer;
color: rgba(0, 0, 0, 0.65);
transition: background 120ms ease;
}
.recommendationActions .miniAction:hover {
background: rgba(0, 0, 0, 0.12);
}
.recommendationNone {
font-size: 12px;
color: rgba(0, 0, 0, 0.45);
}
.performanceAdvisorEmpty {
padding: 18px;
text-align: center;
color: rgba(0, 0, 0, 0.45);
border: 1px dashed rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.horizontalScroll {
overflow-x: auto;
}#webDomain {
padding-top: 0px;
background: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.07);
}
#webDomain #page {
letter-spacing: 0.5px;
}
#webDomain #printArea {
padding: 21px;
padding-top: 11px;
}
#webDomain .inlineLink {
font-size: 100%;
}
#webDomain #page #loading {
text-align: center;
padding: 17px;
letter-spacing: 1.17px;
font-size: 35px;
font-weight: bold;
opacity: 0.17;
}
#webDomain #signature {
letter-spacing: 1.35px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
text-align: right;
padding: 11px;
color: white;
font-size: 13px;
padding-top: 7px;
padding-bottom: 17px;
}
#webDomain #signature b {
font-size: 25px;
}
#webDomain #left {
float: left;
}
#webDomain #picture {
margin-left: -17px;
margin-top: -17px;
width: 157px;
height: 157px;
margin-bottom: 21px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#webDomain #name {
font-size: 21px;
margin-bottom: 17px;
}
#webDomain #contact {
font-size: 14px;
line-height: 25px;
letter-spacing: 1px;
opacity: 0.6;
}
#webDomain #contact i {
margin-right: 7px;
}
#webDomain #right {
float: right;
}
#webDomain #title {
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
opacity: 0.95;
margin-bottom: 17px;
min-width: 170px;
max-width: 270px;
line-height: 27px;
padding-left: 0px;
}
#webDomain #info {
float: left;
width: 77px;
padding-right: 7px;
font-size: 10px;
text-align: right;
}
#webDomain #detail {
float: right;
width: calc(100% - 77px);
font-size: 10px;
line-height: 20px;
}
#webDomain #amount {
float: right;
width: 270px;
padding: 7px;
padding-top: 0px;
padding-right: 0px;
border: 1px solid rgba(0, 0, 0, 0.07);
border-bottom: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
font-size: 10px;
text-align: center;
line-height: 35px;
margin-top: 21px;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.035);
}
#webDomain #amount b {
font-size: 25px;
}
#webDomain #line {
border-top: 2px dotted #1eadd3;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.07);
}
#webDomain #lineup {
border-top: 2px solid #1eadd3;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.17);
}
#webDomain #description {
line-height: 30px;
font-size: 16px;
letter-spacing: 0.7px;
padding: 11px;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
border-radius: 5px;
}
#webDomain #description .page,
#webDomain #description .column {
padding: 0px !important;
}
#webDomain #description p {
line-height: 30px;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
#webDomain #description ul {
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 17px;
}
#webDomain #description a {
color: #1eadd3 !important;
}
#webDomain #billTo {
float: left;
max-width: calc(100% - 40px);
font-size: 13px;
padding-left: 11px;
}
#webDomain #printLabel {
font-size: 13px;
float: right;
cursor: pointer;
padding-left: 11px;
padding-right: 11px;
}
#webDomain .pay {
float: left;
text-align: center;
border-radius: 3px;
line-height: 34px;
width: 270px;
font-size: 12px;
letter-spacing: 0.4px;
color: white;
margin-top: 15px;
margin-right: 11px;
background-image: linear-gradient(to left, #1eadd3, var(--jmkr-color-1));
cursor: pointer;
}
#webDomain .payLabel {
float: left;
font-weight: bold;
border-radius: 3px;
line-height: 34px;
font-size: 12px;
letter-spacing: 0.4px;
margin-top: 15px;
}
#webDomain .pay b {
font-size: 15px;
letter-spacing: 1px;
}
@media screen and (max-width: 570px) {
#webDomain .pay {
float: none;
margin-left: auto;
margin-right: auto;
}
#webDomain .payLabel {
float: none;
width: 270px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#webDomain #or {
float: none;
margin-top: 14px;
line-height: 1px;
margin-left: auto;
margin-right: auto;
}
#webDomain #left {
width: 100%;
}
#webDomain #picture {
margin-left: auto;
margin-right: auto;
}
#webDomain #name {
text-align: center;
}
#webDomain #contact {
text-align: center;
}
#webDomain #contact i {
margin-right: 7px;
}
#webDomain #right {
width: 100%;
}
#webDomain #title {
text-align: center;
margin-top: 17px;
margin-left: auto;
margin-right: auto;
}
#webDomain #info {
width: 50%;
}
#webDomain #detail {
width: 50%;
}
#webDomain #amount {
float: none;
width: 270px;
margin-left: auto;
margin-right: auto;
}
#webDomain #amount b {
font-size: 25px;
}
}
#webDomainForm #addDNSRecord {
background: var(--jmkr-color-1);
color: white;
margin-bottom: 11px;
padding: 11px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
letter-spacing: 0.7px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
}
#webDomainForm #inputSearch {
float: left;
width: calc(100% - 60px - 11px)
}
#webDomainForm #searchWebDomainButton {
float: right;
width: 60px;
background: var(--jmkr-color-1);
color: white;
text-align: center;
letter-spacing: 0.7px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
line-height: 48px;
}
#DNSRecordListHeader {
background: var(--jmkr-color-1);
color: white;
padding-left: 17px;
border-radius: 4px;
letter-spacing: 0.7px;
font-size: 15px;
line-height: 15px;
}
#DNSRecordListRow {
padding-left: 11px;
padding-right: 11px;
}
.DNSRecord {
padding: 11px;
padding-top: 7px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-bottom: 11px;
background: rgba(0, 0, 0, 0.017);
}
.deleteDNSRecord {
float: right;
cursor: pointer;
margin-top: -15px;
margin-right: -21px;
font-size: 12px;
color: white;
background: var(--jmkr-color-1);
width: 21px;
height: 21px;
line-height: 20px;
border-radius: 50%;
text-align: center;
padding-top: 1px;
}
#webDomainFilterForm {
float: left;
width: calc(100% - var(--line-height));
}
#inputWebDomainSearch input {
border-radius: 0px !important;
border-top: 0px !important;
border-color: var(--jmkr-color-1) !important;
}
#searchWebDomainToggle {
float: left;
background: var(--jmkr-color-1);
color: white;
width: var(--line-height);
text-align: center;
height: var(--line-height);
line-height: var(--line-height);
cursor: pointer;
}
.webDomainSearchResult {
padding: 21px;
padding-left: 17px;
padding-right: 17px;
margin-top: 11px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
cursor: pointer;
}
.webDomainSearchResult .domainName {
float: left;
font-size: 30px;
font-weight: 500;
word-break: break-all;
}
.webDomainSearchResult .domainName .purchaseButton {
width: 117px;
background: var(--jmkr-color-1);
color: white;
margin-top: 21px;
padding: 7px;
text-align: center;
letter-spacing: 0.7px;
font-size: 13px;
border-radius: 3.5px;
cursor: pointer;
}
.webDomainSearchResult .purchasePrice {
text-align: right;
float: right;
font-size: 21px;
}
.webDomainSearchResult .purchasePrice .renewalPrice {
font-size: 11px;
opacity: 0.77;
}
#webDomainForm #addDNSRecordButton {
background: var(--jmkr-color-1);
color: white;
text-align: center;
letter-spacing: 0.7px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
line-height: 48px;
}
#jmkrClient #MockupList {
background: var(--mainUIBackground);
}
#jmkrClient .mockup-list__container {
padding: 16px;
overflow-y: auto;
overflow-x: hidden;
}
/* ============================================
2. Card Grid
============================================ */
#jmkrClient .mockup-list__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
padding-bottom: 16px;
}
/* ============================================
3. Card
============================================ */
#jmkrClient .mockup-list__card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.08);
padding: 16px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
#jmkrClient .mockup-list__card:hover {
border-color: rgba(15, 23, 42, 0.15);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
transform: translateY(-2px);
}
#jmkrClient .mockup-list__card:active {
transform: translateY(0px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
/* ============================================
4. Card Header
============================================ */
#jmkrClient .mockup-list__card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
#jmkrClient .mockup-list__card-color {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
#jmkrClient .mockup-list__card-title {
font-size: 15px;
font-weight: 600;
color: #1e293b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================
5. Card Meta
============================================ */
#jmkrClient .mockup-list__card-meta {
font-size: 13px;
color: #94a3b8;
margin-bottom: 12px;
}
/* ============================================
6. Screen Preview Strip
============================================ */
#jmkrClient .mockup-list__screen-strip {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
#jmkrClient .mockup-list__screen-chip {
font-size: 11px;
color: #64748b;
background: #f1f5f9;
border-radius: 4px;
padding: 3px 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80px;
}
#jmkrClient .mockup-list__screen-chip--more {
color: #94a3b8;
font-style: italic;
max-width: none;
}
/* ============================================
7. Empty State
============================================ */
#jmkrClient .mockup-list__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #94a3b8;
gap: 12px;
}
#jmkrClient .mockup-list__empty > i {
font-size: 48px;
opacity: 0.4;
}
#jmkrClient .mockup-list__empty-title {
font-size: 18px;
font-weight: 600;
color: #64748b;
}
#jmkrClient .mockup-list__empty-subtitle {
font-size: 14px;
color: #94a3b8;
}
/* ============================================
8. Loading State
============================================ */
#jmkrClient .mockup-list__loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#jmkrClient #MockupDetail {
background: var(--mainUIBackground);
}
#jmkrClient .mockup-detail__content {
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
padding: 0 16px 16px;
}
/* ============================================
2. Toolbar
============================================ */
#jmkrClient .mockup-detail__toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
padding: 8px 16px;
}
#jmkrClient .mockup-detail__edit-toggle-container .mockup-detail__toggle-btn {
display: flex;
align-items: center;
gap: 4px;
}
#jmkrClient .mockup-detail__edit-toggle-container .mockup-detail__toggle-btn .lucide-icon {
font-size: 14px;
}
#jmkrClient .mockup-detail__view-toggle {
display: flex;
background: #f1f5f9;
border-radius: 6px;
padding: 2px;
gap: 2px;
}
#jmkrClient .mockup-detail__toggle-btn {
font-size: 12px;
font-weight: 500;
color: #64748b;
padding: 4px 12px;
border-radius: 4px;
cursor: pointer;
transition: all 0.15s ease;
user-select: none;
}
#jmkrClient .mockup-detail__toggle-btn:hover {
color: #1e293b;
background: rgba(255, 255, 255, 0.5);
}
#jmkrClient .mockup-detail__toggle-btn--active {
color: #1e293b;
background: #ffffff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* ============================================
3. Screen Tab Bar
============================================ */
#jmkrClient .mockup-detail__screen-tabs {
display: flex;
gap: 4px;
padding: 8px 0;
overflow-x: auto;
flex-shrink: 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
margin-bottom: 12px;
}
#jmkrClient .mockup-detail__tab {
font-size: 13px;
font-weight: 500;
color: #64748b;
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
user-select: none;
}
#jmkrClient .mockup-detail__tab:hover {
color: #1e293b;
background: #f1f5f9;
}
#jmkrClient .mockup-detail__tab--active {
color: #1e293b;
background: #e2e8f0;
font-weight: 600;
}
/* ============================================
4. Wireframe Display Area
============================================ */
#jmkrClient .mockup-detail__wireframe-area {
flex: 1;
min-height: 0;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
background: #ffffff;
overflow: hidden;
}
#jmkrClient .mockup-detail__wireframe-frame {
width: 100%;
min-height: 400px;
border: none;
display: block;
}
/* ============================================
5. ASCII View
============================================ */
#jmkrClient .mockup-detail__ascii-view {
padding: 16px;
overflow: auto;
height: 100%;
}
#jmkrClient .mockup-detail__ascii-pre {
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
font-size: 12px;
line-height: 1.5;
color: #1e293b;
white-space: pre;
margin: 0;
tab-size: 4;
}
/* ============================================
6. Placeholder & Loading
============================================ */
#jmkrClient .mockup-detail__placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 300px;
color: #94a3b8;
gap: 12px;
font-size: 14px;
}
#jmkrClient .mockup-detail__placeholder > i {
font-size: 32px;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#jmkrClient .mockup-detail__loading {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
}
/* ============================================
7. Screen Info Bar
============================================ */
#jmkrClient .mockup-detail__screen-info {
font-size: 12px;
color: #94a3b8;
padding: 8px 0;
flex-shrink: 0;
}
/* ============================================
8. Edit Layout — Wireframe + Panel (Wave 1B)
============================================
In edit mode, the wireframe area and the selection panel
share horizontal space via a flex row. In view mode, the
wireframe occupies the full width.
============================================ */
#jmkrClient .mockup-detail__edit-layout {
display: flex;
flex: 1;
min-height: 0;
gap: 0;
}
#jmkrClient .mockup-detail__edit-layout .mockup-detail__wireframe-area {
flex: 1;
min-width: 0;
}
#jmkrClient .mockup-detail__edit-layout--editing .mockup-detail__wireframe-area {
border-right: none;
border-radius: 8px 0 0 8px;
}
/* ============================================
9. Selection Panel Container
============================================
Holds MockupEditor when a node is selected,
or a helpful empty-state prompt otherwise.
============================================ */
#jmkrClient .mockup-detail__panel-container {
flex: 0 0 320px;
min-width: 320px;
max-width: 320px;
background: #fafbfc;
border: 1px solid rgba(15, 23, 42, 0.08);
border-left: none;
border-radius: 0 8px 8px 0;
overflow: hidden;
display: flex;
flex-direction: column;
animation: mockup-detail-panel-slide 0.2s ease-out;
}
@keyframes mockup-detail-panel-slide {
from { transform: translateX(8px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
#jmkrClient .mockup-detail__panel-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
gap: 10px;
padding: 32px 20px;
color: #94a3b8;
text-align: center;
}
#jmkrClient .mockup-detail__panel-empty > i {
font-size: 32px;
color: #cbd5e1;
}
#jmkrClient .mockup-detail__panel-empty-title {
font-size: 13px;
font-weight: 600;
color: #64748b;
margin-top: 4px;
}
#jmkrClient .mockup-detail__panel-empty-hint {
font-size: 12px;
line-height: 1.5;
color: #94a3b8;
max-width: 240px;
}
/* ============================================
10. Context Menu + Type Picker (Wave 1B)
============================================
Right-click menu overlay. The type picker is
a variant shown for Add sibling/child.
============================================ */
#jmkrClient .mockup-detail__menu-overlay {
position: fixed;
inset: 0;
background: transparent;
z-index: 1000;
}
#jmkrClient .mockup-detail__context-menu {
position: fixed;
z-index: 1001;
min-width: 180px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15), 0 2px 8px rgba(15, 23, 42, 0.08);
padding: 6px;
user-select: none;
animation: mockup-detail-menu-appear 0.12s ease-out;
}
@keyframes mockup-detail-menu-appear {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
#jmkrClient .mockup-detail__context-menu-title {
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 6px 10px 4px;
}
#jmkrClient .mockup-detail__context-menu-action {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #1e293b;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
transition: background 0.1s ease;
}
#jmkrClient .mockup-detail__context-menu-action:hover {
background: #f1f5f9;
}
#jmkrClient .mockup-detail__context-menu-action .lucide-icon {
font-size: 14px;
color: #64748b;
width: 16px;
text-align: center;
}
#jmkrClient .mockup-detail__context-menu-divider {
height: 1px;
background: rgba(15, 23, 42, 0.08);
margin: 4px 0;
}
/* ---- Type picker (Add sibling/child) ---- */
#jmkrClient .mockup-detail__type-picker {
min-width: 240px;
max-height: 420px;
display: flex;
flex-direction: column;
}
#jmkrClient .mockup-detail__type-picker-body {
overflow-y: auto;
max-height: 360px;
padding: 4px 0;
}
#jmkrClient .mockup-detail__type-picker-category {
padding: 4px 0;
}
#jmkrClient .mockup-detail__type-picker-heading {
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 6px 10px 2px;
}
#jmkrClient .mockup-detail__type-picker-item {
font-size: 13px;
color: #1e293b;
padding: 5px 10px 5px 24px;
border-radius: 4px;
cursor: pointer;
transition: background 0.1s ease;
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}
#jmkrClient .mockup-detail__type-picker-item:hover {
background: #eff6ff;
color: #2563eb;
}
/* ============================================
11. Edit-Mode Drag-to-Reorder (Wave 1B)
============================================
Visual feedback injected inside the iframe via
classes toggled by the parent's drag handlers.
The iframe's inline