/** * Compact Density Mode * * These rules apply when the element has the attribute * data-density="compact". The pre-render script in stylesApp.html * decides when to set this attribute: * 1. If the user has an explicit preference in localStorage * ('dtax-density'), respect it. * 2. Otherwise, auto-detect low-density screens via matchMedia * (device-pixel-ratio <= 1.5 or resolution <= 144dpi) and * apply compact mode automatically. * * The user can toggle compact mode manually with the .density-toggle * button in the topbar. Their choice always wins over auto-detect. * * Uses native CSS Nesting (Chrome 112+, Firefox 117+, Safari 16.5+). */ [data-density="compact"] { /* ==================== DTASK.CSS OVERRIDES ==================== */ /* Global spacing reductions */ .modal-header { padding: 16px 24px; } .modal-title { font-size: 1.25rem; } .modal-subtitle { font-size: 0.8rem; margin-top: 2px; } .modal-body { padding: 20px; } .modal-footer { padding: 14px 24px; } /* Content grid adjustments */ .content-grid { gap: 16px; } .sidebar-section { gap: 14px; } /* Info cards */ .info-card { padding: 14px; border-radius: 10px; } .section-title { font-size: 0.8rem; margin-bottom: 12px; } /* Metric rows */ .metric-row { padding: 8px 0; } .metric-label { font-size: 0.8rem; } .metric-value { font-size: 0.85rem; } .metric-badge { padding: 3px 10px; font-size: 0.75rem; } /* Stats grid */ .stats-grid { gap: 10px; margin-bottom: 12px; } .stat-card { padding: 12px; border-radius: 8px; } .stat-label { font-size: 0.7rem; margin-bottom: 3px; } .stat-value { font-size: 1.25rem; } .stat-icon { font-size: 1rem; } /* Form elements */ .comment-input { padding: 10px; font-size: 0.8rem; } /* Upload zone */ .upload-zone { padding: 18px; border-radius: 10px; } .upload-icon { font-size: 2rem; margin-bottom: 6px; } /* File items */ .file-item { gap: 10px; padding: 10px; margin-bottom: 6px; } .file-icon-wrapper { width: 34px; height: 34px; font-size: 1.1rem; } .file-name { font-size: 0.8rem; } .file-size { font-size: 0.7rem; } .btn-delete { width: 28px; height: 28px; } /* Preview container */ .preview-header { padding: 12px 16px; } .preview-title { font-size: 0.8rem; } .btn-icon { width: 28px; height: 28px; } .no-preview i { font-size: 3rem; margin-bottom: 12px; } /* Buttons */ .btn-modern { padding: 8px 18px; font-size: 0.8rem; } /* Loading components */ .loading-card { padding: 1.5rem 2rem; gap: 0.75rem; } .loading-spinner { width: 40px; height: 40px; } .loading-text { font-size: 14px; } .loading-close { margin-top: 0.75rem; padding: 0.4rem 0.8rem; font-size: 13px; } /* Toast notifications */ .toast-card { padding: 10px 18px; gap: 10px; } .toast-text { font-size: 13px; } /* UI Container */ .ui-container { padding: 18px; } .ui-header { margin-bottom: 24px; padding-bottom: 12px; } .ui-header__title { font-size: 26px; } .ui-header__actions { gap: 10px; } .ui-btn { padding: 8px 16px; font-size: 13px; gap: 6px; } /* UI Grid */ .ui-grid { gap: 18px; } /* UI Cards */ .ui-card__header { padding: 14px 18px; } .ui-card__title { font-size: 16px; } .ui-card__body { padding: 18px; } /* Form elements */ .ui-form-group { margin-bottom: 14px; } .ui-label { font-size: 13px; margin-bottom: 6px; } .ui-input, .ui-select, .ui-textarea { padding: 8px 10px; font-size: 13px; } .ui-textarea { min-height: 100px; } /* Editor */ .ui-editor__toolbar { padding: 6px; } .ui-editor__btn { padding: 5px 8px; } .ui-editor__content { padding: 10px; min-height: 120px; } .ui-form-row { gap: 12px; } /* Badge */ .ui-badge { padding: 3px 10px; font-size: 11px; } /* Info section */ .ui-info-section { padding: 12px; margin-bottom: 14px; } .ui-info-section__title { font-size: 13px; margin-bottom: 6px; } .ui-info-section__content { font-size: 13px; line-height: 1.5; } /* Activity feed */ .ui-activity__item { padding: 10px 0; } .ui-activity__icon { width: 28px; height: 28px; } .ui-activity__text { font-size: 13px; margin-bottom: 3px; } .ui-activity__time { font-size: 11px; } /* Documents list */ .ui-documents { max-height: 250px; } .ui-document-item { padding: 10px; margin-bottom: 10px; } .ui-document-item__icon { width: 34px; height: 34px; font-size: 16px; } .ui-document-item__name { font-size: 13px; } .ui-document-item__meta { font-size: 11px; } .ui-icon-btn { width: 28px; height: 28px; } /* Section actions */ .ui-section-actions { margin-bottom: 12px; } .ui-section-actions__title { font-size: 14px; } /* Empty state */ .ui-empty-state { padding: 30px 16px; } .ui-empty-state__icon { font-size: 40px; margin-bottom: 12px; } .ui-empty-state__text { font-size: 13px; } /* File upload zone */ .file-upload-zone-dropzone { padding: 30px 16px; min-height: 160px; } .file-upload-zone-instruction p { font-size: 14px; } .file-upload-zone-instruction small { font-size: 12px; } .file-upload-zone-summary i { font-size: 20px; } .file-upload-zone-summary strong { font-size: 14px; } .file-upload-zone-list { margin-top: 12px; gap: 6px; } .file-upload-zone-item { padding: 10px 12px; } .file-upload-zone-item-icon { width: 34px; height: 34px; font-size: 20px; margin-right: 10px; } .file-upload-zone-item-name { font-size: 13px; } .file-upload-zone-item-size { font-size: 11px; } .file-upload-zone-item-delete { width: 28px; height: 28px; font-size: 12px; } .file-upload-zone-compact .file-upload-zone-dropzone { padding: 16px 12px; min-height: 100px; } /* Empty state container */ .empty-state-container { padding: 2rem 0.75rem; margin-top: 16px; } .empty-state-content h3 { margin-bottom: 0.4rem; } .empty-state-content p { font-size: 0.9rem; margin-bottom: 1.25rem; } /* Admin Dashboard */ .ca-section-title { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: 0.75rem; padding-bottom: 0.4rem; } .ca-chart-card { padding: 1.25rem; } .ca-chart-title { font-size: 0.9rem; margin-bottom: 0.75rem; } /* ==================== STYLEHOME.CSS OVERRIDES ==================== */ /* Navigation */ .navbar { min-height: 44px; } .navbar-expand-md { height: 44px; line-height: 44px; padding: 0 12px; } .navbar-size { font-size: 14px; } /* Modern link */ .modern-link { padding: 8px 16px; font-size: 1rem; } /* Module description */ .module-desc { font-size: 13px; } /* Card body */ .card-body h2 { font-size: 18px; } .card-body ul li p { font-size: 11px; } .card-body ul li a { font-size: 12px; } .card-item-size { font-size: 34px; } .card-description { font-size: 11px; } /* Side menu */ .sidemenu { flex: 0 0 260px; } .sidemenu a { padding: 6px 6px 6px 24px; font-size: 16px; } .sidemenu span { font-size: small; } .side-left-menu { width: 260px; } .side-left-menu a { padding: 6px 6px 6px 24px; font-size: 16px; } .side-left-menu span { font-size: small; } .sidemenu-catalogs { width: 320px; } .sidemenu-catalogs a { padding: 6px 6px 6px 24px; font-size: 16px; } /* Sidenav */ .sidenav a { padding: 6px 6px 6px 24px; font-size: 16px; } /* Title navbar */ .title-navbar { font-size: 16px; } /* Vertical navbar */ .vertical-navbar-item p { font-size: 14px; } /* Form elements */ .form-step i { font-size: 22px; } .form-step p { font-size: 12px; } /* BS Wizard */ .bs-wizard { margin-top: 30px; padding: 0 0 8px 0; } .bs-wizard > .bs-wizard-step .bs-wizard-stepnum { font-size: 14px; margin-bottom: 4px; } .bs-wizard > .bs-wizard-step .bs-wizard-info { font-size: 12px; } .bs-wizard > .bs-wizard-step > .bs-wizard-dot { width: 26px; height: 26px; top: 40px; margin-top: -13px; margin-left: -13px; } .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after { width: 12px; height: 12px; top: 7px; left: 7px; } .bs-wizard > .bs-wizard-step > .progress { height: 6px; margin: 16px 0; } /* Input elements */ .input-xs { height: 20px; padding: 2px 4px; font-size: 11px; } .input-box { padding: 8px; font-size: 13px; min-height: 36px; } .textarea-box { padding: 8px; font-size: 13px; min-height: 36px; } /* Grid */ .grid-header { padding: 2px; height: 8%; } .grid-item { padding: 4px; } /* Calendar */ .calendar-day { padding: 8px; } /* Chat */ .chat-header { padding: 4px; font-size: 11px; } .chat-messages { padding: 8px; height: 400px; } .chat-form { padding: 8px; } /* Messages */ .message { margin-bottom: 8px; } .message-sender .time { font-size: 0.75rem; } .receiver .message-body { margin-left: 24px; padding: 8px; } .message-body { padding: 8px; } /* Waiting animation */ .waiting-animation { height: 44px; } .drop-container { width: 70px; height: 70px; } .drop { width: 16px; height: 16px; } .watermark { margin-top: 16px; font-size: 28px; } /* Error container */ .error-text { font-size: 14px; margin-bottom: 0.75rem; } .error-animation { width: 44px; height: 44px; } /* Avatar */ .avatar-table { height: 44px; width: 44px; font-size: 18px; } .avatar-table-light { height: 44px; width: 44px; font-size: 18px; } .avatar { height: 130px; width: 130px; font-size: 70px; } /* Speedometer */ .speedometer-arrow { height: 80px; top: 48px; } /* Buttons */ .btn-home { padding: 5px 10px; } /* Tables */ .table-text { font-size: 13px; } .table-wrapper { height: 82%; } /* Spinner */ .spinner-inner { width: 26px; height: 26px; } /* Raindrop */ .raindrop { width: 16px; height: 16px; margin: 4px; } .raindrop-container { height: 18%; } /* Wave */ .wave { width: 16px; height: 16px; margin-right: 4px; } /* Tabs */ .nav-tabs { margin-bottom: 1rem; gap: 0.15rem; } .nav-tabs .nav-link { padding: 0.5rem 1rem; font-size: 0.9rem; } .nav-tabs .nav-link.active::before { height: 2px; } .tab-content { padding: 1rem; } /* Search */ .search-container { max-width: 550px; } .search-input { padding: 3px 40px 3px 6px; font-size: 14px; } .search-icon { right: 12px; width: 18px; height: 18px; } /* Two/three lines text */ .two-lines { line-height: 0.95em; height: 2.9em; } .two-lines-lg { line-height: 1.4em; height: 3.2em; } .three-lines { line-height: 1.4em; height: 3.2em; } /* App module container */ .app-module-container { padding: 0; } /* Dropdown app */ .dropdown-app-menu { min-width: 140px; padding: 10px 14px; } /* Modal */ .modal { overflow: auto !important; } /* ==================== AI.CSS OVERRIDES ==================== */ /* Sidebar */ .ai-sidebar { width: 250px; } .ai-sidebar-header { padding: 14px; } .ai-sidebar-title { font-size: 1.1rem; gap: 8px; } .ai-new-chat-btn { padding: 10px 16px; font-size: 0.85rem; margin: 12px; gap: 6px; } .ai-conversation-list { padding: 8px; } .ai-conversation-item { padding: 10px 14px; margin-bottom: 6px; gap: 10px; } .ai-conversation-icon { width: 18px; } .ai-conversation-title { font-size: 0.85rem; } .ai-conversation-time { font-size: 0.65rem; } .ai-sidebar-footer { padding: 12px; } .ai-user-profile { gap: 8px; } .ai-user-avatar { width: 32px; height: 32px; font-size: 0.9rem; } .ai-user-name { font-size: 0.85rem; } .ai-user-status { font-size: 0.75rem; } .ai-settings-btn { font-size: 0.9rem; } /* Main content area */ .ai-chat-header { padding: 12px 18px; } .ai-chat-title { font-size: 1rem; } .ai-chat-actions { gap: 10px; } .ai-action-btn { width: 32px; height: 32px; } .ai-messages-container { padding: 18px; gap: 16px; } .ai-message { gap: 12px; } .ai-message-avatar { width: 32px; height: 32px; } .ai-message-bubble { padding: 12px 14px; line-height: 1.45; } .ai-message-time { font-size: 0.65rem; margin-top: 5px; } /* Input area */ .ai-input-area { padding: 10px 12px; } .ai-attachment-btn { font-size: 1rem; width: 36px; height: 36px; } .ai-input-field textarea { padding: 10px 14px; padding-right: 44px; min-height: 44px; max-height: 100px; font-size: 0.9rem; line-height: 1.45; } .ai-voice-btn { right: 10px; font-size: 0.9rem; width: 28px; height: 28px; } .ai-send-btn { width: 32px; height: 32px; font-size: 0.9rem; } /* Toggle sidebar button */ .ai-toggle-sidebar { left: 16px; bottom: 16px; width: 44px; height: 44px; } /* Right panel */ .ai-panel { width: 320px; } .ai-panel-header { padding: 12px; } .ai-panel-title { font-size: 0.95rem; } .ai-panel-close { font-size: 0.9rem; width: 28px; height: 28px; } .ai-panel-content { padding: 12px; } /* File attachment preview */ .ai-file-preview { gap: 6px; padding: 6px 10px; margin-bottom: 8px; } .ai-file-icon { font-size: 1.1rem; } .ai-file-name { font-size: 0.8rem; } .ai-file-remove { font-size: 0.85rem; width: 22px; height: 22px; } /* Welcome screen */ .ai-welcome { padding: 18px; } .ai-welcome-icon { font-size: 2.5rem; margin-bottom: 18px; } .ai-welcome-title { font-size: 1.3rem; margin-bottom: 10px; } .ai-welcome-subtitle { font-size: 0.9rem; margin-bottom: 26px; } .ai-suggestions { gap: 10px; } .ai-suggestion { padding: 12px; } .ai-suggestion-icon { margin-bottom: 6px; } .ai-suggestion-text { font-size: 0.85rem; } /* Typing indicator */ .ai-typing { gap: 3px; padding: 5px 8px; margin-top: 8px; } .ai-typing-dot { width: 6px; height: 6px; } /* Textarea */ .ai-textarea { min-height: 36px; max-height: 100px; padding: 8px; font-size: 13px; line-height: 1.45; } /* Small loading spinner */ .small-loading-spinner { width: 22px; height: 22px; border-width: 3px; } /* Responsive adjustments for mobile within low density */ @media (max-width: 768px) { .ai-sidebar { left: -250px; } } /* ==================== DTAXSTYLE.CSS — APP SHELL OVERRIDES ==================== */ /* Topbar */ .crm-topbar { padding: 0 12px; } .crm-topbar-left { gap: 6px; } .crm-topbar-right { gap: 2px; } .crm-topbar-toggle, .crm-topbar-btn { width: 34px; height: 34px; } .crm-topbar-btn--labeled { width: auto; height: auto; padding: 3px 6px; } .crm-topbar-btn-label { font-size: 9px; } .crm-topbar-brand { gap: 8px; } .crm-topbar-brand-icon { width: 28px; height: 28px; font-size: 15px; } .crm-topbar-brand-name { font-size: 14px; } .crm-topbar-company { font-size: 12px; padding-left: 10px; } .crm-topbar-search { padding: 6px 12px; width: 320px; gap: 8px; } .crm-topbar-search input { font-size: 13px; } /* Sidebar */ .b2b-nav.sidemenu { flex: 0 0 240px; width: 240px; } .b2b-nav .nav-header { padding: 14px 12px 8px; } .b2b-nav .nav-brand { gap: 10px; } .b2b-nav .nav-brand-icon { width: 32px; height: 32px; font-size: 15px; } .b2b-nav .nav-brand-title { font-size: 14px; } .b2b-nav .nav-content-spacious { padding: 8px 10px; } .b2b-nav .nav-section-label { font-size: 10px; padding: 12px 8px 4px; } .b2b-nav .menu-item-teacher, .b2b-nav .nav-home-item { height: 32px; font-size: 13px; padding: 0 12px; gap: 10px; } .b2b-nav .nav-footer { padding: 8px; } .b2b-nav .nav-footer-content { padding: 6px 10px; } /* Page header */ .cb-page-header { padding: 10px 0 8px; margin-bottom: 10px; } .cb-page-title { font-size: 18px; } /* ==================== COURSEBUSINESSSTYLE.CSS — cb-* OVERRIDES ==================== */ /* Buttons */ .cb-btn { padding: 6px 16px; font-size: 13px; gap: 5px; } .cb-btn-text { padding: 4px 10px; font-size: 12px; } /* Forms */ .cb-filter-form { padding: 8px 0; } .cb-filter-row { gap: 8px; } .cb-label { font-size: 11px; margin-bottom: 3px; } .cb-input { padding: 6px 10px; height: 32px; font-size: 12px; } .cb-textarea { min-height: 60px; } .cb-form-group { margin-bottom: 10px; } .cb-form-row { gap: 8px; margin-bottom: 10px; } .cb-form-half { gap: 8px; } .cb-form-actions { gap: 8px; padding-top: 4px; } /* Tables */ .cb-table thead th { font-size: 11px; padding: 8px 12px; } .cb-table tbody td { font-size: 12px; padding: 8px 12px; } .cb-cell-sub { font-size: 11px; } /* Chips */ .cb-chip { padding: 2px 8px; font-size: 11px; } .cb-chip-sm { padding: 1px 6px; font-size: 10px; } /* Cards */ .cb-card { padding: 14px 16px; } .cb-card-title { font-size: 14px; } .cb-card-header { margin-bottom: 0.75rem; } /* KPI Grid */ .cb-kpi-grid { gap: 8px; padding: 8px 0; } /* Modals */ .cb-modal-header { padding: 12px 16px; } .cb-modal-title { font-size: 15px; } .cb-modal-body { padding: 14px; } .cb-modal-footer { padding: 10px 16px; } /* Empty states */ .cb-empty-state { padding: 28px 16px; } .cb-empty-icon { font-size: 36px; margin-bottom: 6px; } .cb-empty-text { font-size: 13px; } /* Icon buttons */ .cb-icon-btn { width: 28px; height: 28px; } .cb-icon-btn i { font-size: 13px; } /* Progress */ .cb-progress-list { gap: 8px; } .cb-progress-row { gap: 8px; grid-template-columns: 130px 1fr 48px; } .cb-progress-label, .cb-progress-pct { font-size: 12px; } /* Tabs */ .cb-stats-tabs { gap: 3px; margin-bottom: 10px; } .cb-stats-tab { padding: 6px 12px; font-size: 13px; } /* AI analysis card */ .cb-ai-analysis-card { min-height: 260px; } .cb-ai-analysis-header { padding: 14px 16px 10px; } .cb-ai-analysis-title { font-size: 13px; } .cb-ai-analysis-body { padding: 16px 18px; } .cb-ai-meta-chip { padding: 3px 8px; font-size: 11px; } /* ==================== BUSINESSWELCOMESTYLE.CSS — baw-* OVERRIDES ==================== */ /* Root & banner */ .baw-root { padding: 12px 16px; } .baw-banner { padding: 14px 18px; gap: 16px; margin-bottom: 12px; } .baw-greeting-text { font-size: 17px; } .baw-subtitle { font-size: 12px; margin-bottom: 10px; } /* Avatar & chips */ .baw-avatar-ring { width: 48px; height: 48px; font-size: 20px; } .baw-avatar-status { width: 11px; height: 11px; } .baw-chips { gap: 6px; } .baw-chip { padding: 3px 8px; font-size: 11px; } /* Section headers */ .baw-section-header { margin-bottom: 8px; padding-top: 4px; } .baw-section-title { font-size: 12px; } /* Action cards */ .baw-actions-grid { gap: 8px; margin-bottom: 12px; } .baw-action-card { padding: 10px; gap: 10px; } .baw-action-icon { width: 36px; height: 36px; font-size: 18px; } .baw-action-title { font-size: 13px; } .baw-action-desc { font-size: 11px; } .baw-action-badge { font-size: 10px; padding: 2px 6px; } /* Info strip */ .baw-info-strip { padding: 6px 14px; gap: 16px; margin-bottom: 12px; } .baw-info-item { font-size: 12px; gap: 4px; } /* Modules */ .baw-modules-section { padding: 12px; } .baw-modules-grid { gap: 6px; } .baw-module-card { padding: 10px; gap: 8px; } .baw-module-icon { width: 32px; height: 32px; } .baw-module-title { font-size: 12px; } .baw-module-desc { font-size: 10px; } /* Focus card */ .baw-focus-card { padding: 12px 16px; margin-bottom: 12px; } .baw-focus-inner { gap: 10px; padding: 10px 14px; } .baw-focus-icon-wrap { width: 36px; height: 36px; } .baw-focus-label { font-size: 10px; } .baw-focus-title { font-size: 13px; } .baw-focus-desc { font-size: 11px; } .baw-focus-cta { padding: 6px 14px; font-size: 12px; gap: 5px; } /* AI panel */ .baw-ai-panel-inner { margin-top: 8px; padding: 10px 12px; } .baw-ai-text { font-size: 12px; } .baw-ai-label { font-size: 11px; } /* News */ .baw-news-section { padding: 12px; } .baw-news-item { gap: 8px; padding: 8px 0; } .baw-news-title { font-size: 12px; } .baw-news-desc { font-size: 11px; } /* Quick actions */ .baw-quick-actions { gap: 8px; } .baw-qa-btn { padding: 4px 10px; font-size: 12px; gap: 5px; } /* ==================== CUSTOMERPORTAL.CSS — cp-* / bcp-* OVERRIDES ==================== */ /* Portal shell overrides */ .bcp-shell .baw-root { padding: 8px 14px; } .bcp-shell .baw-banner { padding: 10px 14px; margin-bottom: 8px; } /* Tab bar */ .bcp-tabs { padding: 3px; margin: 6px 16px 0; gap: 2px; } .bcp-tab { padding: 5px 14px; font-size: 12px; gap: 5px; } .bcp-tab .material-symbols-outlined { font-size: 15px; } /* Content area */ .bcp-content-area { padding: 10px 16px; } .bcp-breadcrumb { padding: 6px 16px; gap: 3px; } .bcp-back-btn { font-size: 13px; padding: 3px 6px; } .bcp-breadcrumb-current { font-size: 13px; } /* KPI strip */ .cp-kpi-stat { padding: 7px 12px; gap: 6px; } .cp-kpi-icon { width: 26px; height: 26px; } .cp-kpi-icon .material-symbols-outlined { font-size: 14px; } .cp-kpi-value { font-size: 15px; } .cp-kpi-label { font-size: 10px; } /* Timeline/stepper */ .cp-timeline { padding: 12px 0 4px; } .cp-step-node { width: 22px; height: 22px; font-size: 11px; } .cp-step-label { margin-top: 6px; font-size: 10px; } .cp-step-date { font-size: 9px; } /* Dropzone */ .cp-dropzone-area { padding: 18px 14px; min-height: 90px; } .cp-dropzone-icon { font-size: 24px; margin-bottom: 3px; } .cp-dropzone-text { font-size: 12px; } .cp-dropzone-hint { font-size: 10px; } .cp-file-item { gap: 8px; padding: 6px 10px; } .cp-file-item-name { font-size: 12px; } .cp-file-item-size { font-size: 10px; } .cp-file-item-remove { width: 24px; height: 24px; font-size: 13px; } /* Help panel */ .cp-help-panel { padding: 8px 10px; margin-bottom: 12px; } .cp-help-panel-header { font-size: 11px; margin-bottom: 6px; } .cp-help-list li { font-size: 11px; } /* ==================== CUSTOMS PROJECT — compact cards ==================== */ .project-card.cb-card { padding: 0 !important; } .project-card .cp-project-header { padding: 8px 14px 6px !important; } .project-card .cp-project-icon { width: 28px !important; height: 28px !important; } .project-card .cp-project-icon .material-symbols-outlined { font-size: 15px !important; } .project-card .cb-card-title { font-size: 13px !important; } .project-card .cp-project-customer { font-size: 11px !important; margin-top: 1px !important; } .project-card .project-items-container { padding: 0 14px 4px !important; } .project-card .cp-items-header-row { padding: 3px 0 4px !important; gap: 4px !important; } .project-card .cp-items-header-row > span { font-size: 10px !important; } .project-card .cp-item-row { gap: 4px !important; padding: 2px 0 2px 4px !important; padding-left: 6px !important; } .project-card .cp-editable-cell { font-size: 11px !important; padding: 2px 4px !important; } .project-card .cp-item-row > .cp-editable-cell[data-field="preInvoiceCode"] { font-size: 12px !important; } .project-card .cp-item-row > button.cb-icon-btn { width: 22px !important; height: 22px !important; } .project-card .cp-item-row > button.cb-icon-btn .material-symbols-outlined { font-size: 13px !important; } .project-card .cp-item-row > button.cb-icon-btn i { font-size: 11px !important; } .project-card .cp-project-footer { padding: 4px 14px 8px !important; margin-top: 2px !important; } .project-card .cp-add-item-btn { font-size: 11px !important; padding: 4px 12px !important; } .project-card .cp-add-item-btn .material-symbols-outlined { font-size: 13px !important; } }