/* ========================================================= THEME VARIABLES & PAGE TONES ========================================================= */ :root { /* Core color groups */ --color-red: #e74c3c; --color-orange: #f59e0b; --color-yellow: #facc15; --color-green: #22c55e; --color-blue: #3b82f6; --color-purple: #a855f7; --color-grey: #6b7280; /* Soft variants (background + text) */ --soft-red-bg: rgba(231, 76, 60, 0.08); --soft-red-text: rgba(127, 29, 29, 0.9); --soft-orange-bg: rgba(245, 158, 11, 0.08); --soft-orange-text: rgba(154, 52, 18, 0.9); --soft-yellow-bg: rgba(250, 204, 21, 0.12); --soft-yellow-text: rgba(113, 63, 18, 0.9); --soft-green-bg: rgba(34, 197, 94, 0.08); --soft-green-text: rgba(5, 122, 85, 0.9); --soft-blue-bg: rgba(59, 130, 246, 0.08); --soft-blue-text: rgba(30, 64, 175, 0.9); --soft-purple-bg: rgba(168, 85, 247, 0.08); --soft-purple-text: rgba(91, 33, 182, 0.9); --soft-grey-bg: rgba(156, 163, 175, 0.12); --soft-grey-text: rgba(55, 65, 81, 0.9); /* Brand / Spiral tokens */ --spiral-grey: #F2F2F2; --spiral-black: #000000; --spiral-blue: #1E90FF; --spiral-white: #FFFFFF; /* Tone / theme tokens (override via page wrappers) */ --tone-primary: #00c8ca; --tone-primary-strong: #00c4d9; --tone-primary-soft-bg: rgba(0, 200, 202, 0.08); --tone-primary-soft-text: rgba(0, 120, 140, 0.9); --tone-accent: #EA6400; --tone-accent-strong: #DA5400; --tone-accent-soft-bg: rgba(234, 100, 0, 0.08); --tone-accent-soft-text: rgba(120, 53, 15, 0.9); --tone-danger: var(--color-red); --tone-danger-soft-bg: var(--soft-red-bg); --tone-danger-soft-text: var(--soft-red-text); /* Highlight & gradient tokens */ --tone-highlight-start: #cce0ff; --tone-highlight-end: #e6f0ff; --tone-menu-hover-start: rgba(1, 200, 202, 0.2); --tone-menu-hover-mid: rgba(126, 204, 195, 0.3); --tone-menu-hover-end: rgba(1, 200, 202, 1); --tone-toast-start: #ffffff; --tone-toast-mid: #e6f2ff; --tone-toast-end: #e6f2ff; --tone-upload-overlay-start: rgba(51, 251, 251, 0.1); --tone-upload-overlay-end: rgba(51, 251, 251, 0.35); /* Generic UI tokens */ --tone-border-light: #e0e0e0; --tone-border-subtle: rgba(0, 0, 0, 0.08); --tone-text-main: #111827; --tone-text-muted: #6b7280; --tone-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.15); /* Bootstrap bridge (so existing .btn-primary & friends pick up tones) */ --bs-primary: var(--tone-primary); --bs-secondary: var(--tone-accent); --bs-primary-dark: var(--tone-primary-strong); --bs-secondary-dark: var(--tone-accent-strong); /* size-groups */ --toolbar-height: 48px; } /* Page tone wrappers – apply to a top-level container on each page */ /* =================================================================== PAGE TONES – single grouped definition Wrap your page with .page-tone-* and/or apply to .page-content-surface =================================================================== */ /* ========================================================= FINAL TONE VARIABLE MAP (override earlier ones) ========================================================= */ /* Base page-tone (default blue tone) */ .page-tone { --tone-primary: #3559e3; --tone-primary-light: #7aa3ff; --tone-primary-dark: #1f3fb8; --tone-primary-soft-bg: var(--soft-blue-bg); --tone-primary-soft-text: var(--soft-blue-text); } /* Blue */ .page-tone-blue, .tone-blue { --tone-primary: var(--color-blue); --tone-primary-light: #60a5fa; --tone-primary-dark: #2563eb; --tone-primary-soft-bg: var(--soft-blue-bg); --tone-primary-soft-text: var(--soft-blue-text); } /* Orange */ .page-tone-orange, .tone-orange { --tone-primary: var(--color-orange); --tone-primary-light: #fdba74; --tone-primary-dark: #ea580c; --tone-primary-soft-bg: var(--soft-orange-bg); --tone-primary-soft-text: var(--soft-orange-text); } /* Green */ .page-tone-green, .tone-green { --tone-primary: var(--color-green); --tone-primary-light: #4ade80; --tone-primary-dark: #16a34a; --tone-primary-soft-bg: var(--soft-green-bg); --tone-primary-soft-text: var(--soft-green-text); } /* Red */ .page-tone-red, .tone-red { --tone-primary: var(--color-red); --tone-primary-light: #f97373; --tone-primary-dark: #c53030; --tone-primary-soft-bg: var(--soft-red-bg); --tone-primary-soft-text: var(--soft-red-text); } /* Yellow */ .page-tone-yellow, .tone-yellow { --tone-primary: var(--color-yellow); --tone-primary-light: #facc6b; --tone-primary-dark: #d97706; --tone-primary-soft-bg: var(--soft-yellow-bg); --tone-primary-soft-text: var(--soft-yellow-text); } /* Purple */ .page-tone-purple, .tone-purple { --tone-primary: var(--color-purple); --tone-primary-light: #c4b5fd; --tone-primary-dark: #7c3aed; --tone-primary-soft-bg: var(--soft-purple-bg); --tone-primary-soft-text: var(--soft-purple-text); } /* Grey */ .page-tone-grey, .tone-grey { --tone-primary: var(--color-grey); --tone-primary-light: #9ca3af; --tone-primary-dark: #4b5563; --tone-primary-soft-bg: var(--soft-grey-bg); --tone-primary-soft-text: var(--soft-grey-text); } /* Also let page-content-surface inherit the active tone */ /*.page-tone.page-content-surface, .page-tone-blue.page-content-surface, .page-tone-orange.page-content-surface, .page-tone-green.page-content-surface, .page-tone-red.page-content-surface, .page-tone-purple.page-content-surface, .page-tone-grey.page-content-surface { background: var(--tone-surface-gradient, linear-gradient( 135deg, color-mix(in srgb, var(--tone-primary-soft-bg) 60%, white) 0%, #ffffff 40%, #ffffff 100% )); }*/ /* Also let page-content-surface inherit the active tone */ .page-tone .page-content-surface, .page-tone-blue .page-content-surface, .page-tone-orange .page-content-surface, .page-tone-green .page-content-surface, .page-tone-red .page-content-surface, .page-tone-purple .page-content-surface, .page-tone-grey .page-content-surface { background: var(--tone-surface-gradient, linear-gradient( 175deg, color-mix(in srgb, var(--tone-primary) 40%, white) 0%, #ffffff 65%, #ffffff 100% )); } .page-tone-blue .home-feature-card__tag { background: unset; color: var(--tone-primary-strong); } .page-tone-orange .home-feature-card__tag { background: unset; color: var(--tone-primary-strong); } .page-tone-green .home-feature-card__tag { background: unset; color: var(--tone-primary-strong); } /* Shared surface for any tone wrapper */ /*.page-content-surface { min-height: 100vh; padding: 1.5rem; background: var(--tone-surface-gradient); }*/ /* Generic tone-aware buttons (applies under any .page-tone-*) */ .page-tone, .page-tone-blue, .page-tone-orange, .page-tone-green, .page-tone-red, .page-tone-purple, .page-tone-grey { /* primary */ } .page-tone .btn-primary, .page-tone .e-btn.e-primary, .page-tone .sf-button-primary, .page-tone-blue .btn-primary, .page-tone-blue .e-btn.e-primary, .page-tone-blue .sf-button-primary, .page-tone-orange .btn-primary, .page-tone-orange .e-btn.e-primary, .page-tone-orange .sf-button-primary, .page-tone-green .btn-primary, .page-tone-green .e-btn.e-primary, .page-tone-green .sf-button-primary, .page-tone-red .btn-primary, .page-tone-red .e-btn.e-primary, .page-tone-red .sf-button-primary, .page-tone-purple .btn-primary, .page-tone-purple .e-btn.e-primary, .page-tone-purple .sf-button-primary, .page-tone-grey .btn-primary, .page-tone-grey .e-btn.e-primary, .page-tone-grey .sf-button-primary { background-color: var(--tone-primary) !important; border-color: var(--tone-primary) !important; color: #fff !important; } .page-tone .btn-primary:hover, .page-tone .e-btn.e-primary:hover, .page-tone .sf-button-primary:hover, .page-tone-blue .btn-primary:hover, .page-tone-blue .e-btn.e-primary:hover, .page-tone-blue .sf-button-primary:hover, .page-tone-orange .btn-primary:hover, .page-tone-orange .e-btn.e-primary:hover, .page-tone-orange .sf-button-primary:hover, .page-tone-green .btn-primary:hover, .page-tone-green .e-btn.e-primary:hover, .page-tone-green .sf-button-primary:hover, .page-tone-red .btn-primary:hover, .page-tone-red .e-btn.e-primary:hover, .page-tone-red .sf-button-primary:hover, .page-tone-purple .btn-primary:hover, .page-tone-purple .e-btn.e-primary:hover, .page-tone-purple .sf-button-primary:hover, .page-tone-grey .btn-primary:hover, .page-tone-grey .e-btn.e-primary:hover, .page-tone-grey .sf-button-primary:hover { background-color: var(--tone-primary-strong) !important; border-color: var(--tone-primary-strong) !important; color: #fff !important; } /* Secondary buttons */ .page-tone .btn-secondary, .page-tone .e-btn.e-secondary, .page-tone-blue .btn-secondary, .page-tone-blue .e-btn.e-secondary, .page-tone-orange .btn-secondary, .page-tone-orange .e-btn.e-secondary, .page-tone-green .btn-secondary, .page-tone-green .e-btn.e-secondary, .page-tone-red .btn-secondary, .page-tone-red .e-btn.e-secondary, .page-tone-purple .btn-secondary, .page-tone-purple .e-btn.e-secondary, .page-tone-grey .btn-secondary, .page-tone-grey .e-btn.e-secondary { background-color: var(--tone-primary-light) !important; border-color: var(--tone-primary-light) !important; color: #fff !important; } .page-tone .btn-secondary:hover, .page-tone .e-btn.e-secondary:hover, .page-tone-blue .btn-secondary:hover, .page-tone-blue .e-btn.e-secondary:hover, .page-tone-orange .btn-secondary:hover, .page-tone-orange .e-btn.e-secondary:hover, .page-tone-green .btn-secondary:hover, .page-tone-green .e-btn.e-secondary:hover, .page-tone-red .btn-secondary:hover, .page-tone-red .e-btn.e-secondary:hover, .page-tone-purple .btn-secondary:hover, .page-tone-purple .e-btn.e-secondary:hover, .page-tone-grey .btn-secondary:hover, .page-tone-grey .e-btn.e-secondary:hover { background-color: var(--tone-primary-dark) !important; border-color: var(--tone-primary-dark) !important; color: #fff !important; } /* Tone-aware cards */ .page-tone .statcard, .page-tone-blue .statcard, .page-tone-orange .statcard, .page-tone-green .statcard, .page-tone-red .statcard, .page-tone-purple .statcard, .page-tone-grey .statcard { border-color: rgba(0, 0, 0, 0.08); background-color: #ffffff; } .page-tone .portal-feature-card, .page-tone-blue .portal-feature-card, .page-tone-orange .portal-feature-card, .page-tone-green .portal-feature-card, .page-tone-red .portal-feature-card, .page-tone-purple .portal-feature-card, .page-tone-grey .portal-feature-card { border: 1px solid rgba(0, 0, 0, 0.08) !important; } .page-tone .card, .page-tone .e-card, .page-tone-blue .card, .page-tone-blue .e-card, .page-tone-orange .card, .page-tone-orange .e-card, .page-tone-green .card, .page-tone-green .e-card, .page-tone-red .card, .page-tone-red .e-card, .page-tone-purple .card, .page-tone-purple .e-card, .page-tone-grey .card, .page-tone-grey .e-card { background-color: #ffffff; border: 1px solid color-mix(in srgb, var(--tone-primary) 14%, transparent); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); } /* Card headers pick up soft tone */ .page-tone .card-header, .page-tone .e-card .e-card-header, .page-tone-blue .card-header, .page-tone-blue .e-card .e-card-header, .page-tone-orange .card-header, .page-tone-orange .e-card .e-card-header, .page-tone-green .card-header, .page-tone-green .e-card .e-card-header, .page-tone-red .card-header, .page-tone-red .e-card .e-card-header, .page-tone-purple .card-header, .page-tone-purple .e-card .e-card-header, .page-tone-grey .card-header, .page-tone-grey .e-card .e-card-header { background-color: var(--tone-primary-soft-bg); color: var(--tone-primary-soft-text); border-bottom: 1px solid color-mix(in srgb, var(--tone-primary) 20%, transparent); } /* Optional: emphasize titles inside headers */ .page-tone .card-header h1, .page-tone .card-header h2, .page-tone .card-header h3, .page-tone .card-header h4, .page-tone .e-card .e-card-header .e-card-title, .page-tone-blue .card-header h1, .page-tone-blue .card-header h2, .page-tone-blue .card-header h3, .page-tone-blue .card-header h4, .page-tone-blue .e-card .e-card-header .e-card-title, .page-tone-orange .card-header h1, .page-tone-orange .card-header h2, .page-tone-orange .card-header h3, .page-tone-orange .card-header h4, .page-tone-orange .e-card .e-card-header .e-card-title, .page-tone-green .card-header h1, .page-tone-green .card-header h2, .page-tone-green .card-header h3, .page-tone-green .card-header h4, .page-tone-green .e-card .e-card-header .e-card-title, .page-tone-red .card-header h1, .page-tone-red .card-header h2, .page-tone-red .card-header h3, .page-tone-red .card-header h4, .page-tone-red .e-card .e-card-header .e-card-title, .page-tone-purple .card-header h1, .page-tone-purple .card-header h2, .page-tone-purple .card-header h3, .page-tone-purple .card-header h4, .page-tone-purple .e-card .e-card-header .e-card-title, .page-tone-grey .card-header h1, .page-tone-grey .card-header h2, .page-tone-grey .card-header h3, .page-tone-grey .card-header h4, .page-tone-grey .e-card .e-card-header .e-card-title { color: var(--tone-primary-strong); } /* === SfCalendar (SfCalendar -> .e-calendar) === */ /* Calendar header bar */ .page-tone .e-calendar .e-header, .page-tone-blue .e-calendar .e-header, .page-tone-orange .e-calendar .e-header, .page-tone-green .e-calendar .e-header, .page-tone-red .e-calendar .e-header, .page-tone-purple .e-calendar .e-header, .page-tone-grey .e-calendar .e-header { background-color: var(--tone-primary-soft-bg); color: var(--tone-primary-soft-text); border-bottom: 1px solid color-mix(in srgb, var(--tone-primary) 18%, transparent); } /* Today button & navigation icons */ .page-tone .e-calendar .e-header .e-title, .page-tone .e-calendar .e-header .e-prev, .page-tone .e-calendar .e-header .e-next, .page-tone-blue .e-calendar .e-header .e-title, .page-tone-blue .e-calendar .e-header .e-prev, .page-tone-blue .e-calendar .e-header .e-next, .page-tone-orange .e-calendar .e-header .e-title, .page-tone-orange .e-calendar .e-header .e-prev, .page-tone-orange .e-calendar .e-header .e-next, .page-tone-green .e-calendar .e-header .e-title, .page-tone-green .e-calendar .e-header .e-prev, .page-tone-green .e-calendar .e-header .e-next, .page-tone-red .e-calendar .e-header .e-title, .page-tone-red .e-calendar .e-header .e-prev, .page-tone-red .e-calendar .e-header .e-next, .page-tone-purple .e-calendar .e-header .e-title, .page-tone-purple .e-calendar .e-header .e-prev, .page-tone-purple .e-calendar .e-header .e-next, .page-tone-grey .e-calendar .e-header .e-title, .page-tone-grey .e-calendar .e-header .e-prev, .page-tone-grey .e-calendar .e-header .e-next { color: var(--tone-primary-strong); } /* Selected date background */ .page-tone .e-calendar .e-content span.e-selected, .page-tone-blue .e-calendar .e-content span.e-selected, .page-tone-orange .e-calendar .e-content span.e-selected, .page-tone-green .e-calendar .e-content span.e-selected, .page-tone-red .e-calendar .e-content span.e-selected, .page-tone-purple .e-calendar .e-content span.e-selected, .page-tone-grey .e-calendar .e-content span.e-selected { background-color: var(--tone-primary); color: #ffffff; } /* Today highlight */ .page-tone .e-calendar .e-content span.e-today:not(.e-selected), .page-tone-blue .e-calendar .e-content span.e-today:not(.e-selected), .page-tone-orange .e-calendar .e-content span.e-today:not(.e-selected), .page-tone-green .e-calendar .e-content span.e-today:not(.e-selected), .page-tone-red .e-calendar .e-content span.e-today:not(.e-selected), .page-tone-purple .e-calendar .e-content span.e-today:not(.e-selected), .page-tone-grey .e-calendar .e-content span.e-today:not(.e-selected) { border: 1px solid var(--tone-primary); color: var(--tone-primary-strong); } /* Hover state */ .page-tone .e-calendar .e-content span.e-cell:hover:not(.e-selected), .page-tone-blue .e-calendar .e-content span.e-cell:hover:not(.e-selected), .page-tone-orange .e-calendar .e-content span.e-cell:hover:not(.e-selected), .page-tone-green .e-calendar .e-content span.e-cell:hover:not(.e-selected), .page-tone-red .e-calendar .e-content span.e-cell:hover:not(.e-selected), .page-tone-purple .e-calendar .e-content span.e-cell:hover:not(.e-selected), .page-tone-grey .e-calendar .e-content span.e-cell:hover:not(.e-selected) { background-color: color-mix(in srgb, var(--tone-primary) 12%, transparent); } /* Tone-aware overrides INSIDE a blue page tone */ /*.page-tone-blue .btn-primary, .page-tone-blue .e-btn.e-primary, .page-tone-blue .sf-button-primary { background-color: var(--tone-primary) !important; border-color: var(--tone-primary) !important; color: #fff !important; } .page-tone-blue .btn-primary:hover, .page-tone-blue .e-btn.e-primary:hover, .page-tone-blue .sf-button-primary:hover { background-color: var(--tone-primary-strong) !important; border-color: var(--tone-primary-strong) !important; color: #fff !important; } .page-tone-blue .btn-secondary, .page-tone-blue .e-btn.e-secondary { background-color: var(--tone-primary-light) !important; border-color: var(--tone-primary-light) !important; color: #fff !important; } .page-tone-blue .btn-secondary:hover, .page-tone-blue .e-btn.e-secondary:hover { background-color: var(--tone-primary-dark) !important; border-color: var(--tone-primary-dark) !important; color: #fff !important; }*/ /* Statcards & feature cards pick up the blue tone */ /*.page-tone-blue .statcard { border-color: rgba(53, 89, 227, 0.25); background: #ffffff; } .page-tone-blue .portal-feature-card { border: 1px solid rgba(53, 89, 227, 0.2) !important; }*/ /* Primary buttons */ .page-tone .btn-primary, .page-tone .e-btn.e-primary, .page-tone .sf-button-primary { background-color: var(--tone-primary) !important; border-color: var(--tone-primary) !important; color: #fff !important; } .page-tone .btn-primary:hover, .page-tone .e-btn.e-primary:hover, .page-tone .sf-button-primary:hover { background-color: var(--tone-primary-strong) !important; border-color: var(--tone-primary-strong) !important; color: #fff !important; } /* Secondary buttons */ .page-tone .btn-secondary, .page-tone .e-btn.e-secondary { background-color: var(--tone-primary-light) !important; border-color: var(--tone-primary-light) !important; color: #fff !important; } .page-tone .btn-secondary:hover, .page-tone .e-btn.e-secondary:hover { background-color: var(--tone-primary-dark) !important; border-color: var(--tone-primary-dark) !important; color: #fff !important; } .page-tone .statcard { border-color: rgba(0, 0, 0, 0.08); background-color: #ffffff; } .page-tone .portal-feature-card { border: 1px solid rgba(0, 0, 0, 0.08) !important; } .page-tone .portal-feature-card:hover, .page-tone .statcard:hover { border-color: var(--tone-primary) !important; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08); } .page-content-surface { padding: 1.5rem; background: var(--tone-surface-gradient); flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: visible; } .page-content-surface > .e-splitter { flex: 1 1 auto; min-height: 0; /* allow children to use 100% height */ } /* All splitter panes become vertical flex containers */ .page-content-surface .e-splitter .e-pane { display: flex; flex-direction: column; min-height: 0; } /* Inside the right pane: toolbar fixed height, grid fills the rest */ .page-content-surface .e-splitter .e-pane .e-toolbar { flex: 0 0 auto; } .page-content-surface .e-splitter .e-pane .e-grid { flex: 1 1 auto; min-height: 0; } .page-tone { min-height: calc(100vh - (var(--toolbar-height))); display: flex; flex-direction: column; } /* Soft utility helpers using the palette */ .bg-soft-blue { background-color: var(--soft-blue-bg); } .text-soft-blue { color: var(--soft-blue-text); } .bg-soft-green { background-color: var(--soft-green-bg); } .text-soft-green { color: var(--soft-green-text); } .bg-soft-orange { background-color: var(--soft-orange-bg); } .text-soft-orange { color: var(--soft-orange-text); } .bg-soft-red { background-color: var(--soft-red-bg); } .text-soft-red { color: var(--soft-red-text); } .bg-soft-gray { background-color: var(--soft-grey-bg); } .text-soft-gray { color: var(--soft-grey-text); } /* Tone-aware generic soft helpers (for card/toolbars/etc.) */ .bg-soft-primary { background-color: var(--tone-primary-soft-bg); } .text-soft-primary { color: var(--tone-primary-soft-text); } /* ========================================================= ORIGINAL CSS (refactored where sensible to use variables) ========================================================= */ /* Override Bootstrap font sizes */ body, html { margin: 0px; font-family: Poppins, sans-serif !important; font-weight: 400; padding:0; height: 100%; box-sizing: border-box; font-size: 0.8rem; } *, *::before, *::after { box-sizing: inherit; } /*@media(max-width: 1440px) { body, html { font-size: 0.8rem !important; } }*/ .main-logo { height: 44px; transform: scale(1); transform-origin: left center; transition: transform 0.25s ease-in-out, height 0.25s ease-in-out, opacity 0.25s ease-in-out; } .e-rating-container .custom-font { color: rgb(255,215,0); } @font-face { font-family: 'rating-template'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfMAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlm+icDjQAAAcwAAAE0aGVhZCK49ucAAADQAAAANmhoZWEIUQQEAAAArAAAACRobXR4DAAAAAAAAYAAAAAMbG9jYQAcAJoAAAHEAAAACG1heHABDwBkAAABCAAAACBuYW1lmYExxgAAAwAAAAKFcG9zdCH169QAAAWIAAAAQAABAAAEAAAAAFwEAAAAAAAD9AABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAgPX4jF8PPPUACwQAAAAAAN/TWPsAAAAA39NY+wAAAAAD9AP0AAAACAACAAAAAAAAAAEAAAADAFgAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAABwAmgABAAAAAAP0A/QACQAAAQUTAyUFAxMlAwFn/qX6OwE1ATU7+v6lmQKsNf7//pasrAFqAQE1AUgAAAIAAAAAA/QD5AAdAFcAAAEfBAUPAxUTLwEjDwETNS8DJT8EJwMFDwQVHwIDBx8EMzclBRczPwU1Az8CNS8DJQMvBisBDwUCYAICBgMHASCwBAMCGuoHCAjpGgIDBLEBHgcGBgJiHXb+uQgHBgQBAgTUHgECBAUHCAkIAQ4BDgcJBAQEBwQDHdMEAgMFBgf+tHYDAgMEBAQEBQUEBAQEAwICnwMDBgIDNbAGBgYE/uCBAgKBAR0HBgYGsDQCBAYD3Fr+9jwDBAcHBQgIB9T+twUIBwcEAwKVlQIBAgIFBwgJAUnUBwgJCAcFBD0BCgQDBAICAgEBAgICBAMAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEADwABAAEAAAAAAAIABwAQAAEAAAAAAAMADwAXAAEAAAAAAAQADwAmAAEAAAAAAAUACwA1AAEAAAAAAAYADwBAAAEAAAAAAAoALABPAAEAAAAAAAsAEgB7AAMAAQQJAAAAAgCNAAMAAQQJAAEAHgCPAAMAAQQJAAIADgCtAAMAAQQJAAMAHgC7AAMAAQQJAAQAHgDZAAMAAQQJAAUAFgD3AAMAAQQJAAYAHgENAAMAAQQJAAoAWAErAAMAAQQJAAsAJAGDIHJhdGluZy10ZW1wbGF0ZVJlZ3VsYXJyYXRpbmctdGVtcGxhdGVyYXRpbmctdGVtcGxhdGVWZXJzaW9uIDEuMHJhdGluZy10ZW1wbGF0ZUZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAcgBhAHQAaQBuAGcALQB0AGUAbQBwAGwAYQB0AGUAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwAtAHQAZQBtAHAAbABhAHQAZQByAGEAdABpAG4AZwAtAHQAZQBtAHAAbABhAHQAZQBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGcALQB0AGUAbQBwAGwAYQB0AGUARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvd3d3LnN5bmNmdXNpb24uY29tAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwECAQMBBAAJZmlsbC1zdGFyCmVtcHR5LXN0YXIAAA==) format('truetype'); font-weight: normal; font-style: normal; } .rating-icon { color: var(--tone-highlight-start); } [class^="sf-icon-"], [class*=" sf-icon-"] { font-family: 'rating-template' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sf-icon-fill-star:before { content: "\e700"; } .sf-icon-empty-star:before { content: "\e701"; } .docShuffle { } .docShuffle .e-list-item { height: unset !important; border-bottom: 1px solid #cfcfcf; margin: 1rem; } .request-list { display: flex; flex-direction: column; gap: .5rem; } .e-file-select-wrap { } .e-upload-browse-btn { /*display: none !important;*/ background: var(--tone-accent-strong) !important; } /* Launcher button */ .apps-launcher-btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: 12px; padding: .5rem .75rem; transition: background-color .2s ease, box-shadow .2s ease; } .apps-launcher-btn:hover { background-color: rgba(0,0,0,0.05); } /* Tooltip skin */ .e-tooltip-wrap.apps-tooltip { border-radius: 16px; overflow: hidden; background-color: var(--bs-gray-100, #f8f9fa); border: 1px solid var(--bs-gray-200, #e5e7eb); right: 10px; padding-right: 1rem; } .apps-tooltip .e-tooltip-content { padding: 16px; } .apps-tooltip-content { min-width: 360px; } /* 3-wide responsive grid */ .apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } /* Tiles */ .app-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; border: none !important; background-color: unset !important; border-radius: 8px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .app-tile:hover { transform: translateY(-2px); border-color: rgba(51,163,255,.35); box-shadow: 0 6px 16px rgba(0,0,0,.08); } .app-icon i { font-size: 1.5rem; line-height: 1; } .app-icon img { width: 28px; height: 28px; object-fit: contain; } .app-title { font-size: .9rem; text-align: center; } /* News strip */ .apps-news-head { font-weight: 600; font-size: .85rem; opacity: .8; margin-bottom: 6px; } .apps-news-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .apps-news-list li a { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; text-decoration: none; color: inherit; } .apps-news-list li a:hover { background: rgba(0,0,0,.035); } .apps-favicon { width: 16px; height: 16px; border-radius: 4px; } .apps-news-title { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .apps-news-time { font-size: .75rem; opacity: .6; } /* Responsive layout tweaks */ @media (max-width: 640px) { .apps-tooltip-content { width: min(92vw, 420px); } .apps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .apps-grid { grid-template-columns: 1fr; } } /* Landing shell tweaks */ .home-landing-shell { display: flex; flex-direction: column; } /* Hero positioning for this page */ .hero-home .home-hero-inner { max-width: 1100px; margin: 0 auto; padding: 2.5rem 1.5rem 1.5rem; } .home-hero-copy { text-align: center; } .home-hero-title { font-size: clamp(2.1rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: 0.02em; margin-bottom: 0.4rem; color: #111827; } .home-hero-subtitle { font-size: 0.98rem; max-width: 640px; margin: 0 auto; color: #4b5563; } /* Feature section + grid */ .home-feature-section { padding: 1.5rem 1.5rem 3rem; } .home-feature-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 1.5rem; } /* Individual cards */ .home-feature-card.e-card { border-radius: 18px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 10px 30px rgba(15,30,57,0.08); background-color: #ffffff; } .home-feature-card__inner { display: flex; align-items: flex-start; /* 🔑 top-align content */ justify-content: flex-start; gap: 1rem; height: 100%; } .home-feature-card__icon img { width: 56px; height: 56px; object-fit: contain; display: block; } .home-feature-card__content { display: flex; margin-top: 0; flex-direction: column; justify-content: start; align-items: flex-start; gap: 0.25rem; } .home-feature-card__title { font-size: 1rem; font-weight: 600; margin: 0; color: #111827; gap: 0.5rem; } .home-feature-card__desc { font-size: 0.9rem; margin: 0; line-height: 1rem; color: #4b5563; } /* Light hover but “static-ish” */ .home-feature-card { transition: transform 0.18s ease, box-shadow 0.18s ease; vertical-align:top; padding: 1rem; } .home-feature-card:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15,30,57,0.12); } /* Small label above title (Coming soon, etc.) */ .home-feature-card__tag { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 4px; background-color: var(--tone-primary-light, #efefef); color: var(--tone-primary-dark, #222); margin: 0; line-height: 1; } /* Make all cards feel the same height and spacing */ .home-feature-card.e-card { display: flex; } .home-feature-card__inner { flex: 1; } /* Keep content block heights more consistent across cards */ .home-feature-card__content { display: flex; flex-direction: column; gap: 0.25rem; min-height: 90px; /* tweak up/down to taste */ } /* On mobile we hide the long descriptions, so reduce the min-height there */ @media (max-width: 992px) { .home-feature-card__content { min-height: 0; align-items: center; } } /* Responsive behavior */ @media (max-width: 992px) { .home-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-feature-card__inner { flex-direction: column; align-items: center; text-align: center; padding: 0.9rem 0.75rem 1rem; } .home-feature-card__icon img { width: 48px; height: 48px; } /* hide long copy, keep icon + label */ .home-feature-card__desc { display: none; } } @media (max-width: 576px) { .home-feature-section { padding-inline: 1rem; } .home-feature-grid { gap: 0.9rem 0.9rem; } .home-hero-inner { padding-inline: 1rem; } } .e-card { border-radius: 1rem; } .card { border-radius: 1rem; overflow: hidden; } /* Admin layout */ .admin-layout-root { display: flex; flex-direction: column; height: 100%; } .admin-layout-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--tone-border-light); } .admin-layout-title { font-size: 1.3rem; font-weight: 600; } .admin-layout-body { display: grid; grid-template-columns: 260px 1fr; height: calc(100% - 56px); } .admin-layout-sidebar { border-right: 1px solid var(--tone-border-light); padding: 0.75rem; overflow-y: auto; } .admin-layout-content { padding: 1rem 1.5rem; overflow-y: auto; } /* Empty state */ .empty-drop { cursor: default; } /* Container drives the state */ .conversion-shell { position: relative; } .conversion-shell .empty-state, .conversion-shell .grid-state { transition: opacity 0.28s ease-in-out, transform 0.28s ease-in-out, max-height 0.28s ease-in-out; } /* Default: no items yet */ .conversion-shell.no-items .empty-state { opacity: 1; transform: translateY(0); max-height: 2000px; pointer-events: auto; } .conversion-shell.no-items .grid-state { opacity: 0; transform: translateY(8px); max-height: 0; overflow: hidden; pointer-events: none; } /* When items exist */ .conversion-shell.has-items .empty-state { opacity: 0; transform: translateY(-8px); max-height: 0; overflow: hidden; pointer-events: none; } .conversion-shell.has-items .grid-state { opacity: 1; transform: translateY(0); max-height: 2000px; pointer-events: auto; } .conversion-shell.has-items .empty-state.shrink-out { transform: scale(0.97) translateY(-4px); opacity: 0; } /* Drop hint overlay */ .drop-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.65); backdrop-filter: blur(2px); font-weight: 600; z-index: 9999; opacity: 0; transform: scale(0); pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .drop-hint.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; } .drop-hint .drop-hint-content { display: flex; align-items: center; justify-content: center; position: relative; color: #0d6efd; font-size: 1.5rem; transform: scale(0); opacity: .95; animation: dropHintPulse 1.2s ease-in-out infinite alternate; } @keyframes dropHintPulse { 0% { transform: scale(1) translateY(0); opacity: .95; } 100% { transform: scale(1.05) translateY(-3px); opacity: 1; } } /* Upload overlay (progress) */ .upload-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; min-height: 256px; backdrop-filter: blur(4px); z-index: 1000; pointer-events: none; opacity: 0; transform: scale(0.98); transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out; } .upload-overlay.is-visible { opacity: 1; transform: scale(1); animation: uploadOverlayPulse 1.8s ease-in-out infinite alternate; } @keyframes uploadOverlayPulse { 0% { background-color: var(--tone-upload-overlay-start); backdrop-filter: blur(4px); } 100% { background-color: var(--tone-upload-overlay-end); backdrop-filter: blur(5px); } } .progress-stack { background: rgba(51, 251, 251, 0.10); height: 100%; min-height: 100px; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .upload-overlay.is-visible .progress-stack { opacity: 1; transform: translateY(0); } .skeleton-stack { inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 16px; z-index: 1001; pointer-events: none; opacity: 0; transform: scale(0.97); transition: opacity 0.3s ease, transform 0.3s ease; } .upload-overlay.is-visible .skeleton-stack { opacity: 1; transform: scale(1); } .skeleton-stack, .e-progressbar { pointer-events: none; } /* Generic fade/scale in-out */ .anim-fade-scale { opacity: 0; transform: scale(.98); pointer-events: none; transition: opacity .28s ease, transform .28s ease; } .anim-fade-scale.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; } .anim-collapse { overflow: hidden; max-height: 0; transition: max-height .28s ease; } .anim-collapse.is-visible { max-height: 1000px; } /* Request row */ .request-row { display: grid; grid-template-columns: 28px 1fr; gap: .75rem; padding: .5rem .25rem; border-radius: .5rem; cursor: pointer; } .request-row:hover { background: rgba(0,0,0,.03); } .request-row .icon { display: flex; align-items: flex-start; justify-content: center; padding-top: .25rem; } .request-row .icon i { font-size: 1rem; } .request-row .content { display: flex; flex-direction: column; gap: .2rem; } .request-row .line-1 { font-weight: 600; } .request-row .line-1 .label { color: #6c757d; margin-right: .35rem; font-weight: 500; } .request-row .line-2 { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .request-row .line-2 .title { max-width: 65%; } .request-row .line-2 .date { color: #6c757d; white-space: nowrap; } /* Contact link */ .contact-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; color: var(--sf-primary-color, #0078d4); cursor: pointer; text-decoration: none; transition: color 0.2s ease, transform 0.15s ease; } .contact-link i { color: var(--sf-secondary-color, #555); font-size: 0.95rem; transition: color 0.2s ease; } .contact-link:hover, .contact-link:focus { color: var(--sf-accent-color, #005a9e); text-decoration: underline; } .contact-link:hover i, .contact-link:focus i { color: var(--sf-accent-color, #005a9e); } .contact-link:active { transform: scale(0.97); } /* Links */ a { color: #9d9d9d; text-decoration: none; } a:hover { color: #9d9f9f; text-decoration: none; transition: color ease-in-out .2s; } a:visited { color: unset; text-decoration: none; text-shadow: 1px 1px 1px #090909; } .btn-link { color: #ffffff; text-decoration: none; } .btn-link:hover { color: #ffffff; text-decoration: none; transition: background-color ease-in-out 0.2s; } /* Buttons using tone/Bootstrap bridge */ .btn-primary { color: #fff; background-color: var(--bs-primary) !important; border-color: #efefef; border-radius: .5em !important; box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.15); } .btn-primary:hover { color: #fff; background-color: var(--bs-primary-dark) !important; border-color: #efefef; transition: background-color ease-in-out 0.2s; } .btn-success { color: #ffffff; background-color: var(--bs-secondary) !important; border-color: #efefef; border-radius: .5em !important; box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.15); } .btn-success:hover { color: #ffffff; background-color: var(--bs-secondary-dark) !important; border-color: #efefef; transition: background-color ease-in-out 0.2s; } .btn-secondary { color: #ffffff; background-color: var(--bs-secondary) !important; border-color: #cfcfcf; text-decoration: none; border-radius: .5em !important; box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.15); } .btn-secondary:hover { color: #ffffff; background-color: var(--bs-secondary) !important; border-color: #cfcfcf; text-decoration: none; transition: background-color ease-in-out 0.2s; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .layout-root{ height: 100vh; display: flex; flex-direction: column; overflow: hidden; } .content { padding-top: 0px; } h1:focus { outline: none; } .form-check-label a { color: var(--bs-primary); text-decoration: underline; } /* Login layout */ .login-left-pane { position: relative; overflow: hidden; min-height: calc(100vh - 96px); } .background-blur-overlay, .l-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ROOT LAYOUT ------------------------------------------------------------ */ .login-shell { position: relative; min-height: 100vh; overflow: hidden; padding: 0; } .login-root { position: relative; z-index: 1; max-height: 100vh; } /* Background gradient like the Figma */ .login-gradient { position: fixed; inset: 0; background: linear-gradient(68deg, var(--Orange, #EA6400) 2.65%, #F8C39C 70.76%); z-index: 0; } /* LEFT SIDE -------------------------------------------------------------- */ .login-left { position: relative; z-index: 1; color: #ffffff; } .login-left-inner { padding: 3rem 3.5rem; width: 100%; max-width: 480px; margin-left: auto; /* hugs the center divider more */ } /* dashed highlight boxes behind logo & title */ .login-dashed-box { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 10px; border: 2px dashed rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(3px); } .login-logo-wrapper { margin-bottom: 1.5rem; } .login-logo { height: 36px; display: block; } /* title */ .login-title-wrapper { margin-bottom: 0.5rem; } .login-title { font-size: 3.1rem; font-weight: 800; letter-spacing: 0.03em; margin: 0; white-space: nowrap; } /* FORM ------------------------------------------------------------------- */ .login-form-wrapper { max-width: 320px; } .login-input { border-radius: 10px; border: none; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); padding: 0.7rem 1rem; font-size: 0.95rem; } .login-input::placeholder { color: #a1a1aa; } .login-input:focus { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 8px 18px rgba(0, 0, 0, 0.3); } /* 'Forgot Password' link under fields */ /* 'Forgot Password' link under fields */ a.login-forgot-link, a.login-forgot-link:link, a.login-forgot-link:visited, a.login-forgot-link:hover, a.login-forgot-link:active, a.login-forgot-link:focus { color: #efefef !important; text-decoration: none; font-size: 0.85rem; font-weight: 600; } a.login-forgot-link:hover { color: #efefef; text-decoration: underline; transition: color ease-in-out 0.2s; } a.login-forgot-link:focus { outline: none; text-decoration: underline; } /* main login button */ .login-btn { border-radius: 10px; background: rgba(249, 164, 100, 1); border: none; color: #ffffff; font-weight: 700; padding: 0.7rem 1rem; box-shadow: 0 10px 24px rgba(194, 65, 12, 0.5); } .login-btn:hover { filter: brightness(1.05); color: #ffffff; } .login-register-link { color: #ffffff; font-weight: 600; text-decoration: underline; } /* RIGHT SIDE ------------------------------------------------------------- */ /* RIGHT SIDE ------------------------------------------------------------- */ .login-right { position: relative; z-index: 1; display: flex; justify-content: center; /* horizontal center of hero block */ align-items: flex-end; /* bottom align */ min-height: 100vh; /* ensures bottom is the viewport bottom */ padding-bottom: 3rem; /* spacing from bottom */ } .login-hero { position: relative; max-width: 720px; width: 100%; } .login-hero-image { display: block; margin: 0 auto; /* centers image within hero */ width: min(60%, 520px); /* keep your 60% feel, but cap it */ height: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35)); } /* RESPONSIVE ------------------------------------------------------------- */ @media (max-width: 991.98px) { .login-left-inner { margin: 0 auto; padding: 3rem 1.75rem 4rem; } .login-title { font-size: 2.4rem; white-space: normal; } .login-form-wrapper { max-width: 100%; } .login-gradient { background: linear-gradient(68deg, var(--Orange, #EA6400) 2.65%, #F8C39C 70.76%); } } .background-blur-overlay { background-size: cover; background-repeat: no-repeat; background-position: center; filter: blur(8px) brightness(0.9); z-index: 999; } .l-overlay { background: var(--Light-Teal-Gradient, linear-gradient(180deg, #E5FBFB 0%, #E5FBFB 27.4%, #FFF 100%)); } .login-image { height: 100%; max-height: 100vh; } .login-card { background-color: rgba(64,64,64,0.2); margin: auto; padding: 2rem; z-index: 999; max-width: 400px; } @media (max-width: 768px) { .login-card { max-width: 100%; width: 100%; } } /* .onboarding-main > .d-flex { min-height: 100vh; height: auto; }*/ /* Fullscreen onboarding main */ .onboarding-main { position: relative; width: 100%; /*height: calc(100vh - var(--toolbar-height));*/ /* full-screen */ display: flex; justify-content: center; /* horizontal center */ align-items: center; /* vertical center */ overflow-y: auto; } .onboarding-center-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; flex: 1; display: flex; /*justify-content: center;*/ align-items: flex-start; padding-top: 2rem; z-index: 10000; } .onboarding-center-wrapper .statcard { background-color: rgba(192,192,192, 0.1); } .onboarding-card { background-color: rgba(229,229,229,0.4); /*border-color: lightgray;*/ border: 1px solid lightgray; margin: 2rem; padding: 2rem; border-radius: 12px; max-width: 1000px; width: 75%; overflow: hidden; transition: width 0.3s ease-in-out, height 0.4s ease-in-out, padding 0.4s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .onboarding-card.expand { max-height: 1000px; padding: 2rem; } .onboarding-card.collapse { max-height: 0; padding: 0; } @media(max-width: 768px) { .onboarding-card { max-width: 100%; } } /* Credential tiles */ .credential-files-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .credential-file-tile { width: 96px; display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0.4rem; border-radius: 10px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.04); font-size: 0.8rem; cursor: default; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .credential-file-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.10); border-color: rgba(51, 251, 251, 0.35); } .credential-file-icon-wrap { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 0.35rem; } .credential-file-icon { width: 64px; height: 64px; object-fit: contain; } .credential-file-meta { width: 100%; text-align: center; } .credential-file-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .credential-file-tag { font-size: 0.7rem; opacity: 0.8; } /* Summary list */ .credential-summary-list { list-style: none; padding-left: 0; margin: 0.5rem 0 0; } .credential-summary-item { display: flex; align-items: center; margin-bottom: 0.15rem; } .credential-summary-icon { width: 18px; height: 18px; object-fit: contain; } .credential-summary-label { font-weight: 400; color: #6c757d; } .credential-summary-label.has-files { font-weight: 600; color: rgba(81, 251, 251, 0.95); } .credential-summary-count { margin-left: 0.25rem; } .supported-file-types .filetype-icon { width: 18px; height: 18px; object-fit: contain; } /* Pricing cards */ .pricing-row > .col { display: flex; } .pricing-card { display: flex; flex-direction: column; width: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .pricing-card .e-card-content { display: flex; flex-direction: column; flex: 1 1 auto; } .plan-actions { margin-top: auto; } .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .pricing-card.featured { transform: scale(1.05); z-index: 10; border: 2px solid var(--color-orange); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } @media (min-width: 768px) { .pricing-card { min-height: 480px; } } /* Invite block */ .invite-wrapper { display: flex; flex-direction: column; align-items: center; } .invite-row { display: flex; align-items: flex-end; justify-content: center; gap: 0.75rem; } .invite-code-input { max-width: 220px; } .invite-code-input.e-control-wrapper, .invite-code-input .e-input, .invite-code-input .e-input-group { max-width: 220px; } .invite-bottom-bar { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid rgba(0, 0, 0, 0.08); max-width: 480px; text-align: center; margin-left: auto; margin-right: auto; } .invite-bottom-content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; flex-wrap: nowrap; min-width: 360px; } .welcome-img { width: 128px; height: 128px; object-fit: contain; flex-shrink: 0; } .welcome-text { text-align: left; line-height: 1.4; max-width: 260px; } .login-left-content { z-index: 4; } .instructions-wrap { max-width: 420px; margin: 0 auto; text-align: center; } /* Role strip */ .role-strip { display: flex; flex-direction: row; align-items: stretch; justify-content: center; gap: 4rem; flex-wrap: wrap; padding: 0.5rem 0; } .role-item { flex: 0 0 auto; text-align: center; } /* Scroll rounded */ .scroll-rounded { overflow-y: auto; overflow-x: hidden; } .scroll-rounded::-webkit-scrollbar { width: 8px; height: 8px; margin: 1rem; } .scroll-rounded::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); border-radius: 999px; } .scroll-rounded::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .scroll-rounded::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3); } .scroll-rounded::-webkit-scrollbar-button { display: none; } /* Image stage */ .image-stage { position: relative; height: 220px; display: grid; place-items: center; overflow: hidden; } .image-stage__img { max-width: 70%; max-height: 100%; width: 256px; height: 256px; object-fit: contain; transition: transform .28s ease, opacity .28s ease; will-change: transform, opacity; } .image-stage__img.img-enter { opacity: 1; transform: scale(1); } .image-stage__img.img-exit { opacity: 0; transform: scale(0.96); } .instructions-hr { width: 100%; opacity: .35; margin: 1rem 0 1.25rem; } /* Typed box */ .typed-box { position: relative; display: inline-flex; align-items: flex-start; gap: .4rem; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 14px 16px; text-align: left; min-height: 64px; box-shadow: 0 8px 20px rgba(0,0,0,.06); backdrop-filter: blur(3px); } .typed-box__text { font-size: .75rem; line-height: 1.5; color: #1f2937; min-width: 12ch; white-space: pre-wrap; } .typed-caret { width: 2px; min-height: 1em; align-self: stretch; background: currentColor; opacity: .85; animation: blink 1.1s steps(2, jump-none) infinite; margin-top: 3px; } @keyframes blink { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 0.9; } } /* ID frame */ .id-frame { position: relative; width: 100%; aspect-ratio: 1.586 / 1; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; display: grid; place-items: center; } .empty-ph, .pdf-ph { text-align: center; color: #6b7280; } /* Capture container */ #capture-container { width: 100%; max-width: 720px; max-height: 512px; } /* Transitioned layers */ .capture-item { position: absolute; inset: 0; width: 100%; transform-origin: center; opacity: 0; scale: 0.9; transition: opacity 0.35s ease, transform 0.35s ease, scale 0.35s ease; } .capture-visible { opacity: 1; scale: 1; transform: scale(1); z-index: 1; } .capture-hidden { opacity: 0; scale: 0.9; transform: scale(0.9); z-index: 0; pointer-events: none; } /* Overlay shell */ .overlay-controls { position: absolute; inset: 0; z-index: 5; } .overlay-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 12px 16px; background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0)); gap: 8px; } .overlay-bottom .e-btn, .overlay-controls .e-btn { backdrop-filter: saturate(1.1) blur(2px); } /*.login-background { background-image: url('images/Assets/stamping-with-approved-stamp-on-certificate-docume-2025-04-01-20-54-10-utc-min-scaled.jpg'); background-attachment: local; background-clip: border-box; background-repeat: no-repeat; background-size: cover; background-position: center; height: calc(100vh - 96px); }*/ .onboardingMain { height: 100%; width: 100%; } /* Hide PDF viewer upload */ .pdf-viewer-panel ::deep .e-pv-toolbar .e-file-select-wrap, .pdf-viewer-panel ::deep .e-pv-toolbar input[type="file"], .pdf-viewer-panel ::deep .e-pv-toolbar .e-upload, .pdf-viewer-panel ::deep .e-pv-open-document, .pdf-viewer-panel ::deep .e-pv-open-file { display: none !important; } .e-pv-fileupload-element { display: none !important; } #resultsGrid { font-size: x-large !important; height: 100%; } /* Poppins weights */ .poppins-thin { font-family: "Poppins", sans-serif; font-weight: 100; font-style: normal; } .poppins-extralight { font-family: "Poppins", sans-serif; font-weight: 200; font-style: normal; } .poppins-light { font-family: "Poppins", sans-serif; font-weight: 300; font-style: normal; } .poppins-regular { font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; } .poppins-medium { font-family: "Poppins", sans-serif; font-weight: 500; font-style: normal; } .poppins-semibold { font-family: "Poppins", sans-serif; font-weight: 600; font-style: normal; } .poppins-bold { font-family: "Poppins", sans-serif; font-weight: 700; font-style: normal; } .poppins-extrabold { font-family: "Poppins", sans-serif; font-weight: 800; font-style: normal; } .poppins-black { font-family: "Poppins", sans-serif; font-weight: 900; font-style: normal; } .poppins-thin-italic { font-family: "Poppins", sans-serif; font-weight: 100; font-style: italic; } .poppins-extralight-italic { font-family: "Poppins", sans-serif; font-weight: 200; font-style: italic; } .poppins-light-italic { font-family: "Poppins", sans-serif; font-weight: 300; font-style: italic; } .poppins-regular-italic { font-family: "Poppins", sans-serif; font-weight: 400; font-style: italic; } .poppins-medium-italic { font-family: "Poppins", sans-serif; font-weight: 500; font-style: italic; } .poppins-semibold-italic { font-family: "Poppins", sans-serif; font-weight: 600; font-style: italic; } .poppins-bold-italic { font-family: "Poppins", sans-serif; font-weight: 700; font-style: italic; } .poppins-extrabold-italic { font-family: "Poppins", sans-serif; font-weight: 800; font-style: italic; } .poppins-black-italic { font-family: "Poppins", sans-serif; font-weight: 900; font-style: italic; } .crm-customer-toolbar { margin: 8px 0 12px 0; } .crm-customer-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; align-items: start; } .crm-left, .crm-right { display: flex; flex-direction: column; gap: 12px; } .crm-card { border-radius: 14px; width: 100%; } .crm-hero { display: flex; gap: 12px; align-items: center; } .crm-avatar-circle { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: rgba(0,0,0,.06); } .crm-hero-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; } .crm-hero-line { display: flex; gap: 10px; } .crm-label { width: 120px; color: #6b7280; font-size: .9rem; } .crm-value { font-weight: 600; } .crm-kv { display: flex; flex-direction: column; gap: 10px; } .crm-kv-row { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; } .crm-k { color: #6b7280; } .crm-fin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .crm-fin-item { padding: 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,.08); } .crm-fin-label { color: #6b7280; font-size: .85rem; } .crm-fin-value { font-size: 1.1rem; font-weight: 700; } .crm-fin-danger { color: #b91c1c; } .crm-inline-form { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 10px; } .crm-inline-form-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; } .crm-inline-label { color: #6b7280; font-size: .9rem; } .crm-contact-grid { display: flex; flex-direction: column; gap: 10px; } .crm-kv-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; } .crm-k { color: #6b7280; font-size: .9rem; } .crm-v { min-width: 0; } .crm-section-title { margin-top: 8px; padding-top: 6px; font-weight: 700; color: #111827; border-top: 1px solid rgba(0,0,0,.08); } .crm-verified-row { margin-bottom: 4px; } .crm-verified { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; } .crm-verified.ok { background: rgba(16,185,129,.12); color: rgb(6,95,70); } .crm-verified.bad { background: rgba(245,158,11,.12); color: rgb(146,64,14); } .muted { color: #6b7280; font-weight: 600; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } /* Onboarding tab tweaks */ .OnboardingWizard > div.e-control.e-toolbar.e-lib.e-tab-header.e-keyboard { height: 0px; max-height: 0px; visibility: hidden; display: none; } .OnboardingWizard > .e-item > div { border: none; } .e-tab .e-vertical { max-width: unset !important; } .e-tab .e-vertical .e-toolbar-item { /* margin: 1rem; padding: 1rem;*/ } .e-tab .e-tab-header { /*margin-top: 1em;*/ } .e-tab .e-tab-header .e-toolbar-item { color: black !important; /*margin-top: 1.3em;*/ } .e-tab .e-tab-header .e-toolbar-item .e-tab-text { color: black !important; font-size: 1.5em; padding: 1.5em; margin: 1rem; } .e-tab .e-tab-header .e-toolbar-item.e-active { background: #e5fbfb; border-top-left-radius: 16px; } .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon { color: black !important; } .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: black !important; } .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover { background: #01c8ca !important; color: white !important; border-top-left-radius: 16px; transition: ease-in-out .3s; } .e-tab .e-tab-header .e-toolbar-item .e-tab-text:hover { color: white !important; transition: ease-in-out .3s; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } /* Paper stack */ .paper-stack-preview { position: relative; width: 140px; height: 180px; overflow: hidden; background-color: #f8f8f8; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); padding: 4px; } @media (max-width: 768px) { .paper-stack-preview { width: 64px !important; height: 80px !important; position: relative; } } /* Blazor error */ .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; } /* Print */ @media print { body * { visibility: hidden; } page { margin: 0mm; size: auto; } #detail-content, #detail-content * { visibility: visible; } #detail-content { position: absolute; left: 0; top: 0; width: 100%; } .export-toolbar { display: none !important; } } /* New request highlight using tone variables */ .new-request-highlight { animation: pulse-blue 1s ease-in-out infinite alternate; background-color: var(--tone-highlight-end) !important; } @keyframes pulse-blue { 0% { background-color: var(--tone-highlight-start); } 100% { background-color: var(--tone-highlight-end); } } /* Generic highlight */ .e-accordion { border: none !important; } .e-highlight { animation: pulseBlue 1.5s ease-out 3; background-color: #e6f2ff !important; } @keyframes pulseBlue { 0% { background-color: #cce6ff; } 50% { background-color: #e6f2ff; } 100% { background-color: #cce6ff; } } .unread-badge { background-color: var(--color-red); color: white; font-size: 0.75rem; padding: 2px 6px; border-radius: 999px; position: absolute; top: -6px; right: -10px; } .contact-hover { font-size: unset; } .e-toolbar { } /* Toast icon font */ @font-face { font-family: 'Toast_icons'; src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRkAAAEoAAAAVmNtYXDnM+eRAAABsAAAAEpnbHlmzVnmlwAAAhgAAAZAaGVhZBEYIl8AAADQAAAANmhoZWEHlgN3AAAArAAAACRobXR4LvgAAAAAAYAAAAAwbG9jYQnUCGIAAAH8AAAAGm1heHABHQBcAAABCAAAACBuYW1lfUUTYwAACFgAAAKpcG9zdAxfTDgAAAsEAAAAggABAAADUv9qAFoEAAAAAAAD6AABAAAAAAAAAAAAAAAAAAAADAABAAAAAQAACcU5MF8PPPUACwPoAAAAANcI7skAAAAA1wjuyQAAAAAD6APoAAAACAACAAAAAAAAAAEAAAAMAFAABwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPqAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnCgNS/2oAWgPoAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAA+gAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA2AAAABAAEAAEAAOcK//8AAOcA//8AAAABAAQAAAABAAIAAwAEAAUABgAHAAgACQAKAAsAAAAAAAAAQgB8AMIA4gEcAZQCBgJwAo4DAAMgAAAAAwAAAAADlAOUAAsAFwAjAAABFwcXNxc3JzcnBycFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBTXh4L3h4L3h4L3h4AbwDt4qKtwMDt4qKt/0eBeuxsesFBeuxsesCbHh4L3h4L3h4L3h4p4q3AwO3ioq3AwO3irHrBQXrsbHrBQXrAAAAAwAAAAADlAOUAAUAEQAdAAABJwcXAScXDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBr2UylwEbMqADt4qKtwMDt4qKt/0eBeuxsesFBeuxsesBrGQylgEcMqKKtwMDt4qKtwMDt4qx6wUF67Gx6wUF6wAAAAAFAAAAAAOUA5cABQARAB0AIQAlAAABFzcnNSMFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgElFzcnBRc3JwHKxiCnPwFOA6V8fKUDA6V8fKX9aATToJ/UBATUn5/UAh7ANsD9fja/NQGedzNj29F8pAMDpHx8pQMDpXyf1AQE1J+g0wQE0/GhQKGhQKFAAAQAAAAAA74DfgADAAcACgANAAAlMzUjNTM1IwEhCQEhAQHLUlJSUgFj/YwBOv42A5T+NuZUUqf+igIc/ZADFgAEAAAAAAOUA5QAAwAHABMAHwAAATM1IzUzNSMFDgEHLgEnPgE3HgEFHgEXPgE3LgEnDgEBylRUVFQBbgO3ioq3AwO3ioq3/R4F67Gx6wUF67Gx6wEk+lNT0Iq3AwO3ioq3AwO3irHrBQXrsbHrBQXrAAAAAAcAAAAAA+gDMQALABUAJQAuADcAQQBLAAABFhcVITUmJz4BMxYFFhcVITU+ATcWJQYHFSE1LgEjIgYHLgEjIgEWFAYiJjQ2MgUWFAYiJjQ2MiUGFBYXPgE0JiIFBhQWFz4BNCYiA1xEBP6sAxUeRiRX/qxEBP45BIlXV/7xZQsD6AvKUypvMzNvKlMCKxozTTMzTP6CGTNMNDRMAQItWUREWlqI/jstWkREWVmIAWMbFjc3IBgKDwQcGxY3NxY3BAQjJUt7e0tKFxgYFwEMGU01NU0zGhlNNTVNMxYthloCAlqGWy4thloCAlqGWwAAAAQAAAAAA5wCxwAIABQANABFAAABFBYyNjQmIgYXDgEHLgEnPgE3HgEfAQcOAQ8BNz4BNS4BJw4BBxQWHwEnLgEvATc+ATc2FiUOAQ8BFx4BNz4BPwEnJiciAb8fLR4eLR+wAkU0NEUBAUU0NEX8BgEemG0FBB8kAlZBQFcBKyUCCkeVTAYBH76RVMP+3bDPBwcKZclcu/AGCwrM2AoBxxYfHy0eHhc0RQEBRTQ1RQEBRSgEARpWGAECFUIoQVcCAldBLEYUAQEIQkAGASJsBwFCoRbFFAoJW0sBCo8LCgztAQAAAAIAAAAAA4ADbAA4AEEAAAEEJCcmDgEWFx4BHwEVFAYHDgEnJg4BFhcWNjc2Fx4BBx4BFzc+ASc2JicmJzUzPgE3PgEnJicjIiUUFjI2NCYiBgNM/tz+pwwMGxEDDAaMfAcSETKEQw8WBg8Og80hNSg4JwICEw0FDhECAjFJEBICPYhKDQgGChQCB/5dMUgxMUgxAuB/ZRcIAxgbCQdHEQGTGi8TOVgKAw8dFwMNuDUFHTGDCA0QAQECFQ8Mnz8LCasJKiUHGg0SATMkMDBJMDAAAAAAAgAAAAAC/QMkAAMADQAAAQchJxMeATMhMjY3EyEC2x3+bB0kBCQZAQQZJARH/ewDBuDg/fcZICAZAicAAwAAAAACzwPoACwAQwBPAAABERQfARYfAzMVHgE7ATI2NRE0JisBNTEWOwEyNjQmJyMiJi8BLgErAQ4BAxUzNTQ2NzMeARcVMzUuAScjIgcjESM1HgEXPgE3LgEnDgEBVQEBAwQCCAjXARENOg0REQ2zDROVExoaE2UQGAQfAxAKYg0RPR8RDZcNEQEeASIalxANAR8CTTo6TQEBTTo6TQJ8/nYEBQIGBAIFArYNERENARENEUoNGicZARMPfQoNARH98Hl5DREBARENeXkaIgEIAe3FOk0CAk06Ok0BAU0AAAAAAgAAAAAC5gMyAAkAEQAAJRQWMyEyNjURITcjFSE1IycjASApHgEaHin+WFBuAeR+JLD8HigoHgGfeT09HgAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEAEgABAAEAAAAAAAIABwATAAEAAAAAAAMAEgAaAAEAAAAAAAQAEgAsAAEAAAAAAAUACwA+AAEAAAAAAAYAEgBJAAEAAAAAAAoALABbAAEAAAAAAAsAEgCHAAMAAQQJAAAAAgCZAAMAAQQJAAEAJACbAAMAAQQJAAIADgC/AAMAAQQJAAMAJADNAAMAAQQJAAQAJADxAAMAAQQJAAUAFgEVAAMAAQQJAAYAJAErAAMAAQQJAAoAWAFPAAMAAQQJAAsAJAGnIEZpbmFsIFRvYXN0IE1ldHJvcFJlZ3VsYXJGaW5hbCBUb2FzdCBNZXRyb3BGaW5hbCBUb2FzdCBNZXRyb3BWZXJzaW9uIDEuMEZpbmFsIFRvYXN0IE1ldHJvcEZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAARgBpAG4AYQBsACAAVABvAGEAcwB0ACAATQBlAHQAcgBvAHAAUgBlAGcAdQBsAGEAcgBGAGkAbgBhAGwAIABUAG8AYQBzAHQAIABNAGUAdAByAG8AcABGAGkAbgBhAGwAIABUAG8AYQBzAHQAIABNAGUAdAByAG8AcABWAGUAcgBzAGkAbwBuACAAMQAuADAARgBpAG4AYQBsACAAVABvAGEAcwB0ACAATQBlAHQAcgBvAHAARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvd3d3LnN5bmNmdXNpb24uY29tACAAcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQAFRXJyb3IHU3VjY2VzcwVBbGFybQdXYXJuaW5nBEluZm8HTWVldGluZwVCbGluawdTdHJldGNoA1NpcANTaXQFVHJhc2gAAAAA) format('truetype'); font-weight: normal; font-style: normal; } .toast-icons { font-family: 'Toast_icons' !important; speak: none; font-size: 3rem; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Toast layout + vertical status strip */ .e-toast-container, .e-toast-container .e-toast .e-toast-title, .e-toast-container .e-toast .e-toast-message, .e-toast-container .e-toast .e-toast-message .e-toast-content, .e-toast-container .e-toast .e-toast-close-icon { color: #090909 !important; } .e-toast-container.layout-toast-host { z-index: 2147483647 !important; top: 1rem !important; left: 1rem !important; right: auto !important; } .e-toast-container .e-toast { position: relative; border-radius: 12px; box-shadow: var(--tone-shadow-soft); background: radial-gradient( circle at top center, white 5%, var(--soft-grey-bg) 80%, var(--soft-grey-bg) 100% ); padding: 0.75rem 1rem; padding-left: 1.5rem; /* room for the left strip */ color: var(--tone-text-main); border: 1px solid #dbeafe; backdrop-filter: blur(2px); } /* Base vertical strip (default tone) */ .e-toast-container .e-toast::before { content: ""; position: absolute; inset-block: 0.4rem; /* keep away from rounded corners */ left: 0.4rem; width: 4px; border-radius: 999px; background-color: var(--tone-primary, var(--color-blue)); } /* Title + content spacing */ .e-toast-container .e-toast .e-toast-title { font-weight: 600; margin-bottom: 0.15rem; } .e-toast-content { font-size: 0.95rem; font-weight: 500; } /* Status colors using Syncfusion toast type classes */ /* Success */ .e-toast-container .e-toast.e-toast-success::before, .e-toast-container .e-toast.toast-success::before { background-color: var(--color-green); } .e-toast-container .e-toast.e-toast-success { border-color: rgba(34, 197, 94, 0.35); } /* Error / Danger */ .e-toast-container .e-toast.e-toast-danger::before, .e-toast-container .e-toast.toast-error::before { background-color: var(--color-red); } .e-toast-container .e-toast.e-toast-danger { border-color: rgba(239, 68, 68, 0.35); } /* Warning */ .e-toast-container .e-toast.e-toast-warning::before, .e-toast-container .e-toast.toast-warning::before { background-color: var(--color-orange); } .e-toast-container .e-toast.e-toast-warning { border-color: rgba(245, 158, 11, 0.35); } /* Info */ .e-toast-container .e-toast.e-toast-info::before, .e-toast-container .e-toast.toast-info::before { background-color: var(--color-blue); } .e-toast-container .e-toast.e-toast-info { border-color: rgba(59, 130, 246, 0.35); } /* Menu */ .e-contextmenu-container.topmenubar { } .e-menu-container { padding: .5rem; background: white; height: 100%; } .e-menu-item { font-family: Poppins; font-size: large; font-weight: 500; color: #0c0c0c; } .e-menu-item.e-selected { animation-name: hoverfade; animation-duration: 0.8s; animation-timing-function: ease-out; animation-fill-mode: forwards; } .e-menu-item:hover { animation-name: hoverfade; animation-duration: 0.8s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } .e-menu-wrapper .e-menu .e-menu-item.e-selected, .e-menu-wrapper .e-menu .e-menu-item.e-active-item, .e-menu-container .e-menu .e-menu-item.e-selected, .e-menu-container .e-menu .e-menu-item.e-active-item { background: unset; } .e-menu-wrapper .e-menu .e-menu-item.e-focused, .e-menu-container .e-menu .e-menu-item.e-focused { background: unset; } @keyframes hoverfade { 0% { background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, var(--tone-menu-hover-start) 5%, var(--tone-menu-hover-mid) 100% ); } 100% { background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, var(--tone-menu-hover-end) 25%, var(--tone-menu-hover-mid) 100% ); } } .e-menu-header { width: 100% !important; } .e-menu-container.e-menu-popup { border-radius: 16px; } .e-menu-container .e-menu-item { padding: 1.75em; } .e-menu-parent { min-width: 100% !important; left: 0 !important; } .e-menu-container.e-hamburger { position: unset !important; } .e-menu-parent.e-ul { border-radius: 16px; } .e-menu-container .e-ul .e-menu-item { font-weight: 300; } .e-menu-container .e-ul .e-menu-item.e-focused { animation-name: hoverfade; animation-duration: 0.8s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; border-start-start-radius: 16px; } .e-menu-container ul .e-menu-item .e-caret { transform: rotate(-90deg) translate(3px); font-weight: 900; } .e-menu-container ul .e-menu-item .e-caret:hover { transform: rotate(0deg) translate(3px, 4px); transition: ease-in-out 1s; } /* Card content wrapper */ .card-content-wrapper { width: 100%; margin: 1em auto; padding: 1em; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; } .loading-placeholder { display: flex; justify-content: center; align-items: center; height: 100%; } .center-spinner { display: flex; justify-content: center; align-items: center; height: 300px; } .title { font-size: 1.25rem; } /* Upload positioning */ .e-upload { bottom: 0; position: sticky; } .onboarding-hero { max-width: 480px; margin: 0 auto 2rem; text-align: center; } .onboarding-title { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.01em; margin-bottom: 0.25rem; } .onboarding-subtitle { font-size: 0.95rem; color: #4b5563; margin-bottom: 1.25rem; } .onboarding-benefits { list-style: none; padding: 0; margin: 0; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; text-align: left; } .onboarding-benefits li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #374151; } .onboarding-benefits img { width: 18px; height: 18px; flex-shrink: 0; display: block; } /* Logo frame */ .logo-frame { display: flex; justify-content: center; align-items: center; width: 220px; height: 220px; padding: 1rem; border: 5px solid lightgray; border-radius: 12px; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.15); margin: auto; } .logo-frame img { display: block; max-width: 160px; max-height: 160px; object-fit: contain; } .contact-card { margin: 0px auto; padding: 0px; height: 240px; text-align: center; vertical-align: central; color: #000000; font-size: 1rem; user-select: none; } .onboardingcontainer { width: 75%; } @media (max-width: 768px) { .onboardingcontainer { width: 100%; } } @keyframes fadeScaleIn { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: scale(1) } } @keyframes fadeScaleOut { from { opacity: 1; transform: scale(1) } to { opacity: 0; transform: scale(.90) } } .role-grid.appeared .role-item { animation: fadeScaleIn .22s ease-out both; } .role-grid.leaving .role-item { animation: fadeScaleOut .22s ease-in both; } .role-item { animation: fadeScaleIn .22s ease-out both; } /* Role boxes */ .role-box { width: 8rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: #f5f5f5; border-radius: 16px; box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.36); transition: border-color .24s ease, background-color .24s ease, box-shadow .24s ease, transform .18s ease; will-change: border-color, background-color, box-shadow, transform; } .role-item:hover .role-box { border-color: #93c5fd; box-shadow: 0 4px 10px rgba(0,0,0,.08); } .role-box.selected { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 0 0 3px rgba(59,130,246,.22), 0 6px 16px rgba(0,0,0,.10); transform: translateZ(0) scale(1.02); } .role-icon { max-width: 60%; max-height: 60%; object-fit: contain; transition: filter .24s ease, transform .18s ease; } .role-box.selected .role-icon { transform: translateZ(0) scale(1.02); filter: saturate(1.05); } .role-label { margin-top: .5rem; font-weight: 600; color: #374151; transition: color .24s ease; } .role-label.active { color: #2563eb; } @media (prefers-reduced-motion: reduce) { .role-box, .role-icon, .role-label { transition: none !important; transform: none !important; } } /* Role container */ .role-container { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; } .choose-role-text { font-size: 0.95rem; } .role-divider { height: 1px; margin: 1.5rem 0 0.75rem; background: linear-gradient( to right, transparent, rgba(0, 0, 0, 0.15), transparent ); } .role-text { max-height: 220px; } /* Sidebar text animation */ .nav_list { overflow: hidden; } .menu-text { display: inline-block; opacity: 0; transform: scale(1.0); transition: opacity .2s ease, transform .2s ease; white-space: nowrap; overflow: hidden; } .nav_list.appeared .menu-text { visibility: visible; opacity: 1; transform: scale(1); animation: fadeScaleIn .22s ease-out both; } .nav_list.leaving .menu-text { visibility: visible; opacity: 0 !important; height: 0; width: 0; transform: scale(0) !important; animation: fadeScaleOut .22s ease-in both; } .nav_list.leaving .menu-text, .nav_list:not(.appeared):not(.leaving) .menu-text { pointer-events: none; } .nav_list.appeared .e-list-wrapper:nth-child(1) .menu-text { animation-delay: .00s; } .nav_list.appeared .e-list-wrapper:nth-child(2) .menu-text { animation-delay: .02s; } .nav_list.appeared .e-list-wrapper:nth-child(3) .menu-text { animation-delay: .04s; } .nav_list.appeared .e-list-wrapper:nth-child(4) .menu-text { animation-delay: .06s; } .nav_list.appeared .e-list-wrapper:nth-child(5) .menu-text { animation-delay: .08s; } @media (prefers-reduced-motion: reduce) { .nav_list .menu-text { animation: none !important; } } /* Sidebar layout */ #nav-bar .sidebar-inner { display: flex; flex-direction: column; min-height: 0; } #nav-bar .sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } #nav-bar .sidebar-footer { flex: 0 0 auto; border-top: 1px solid var(--border, #e5e7eb); background: inherit; bottom: 0; position: absolute !important; } #nav-bar .sidebar-footer .header_toggle:hover i { transform: translateY(-2px); transition: transform .15s ease; } /* baseline */ #nav-bar .menu-text { display: inline-block; white-space: nowrap; overflow: hidden; /* animate these */ max-width: 220px; /* >= your sidebar text area */ opacity: 1; transform: translateX(0); /* smooth */ transition: max-width 180ms ease, opacity 150ms ease, transform 180ms ease; will-change: max-width, opacity, transform; } /* open state */ #nav-bar .menu-text.appeared { max-width: 220px; opacity: 1; transform: translateX(0); visibility: visible; } /* closed state (dock) */ #nav-bar .menu-text.leaving { max-width: 0; /* <-- removes layout width */ opacity: 0; /* <-- fades */ transform: translateX(-6px); /* <-- slight slide */ visibility: hidden; /* <-- prevents “ghost” selection */ transition-delay: 0ms, 0ms, 0ms, 180ms; /* visibility flips after the width transition ends */ } /* IMPORTANT: when docked, kill the left padding so it doesn't reserve space */ #nav-bar .menu-text.leaving { padding-left: 0 !important; } /* when open, restore spacing */ #nav-bar .menu-text.appeared { padding-left: 1rem !important; /* matches pl-4 */ } .hoverContact.e-tooltip.e-popup { } .hoverContact.e-tooltip-wrap.e-popup { } .hoverContact.e-tooltip.e-text { color: #000000; } .hoverContact.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 20px solid #616161; } .hoverContact.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top { border-bottom: 20px solid #616161; border-left: 6px solid transparent; border-right: 6px solid transparent; } .hoverContact.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left { border-bottom: 6px solid transparent; border-right: 20px solid #616161; border-top: 6px solid transparent; } .hoverContact.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right { border-bottom: 6px solid transparent; border-left: 20px solid #616161; border-top: 6px solid transparent; } .crm-toolbar-wrap { margin-bottom: 10px; } .crm-toolbar { border-radius: 12px; } .crm-search { position: relative; display: inline-flex; align-items: center; outline: none; } .crm-search-icon { position: absolute; right: 12px; opacity: .5; pointer-events: none; /* critical */ } .crm-verified-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .85rem; border: 1px solid rgba(0,0,0,.12); } .crm-verified-pill.ok { color: #065f46; background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.25); } .crm-verified-pill.bad { color: #92400e; background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); } /* Appbar */ .e-appbar { background-color: #ffffff; border-bottom: none !important; border-color: none !important; overflow: visible; height: 100%; padding: 0px !important; transition: height ease-in-out .2s; } .sidebar-icon { } img.sidebar-icon { width: 48px; height: 48px; } #statusStepper { min-width: 600px; } /*.container { max-width: none; }*/ /* Files list */ .Files .e-listview .e-list-container .e-list-parent .e-list-item { height: auto !important; min-height: 64px; padding: 1rem; align-items: stretch; } .Files .e-listview .e-list-container .e-list-parent .e-list-item .thumnail { margin: 1em; padding: .25em; border: 1px solid #dcdcdc; position: relative; background-color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.1); display: inline-block; } .Files .e-listview .e-list-container .e-list-parent .e-list-item .thumnail::after { content: ""; position: absolute; top: 0; right: 0; width: 20%; height: 20%; background: linear-gradient(135deg, #ccc 0%, #fff 100%); clip-path: polygon(100% 0, 0% 0, 100% 100%); z-index: 2; pointer-events: none; } /* Drop area */ #modalDropArea { /*position: relative; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;*/ /*height: 100%; min-height: 128px;*/ } #modalDropArea .drop-content { opacity: 1; transition: opacity 0.3s ease-in-out; } #modalDropArea.e-upload-drag-hover { z-index: 9999; background: rgba(51, 211, 211, 0.15); backdrop-filter: blur(2px); animation: dragHoverAppear 0.35s ease-out forwards; } #modalDropArea.e-upload-drag-hover .drop-content { opacity: 0.25; pointer-events: none; } @keyframes dragHoverAppear { 0% { opacity: 0; transform: scale(0.97); } 60% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } } #modalDropArea.e-upload-drag-hover { animation: dragHoverAppear 0.35s ease-out forwards, dragHoverPulse 1.5s ease-in-out infinite alternate; } @keyframes dragHoverPulse { 0% { background-color: rgba(51,211,211,0.15); } 100% { background-color: rgba(51,211,211,0.25); } } @keyframes growIntoPlace { 0% { opacity: 0; transform: scale(0.35); } 100% { opacity: 1; transform: scale(1); } } @keyframes slideIntoPlace { 0% { opacity: 0; transform: scaleX(0.1); } 100% { opacity: 1; transform: scaleX(1); } } /* Upload inside modal */ .e-upload.upload-inside-modal { margin-top: auto; padding-top: 1rem; justify-content: center; align-items: center; flex-direction: column; height: 100%; font-size: 1.5rem; } .e-upload .e-upload-files { padding-block-start: 2rem; border: none !important; } .e-upload, .e-upload .e-file-select-wrap { border: none !important; box-shadow: none !important; padding: 0 !important; } .e-upload .e-file-drop { display: none !important; } /* Flyout */ .flyout-trigger { position: relative; display: inline-block; } /* Stripe vertical bar */ .stripe { display: block; width: 8px !important; background-color: #ccc; min-height: 60px; } /* User icon */ .e-control .e-btn.userIcon { border: none !important; border-color: unset; box-shadow: none; font-family: Poppins; } /*.e-control .e-btn:hover { background: linear-gradient(45deg, hsla(168, 85%, 52%, 0.5), hsla(263, 88%, 45%, 0.5)); }*/ .e-control .e-dropdown-btn.userIcon { align-content: center; border: none !important; width: 84px; background-color: white !important; height: 84px; } /* Grid */ .e-grid { border: none !important; } .e-grid .e-row, .e-grid .e-altrow, .e-grid .e-row .e-detailrowcollapse, .e-grid .e-detailrowexpand .e-rowcell, .e-grid .e-row .e-templatecell, .e-grid .e-row .e-rowcell, .e-grid .e-row .e-rowcell .e-templatecell, .e-grid .e-detailindentcell, .e-grid .e-detailrow .e-grid, .e-grid .e-altrow, .e-grid .e-detailrow .e-grid .e-detailindentcell, .e-grid .e-detailrow .e-grid .e-row .e-rowcell, .e-grid .e-detailrow .e-grid .e-row .e-rowcell .e-templatecell, .e-grid .e-detailrow .e-grid .e-row .e-altrow .e-active, .e-grid .e-detailrow .e-grid .e-gridheader { border: none !important; border-bottom: none !important; border-top: none !important; font-family: Poppins; } .e-grid .e-gridcontent { height: unset !important; } .pinPagerToBottom .sf-pager.e-control.e-pager.e-lib.e-gridpager { padding: 0; margin: auto; border-style: none !important; border-width: 0px !important; bottom: 0; position: fixed; } .sf-pager .e-pagerdropdown { margin-top: -38px; font-size: .75rem !important; } /* Schedule color tags */ .e-schedule .e-vertical-view .e-day-wrapper .e-appointment .light-blue { background: #6666ff; } .e-schedule .e-vertical-view .e-day-wrapper .e-appointment .light-pink { background: #ee99ee; } .e-schedule .e-vertical-view .e-day-wrapper .e-appointment .light-red { background: #f8d7da; } .e-schedule .e-vertical-view .e-day-wrapper .e-appointment .light-green { background: #d4edda; } /* ListView hover */ .e-listview:not(.e-list-template) .e-list-item { height: auto !important; line-height: normal; padding-left: 0.75rem !important; padding-right: 0.25rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .e-listview:not(.e-list-template) .e-list-item:hover { background: linear-gradient( 180deg, rgba(1, 200, 202, 0) 4%, rgba(126, 204, 195, 0.51) 23%, rgba(229, 251, 251, 0.34) 100% ); transition: background ease-in-out 0.2s; } /* Calendar popup */ .calendar-popup { position: fixed; top: 36px; left: 0; z-index: 99999 !important; background: white; padding: 8px; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); width: max-content; } .e-card-content { display: flex; flex-direction: column; height: 100%; } .e-file-drop { font-weight: 500; font-size: 1rem; } .e-control.e-grid { border: none; } /* Profile image */ .profile-image-wrapper { position: relative; display: inline-block; width: 128px; height: 128px; } .toolbar-profile-icon { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; cursor: pointer !important; } .profile-image-wrapper .e-upload .e-btn{ padding: 0; width: 36px; height: 36px; border-radius: 50%; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; } .profile-image-wrapper .e-upload .e-btn::before { content: "\f15b"; font-family: "Font Awsome 7 free" } .profile-image-spinner-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.6); z-index: 5; border-radius: 999px; /* or match your image shape */ } .profile-card .e-card-header, .profile-card .e-card-header-content { text-align: left; } /* Force Syncfusion card header + content to left-align for these cards */ .profile-card .e-card-header, .profile-card .e-card-header-caption, .profile-card .e-card-header-title, .profile-card .e-card-header-content, .profile-card .e-card-header .e-card-header-title { justify-content: flex-start !important; text-align: left !important; } /* If Syncfusion is centering via flex somewhere in the header */ .profile-card .e-card-header, .profile-card .e-card-header-caption { display: flex !important; align-items: flex-start !important; } /* (Optional) same treatment for reminder cards */ .reminder-card .e-card-header, .reminder-card .e-card-header-caption, .reminder-card .e-card-header-title, .reminder-card .e-card-header-content { justify-content: flex-start !important; text-align: left !important; } /* Profile card header: left-aligned + vertically centered */ .profile-card .e-card-header, .profile-card .e-card-header-caption, .profile-card .e-card-header-content { display: flex !important; align-items: center !important; /* <-- vertical center */ justify-content: flex-start !important; text-align: left !important; } .profile-card .e-card-header i, .profile-card .e-card-header img { display: inline-flex; align-items: center; vertical-align: middle; } /* 1) Kill extra padding Syncfusion adds to headers */ .profile-card .e-card-header { padding-top: 12px !important; padding-bottom: 12px !important; } /* 2) Force true vertical centering */ .profile-card .e-card-header, .profile-card .e-card-header-caption, .profile-card .e-card-header-content { display: flex !important; align-items: center !important; justify-content: flex-start !important; } /* 3) Normalize text metrics (THIS is the real issue) */ .profile-card .e-card-header, .profile-card .e-card-header * { line-height: 1.2 !important; } /* 4) Remove baseline offset from icons */ .profile-card .e-card-header i, .profile-card .e-card-header img { position: relative; top: -1px; /* micro-adjust, visually correct */ flex-shrink: 0; } /* 5) Prevent title from adding extra vertical spacing */ .profile-card .e-card-header .fw-bold { margin: 0 !important; padding: 0 !important; } /* Profile image "updated" flash */ @keyframes profileImageFlash { 0% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 0 rgba(34,197,94,.0); } 25% { transform: scale(1.04); filter: brightness(1.12); box-shadow: 0 0 0 6px rgba(34,197,94,.18); } 60% { transform: scale(1.01); filter: brightness(1.05); box-shadow: 0 0 0 10px rgba(34,197,94,.0); } 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 0 0 rgba(34,197,94,.0); } } .profile-image-flash { animation: profileImageFlash 650ms ease-out; } .profile-image-wrapper .e-upload .e-file-select-wrap .e-btn::before, .e-upload .e-upload-actions .e-btn::before, .e-bigger.e-small .e-upload .e-file-select-wrap .e-btn::before, .e-bigger.e-small .e-upload .e-upload-actions .e-btn::before { content: "\f15b"; font-family: "Font Awesome 7 Free"; font-size: 16px; line-height: 1; } .profile-image { width: 128px; height: 128px; object-fit: cover; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } .profile-upload-overlay { position: absolute; bottom: 6px; right: 6px; width: 32px; height: 32px; } /* Soft statcard palette from variables */ .light-red { background-color: #f8d7da !important; color: #721c24 !important; } .light-blue { background-color: #d1ecf1 !important; color: #0c5460 !important; } .light-green { background-color: #d4edda !important; color: #155724 !important; } .light-pink { background-color: #fce4ec !important; color: #880e4f !important; } /* Statcard animation & layout */ @keyframes zoomInBounce { 0% { opacity: 0; transform: scale(0.75); } 80% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } } /* statcard block */ .statcard { border-radius: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform-origin: 50% 0%; opacity: 1; transform: translateY(0) scale(1); will-change: opacity, transform, max-height; contain: layout paint; overflow: hidden; transition: opacity .2s cubic-bezier(.33,1,.68,1), transform .2s cubic-bezier(.33,1,.68,1), box-shadow .25s ease, padding .2s cubic-bezier(.33,1,.68,1), margin .2s cubic-bezier(.33,1,.68,1), width .2s cubic-bezier(.33,1,.68,1), height .2s cubic-bezier(.33,1,.68,1), max-height .25s cubic-bezier(.22,1,.36,1); @starting-style { opacity: 0; transform: translateY(2px) scale(.97); } } .statcard.hidden { opacity: 0; transform: translateY(0) scale(.94); max-height: 0; pointer-events: none; } .statcard:hover { box-shadow: 0 4px 20px rgba(0,0,0,.25); transform: translateY(-2px) scale(1); } @media (prefers-reduced-motion: reduce) { .statcard, .statcard.hidden { transition: none; opacity: 1; transform: none; max-height: none; } } .onboarding-card { /*max-width: 650px;*/ width: 100%; padding: 2rem; border-radius: 12px; } /* Statcard tooltip skin */ .statcard-tip.e-tooltip-wrap { border-radius: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: #f8f9fa; min-width: 250px; max-height: calc(100vh - 96px); height: auto; overflow: hidden; border: 1px solid rgba(0,0,0,.06); } /*@media (max-width: 1440px) { .statcard-tip.e-tooltip-wrap { max-height: calc(100vh - 64px); } }*/ .dark .statcard-tip.e-tooltip-wrap { background: rgba(17,24,39,.88); border-color: rgba(255,255,255,.08); box-shadow: 0 10px 28px rgba(0,0,0,.45); } .statcard-tip .e-tooltip-content { padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; color: #111827; font-size: 0.95rem; line-height: 1.35rem; } .dark .statcard-tip .e-tooltip-content { color: #F9FAFB; } .statcard-tip .tip-icon { flex: 0 0 auto; margin-top: 2px; } .statcard-tip .e-listview:not(.e-list-template) .e-list-item { height: auto !important; line-height: normal; padding: 1rem; } .statcard-tip .tip-title { font-weight: 600; margin-bottom: 2px; } .statcard-tip .tip-body { opacity: .9; } .statcard-tip.e-popup { opacity: 0; transform: translateY(2px) scale(.97); transform-origin: 50% 0%; transition: opacity .22s cubic-bezier(.33,1,.68,1), transform .22s cubic-bezier(.33,1,.68,1), box-shadow .25s ease; will-change: opacity, transform; } .statcard-tip.e-popup-open { opacity: 1; transform: translateY(0) scale(1); } .statcard-tip.e-popup .e-content { overflow: auto; max-height: 380px; } .statcard-tip .e-listview { border: none; } .statcard-tip .e-list-item { border: none; } .statcard-tip.e-popup-open:hover { box-shadow: 0 6px 22px rgba(0,0,0,.18); transform: translateY(-2px) scale(1); } .statcard-tip .e-arrow-tip.e-tip-bottom, .statcard-tip .e-arrow-tip.e-tip-top, .statcard-tip .e-arrow-tip.e-tip-left, .statcard-tip .e-arrow-tip.e-tip-right { border-color: rgba(0,0,0,.06); } .statcard-tip .e-arrow-tip-outer { border-color: transparent; } .statcard-tip .e-arrow-tip-inner { background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.06); } .dark .statcard-tip .e-arrow-tip-inner { background: rgba(17,24,39,.88); border-color: rgba(255,255,255,.08); } @media (prefers-reduced-motion: reduce) { .statcard-tip.e-popup, .statcard-tip.e-popup-open { transition: none !important; transform: none !important; opacity: 1 !important; } } /* App cards */ .e-card.appcards { border-radius: 12px; } .e-card.appcards .e-card-header { justify-content: start; } .statcard { transition: transform 0.2s ease; width: 100%; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; } .statcard:hover { transform: translateY(-3px); } .statcard .card-body { padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } .statcard .card-footer { border-top: none; padding: 0.75rem 1rem; } .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.6667%; } /* Additional soft backgrounds */ .bg-primary-subtle { background: var(--Light-Purple, #D6C9FF); color: #0c0c0c; } .bg-danger-subtle { background: var(--Mid-Orange, #F9A464); color: #0c0c0c; } .bg-warning-subtle { background: var(--Mid-Yellow, #FCCD76); color: #0c0c0c; } .bg-success-subtle { background: var(--Mid-Teal, #88E8E9); color: #0c0c0c; } .bg-info-subtle { background-color: rgba(80, 160, 255, 0.25); } .bg-purple-subtle { background-color: rgba(160, 100, 255, 0.25); } .text-purple { color: rgba(160, 100, 255, 0.9); } /* Float labels */ .e-float-input.e-control-wrapper input ~ label.e-float-text, .e-float-input.e-control-wrapper textarea ~ label.e-float-text { } label.e-float-text.e-label-top { font-size: x-small; color: #616161; transition: color ease-in-out 0.2s !important; } .profile-upload-overlay .e-btn::before { font-family: "Font Awesome 6 Free"; content: "\f303"; font-weight: 900; } .e-input:not(:valid), .e-input:valid, .e-float-input.e-control-wrapper input:not(:valid), .e-float-input.e-control-wrapper input:valid, .e-float-input input:not(:valid), .e-float-input input:valid, .e-input-group input:not(:valid), .e-input-group input:valid, .e-input-group.e-control-wrapper input:not(:valid), .e-input-group.e-control-wrapper input:valid, .e-float-input.e-control-wrapper textarea:not(:valid), .e-float-input.e-control-wrapper textarea:valid, .e-float-input textarea:not(:valid), .e-float-input textarea:valid, .e-input-group.e-control-wrapper textarea:not(:valid), .e-input-group.e-control-wrapper textarea:valid, .e-input-group textarea:not(:valid), .e-input-group textarea:valid { border-radius: 10px; } .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text { color: #343a40; font-size: .75rem; } .e-input-group.e-corner { border-radius: 10px; } article { width: 100%; border-top-left-radius: 24px; background: #ffffff; padding: 0rem; } .appbar { height: 48px; position: sticky; top: 0; left: 0; right: 0; z-index: 1000; background-color: #fff; } /* Layout shell */ .app-shell { position: relative; display: flex; background: var(--bs-gray-100); width: 100%; flex: 1 1 auto; min-height: 0; } #nav-bar.e-sidebar { position: fixed; left: 0; top: 48px; height: calc(100vh - 48px); z-index: 1000; } .container-flex { margin: 0 auto; } .portal-feature-section { padding: 3rem 1.5rem; } .portal-feature-card { border-radius: 14px; border: 1px solid rgba(0,0,0,0.25) !important; box-shadow: 0 12px 30px rgba(15, 30, 57, 0.08) !important; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; background-color: #ffffff; } .portal-feature-header { padding: 1.25rem 1.5rem 0.75rem; } .portal-feature-title { font-size: 1.05rem; font-weight: 600; margin: 0; color: #111827; } .portal-feature-media { position: relative; padding-top: 60%; background-size: cover; background-position: center; } .portal-feature-media-inner { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1rem 1.5rem 1.25rem; background: linear-gradient( to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) ); } .portal-feature-text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #f9fafb; } .portal-feature-footer { padding: 0.75rem 1.5rem 1.25rem; margin-top: auto; } .portal-feature-divider { height: 1px; background: linear-gradient( to right, transparent, #e5e7eb, transparent ); margin-bottom: 0.75rem; } .portal-feature-cta { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: #2563eb; text-decoration: none; } .portal-feature-cta:hover { text-decoration: underline; } @media (max-width: 640px) { .portal-feature-section { padding: 2.5rem 1rem; } .portal-feature-header, .portal-feature-footer { padding-left: 1.25rem; padding-right: 1.25rem; } } .collapse-anim { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px); transition: max-height .28s cubic-bezier(.22,1,.36,1), opacity .2s ease, transform .2s ease; } .collapse-anim.open { max-height: var(--collapse-max, 1200px); opacity: 1; transform: translateY(0); } /* Chevron rotation for Show more/less */ .chevron { transition: transform .2s ease; } .chevron.open { transform: rotate(90deg); } .hero-section { /* Use tone-aware surface colors / overridden by .page-tone-blue .hero-section */ background-blend-mode: normal; position: relative; padding: 0; margin: 0 0 1rem 0; width: 100%; height: 100%; min-height: 200px; opacity: 1; transform: scale(1); transition: opacity 0.4s ease, transform 0.4s ease; z-index: 15; overflow: hidden; } /* Hero content sits above blobs/glow/stars */ .hero-content { position: relative; z-index: 4; width: 100%; } /* Hero text uses tone-driven text colors */ .hero-section h1 { color: var(--rs-text-strong, rgba(64,64,64,0.9)); } .hero-section p { color: var(--rs-text-muted, rgba(0,0,0,0.6)); } /* Mobile behavior – fade/shrink hero, no hard hide */ @media (max-width: 990px) { .hero-section { opacity: 1; margin-top: 1em; background: none; min-height: 0; height: auto; pointer-events: none; margin-bottom: 0; overflow: hidden; transition: opacity 0.4s ease, transform 0.4s ease, min-height 0.4s ease-in-out, background 0.4s ease-in-out, margin-top 0.3s ease-in-out; } .hero-content { pointer-events: auto; /* keep content interactive on mobile */ } } /* Login panel sizing */ .home-login { width: 60%; max-width: 660px; } /* Main panel offsets */ .app-main { margin-left: 64px; transition: margin-left 200ms ease, padding 200ms ease; min-height: 0; width: 100%; flex: 1 1 auto; } #nav-bar.e-sidebar.e-open ~ .app-main { margin-left: 250px; } #nav-bar.e-sidebar.e-dock.e-close ~ .app-main { margin-left: 64px; } .main-expanded { margin-left: 251px; } .body-pd { padding-left: 250px; } .nav_link.active, .e-list-wrapper.active { background: rgba(51, 251, 251, 0.15); border-radius: 12px; } .header_toggle { border: none; } main { padding: 0 !important; overflow-x: hidden; display: flex; flex-direction: column; min-height: 0; height: calc(100vh - 48px); top: 97px; width: 100%; flex: 1 1 auto; } main.authorized { transition: margin-left 0.3s ease; } article { flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; overflow-x: hidden; width: 100%; } @media (max-width: 1440px) { .appbar { height: 48px; } main { height: calc(100vh - 48px); min-height: 0; top: 48px; } article { height: auto; min-height: 0; } /*body { font-size: 0.9rem !important; }*/ } /* Syncfusion UI scaling */ .e-control, .e-grid, .e-accordion, .e-acrdn-item, .e-acrdn-header, .e-acrdn-header-content, .e-rowcell, .e-toolbar .e-toolbar-item .e-tbar-btn .e-tbar-btn-text, .e-control .e-btn, .e-card, .e-control .e-input, .e-control .e-dropdownbase .e-list-item { font-family: Poppins; } .e-checkbox-wrapper { pointer-events: auto; } /* Invoice HTML container */ .invoice-html-container { max-width: 850px; min-width: 750px; min-height: 650px; height: 900px; width: 700px; justify-content: center; margin-top: 2rem; margin: auto; } /* ========================================================= MOBILE FOOTER NAV (SfSidebar becomes bottom bar) ========================================================= */ /* default: footer label off */ .menu-text--footer { display: none; } /* default: sidebar label behaves as-is */ .menu-text--sidebar { display: inline; } @media (max-width: 768px) { /* On mobile footer: hide sidebar behavior label */ .menu-text--sidebar { display: none !important; } .page-content-surface { min-height: calc(100vh - var(--toolbar-height) - var(--mobile-footer-height)); margin-bottom: calc(var(--mobile-footer-height) + env(safe-area-inset-bottom)); } /* Show footer label under icon */ .menu-text--footer { display: block !important; font-size: 11px; line-height: 12px; text-align: center; white-space: nowrap; padding: 0 !important; margin-top: 4px; } #hubspot-messages-iframe-container { display: none !important; visibility: hidden !important; pointer-events: none !important; } :root { --mobile-footer-height: 48px; } .app-main { margin-left: 0; transition: margin-left 200ms ease, padding 200ms ease; min-height: calc(100vh - var(--toolbar-height) - var(--mobile-footer-height)); padding-bottom: calc(var(--mobile-footer-height) + env(safe-area-inset-bottom)); width: 100%; } article { border-radius: 0; } #nav-bar.e-sidebar.e-open ~ .app-main { margin-left: 250px; } #nav-bar.e-sidebar.e-dock.e-close ~ .app-main { margin-left: 64px; } .main-expanded { margin-left: 251px; } /* Ensure the overall shell reserves space for the footer */ .app-shell { display: flex; flex-direction: column; min-height: calc(100vh - var(--toolbar-height)); } /* Main content must shrink and not sit under footer */ /* .app-shell > main.app-main { flex: 1 1 auto; min-height: 0; padding-bottom: calc(var(--mobile-footer-height) + env(safe-area-inset-bottom)); }*/ /* Sidebar becomes a fixed footer bar */ #nav-bar.e-sidebar { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; height: var(--mobile-footer-height) !important; transform: none !important; z-index: 9999; border-right: none !important; border-top: 1px solid rgba(0,0,0,0.08) !important; } /* kill internal footer toggle on mobile */ #nav-bar .sidebar-footer, #nav-bar #header-toggle { display: none !important; } /* Make the ListView look like a bottom nav row */ #nav-bar .nav_list.e-listview { height: 100% !important; } #nav-bar .nav_list .e-content { height: 100% !important; } #nav-bar .nav_list .e-list-parent { display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: space-around !important; height: 100% !important; padding: 0 !important; margin: 0 !important; } #nav-bar .nav_list .e-list-item { flex: 1 1 20% !important; width: 20% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; display: none; /* default: hide everything */ } /* Only show the 5 allowed items. We rely on your wrapper div IDs: id="tooltip_{context.Id}" */ #nav-bar .e-list-item:has(#tooltip_newRequest), #nav-bar .e-list-item:has(#tooltip_mobile-dashboard), #nav-bar .e-list-item:has(#tooltip_mobile-requests), #nav-bar .e-list-item:has(#tooltip_mobile-calendar), #nav-bar .e-list-item:has(#tooltip_mobile-profile) { display: block !important; } /* Stack icon over label */ #nav-bar .nav_list .e-list-item .e-list-wrapper { height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 6px 2px !important; } /* Center the click target wrapper */ #nav-bar .nav_list .e-list-item .e-list-wrapper > span.flex.items-center { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* Icon sizing */ #nav-bar .nav_list .sidebar-icon { width: 32px !important; height: 32px !important; object-fit: contain !important; } #nav-bar .nav_list .e-icons.e-large { font-size: 20px !important; line-height: 1 !important; } /* Label under icon (your existing .menu-text span) */ #nav-bar .nav_list .menu-text { display: block !important; padding-left: 0 !important; margin-top: 2px !important; font-size: 11px !important; line-height: 12px !important; text-align: center !important; opacity: 0.95 !important; white-space: nowrap !important; } /* Shorten the labels on mobile (pure CSS) */ /*#tooltip_newRequest .menu-text { font-size: 11px !important; } #tooltip_newRequest .menu-text { visibility: hidden; position: relative; } #tooltip_newRequest .menu-text::after { content: "New"; visibility: visible; position: absolute; left: 0; right: 0; text-align: center; } #tooltip_mobile-dashboard .menu-text { visibility: hidden; position: relative; } #tooltip_mobile-dashboard .menu-text::after { content: "Dashboard"; visibility: visible; position: absolute; left: 0; right: 0; text-align: center; } #tooltip_mobile-requests .menu-text { visibility: hidden; position: relative; } #tooltip_mobile-requests .menu-text::after { content: "Requests"; visibility: visible; position: absolute; left: 0; right: 0; text-align: center; } #tooltip_mobile-calendar .menu-text { visibility: hidden; position: relative; } #tooltip_mobile-calendar .menu-text::after { content: "Calendar"; visibility: visible; position: absolute; left: 0; right: 0; text-align: center; } #tooltip_mobile-profile .menu-text { visibility: hidden; position: relative; } #tooltip_mobile-profile .menu-text::after { content: "Profile"; visibility: visible; position: absolute; left: 0; right: 0; text-align: center; }*/ /* On mobile we don’t want flyout tooltips/children rendering weirdly */ .e-tooltip-wrap.statcard-tip { display: none !important; } } /* Dropdown popup fix */ .e-dropdown-popup { visibility: visible !important; z-index: 1100 !important; opacity: 1 !important; } /* Workflow toolbar */ .workflow-action-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .workflow-action-item { background: none; border: none; padding: 0.75rem 1.25rem; font-size: 1rem; color: #0078D4; border-left: 2px solid transparent; border-bottom: 2px solid transparent; transition: border 0.25s ease, background-color 0.25s ease; cursor: pointer; border-radius: 0.25rem; } .workflow-action-item:hover { border-left: 2px solid #0078D4; border-bottom: 2px solid #0078D4; background-color: rgba(0, 120, 212, 0.05); } /* Appbar dropdown */ button.e-dropdown-btn.appbar-dd, button.e-btn.appbar-dd, button.e-btn.e-dropdown-btn.appbar-dd { border: none !important; background: transparent !important; font-weight: 300; padding: 0.5rem 1rem; box-shadow: none !important; } button.e-dropdown-btn.appbar-dd:hover { text-decoration: underline !important; } button.e-dropdown-btn.appbar-dd .e-caret { } button.e-dropdown-btn.appbar-dd .e-btn-icon.e-icon-left { margin-right: 0.5rem !important; } /* Fade-in long */ @keyframes fade-in-long { 0% { opacity: 0; transform: translateY(6px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .animate-fade-in-long { animation: fade-in-long 700ms ease-out both; } /* Spiral tokens already mapped to :root, plus bootstrap bridge used above */ .bg-spiral-grey { background: var(--spiral-grey); } .bg-spiral-blue { background: var(--spiral-blue); } .bg-spiral-white { background: var(--spiral-white); } .border-spiral-black { border-color: var(--spiral-black); } .text-spiral-black { color: var(--spiral-black); } .text-spiral-white { color: var(--spiral-white) !important; } /* Mobile workflow toolbar tweaks */ @media (max-width: 768px) { .workflow-action-toolbar { flex-direction: row; gap: 0.25rem; width: 100%; } .workflow-action-item { font-size: 2rem; font-weight: 600; padding: 0.5rem; } }