/* Gaia Energy Email Signature Manager - Slater CSS */ /* All styles have !important to prevent conflicts with Webflow site styles */ /* Google Fonts Import */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Jost:wght@500;700&display=swap'); /* CSS Reset for Email Signature Manager */ .email-signature-manager * { box-sizing: border-box !important; } .email-signature-manager { font-family: 'Inter', Arial, sans-serif !important; line-height: 1.6 !important; color: #222 !important; background-color: #fff !important; } /* Override Webflow body styles */ body .email-signature-manager { font-family: 'Inter', Arial, sans-serif !important; line-height: 1.6 !important; color: #222 !important; background-color: #fff !important; } .email-signature-manager h1, .email-signature-manager h2, .email-signature-manager h3, .email-signature-manager h4, .email-signature-manager h5, .email-signature-manager h6, .email-signature-manager .nav-tabs button, .email-signature-manager label, .email-signature-manager .btn-generate, .email-signature-manager .btn-copy, .email-signature-manager .btn-delete { font-family: 'Jost', Arial, sans-serif !important; } /* Heading Overrides to Prevent Global CSS Conflicts */ .email-signature-manager h1 { font-size: 2.2rem !important; line-height: 1.2 !important; margin: 0 0 0.5em 0 !important; color: #00724c !important; font-weight: 700 !important; } .email-signature-manager h2 { font-size: 1.5rem !important; line-height: 1.3 !important; margin: 0 0 0.8em 0 !important; color: #00724c !important; font-weight: 600 !important; } .email-signature-manager h3 { font-size: 1.1rem !important; line-height: 1.4 !important; margin: 0 0 0.6em 0 !important; color: #00724c !important; font-weight: 500 !important; } /* Extra specificity for copy instructions h3 */ .email-signature-manager .copy-instructions h3 { font-size: 1rem !important; margin: 0 0 0.5em 0 !important; color: #00724c !important; } .email-signature-manager h4 { font-size: 1.1rem !important; line-height: 1.4 !important; margin: 0 0 0.5em 0 !important; color: #333 !important; font-weight: 500 !important; } .email-signature-manager h5 { font-size: 1rem !important; line-height: 1.4 !important; margin: 0 0 0.5em 0 !important; color: #333 !important; font-weight: 500 !important; } .email-signature-manager h6 { font-size: 0.9rem !important; line-height: 1.4 !important; margin: 0 0 0.5em 0 !important; color: #333 !important; font-weight: 500 !important; } /* Container and Layout */ .email-signature-manager .container { max-width: 1600px !important; margin: 40px auto 0 auto !important; background: #fff !important; border-radius: 18px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important; padding: 32px 24px 24px 24px !important; } /* Navigation Tabs */ .email-signature-manager .nav-tabs { display: flex !important; justify-content: center !important; margin-bottom: 2rem !important; border-bottom: 2px solid #e0e7ef !important; } .email-signature-manager .nav-tab { background: none !important; border: none !important; padding: 12px 24px !important; font-size: 1.1rem !important; font-family: 'Jost', Arial, sans-serif !important; font-weight: 500 !important; color: #666 !important; cursor: pointer !important; border-bottom: 3px solid transparent !important; transition: all 0.2s !important; margin: 0 4px !important; } .email-signature-manager .nav-tab:hover { color: #00724c !important; } .email-signature-manager .nav-tab.active { color: #00724c !important; border-bottom-color: #00724c !important; font-weight: 700 !important; } /* Tab Content */ .email-signature-manager .tab-content { display: none !important; } .email-signature-manager .tab-content.active { display: block !important; } /* Form Styles */ .email-signature-manager .form-group label { color: #00724c !important; font-weight: 500 !important; margin-bottom: 6px !important; display: block !important; } .email-signature-manager .form-group input, .email-signature-manager .form-group textarea, .email-signature-manager .form-group select { width: 100% !important; padding: 10px 12px !important; border: 1.5px solid #e0e7ef !important; border-radius: 8px !important; font-size: 1rem !important; font-family: 'Inter', Arial, sans-serif !important; margin-bottom: 14px !important; background: #fff !important; transition: border 0.2s !important; box-sizing: border-box !important; } .email-signature-manager .form-group input:focus, .email-signature-manager .form-group textarea:focus, .email-signature-manager .form-group select:focus { border-color: #7bb24a !important; outline: none !important; } .email-signature-manager .form-group textarea { resize: vertical !important; min-height: 80px !important; } /* Button Styles */ .email-signature-manager .btn-generate, .email-signature-manager .btn-copy, .email-signature-manager .btn-delete { background: #7bb24a !important; color: #fff !important; border: none !important; border-radius: 24px !important; padding: 12px 28px !important; font-size: 1.1rem !important; font-family: 'Jost', Arial, sans-serif !important; font-weight: 500 !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important; transition: background 0.2s !important; margin-top: 8px !important; } .email-signature-manager .btn-generate:hover, .email-signature-manager .btn-copy:hover { background: #00724c !important; } .email-signature-manager .btn-delete { background: #e74c3c !important; margin-left: 12px !important; } .email-signature-manager .btn-delete:hover { background: #c0392b !important; } /* Generator Layout */ .email-signature-manager .generator-container { display: flex !important; gap: 32px !important; align-items: flex-start !important; } .email-signature-manager .form-section { flex: 0 0 40% !important; min-width: 320px !important; max-width: 420px !important; background-color: #f6faf7 !important; padding: 28px 24px !important; border-radius: 16px !important; margin-bottom: 24px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important; } .email-signature-manager .preview-section { flex: 1 !important; min-width: 420px !important; background-color: #f8f9fa !important; padding: 28px 24px !important; border-radius: 16px !important; margin-bottom: 24px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important; } .email-signature-manager .signature-preview { background: #fff !important; border: 2px solid #e0e7ef !important; border-radius: 12px !important; padding: 20px !important; margin-bottom: 20px !important; min-height: 120px !important; max-width: 100% !important; overflow-x: auto !important; } /* Copy Instructions Styling */ .email-signature-manager .copy-instructions { background: #e8f5e8 !important; border: 1px solid #7bb24a !important; border-radius: 8px !important; padding: 16px !important; margin-top: 16px !important; } .email-signature-manager .copy-instructions h3 { color: #00724c !important; margin: 0 0 10px 0 !important; font-size: 1rem !important; } .email-signature-manager .copy-instructions ol { margin: 0 !important; padding-left: 20px !important; color: #2d5a2d !important; } .email-signature-manager .copy-instructions li { margin-bottom: 4px !important; } .email-signature-manager .copy-instructions p { margin: 10px 0 0 0 !important; font-weight: 500 !important; color: #00724c !important; } /* Toast Notification */ .email-signature-manager .toast { visibility: hidden !important; position: fixed !important; bottom: 30px !important; right: 30px !important; background: #00724c !important; color: white !important; padding: 16px 24px !important; border-radius: 8px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important; z-index: 10001 !important; font-family: 'Inter', Arial, sans-serif !important; font-size: 0.95rem !important; max-width: 350px !important; } .email-signature-manager .toast.show { visibility: visible !important; animation: slideInRight 0.3s ease-out !important; } @keyframes slideInRight { from { transform: translateX(100%) !important; opacity: 0 !important; } to { transform: translateX(0) !important; opacity: 1 !important; } } /* Modal Styles */ .email-signature-manager .modal { display: none !important; position: fixed !important; z-index: 10000 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(0, 0, 0, 0.4) !important; } .email-signature-manager .modal-content { background-color: #fff !important; margin: 5% auto !important; padding: 30px !important; border-radius: 16px !important; width: 90% !important; max-width: 500px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important; } .email-signature-manager .close { color: #aaa !important; float: right !important; font-size: 28px !important; font-weight: bold !important; cursor: pointer !important; } .email-signature-manager .close:hover { color: #000 !important; } /* Signatures Grid */ .email-signature-manager .signatures-grid { display: flex !important; flex-direction: column !important; gap: 16px !important; margin-top: 20px !important; } .email-signature-manager .signature-card { background: #fff !important; border: 2px solid #e0e7ef !important; border-radius: 12px !important; padding: 20px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important; transition: all 0.2s !important; } .email-signature-manager .signature-card:hover { border-color: #7bb24a !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; } .email-signature-manager .signature-info h3 { color: #00724c !important; margin: 0 0 12px 0 !important; font-size: 1.2rem !important; } .email-signature-manager .signature-actions { display: flex !important; gap: 8px !important; margin-bottom: 16px !important; } .email-signature-manager .btn-copy-small { background: #7bb24a !important; color: #fff !important; border: none !important; border-radius: 16px !important; padding: 6px 16px !important; font-size: 0.9rem !important; cursor: pointer !important; transition: background 0.2s !important; } .email-signature-manager .btn-copy-small:hover { background: #00724c !important; } .email-signature-manager .signature-preview-small { background: #f8f9fa !important; border: 1px solid #e0e7ef !important; border-radius: 8px !important; padding: 12px !important; font-size: 0.85rem !important; overflow-x: auto !important; } .email-signature-manager .empty-state { text-align: center !important; padding: 60px 20px !important; color: #666 !important; } .email-signature-manager .empty-state i { font-size: 3rem !important; color: #7bb24a !important; margin-bottom: 16px !important; } .email-signature-manager .empty-state h3 { color: #00724c !important; margin-bottom: 8px !important; } /* Employee View Styles (for shareable links) */ .email-signature-manager .employee-container { max-width: 1000px !important; margin: 40px auto !important; padding: 32px 24px !important; background: #fff !important; border-radius: 18px !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important; } .email-signature-manager .employee-container header { text-align: center !important; margin-bottom: 2rem !important; } .email-signature-manager .employee-container h1 { color: #00724c !important; font-size: 2.2rem !important; margin-bottom: 0.5rem !important; } .email-signature-manager .employee-container header p { color: #7bb24a !important; font-size: 1.1rem !important; } .email-signature-manager .employee-preview { background: #f8f9fa !important; border: 2px solid #e0e7ef !important; border-radius: 12px !important; padding: 24px !important; margin-bottom: 32px !important; } .email-signature-manager .employee-preview h2 { color: #00724c !important; margin-bottom: 1rem !important; } /* Platform Guides for Employee View */ .email-signature-manager .platform-guides { margin-top: 2rem !important; } .email-signature-manager .platform-guides h2 { color: #00724c !important; text-align: center !important; margin-bottom: 1.5rem !important; } .email-signature-manager .platform-tabs { display: flex !important; justify-content: center !important; margin-bottom: 2rem !important; border-bottom: 2px solid #e0e7ef !important; } .email-signature-manager .platform-tab { background: none !important; border: none !important; padding: 12px 32px !important; font-size: 1.1rem !important; font-family: 'Jost', Arial, sans-serif !important; font-weight: 500 !important; color: #666 !important; cursor: pointer !important; border-bottom: 3px solid transparent !important; transition: all 0.2s !important; margin: 0 8px !important; } .email-signature-manager .platform-tab:hover { color: #00724c !important; } .email-signature-manager .platform-tab.active { color: #00724c !important; border-bottom-color: #00724c !important; font-weight: 700 !important; } .email-signature-manager .platform-section { display: none !important; } .email-signature-manager .platform-section.active { display: block !important; } .email-signature-manager .client-section { background: #fff !important; border: 1px solid #e0e7ef !important; border-radius: 12px !important; margin-bottom: 16px !important; overflow: hidden !important; } .email-signature-manager .client-section h3 { background: #f8f9fa !important; margin: 0 !important; padding: 16px 20px !important; color: #00724c !important; font-size: 1.2rem !important; border-bottom: 1px solid #e0e7ef !important; } .email-signature-manager .client-content { padding: 24px !important; background: #fff !important; } .email-signature-manager .client-content h4 { color: #00724c !important; margin: 0 0 16px 0 !important; font-size: 1.1rem !important; } .email-signature-manager .client-content ol { margin: 0 !important; padding-left: 24px !important; color: #333 !important; } .email-signature-manager .client-content ol li { margin-bottom: 16px !important; line-height: 1.5 !important; } .email-signature-manager .client-content ul { margin: 8px 0 0 0 !important; padding-left: 20px !important; } .email-signature-manager .client-content ul li { margin-bottom: 4px !important; color: #555 !important; } .email-signature-manager .client-content kbd { background: #f8f9fa !important; border: 1px solid #e0e7ef !important; border-radius: 4px !important; padding: 2px 6px !important; font-family: monospace !important; font-size: 0.9em !important; color: #333 !important; } .email-signature-manager .tip-box { background: #e8f5e8 !important; border: 1px solid #7bb24a !important; border-radius: 8px !important; padding: 16px !important; margin-top: 20px !important; color: #2d5a2d !important; } /* Settings and Guides Containers */ .email-signature-manager .settings-container, .email-signature-manager .guides-container { max-width: 800px !important; margin: 0 auto !important; background: #f8f9fa !important; padding: 32px !important; border-radius: 16px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important; } .email-signature-manager .settings-section, .email-signature-manager .guides-section { background: #fff !important; padding: 24px !important; border-radius: 12px !important; margin-bottom: 20px !important; border: 1px solid #e0e7ef !important; } .email-signature-manager .settings-section h3, .email-signature-manager .guides-section h3 { color: #00724c !important; margin: 0 0 16px 0 !important; padding-bottom: 8px !important; border-bottom: 2px solid #7bb24a !important; font-size: 1.1rem !important; } .email-signature-manager .form-group small { color: #666 !important; font-size: 0.85rem !important; margin-top: 4px !important; display: block !important; } /* Responsive Design */ @media (max-width: 768px) { .email-signature-manager .generator-container { flex-direction: column !important; } .email-signature-manager .form-section, .email-signature-manager .preview-section { flex: none !important; min-width: 100% !important; max-width: 100% !important; } .email-signature-manager .nav-tabs { flex-wrap: wrap !important; } .email-signature-manager .nav-tab { flex: 1 !important; min-width: 120px !important; font-size: 0.95rem !important; padding: 10px 12px !important; } /* Employee View Responsive */ .email-signature-manager .platform-tabs { flex-direction: column !important; gap: 8px !important; border-bottom: none !important; } .email-signature-manager .platform-tab { width: 100% !important; margin: 0 !important; text-align: center !important; border-bottom: none !important; border-radius: 8px !important; background: #f8f9fa !important; padding: 12px 16px !important; } .email-signature-manager .platform-tab.active { background: #00724c !important; color: white !important; } .email-signature-manager .employee-container { margin: 20px auto !important; padding: 20px 16px !important; } .email-signature-manager .client-content { padding: 16px !important; } .email-signature-manager .client-content ol { padding-left: 16px !important; } } /* Employee view guide styling */ .email-signature-manager .guide-content { padding: 24px !important; background: #f8f9fa !important; border-radius: 8px !important; margin-bottom: 20px !important; border: 1px solid #e9ecef !important; line-height: 1.6 !important; } /* Override external CSS conflicts for guide content */ .email-signature-manager .guide-content * { line-height: inherit !important; } .email-signature-manager .guide-content h3 { color: #1e3a8a !important; margin-bottom: 16px !important; margin-top: 0 !important; font-size: 1.25rem !important; font-weight: 600 !important; display: flex !important; align-items: center !important; gap: 10px !important; line-height: 1.3 !important; } .email-signature-manager .guide-content h3 i { font-size: 1.5rem !important; opacity: 0.8 !important; } .email-signature-manager .guide-content h3 i.fab.fa-windows { color: #0078d4 !important; } .email-signature-manager .guide-content h3 i.fab.fa-apple { color: #000 !important; } .email-signature-manager .guide-content h4 { color: #374151 !important; margin-bottom: 12px !important; margin-top: 20px !important; font-size: 1.1rem !important; font-weight: 500 !important; line-height: 1.4 !important; } .email-signature-manager .guide-content p { margin-bottom: 12px !important; line-height: 1.6 !important; color: #4b5563 !important; } .email-signature-manager .guide-content ol, .email-signature-manager .guide-content ul { margin-bottom: 16px !important; padding-left: 24px !important; line-height: 1.6 !important; } .email-signature-manager .guide-content li { margin-bottom: 8px !important; line-height: 1.5 !important; color: #4b5563 !important; } .email-signature-manager .guide-content strong { color: #1f2937 !important; font-weight: 600 !important; } .email-signature-manager .guide-content code { background: #f3f4f6 !important; padding: 2px 6px !important; border-radius: 4px !important; font-family: monospace !important; font-size: 0.9em !important; color: #dc2626 !important; } .email-signature-manager .guide-content .highlight { background: #fef3c7 !important; padding: 12px !important; border-radius: 6px !important; border-left: 4px solid #f59e0b !important; margin: 16px 0 !important; } .email-signature-manager .guide-content .warning { background: #fee2e2 !important; padding: 12px !important; border-radius: 6px !important; border-left: 4px solid #ef4444 !important; margin: 16px 0 !important; } .email-signature-manager .guide-content .success { background: #dcfce7 !important; padding: 12px !important; border-radius: 6px !important; border-left: 4px solid #22c55e !important; margin: 16px 0 !important; } .email-signature-manager .guide-content .tip-box { background: #f0f9ff !important; padding: 16px !important; border-radius: 8px !important; border-left: 4px solid #3b82f6 !important; margin: 20px 0 !important; font-size: 14px !important; line-height: 1.6 !important; } .email-signature-manager .guide-content .tip-box strong { color: #1e40af !important; font-weight: 600 !important; } .email-signature-manager .guide-content kbd { background: #374151 !important; color: white !important; padding: 2px 6px !important; border-radius: 4px !important; font-family: monospace !important; font-size: 0.85em !important; font-weight: 600 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; } /* Platform tabs container */ .email-signature-manager .platform-tabs { display: flex !important; gap: 8px !important; margin-bottom: 16px !important; flex-wrap: wrap !important; border-bottom: none !important; } /* Employee view platform tabs styling */ .email-signature-manager .employee-container .platform-tabs { display: flex !important; gap: 8px !important; margin-bottom: 16px !important; flex-wrap: wrap !important; justify-content: flex-start !important; border-bottom: none !important; } /* Platform tab styling with better icons */ .email-signature-manager .platform-tab { background: #fff !important; border: 1px solid #ddd !important; border-radius: 8px !important; padding: 12px 16px !important; cursor: pointer !important; transition: all 0.3s ease !important; color: #666 !important; font-size: 14px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; } .email-signature-manager .platform-tab i { font-size: 1.2rem !important; } .email-signature-manager .platform-tab.windows-tab i { color: #0078d4 !important; } .email-signature-manager .platform-tab.mac-tab i { color: #000 !important; } .email-signature-manager .platform-tab:hover { background: #f8f9fa !important; border-color: #1e3a8a !important; color: #1e3a8a !important; } .email-signature-manager .platform-tab.active { background: #1e3a8a !important; color: white !important; border-color: #1e3a8a !important; } .email-signature-manager .platform-tab.active i { color: white !important; } .email-signature-manager .platform-section { display: none !important; margin-top: 20px !important; } .email-signature-manager .platform-section.active { display: block !important; } /* Employee language tabs styling */ .email-signature-manager .employee-language-tabs { display: flex !important; gap: 8px !important; margin-bottom: 16px !important; flex-wrap: wrap !important; justify-content: center !important; } .email-signature-manager .employee-language-tab { background: #fff !important; border: 1px solid #ddd !important; border-radius: 6px !important; padding: 8px 12px !important; cursor: pointer !important; transition: all 0.3s ease !important; color: #666 !important; font-size: 13px !important; font-weight: 500 !important; } .email-signature-manager .employee-language-tab:hover { background: #f8f9fa !important; border-color: #1e3a8a !important; color: #1e3a8a !important; } .email-signature-manager .employee-language-tab.active { background: #1e3a8a !important; color: white !important; border-color: #1e3a8a !important; } .email-signature-manager .employee-language-section { display: none !important; } .email-signature-manager .employee-language-section.active { display: block !important; } /* Language tabs for admin guides section */ .email-signature-manager .language-tabs { display: flex !important; gap: 8px !important; margin-bottom: 24px !important; border-bottom: 2px solid #e0e7ef !important; padding-bottom: 8px !important; } .email-signature-manager .language-tab { background: none !important; border: none !important; padding: 12px 24px !important; font-size: 1rem !important; font-family: 'Jost', Arial, sans-serif !important; font-weight: 500 !important; color: #666 !important; cursor: pointer !important; border-bottom: 3px solid transparent !important; transition: all 0.2s !important; } .email-signature-manager .language-tab:hover { color: #00724c !important; border-bottom-color: #7bb24a !important; } .email-signature-manager .language-tab.active { color: #00724c !important; border-bottom-color: #00724c !important; font-weight: 600 !important; } .email-signature-manager .language-section { display: none !important; } .email-signature-manager .language-section.active { display: block !important; } .email-signature-manager .language-section h3 { color: #00724c !important; margin-bottom: 1.5rem !important; font-size: 1.3rem !important; } /* Responsive updates */ @media (max-width: 768px) { .email-signature-manager .platform-tabs { justify-content: center !important; gap: 4px !important; } .email-signature-manager .platform-tab { font-size: 12px !important; padding: 8px 12px !important; } .email-signature-manager .employee-container .platform-tabs { justify-content: center !important; gap: 4px !important; } .email-signature-manager .employee-language-tabs { flex-direction: column !important; align-items: center !important; } .email-signature-manager .employee-language-tab { width: 100% !important; text-align: center !important; margin-bottom: 0.5rem !important; } } /* Checkbox styling for English labels */ .email-signature-manager .checkbox-container { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 1rem !important; cursor: pointer !important; } .email-signature-manager .checkbox-container input[type="checkbox"] { position: absolute !important; opacity: 0 !important; cursor: pointer !important; height: 0 !important; width: 0 !important; } .email-signature-manager .checkmark { height: 18px !important; width: 18px !important; background-color: #fff !important; border: 2px solid #ddd !important; border-radius: 3px !important; position: relative !important; display: inline-block !important; flex-shrink: 0 !important; } .email-signature-manager .checkbox-container:hover .checkmark { border-color: #00724c !important; } .email-signature-manager .checkbox-container input:checked~.checkmark { background-color: #00724c !important; border-color: #00724c !important; } .email-signature-manager .checkmark:after { content: "" !important; position: absolute !important; display: none !important; left: 5px !important; top: 1px !important; width: 5px !important; height: 10px !important; border: solid white !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; } .email-signature-manager .checkbox-container input:checked~.checkmark:after { display: block !important; } .email-signature-manager .checkbox-label { font-size: 14px !important; color: #333 !important; cursor: pointer !important; line-height: 1.4 !important; flex: 1 !important; } @media (max-width: 768px) { .email-signature-manager .checkbox-container { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .email-signature-manager .checkbox-label { font-size: 13px !important; } } /* Accordion styling for employee guides */ .email-signature-manager .accordion { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 20px !important; } .email-signature-manager .accordion-item { border: 1px solid #e0e7ef !important; border-radius: 8px !important; overflow: hidden !important; background: #fff !important; transition: all 0.3s ease !important; } .email-signature-manager .accordion-item:hover { border-color: #7bb24a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; } .email-signature-manager .accordion-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px 20px !important; background: #f8f9fa !important; cursor: pointer !important; transition: all 0.3s ease !important; border-bottom: 1px solid #e0e7ef !important; } .email-signature-manager .accordion-header:hover { background: #e9ecef !important; } .email-signature-manager .accordion-header.active { background: #00724c !important; color: white !important; } .email-signature-manager .accordion-header h3 { margin: 0 !important; font-size: 1.1rem !important; font-weight: 600 !important; color: inherit !important; } .email-signature-manager .accordion-icon { font-size: 14px !important; font-weight: bold !important; transition: transform 0.3s ease !important; color: inherit !important; } .email-signature-manager .accordion-header.active .accordion-icon { transform: rotate(180deg) !important; } .email-signature-manager .accordion-content { display: none !important; padding: 0 !important; background: #fff !important; } .email-signature-manager .accordion-content.active { display: block !important; } .email-signature-manager .accordion-content .client-content { padding: 20px !important; border-top: none !important; } @media (max-width: 768px) { .email-signature-manager .accordion-header { padding: 12px 16px !important; } .email-signature-manager .accordion-header h3 { font-size: 1rem !important; } .email-signature-manager .accordion-content .client-content { padding: 16px !important; } }