:root {
    color-scheme: dark;
    font-family: Vazirmatn, Tahoma, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    --apx-accent: #ffc928;
    --apx-bg: #111318;
    --apx-surface: #191c23;
    --apx-surface-raised: #20242d;
    --apx-line: #2b303a;
    --apx-text: #f3f4f6;
    --apx-muted: #a5aab5;
    --apx-mint: #42d6c5;
}

* { box-sizing: border-box; }

html, body, #app {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--apx-bg);
}

body {
    color: var(--apx-text);
    font-family: Vazirmatn, Tahoma, sans-serif;
}

button, input, textarea, select { font: inherit; }

.portal-shell {
    min-height: 100vh;
    color: var(--apx-text);
    background: var(--apx-bg);
}

.portal-shell .mud-layout { min-height: 100vh; }

/* MudBlazor positions outlined labels from the left by default; mirror them for Persian RTL pages. */
[dir="rtl"] .mud-input-control-input-container > .mud-input-label-inputcontrol {
    right: 0;
    left: auto;
    transform-origin: top right;
    text-align: right;
    direction: rtl;
}
[dir="rtl"] .mud-input-label-outlined { transform: translate(-14px, 20px) scale(1); }
[dir="rtl"] .mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(-14px, 12px) scale(1); }
[dir="rtl"] .mud-input-control .mud-input-control-input-container > label.mud-input-label.mud-input-label-outlined.mud-input-label-inputcontrol.mud-input-label-shrink { transform: translate(-18px, -6px) scale(.75); }

/* Explicit LTR field wrapper keeps the label on the same side as the input inside RTL pages. */
.mud-ltr-field { width: 100%; direction: ltr; text-align: left; }
.mud-ltr-field input, .mud-ltr-field textarea { direction: ltr !important; text-align: left !important; }
[dir="rtl"] .mud-ltr-field .mud-input-control-input-container > label.mud-input-label-inputcontrol {
    right: auto !important;
    left: 0 !important;
    transform-origin: top left;
    text-align: left !important;
    direction: ltr !important;
}
/* LTR labels inside the RTL portal must stay in the outlined notch, even while empty.
   Keep this rule unconditional: an !important resting transform would override MudBlazor's shrink state. */
[dir="rtl"] .mud-ltr-field .mud-input-label-outlined {
    max-width: calc((100% - 14px) / .75) !important;
    transform: translate(14px, -6px) scale(.75) !important;
    transform-origin: top left !important;
}

.portal-appbar {
    height: 72px;
    padding-inline: 20px;
    border-bottom: 1px solid rgb(255 255 255 / 5%);
    background: rgb(17 19 24 / 90%) !important;
    backdrop-filter: blur(16px);
}

.portal-appbar .mud-icon-button { color: var(--apx-muted); }
.portal-appbar .mud-icon-button:hover { color: var(--apx-accent); background: rgb(255 255 255 / 5%); }
.brand-logo { display: block; flex: 0 1 auto; width: 166px; max-width: 100%; height: auto; object-fit: contain; }
.appbar-title { color: var(--apx-text); font-size: 14px; font-weight: 600; }

.portal-drawer {
    border-left: 1px solid var(--apx-line);
    background: #151820 !important;
}
.portal-drawer .mud-drawer-content { display: flex; flex-direction: column; overflow-y: auto; padding: 14px 14px 10px; scrollbar-width: none; }
.portal-drawer .mud-drawer-content::-webkit-scrollbar { display: none; }
.drawer-brand { display: flex; align-items: center; justify-content: center; padding: 8px 9px 15px; }
.navigation-heading { padding: 4px 12px 6px; color: #757c88; }
.navigation-heading .mud-typography { font-size: 10px; font-weight: 700; letter-spacing: .7px; }
.navigation-heading-spaced { margin-top: 12px; }
.portal-nav { flex: 1 0 auto; overflow: visible; }
.portal-nav .mud-nav-link {
    min-height: 40px;
    margin-block: 1px;
    border-radius: 10px;
    color: #abb1bc;
    font-size: 13px;
}
.portal-nav .mud-nav-link .mud-nav-link-icon { color: #858d9b; }
.portal-nav .mud-nav-link.active {
    color: var(--apx-accent);
    background: color-mix(in srgb, var(--apx-accent) 10%, transparent);
}
.portal-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--apx-accent); }
.portal-nav .mud-nav-link.mud-disabled { opacity: .55; }
.drawer-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 14px 8px 2px; color: var(--apx-muted); }
.environment-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--apx-mint); box-shadow: 0 0 12px rgb(66 214 197 / 50%); }
.portal-main { min-height: calc(100vh - 72px); background: transparent; }
.portal-content { width: min(1440px, 100%); margin-inline: auto; padding: clamp(20px, 4vw, 52px); }

.welcome-panel {
    position: relative;
    display: grid;
    min-height: 430px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
    align-items: center;
    overflow: hidden;
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid rgb(255 255 255 / 6%);
    border-radius: 22px;
    background: linear-gradient(130deg, #1b1f27, #171a20 66%);
    box-shadow: 0 24px 70px rgb(0 0 0 / 18%);
}
.welcome-copy { position: relative; z-index: 2; max-width: 600px; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; color: var(--apx-accent); font: 700 10px/1.5 Arial, sans-serif; letter-spacing: 1.7px; }
.eyebrow-mark { width: 22px; height: 2px; border-radius: 4px; background: var(--apx-accent); }
.welcome-title { margin: 0 0 16px !important; color: #f5f5f2; font-size: clamp(30px, 4vw, 48px) !important; font-weight: 700 !important; line-height: 1.45 !important; }
.welcome-description { max-width: 520px; color: #aeb4bf; line-height: 2 !important; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 27px; }
.welcome-actions .mud-button-filled { min-height: 44px; padding-inline: 20px; color: #17191c; font-weight: 700; }
.welcome-actions .mud-button-text { color: #c2c6ce; }
.welcome-note { display: flex; align-items: center; gap: 8px; margin-top: 30px; color: var(--apx-muted); }
.welcome-note .mud-typography { color: var(--apx-muted); }

.welcome-visual { position: relative; width: min(100%, 440px); aspect-ratio: 1.15; justify-self: center; }
.visual-grid { position: absolute; inset: 8%; opacity: .3; background-image: radial-gradient(#68707d 1px, transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(ellipse, #000, transparent 72%); }
.visual-orbit { position: absolute; inset: 13%; border: 1px solid rgb(255 255 255 / 7%); border-radius: 50%; transform: rotate(-26deg) scaleY(.62); }
.orbit-two { inset: 20% 4%; border-color: color-mix(in srgb, var(--apx-accent) 24%, transparent); transform: rotate(28deg) scaleY(.53); }
.visual-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; width: 158px; height: 148px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--apx-accent) 35%, #393d46); border-radius: 22px; background: linear-gradient(145deg, #282d36, #1b1f26); box-shadow: 0 22px 60px rgb(0 0 0 / 45%), inset 0 1px rgb(255 255 255 / 8%); transform: translate(-50%, -50%) rotate(-8deg); }
.core-top { position: absolute; top: 13px; left: 15px; display: flex; gap: 4px; }
.core-top span { width: 5px; height: 5px; border-radius: 50%; background: #626977; }
.core-top span:first-child { background: var(--apx-accent); }
.core-symbol { color: var(--apx-accent); font: 700 34px/1.2 Consolas, monospace; text-shadow: 0 0 22px color-mix(in srgb, var(--apx-accent) 35%, transparent); }
.core-caption { margin-top: 8px; color: #969daa; font: 700 9px/1 Arial, sans-serif; letter-spacing: 2px; }
.visual-node { position: absolute; z-index: 3; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid #383e48; border-radius: 15px; color: var(--apx-mint); background: #20252d; box-shadow: 0 12px 30px rgb(0 0 0 / 30%); }
.visual-node .mud-icon-root { font-size: 21px; }
.node-one { top: 20%; left: 20%; }.node-two { top: 23%; right: 18%; color: var(--apx-accent); }.node-three { right: 24%; bottom: 16%; color: #a3aaff; }
.visual-line { position: absolute; z-index: 1; height: 1px; transform-origin: right center; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--apx-accent) 55%, transparent)); }
.line-one { top: 36%; left: 29%; width: 22%; transform: rotate(33deg); }.line-two { top: 39%; right: 28%; width: 21%; transform: rotate(-34deg); }.line-three { right: 32%; bottom: 29%; width: 20%; transform: rotate(35deg); }

.starter-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.starter-item { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 17px; border: 1px solid rgb(255 255 255 / 5%); border-radius: 14px; background: #181b22; }
.starter-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--apx-accent); background: color-mix(in srgb, var(--apx-accent) 11%, transparent); }
.starter-item .mud-typography-subtitle2 { color: var(--apx-text); }
.starter-item .mud-typography-caption { color: var(--apx-muted); }
.starter-arrow { margin-inline-start: auto; color: #707784; font-size: 18px; }

.theme-control { position: relative; }
.theme-popover { z-index: 1400; }
.theme-panel { width: 300px; padding: 18px; border: 1px solid var(--apx-line); border-radius: 16px !important; background: #1b1f27 !important; }
.theme-panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.theme-panel-title { color: var(--apx-text); font-weight: 600; }
.accent-preview { width: 24px; height: 24px; border: 2px solid rgb(255 255 255 / 80%); border-radius: 50%; box-shadow: 0 0 0 3px rgb(255 255 255 / 8%); }
.accent-picker .mud-input-control { display: none; }
.accent-picker .mud-picker { width: 100%; background: transparent; }
.accent-picker .mud-picker-container { width: 100%; }
.theme-presets { display: flex; justify-content: space-between; padding: 14px 4px 9px; }
.preset-swatch { width: 27px; height: 27px; min-width: 27px; border: 2px solid rgb(255 255 255 / 75%); border-radius: 50%; box-shadow: 0 0 0 2px transparent; }
.preset-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--apx-accent); }
.theme-panel-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--apx-line); padding-top: 8px; }
.accent-hex { direction: ltr; color: var(--apx-muted); font-family: Consolas, monospace; }

@media (max-width: 1023px) {
    .portal-content { padding: 24px; }
    .welcome-panel { min-height: 390px; grid-template-columns: 1.1fr .8fr; padding: 34px; }
    .welcome-visual { width: 100%; }
}

@media (max-width: 767px) {
    .portal-appbar { height: 62px; padding-inline: 10px; }
    .appbar-title { font-size: 12px; }
    .portal-main { min-height: calc(100vh - 62px); }
    .portal-content { padding: 14px; }
    .welcome-panel { min-height: auto; grid-template-columns: 1fr; gap: 12px; padding: 25px 22px 14px; border-radius: 18px; }
    .welcome-title { margin-bottom: 10px !important; font-size: 30px !important; }
    .welcome-description { font-size: 13px; }
    .welcome-actions { gap: 4px; margin-top: 18px; }
    .welcome-actions .mud-button { padding-inline: 10px; font-size: 12px; }
    .welcome-note { margin-top: 18px; }
    .welcome-visual { width: min(100%, 310px); margin-top: 4px; }
    .visual-core { width: 125px; height: 118px; border-radius: 18px; }
    .visual-node { width: 40px; height: 40px; border-radius: 12px; }
    .starter-strip { grid-template-columns: 1fr; gap: 9px; margin-top: 10px; }
    .starter-item { padding: 13px; }
    .theme-panel { width: min(300px, calc(100vw - 24px)); }
}

@media (max-height: 700px) {
    .portal-drawer .mud-drawer-content { padding-block: 8px 6px; }
    .drawer-brand { padding-block: 4px 8px; }
    .drawer-brand-logo { width: 142px; }
    .navigation-heading-spaced { margin-top: 5px; }
    .portal-nav .mud-nav-link { min-height: 36px; }
    .drawer-footer { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .welcome-panel, .starter-item, .mud-nav-link, .mud-icon-button { transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
    .starter-item:hover { border-color: color-mix(in srgb, var(--apx-accent) 28%, var(--apx-line)); transform: translateY(-2px); }
}

h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #ff7979; }
.blazor-error-boundary { background: #a32232; padding: 1rem 1rem 1rem 3.7rem; color: white; }
.blazor-error-boundary::after { content: "خطایی رخ داده است."; }

/* Portal pages */
.portal-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.portal-page-heading .eyebrow { margin-bottom: 8px; }
.portal-page-title { margin: 0 0 5px !important; color: var(--apx-text); font-weight: 700 !important; }
.portal-page-subtitle { color: var(--apx-muted); line-height: 1.9 !important; }
.demo-banner { margin-bottom: 20px; border-color: color-mix(in srgb, var(--apx-accent) 28%, var(--apx-line)) !important; background: color-mix(in srgb, var(--apx-accent) 5%, var(--apx-surface)) !important; }
.portal-loading { display: flex; min-height: 200px; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--apx-muted); }
.portal-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.billing-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal-metric-card { display: flex; min-width: 0; min-height: 112px; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--apx-line); border-radius: 15px !important; background: linear-gradient(145deg, #1b1f27, #171a20) !important; }
.metric-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, var(--apx-accent) 28%, transparent); border-radius: 13px; color: var(--apx-accent); background: color-mix(in srgb, var(--apx-accent) 9%, transparent); }
.metric-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.metric-copy .mud-typography-caption, .metric-support { color: var(--apx-muted); }
.metric-copy .mud-typography-h4 { overflow-wrap: anywhere; color: var(--apx-text); font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; }
.metric-copy small { color: var(--apx-muted); font-size: 11px; }
.metric-support { margin-inline-start: auto; text-align: end; font-size: 10px; }
.portal-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, .8fr); gap: 16px; margin-bottom: 18px; }
.portal-panel { min-width: 0; padding: 22px; border: 1px solid var(--apx-line); border-radius: 16px !important; background: color-mix(in srgb, var(--apx-surface) 94%, transparent) !important; }
.portal-panel + .portal-panel { margin-top: 16px; }
.portal-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.portal-panel-heading > div { min-width: 0; }
.portal-panel-heading .mud-typography-h2 { color: var(--apx-text); font-size: 16px; font-weight: 650; }
.portal-panel-heading .mud-typography-caption { display: block; margin-top: 4px; color: var(--apx-muted); }
.quick-action-list { display: grid; gap: 10px; }
.quick-action-list .mud-button { justify-content: flex-start; min-height: 44px; }
.recent-calls-panel .mud-table, .invoices-panel .mud-table { background: transparent; }
.portal-data-table .mud-table-container { background: transparent; }
.portal-data-table .mud-table-head .mud-table-cell { color: var(--apx-muted); font-size: 11px; white-space: nowrap; }
.portal-data-table .mud-table-body .mud-table-cell { color: var(--apx-text); border-color: var(--apx-line); font-size: 12px; }
.portal-data-table .mud-table-row:hover { background: color-mix(in srgb, var(--apx-accent) 4%, transparent); }
.portal-data-table code, .key-prefix { color: var(--apx-mint); font: 11px/1.7 Consolas, monospace; }
.portal-empty-state { margin-top: 18px; }
.key-create-panel { margin-bottom: 18px; }
.key-create-form { display: grid; grid-template-columns: minmax(200px, 1fr) auto; align-items: start; gap: 12px; }
.key-create-form .mud-button { min-height: 54px; }
.key-create-panel .validation-message { display: block; margin-top: 6px; }
.key-created-alert { margin-bottom: 18px; }
.key-created-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.new-key-secret { display: block; margin-top: 10px; padding: 10px 12px; overflow-wrap: anywhere; border: 1px solid var(--apx-line); border-radius: 8px; color: var(--apx-mint); background: #111318; font: 12px/1.7 Consolas, monospace; }
.key-created-date { color: var(--apx-muted); }
.revoke-confirmation { color: #ff8c8c; font-size: 11px; }
.usage-quota-panel { margin-bottom: 18px; }
.usage-quota-panel .portal-panel-heading strong { color: var(--apx-accent); font-size: 19px; }
.quota-labels { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; color: var(--apx-muted); font-size: 11px; }
.usage-detail-grid { grid-template-columns: minmax(0, 1.4fr) minmax(290px, 1fr); }
.service-usage-list { display: grid; gap: 18px; }
.service-usage-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.service-usage-heading .mud-typography { color: var(--apx-text); }
.service-usage-heading strong { color: var(--apx-accent); font-size: 12px; }
.service-usage-row code { display: block; margin-top: 5px; color: var(--apx-muted); font: 10px/1.5 Consolas, monospace; }
.usage-billing-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; padding: 14px 18px; border: 1px solid var(--apx-line); border-radius: 12px; background: var(--apx-surface); }
.usage-billing-link .mud-typography { color: var(--apx-muted); }
.invoice-status-filter { width: 180px; }
.invoice-detail-panel { margin-top: 16px; }
.invoice-detail-summary { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin-bottom: 14px; color: var(--apx-muted); font-size: 12px; }
.invoice-detail-summary strong { color: var(--apx-text); }
.api-lab-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.api-lab-layout .portal-panel { height: 100%; }
.api-lab-request > .mud-input-control, .api-lab-request > .mud-ltr-field { margin-bottom: 14px; }
.api-lab-url { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 11px 12px; border: 1px solid var(--apx-line); border-radius: 10px; background: #12151b; }
.api-lab-url code { min-width: 0; overflow-wrap: anywhere; color: var(--apx-text); font: 11px/1.8 Consolas, monospace; }
.api-lab-body textarea { direction: ltr; text-align: left; font: 12px/1.8 Consolas, monospace; }
.api-lab-request-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 16px; }
.api-lab-empty { display: grid; min-height: 260px; place-content: center; justify-items: center; gap: 12px; color: var(--apx-muted); }
.api-lab-empty .mud-icon-root { color: var(--apx-accent); font-size: 34px; }
.api-result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.api-result-meta .mud-typography { margin-inline-start: auto; color: var(--apx-muted); }
.api-result-body { min-height: 200px; max-height: 560px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-layout { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.profile-summary-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.profile-summary-card .mud-typography-h2 { color: var(--apx-text); font-size: 18px; }
.profile-avatar { display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid color-mix(in srgb, var(--apx-accent) 35%, var(--apx-line)); border-radius: 24px; color: var(--apx-accent); background: color-mix(in srgb, var(--apx-accent) 10%, var(--apx-surface)); }
.profile-avatar .mud-icon-root { font-size: 38px; }
.profile-email { color: var(--apx-muted); }
.profile-status { margin-block: 2px 10px; }
.profile-details-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; }
.profile-details-list > div { padding: 14px 0; border-bottom: 1px solid var(--apx-line); }
.profile-details-list dt { margin-bottom: 6px; color: var(--apx-muted); font-size: 11px; }
.profile-details-list dd { margin: 0; overflow-wrap: anywhere; color: var(--apx-text); font-size: 13px; }
.profile-details-card > .mud-typography-body2 { color: var(--apx-muted); line-height: 1.9; }

@media (max-width: 1023px) {
    .portal-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .portal-dashboard-grid, .usage-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .api-lab-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .portal-page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
    .portal-page-heading .mud-chip { align-self: flex-start; }
    .portal-panel { padding: 16px; }
    .portal-panel-heading { align-items: flex-start; }
    .portal-panel-heading .mud-button { flex: 0 0 auto; }
    .portal-metric-grid { gap: 10px; }
    .portal-metric-card { min-height: 100px; gap: 9px; padding: 12px; }
    .metric-icon { width: 34px; height: 34px; border-radius: 10px; }
    .metric-copy .mud-typography-h4 { font-size: 17px; }
    .metric-support { font-size: 9px; }
    .key-create-form { grid-template-columns: minmax(0, 1fr); }
    .key-create-form .mud-button { justify-self: start; }
    .key-created-content { align-items: flex-start; flex-direction: column; }
    .invoice-status-filter { width: 135px; }
    .api-lab-request-actions { flex-direction: column-reverse; }
    .api-lab-request-actions .mud-button { width: 100%; }
    .profile-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .portal-metric-grid, .billing-metrics-grid { grid-template-columns: minmax(0, 1fr); }
    .portal-metric-card { min-height: 86px; }
    .portal-page-title { font-size: 24px !important; }
    .portal-page-subtitle { font-size: 12px !important; }
    .quota-labels { align-items: flex-start; flex-direction: column; gap: 3px; }
    .usage-billing-link { align-items: flex-start; flex-direction: column; }
    .profile-details-list { grid-template-columns: minmax(0, 1fr); }
    .portal-panel-heading { flex-wrap: wrap; }
}