/* Patient portal. App.razor loads this file on every page, including the clinic app. Every rule is therefore written under .portal-shell, which only the portal renders, so none of it can match a staff screen. The staff-side portal link editor reuses some of these class names in its own scoped stylesheet; keep new rules prefixed or they will start styling that editor too. */ .portal-shell { /* Same palette, radii and shadows as the clinic dashboard, so a patient arriving from a clinic link sees one product. Blue carries actions; the logo's orange is kept for highlights only, where it has to catch the eye. */ --portal-ink: #0f172a; --portal-ink-soft: #64748b; --portal-accent: #3784e5; --portal-accent-strong: #2563eb; --portal-accent-soft: #eef4ff; --portal-highlight: #f5900c; --portal-highlight-soft: #fff7ed; --portal-line: #e8edf5; --portal-surface: #ffffff; --portal-ground: #f8fafc; --portal-danger: #ef4444; --portal-danger-soft: #fef2f2; --portal-radius: 16px; --portal-radius-sm: 10px; --portal-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .05); --portal-brand: linear-gradient(135deg, #4994ff 0%, #2563eb 100%); display: flex; flex-direction: column; min-height: 100vh; /* The brand's blurred blobs, pinned to the viewport so they sit behind the page rather than scrolling with it. Width-fitted instead of cover, because the artwork is very tall and cover would blow it up on short screens. Cards stay opaque over it. */ background-color: var(--portal-ground); background-image: url("/images/bg.svg"); background-repeat: no-repeat; background-position: top center; background-size: 100% auto; background-attachment: fixed; color: var(--portal-ink); font-size: 15px; line-height: 1.6; /* app.css sets Times New Roman and capitalize on for the clinic app. Both are wrong here: capitalize mangles sentence-case copy, and the serif face has no Arabic coverage. Reset them for the portal subtree instead of touching the global rule. */ text-transform: none; font-family: "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif; } /* Bootstrap already sets this app-wide, but the portal states it for itself so its padded, full-width blocks cannot overflow if that ever changes. */ .portal-shell, .portal-shell *, .portal-shell *::before, .portal-shell *::after { box-sizing: border-box; } .portal-shell :is(h1, h2, h3, h4) { margin: 0; line-height: 1.3; font-weight: 600; } /* ---- Header ---- */ .portal-shell .portal-header { position: sticky; top: 0; z-index: 20; background: var(--portal-surface); border-bottom: 1px solid var(--portal-line); } .portal-shell .portal-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 960px; margin: 0 auto; padding: 12px 20px; } .portal-shell .portal-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; } .portal-shell .portal-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--portal-brand); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(55, 132, 229, .25); } .portal-shell .portal-brand-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-shell .portal-header-actions { display: flex; align-items: center; gap: 8px; flex: none; } .portal-shell .portal-lang, .portal-shell .portal-signout { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--portal-line); border-radius: 999px; background: transparent; color: var(--portal-ink-soft); font-size: .82rem; cursor: pointer; } .portal-shell .portal-lang:hover, .portal-shell .portal-signout:hover { background: var(--portal-accent-soft); color: var(--portal-accent); } .portal-shell .portal-who { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; color: var(--portal-ink-soft); font-size: .85rem; } .portal-shell .portal-who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-shell .portal-nav { display: flex; gap: 4px; max-width: 960px; margin: 0 auto; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; } .portal-shell .portal-nav::-webkit-scrollbar { display: none; } .portal-shell .portal-nav-item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; color: var(--portal-ink-soft); font-size: .88rem; text-decoration: none; white-space: nowrap; } .portal-shell .portal-nav-item:hover { background: var(--portal-accent-soft); color: var(--portal-accent); } .portal-shell .portal-nav-item.is-active { background: var(--portal-accent); color: #fff; } /* ---- Main ---- */ .portal-shell .portal-main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 24px 20px 48px; } .portal-shell .portal-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 20px 30px; color: var(--portal-ink-soft); font-size: .8rem; text-align: center; } .portal-shell .portal-footer-clinic { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } /* Marks the portal as SmartRx without competing with the clinic's own name above it. */ .portal-shell .portal-powered { display: inline-flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--portal-line); width: min(260px, 70%); justify-content: center; color: #94a3b8; font-size: .72rem; text-decoration: none; } .portal-shell .portal-powered:hover { color: var(--portal-ink-soft); } .portal-shell .portal-powered-logo { height: 17px; width: auto; display: block; } .portal-shell .portal-footer a { color: inherit; } .portal-shell .portal-footer-sep { margin: 0 6px; } /* ---- Blocks ---- */ .portal-shell .portal-card { padding: 20px; background: var(--portal-surface); border: 1px solid var(--portal-line); border-radius: var(--portal-radius); box-shadow: var(--portal-shadow); } .portal-shell .portal-stack { display: flex; flex-direction: column; gap: 16px; } .portal-shell .portal-page-title { margin-bottom: 4px; font-size: 1.4rem; } .portal-shell .portal-page-lead { margin: 0 0 20px; color: var(--portal-ink-soft); } .portal-shell .portal-section-title { margin-bottom: 10px; font-size: 1.05rem; } /* ---- Hero, landing ---- */ .portal-shell .portal-hero { padding: 40px 24px 30px; margin-bottom: 4px; text-align: center; background: radial-gradient(120% 100% at 50% 0%, #eef4ff 0%, rgba(238, 244, 255, 0) 70%); border-radius: var(--portal-radius); } .portal-shell .portal-hero-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 20px; background: var(--portal-brand); color: #fff; font-size: 1.65rem; font-weight: 700; box-shadow: 0 10px 24px rgba(55, 132, 229, .28); } .portal-shell .portal-hero h1 { font-size: 1.6rem; } .portal-shell .portal-hero-lead { max-width: 46ch; margin: 10px auto 0; color: var(--portal-ink-soft); } .portal-shell .portal-hero-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; color: var(--portal-ink-soft); font-size: .88rem; } .portal-shell .portal-feature-list { display: grid; gap: 10px; margin: 24px 0; } .portal-shell .portal-feature { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--portal-surface); border: 1px solid var(--portal-line); border-radius: var(--portal-radius); } .portal-shell .portal-feature-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--portal-accent-soft); color: var(--portal-accent); font-size: 1.05rem; } .portal-shell .portal-feature h3 { font-size: .95rem; } .portal-shell .portal-feature p { margin: 2px 0 0; color: var(--portal-ink-soft); font-size: .85rem; } /* ---- Forms ---- */ .portal-shell .portal-form { display: flex; flex-direction: column; gap: 14px; } .portal-shell .portal-field { display: flex; flex-direction: column; gap: 6px; } .portal-shell .portal-field > label { color: var(--portal-ink-soft); font-size: .82rem; font-weight: 500; } .portal-shell .portal-input, .portal-shell .portal-select, .portal-shell .portal-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--portal-line); border-radius: 10px; background: var(--portal-surface); color: var(--portal-ink); font: inherit; } .portal-shell .portal-input:focus, .portal-shell .portal-select:focus, .portal-shell .portal-textarea:focus { outline: 2px solid var(--portal-accent-soft); border-color: var(--portal-accent); } .portal-shell .portal-textarea { min-height: 88px; resize: vertical; } .portal-shell .portal-phone-row { display: flex; gap: 8px; } .portal-shell .portal-phone-row .portal-select { flex: 0 0 auto; width: auto; min-width: 104px; } .portal-shell .portal-phone-row .portal-input { flex: 1; direction: ltr; text-align: start; } .portal-shell .portal-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .portal-shell .portal-hint { color: var(--portal-ink-soft); font-size: .78rem; } .portal-shell .portal-check { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; } .portal-shell .portal-check input { margin-top: 4px; flex: none; } /* ---- Buttons ---- */ .portal-shell .portal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border: 1px solid transparent; border-radius: 10px; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; } .portal-shell .portal-btn:disabled { opacity: .55; cursor: not-allowed; } .portal-shell .portal-btn-primary { background: var(--portal-accent); color: #fff; box-shadow: 0 2px 8px rgba(55, 132, 229, .25); } .portal-shell .portal-btn-primary:hover:not(:disabled) { background: var(--portal-accent-strong); } .portal-shell .portal-btn-ghost:hover:not(:disabled) { border-color: var(--portal-accent); color: var(--portal-accent-strong); } .portal-shell .portal-btn:focus-visible, .portal-shell .portal-input:focus-visible, .portal-shell .portal-item:focus-visible, .portal-shell .portal-slot:focus-visible, .portal-shell .portal-day:focus-visible { outline: 2px solid var(--portal-accent-strong); outline-offset: 2px; } .portal-shell .portal-btn-ghost { background: var(--portal-surface); border-color: var(--portal-line); color: var(--portal-ink); } .portal-shell .portal-btn-link { padding: 0; background: none; border: none; color: var(--portal-accent); text-decoration: underline; cursor: pointer; } .portal-shell .portal-btn-block { width: 100%; } .portal-shell .portal-btn-row { display: flex; gap: 10px; flex-wrap: wrap; } /* ---- Messages ---- */ .portal-shell .portal-alert { padding: 11px 14px; border-radius: 10px; font-size: .87rem; } .portal-shell .portal-alert-error { background: #fdecec; border: 1px solid #f3c9c9; color: #8f2b2b; } .portal-shell .portal-alert-info { background: var(--portal-accent-soft); border: 1px solid #cfe3dd; color: var(--portal-accent); } .portal-shell .portal-alert-warn { background: #fff7ed; border: 1px solid #fcd9b6; color: #8a4b08; } .portal-shell .portal-empty { padding: 36px 20px; color: var(--portal-ink-soft); text-align: center; } .portal-shell .portal-empty-icon { display: block; margin-bottom: 8px; font-size: 1.8rem; opacity: .6; } .portal-shell .portal-loading { padding: 48px 20px; color: var(--portal-ink-soft); text-align: center; } /* ---- Lists ---- */ .portal-shell .portal-list { display: grid; gap: 10px; } .portal-shell .portal-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: var(--portal-surface); border: 1px solid var(--portal-line); border-radius: var(--portal-radius); text-align: start; color: inherit; text-decoration: none; font: inherit; cursor: pointer; } .portal-shell .portal-item:hover { border-color: var(--portal-accent); box-shadow: var(--portal-shadow); transform: translateY(-1px); } .portal-shell .portal-item, .portal-shell .portal-feature, .portal-shell .portal-btn, .portal-shell .portal-slot, .portal-shell .portal-day { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } @media (prefers-reduced-motion: reduce) { .portal-shell * { transition: none !important; transform: none !important; } } .portal-shell .portal-item.is-selected { border-color: var(--portal-accent); box-shadow: 0 0 0 2px var(--portal-accent-soft); } .portal-shell .portal-item-body { flex: 1; min-width: 0; } .portal-shell .portal-item-title { font-weight: 600; } .portal-shell .portal-item-sub { color: var(--portal-ink-soft); font-size: .84rem; } .portal-shell .portal-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--portal-accent-soft); color: var(--portal-accent); font-weight: 600; } .portal-shell .portal-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--portal-accent-soft); color: var(--portal-accent); font-size: .74rem; font-weight: 600; white-space: nowrap; } .portal-shell .portal-tag-muted { background: #f1f5f9; color: var(--portal-ink-soft); } /* The logo's orange, used only where a patient must notice something: a booked slot, a result that has arrived. */ .portal-shell .portal-tag-highlight { background: var(--portal-highlight-soft); color: #b45309; } /* ---- Booking ---- */ .portal-shell .portal-booking-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .portal-shell .portal-booking-head > i { display: grid; place-items: center; width: 58px; height: 58px; flex: none; border-radius: 18px; background: var(--portal-accent-soft); color: var(--portal-accent); font-size: 1.6rem; } .portal-shell .portal-eyebrow { display: block; margin-bottom: 3px; color: var(--portal-accent); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .portal-shell .portal-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 12px 16px; border: 1px solid var(--portal-line); border-radius: 12px; background: var(--portal-surface); font-size: .8rem; color: var(--portal-ink-soft); flex-wrap: wrap; } .portal-shell .portal-step { display: inline-flex; align-items: center; gap: 6px; } .portal-shell .portal-step-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eceeed; font-size: .72rem; font-weight: 600; } .portal-shell .portal-step.is-active { color: var(--portal-accent); font-weight: 700; } .portal-shell .portal-step.is-active .portal-step-num { box-shadow: 0 0 0 4px var(--portal-accent-soft); } .portal-shell .portal-book-filter { background: linear-gradient(135deg, var(--portal-surface), var(--portal-accent-soft)); } .portal-shell .portal-doctor-card { min-height: 82px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .portal-shell .portal-doctor-card:hover { transform: translateY(-2px); box-shadow: var(--portal-shadow); } .portal-shell .portal-selected-doctor { display: flex; align-items: center; } .portal-shell .portal-selected-doctor .portal-visit-head { width: 100%; } .portal-shell .portal-time-card { border-top: 3px solid var(--portal-accent); } .portal-shell .portal-step.is-active { color: var(--portal-accent); font-weight: 600; } .portal-shell .portal-step.is-active .portal-step-num { background: var(--portal-accent); color: #fff; } .portal-shell .portal-step-sep { opacity: .4; } .portal-shell .portal-day-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .portal-shell .portal-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 74px; padding: 8px 10px; border: 1px solid var(--portal-line); border-radius: 10px; background: var(--portal-surface); font: inherit; cursor: pointer; white-space: nowrap; } .portal-shell .portal-day.is-active { background: var(--portal-accent); border-color: var(--portal-accent); color: #fff; } .portal-shell .portal-day-name { font-size: .75rem; opacity: .8; } .portal-shell .portal-day-num { font-weight: 600; } .portal-shell .portal-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 14px; } .portal-shell .portal-slot { padding: 9px 6px; border: 1px solid var(--portal-line); border-radius: 9px; background: var(--portal-surface); font: inherit; font-size: .88rem; cursor: pointer; direction: ltr; } .portal-shell .portal-slot.is-active { background: var(--portal-accent); border-color: var(--portal-accent); color: #fff; } .portal-shell .portal-summary { display: grid; gap: 8px; margin: 4px 0 16px; } .portal-shell .portal-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: .9rem; } .portal-shell .portal-summary-row dt { color: var(--portal-ink-soft); margin: 0; } .portal-shell .portal-summary-row dd { margin: 0; font-weight: 500; text-align: end; } .portal-shell .portal-summary-total { padding-top: 10px; border-top: 1px solid var(--portal-line); font-size: 1rem; } .portal-shell .portal-summary-total dd { font-weight: 700; color: var(--portal-accent); } .portal-shell .portal-review-card { max-width: 700px; margin-inline: auto; border-top: 4px solid var(--portal-accent); } .portal-shell .portal-review-actions { margin-top: 10px; } .portal-shell .portal-btn-grow { flex: 1; } .portal-shell .portal-booking-done { max-width: 620px; margin: 34px auto 0; padding-block: 42px; } .portal-shell .portal-booking-done .portal-empty-icon { color: var(--portal-accent); } .portal-shell .portal-done-actions { justify-content: center; margin-top: 12px; } /* ---- Visits and profile ---- */ .portal-shell .portal-visit-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .portal-shell .portal-visit-date { font-weight: 600; } .portal-shell .portal-detail-list { margin: 10px 0 0; padding-inline-start: 18px; color: var(--portal-ink-soft); font-size: .86rem; } .portal-shell .portal-profile-hero { margin-bottom: 24px; overflow: hidden; border-top: 4px solid var(--portal-accent); } .portal-shell .portal-profile-identity { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--portal-line); } .portal-shell .portal-profile-avatar { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 20px; background: var(--portal-accent-soft); color: var(--portal-accent); font-size: 1.8rem; } .portal-shell .portal-profile-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 0; } .portal-shell .portal-profile-fact { min-width: 0; padding: 12px; border-radius: 10px; background: var(--portal-ground); } .portal-shell .portal-profile-fact dt { color: var(--portal-ink-soft); font-size: .75rem; } .portal-shell .portal-profile-fact dd { margin: 2px 0 0; overflow-wrap: anywhere; font-weight: 600; } .portal-shell .portal-section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; } .portal-shell .portal-medical-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; } .portal-shell .portal-medical-grid .portal-accordion + .portal-accordion { margin-top: 0; } .portal-shell .portal-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .portal-shell .portal-accordion > summary > span:first-child { display: inline-flex; align-items: center; gap: 9px; } .portal-shell .portal-accordion > summary i { color: var(--portal-accent); } .portal-shell .portal-count { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding-inline: 7px; border-radius: 999px; background: var(--portal-accent-soft); color: var(--portal-accent); font-size: .74rem; } .portal-shell .portal-profile-note { margin-top: 20px; padding: 12px 14px; border-radius: 10px; background: var(--portal-accent-soft); } .portal-shell .portal-accordion + .portal-accordion { margin-top: 10px; } .portal-shell .portal-accordion > summary { padding: 14px 16px; background: var(--portal-surface); border: 1px solid var(--portal-line); border-radius: var(--portal-radius); font-weight: 600; cursor: pointer; list-style: none; } .portal-shell .portal-accordion > summary::-webkit-details-marker { display: none; } .portal-shell .portal-accordion[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; } .portal-shell .portal-accordion-body { padding: 4px 16px 16px; background: var(--portal-surface); border: 1px solid var(--portal-line); border-top: none; border-end-start-radius: var(--portal-radius); border-end-end-radius: var(--portal-radius); } .portal-shell .portal-receipt-frame { width: 100%; min-height: 60vh; border: 1px solid var(--portal-line); border-radius: 10px; background: #fff; } .portal-shell .portal-modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(22, 48, 42, .45); } .portal-shell .portal-modal { display: flex; flex-direction: column; gap: 12px; width: min(860px, 100%); max-height: 90vh; padding: 18px; background: var(--portal-surface); border-radius: var(--portal-radius); overflow: auto; } .portal-shell .portal-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ---- OTP ---- */ .portal-shell .portal-otp-boxes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(52px, 64px)); justify-content: center; gap: 10px; direction: ltr; } .portal-shell .portal-otp-native { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; opacity: .01; cursor: text; } .portal-shell .portal-otp-box { display: grid; place-items: center; height: 62px; border: 1px solid var(--portal-line); border-radius: 12px; background: var(--portal-surface); color: var(--portal-ink); font-size: 1.45rem; font-weight: 700; transition: border-color .15s ease, box-shadow .15s ease; } .portal-shell .portal-otp-boxes:focus-within .portal-otp-box.is-current { border-color: var(--portal-accent); box-shadow: 0 0 0 3px var(--portal-accent-soft); } .portal-shell .portal-password-wrap { position: relative; } .portal-shell .portal-password-wrap .portal-input { padding-inline-end: 48px; } .portal-shell .portal-password-toggle { position: absolute; inset-inline-end: 6px; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 9px; background: transparent; color: var(--portal-ink-soft); cursor: pointer; } .portal-shell .portal-password-toggle:hover { background: var(--portal-accent-soft); color: var(--portal-accent); } .portal-shell .portal-selected-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px; border-radius: 12px; background: var(--portal-accent-soft); } .portal-shell .portal-center-link { display: block; margin: 14px auto 0; } .portal-shell .portal-mt-14 { margin-top: 14px; } .portal-shell .portal-match-list, .portal-shell .portal-auth-patients { margin-top: 16px; } .portal-shell .portal-resend { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--portal-ink-soft); } /* ---- Narrow screens ---- */ @media (max-width: 640px) { .portal-shell .portal-main { padding: 16px 14px 40px; } .portal-shell .portal-header-inner { padding: 10px 14px; } .portal-shell .portal-who-name { display: none; } .portal-shell .portal-signout span { display: none; } .portal-shell .portal-field-row { grid-template-columns: 1fr; } .portal-shell .portal-hero { padding: 26px 16px 20px; } .portal-shell .portal-hero h1 { font-size: 1.35rem; } .portal-shell .portal-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-shell .portal-medical-grid { grid-template-columns: 1fr; } .portal-shell .portal-booking-head > i { width: 48px; height: 48px; border-radius: 14px; font-size: 1.3rem; } .portal-shell .portal-steps { padding: 10px 12px; } .portal-shell .portal-step-sep { display: none; } .portal-shell .portal-otp-boxes { grid-template-columns: repeat(4, minmax(46px, 58px)); gap: 8px; } .portal-shell .portal-otp-box { height: 56px; } }