html, body { font-family: Poppins, sans-serif; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } /* Sales document: align pricing row controls */ .sales-doc-pricing-row .sales-doc-price-catalog-ddl.e-ddl .e-input-group, .sales-doc-pricing-row .sales-doc-price-catalog-ddl.e-ddl .e-input-value { display: flex; align-items: center; min-height: 2.25rem; } /* Document create/edit dialogs — near full viewport width, scrollable body */ .document-form-dialog.e-dialog { width: 95vw !important; max-width: 95vw; } .document-form-dialog .e-dlg-content { max-height: min(85vh, calc(100dvh - 7rem)); overflow-x: hidden; overflow-y: auto; padding: 0.75rem 1rem 1rem; } @media (max-width: 640px) { .document-form-dialog.e-dialog { width: 100vw !important; max-width: 100vw; margin: 0; } .document-form-dialog .e-dlg-content { max-height: calc(100dvh - 5.5rem); padding: 0.5rem 0.75rem 0.75rem; } } .document-form-shell { width: 100%; min-width: 0; } .document-form-shell .e-input-group, .document-form-shell .e-control-wrapper, .document-form-shell .e-ddl { max-width: 100%; } .sales-doc-form-tabs.e-tab .e-tab-header, .purchase-doc-form-tabs.e-tab .e-tab-header { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .sales-doc-form-tabs.e-tab .e-toolbar-item .e-tab-wrap, .purchase-doc-form-tabs.e-tab .e-toolbar-item .e-tab-wrap { white-space: nowrap; } .document-form-lines-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ============================================================ SantyDesk "santydesk" theme shell ------------------------------------------------------------ All rules in this file below this point are scoped to the [data-theme="santydesk"] attribute (set on in SantyDesk's App.razor) so Mahyr, which stays on "corporate", is unaffected. ============================================================ */ /* Page background: a whisper of teal in the light grey */ [data-theme="santydesk"] .app-shell { background-color: #f2f8f6; } [data-theme="corporate"] .app-shell { background-color: #f8fafc; } /* ============================================================ Syncfusion brand recolor (SantyDesk only) ------------------------------------------------------------ The Syncfusion Tailwind theme hardcodes its accent (#4f46e5 indigo) instead of using CSS variables, so these scoped overrides rebrand grids, inputs, pickers, dropdowns, checkboxes and pagers to the SantyDesk teal accent. Specificity (scoped attribute + component classes) beats the unlayered vendor theme. ============================================================ */ /* Primary buttons */ [data-theme="santydesk"] .e-btn.e-primary, [data-theme="santydesk"] .e-css.e-btn.e-primary { background-color: #0f766e !important; border-color: #0f766e !important; color: #ffffff !important; } [data-theme="santydesk"] .e-btn.e-primary:hover:not(:disabled), [data-theme="santydesk"] .e-css.e-btn.e-primary:hover:not(:disabled) { background-color: #0d9488 !important; border-color: #0d9488 !important; } /* Inputs (textbox / datepicker / dropdown): focus ring */ [data-theme="santydesk"] .e-input-group:not(.e-float-icon-left):not(.e-success):not(.e-warning):not(.e-error).e-input-focus, [data-theme="santydesk"] .e-input-group.e-control-wrapper.e-input-focus { border-color: #0f766e !important; } [data-theme="santydesk"] .e-input-group.e-input-focus .e-input-group-icon, [data-theme="santydesk"] .e-input-group.e-input-focus .e-input-group-icon.e-input-icon { color: #0f766e !important; } /* Checkboxes */ [data-theme="santydesk"] .e-checkbox-wrapper .e-frame.e-check { background-color: #0f766e !important; border-color: #0f766e !important; } [data-theme="santydesk"] .e-checkbox-wrapper:not(.e-checkbox-disabled):hover .e-frame.e-check, [data-theme="santydesk"] .e-checkbox-wrapper:not(.e-checkbox-disabled):focus .e-frame.e-check { background-color: #0d9488 !important; border-color: #0d9488 !important; } /* Calendar / date picker */ [data-theme="santydesk"] .e-calendar .e-content td.e-selected span.e-day { background-color: #0f766e !important; color: #ffffff !important; } [data-theme="santydesk"] .e-calendar .e-content td.e-today span.e-day { border-color: #0f766e !important; color: #0f766e !important; } [data-theme="santydesk"] .e-calendar .e-content td.e-today.e-selected span.e-day { color: #ffffff !important; } [data-theme="santydesk"] .e-calendar .e-btn.e-today, [data-theme="santydesk"] .e-datepicker-wrapper .e-input-group-icon.e-date-icon { color: #0f766e !important; } /* Dropdowns */ [data-theme="santydesk"] .e-dropdown-popup ul .e-item.e-active, [data-theme="santydesk"] .e-dropdown-popup ul .e-item.e-active:hover { background-color: #0f766e !important; color: #ffffff !important; } /* Grid */ [data-theme="santydesk"] .e-grid .e-gridheader { background-color: #f0fdfa !important; border-color: #ccfbf1 !important; } [data-theme="santydesk"] .e-grid .e-gridheader .e-headercell { color: #134e4a !important; font-weight: 600; } [data-theme="santydesk"] .e-grid .e-gridcontent .e-row:hover .e-rowcell { background-color: #f0fdfa !important; } [data-theme="santydesk"] .e-grid .e-gridcontent .e-rowcell.e-selectionbackground, [data-theme="santydesk"] .e-grid .e-gridcontent tr.e-selectionbackground .e-rowcell { background-color: #0f766e !important; color: #ffffff !important; } [data-theme="santydesk"] .e-grid .e-gridcontent .e-rowcell.e-selectionbackground a, [data-theme="santydesk"] .e-grid .e-gridcontent tr.e-selectionbackground .e-rowcell a { color: #ffffff !important; } /* Pager */ [data-theme="santydesk"] .e-pager .e-currentitem, [data-theme="santydesk"] .e-pager .e-currentitem:hover { background-color: #0f766e !important; border-color: #0f766e !important; color: #ffffff !important; } [data-theme="santydesk"] .e-pager .e-numericitem:hover { background-color: #f0fdfa !important; color: #0f766e !important; }