AdityaandClaude Opus 4.7
12bfc81219
Adds dialog components and feature modules for RBI/banking compliance, KYC, and accounting reports. Wires them into the shell menu (RBI, General Ledger, CKYC Mgmt, Others, Insurance) and dashboard cards. Dialog components (lazy-loaded MatDialog): - PSL Returns (Form III) — dashboard card + RBI menu - ALM Statement of Structural Liquidity (Form ALM-1) — RBI menu - CIMS / XBRL Returns (OSS-2 / PSA / RAL / RCP-UCB) — RBI menu, shared dialog with form-pill switcher - CIC DQR (CIBIL / Experian / Equifax / CRIF, 72-col TUDF) — Others menu + dashboard card - CKYC Compliance Reports (Re-KYC / Risk Review / CERSAI) — CKYC Mgmt - Accounting Reports (P&L / Balance Sheet / Comparative B/S / GL DR/CR / Misc Expense Ledger) — General Ledger menu Feature modules (Route.withShell): - DEAF (/deaf): Form I, Form II, Annex 4, accounts register - DICGC (/dicgc): Slab Report, SAHAY Depositor List - FIU-IND (/fiu): FINnet 2.0 Statement of Financial Transactions - SFT (/sft): Income Tax Section 285BA SFT - CKYC Reports (/ckyc/ckyc-reports): standalone dashboard UI: - Theme-colored icons on 22 wired menu links across 5 menus — visually distinguishes wired (colored) from placeholder (gray) links. - Backdrop classes per dialog in main.scss. All using dummy data (Bharat Urban Bank Ltd, Karthik Kamath as Principal Officer, dummy customer names) — no real bank or customer references. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
891 lines
13 KiB
SCSS
891 lines
13 KiB
SCSS
/**
|
|
* Copyright since 2025 Mifos Initiative
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
|
|
$navy: #0d1b2a;
|
|
$blue: #1e88e5;
|
|
$green: #10b981;
|
|
$orange: #f59e0b;
|
|
$red: #ef4444;
|
|
$purple: #7c3aed;
|
|
|
|
.cbs-dashboard-container {
|
|
background: #f0f2f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.cbs-header {
|
|
background: linear-gradient(135deg, $navy 0%, #1b3a5c 100%);
|
|
color: white;
|
|
padding: 6px 24px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 0;
|
|
|
|
.header-date {
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.cbs-content {
|
|
padding: 0 24px 12px;
|
|
max-width: 1440px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.search-row {
|
|
width: 100%;
|
|
margin: 0;
|
|
|
|
mat-card-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.search-field {
|
|
width: 100%;
|
|
}
|
|
|
|
.mat-mdc-form-field {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/* ─── Section Headers ─── */
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 6px 0;
|
|
padding: 5px 12px;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.3px;
|
|
|
|
.section-icon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
&.regulatory {
|
|
background: #e3f2fd;
|
|
color: #0d47a1;
|
|
}
|
|
|
|
&.financial {
|
|
background: #e8f5e9;
|
|
color: #1b5e20;
|
|
}
|
|
|
|
&.deposits {
|
|
background: #f3e5f5;
|
|
color: #6a1b9a;
|
|
}
|
|
|
|
&.risk {
|
|
background: #fce4ec;
|
|
color: #b71c1c;
|
|
}
|
|
|
|
&.alerts {
|
|
background: #fff3e0;
|
|
color: #e65100;
|
|
}
|
|
}
|
|
|
|
/* ─── Card Grid Layouts ─── */
|
|
.cards-row {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.four-col {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.five-col {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
|
|
.three-col {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.two-col {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
/* ─── Dashboard Cards ─── */
|
|
.dash-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 14px;
|
|
box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
|
|
border: 1px solid #e8ecf0;
|
|
transition:
|
|
box-shadow 0.2s,
|
|
transform 0.15s;
|
|
|
|
&:hover {
|
|
box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
|
|
transform: translateY(-1px);
|
|
}
|
|
}
|
|
|
|
.card-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.card-icon-wrap {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
flex-shrink: 0;
|
|
|
|
&.blue {
|
|
background: $blue;
|
|
}
|
|
|
|
&.green {
|
|
background: $green;
|
|
}
|
|
|
|
&.orange {
|
|
background: $orange;
|
|
}
|
|
|
|
&.red {
|
|
background: $red;
|
|
}
|
|
|
|
&.purple {
|
|
background: $purple;
|
|
}
|
|
}
|
|
|
|
.card-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
}
|
|
|
|
.card-big-value {
|
|
font-size: 32px;
|
|
font-weight: 800;
|
|
color: $navy;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* ─── Card Status Badges ─── */
|
|
.card-status {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
|
|
&.success {
|
|
background: #ecfdf5;
|
|
color: #065f46;
|
|
}
|
|
|
|
&.warning {
|
|
background: #fffbeb;
|
|
color: #92400e;
|
|
}
|
|
|
|
&.info {
|
|
background: #eff6ff;
|
|
color: #1e40af;
|
|
}
|
|
}
|
|
|
|
/* ─── CRR/SLR Card Header Row ─── */
|
|
.mini-header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
width: 100%;
|
|
|
|
.mini-icon {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mini-label {
|
|
margin-bottom: 0;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.view-details-btn {
|
|
height: 24px;
|
|
padding: 0 10px;
|
|
border-radius: 12px;
|
|
border: 1px solid #bfdbfe;
|
|
background: #eff6ff;
|
|
color: #1d4ed8;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
font-family: 'Roboto Mono', monospace;
|
|
transition: all 0.15s;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background: #1d4ed8;
|
|
color: #fff;
|
|
border-color: #1d4ed8;
|
|
}
|
|
}
|
|
|
|
/* ─── CRR/SLR Metric Rows ─── */
|
|
.card-metrics {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.metric-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: $navy;
|
|
}
|
|
|
|
/* ─── DICSC Mini Table ─── */
|
|
.dicsc-card {
|
|
padding: 14px;
|
|
}
|
|
|
|
.mini-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
|
|
th {
|
|
text-align: right;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
padding: 4px 6px;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
font-size: 11px;
|
|
|
|
&:first-child {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
td {
|
|
text-align: right;
|
|
padding: 5px 6px;
|
|
color: $navy;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.row-label {
|
|
text-align: left;
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
/* ─── Interbank Exposure ─── */
|
|
.exposure-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.exposure-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
padding: 4px 0;
|
|
color: #475569;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
|
|
&.maintain {
|
|
background: #ecfdf5;
|
|
color: #065f46;
|
|
}
|
|
|
|
&.exceed {
|
|
background: #fef2f2;
|
|
color: #991b1b;
|
|
}
|
|
}
|
|
|
|
/* ─── Mini Cards (Financial Health) ─── */
|
|
.dash-card.mini {
|
|
text-align: center;
|
|
padding: 16px 12px;
|
|
}
|
|
|
|
.mini-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 10px;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
|
|
&.blue {
|
|
background: $blue;
|
|
}
|
|
|
|
&.green {
|
|
background: $green;
|
|
}
|
|
|
|
&.purple {
|
|
background: $purple;
|
|
}
|
|
|
|
&.orange {
|
|
background: $orange;
|
|
}
|
|
|
|
&.red {
|
|
background: $red;
|
|
}
|
|
}
|
|
|
|
.mini-label {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mini-value {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
color: $navy;
|
|
}
|
|
|
|
.mini-sub {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tag-success {
|
|
background: #ecfdf5;
|
|
color: #065f46;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tag-warning {
|
|
background: #fffbeb;
|
|
color: #92400e;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tag-danger {
|
|
background: #fef2f2;
|
|
color: #991b1b;
|
|
padding: 2px 6px;
|
|
border-radius: 10px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ─── Compact Detail Cards ─── */
|
|
.dash-card.compact {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.compact-header {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #475569;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.compact-icon {
|
|
font-size: 14px;
|
|
|
|
&.purple-text {
|
|
color: $purple;
|
|
}
|
|
|
|
&.orange-text {
|
|
color: $orange;
|
|
}
|
|
}
|
|
|
|
.exposure-pct {
|
|
font-weight: 700;
|
|
color: $navy;
|
|
margin-left: auto;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
/* ─── Deposits vs Advances ─── */
|
|
.da-compare {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.da-item {
|
|
.da-label {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.da-value {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
margin-bottom: 6px;
|
|
|
|
&.deposit {
|
|
color: $blue;
|
|
}
|
|
|
|
&.advance {
|
|
color: $purple;
|
|
}
|
|
}
|
|
}
|
|
|
|
.da-bar {
|
|
height: 8px;
|
|
background: #f1f5f9;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.da-fill {
|
|
height: 100%;
|
|
border-radius: 4px;
|
|
transition: width 1s ease;
|
|
|
|
&.deposit-fill {
|
|
background: linear-gradient(90deg, $blue, #42a5f5);
|
|
}
|
|
|
|
&.advance-fill {
|
|
background: linear-gradient(90deg, $purple, #a78bfa);
|
|
}
|
|
}
|
|
|
|
/* ─── PSL Breakdown ─── */
|
|
.psl-breakdown {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.psl-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.psl-label {
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
width: 100px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.psl-bar-wrap {
|
|
flex: 1;
|
|
height: 10px;
|
|
background: #f1f5f9;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.psl-bar {
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
|
|
&.weaker {
|
|
background: $orange;
|
|
}
|
|
|
|
&.msme {
|
|
background: $green;
|
|
}
|
|
}
|
|
|
|
.psl-pct {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: $navy;
|
|
width: 36px;
|
|
text-align: right;
|
|
}
|
|
|
|
/* ─── Priority Sector Lending — Open button ─── */
|
|
.psl-card {
|
|
.card-top {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.psl-open-btn {
|
|
margin-left: auto;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
background: #fff;
|
|
color: #16a34a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: all 0.15s;
|
|
|
|
&:hover {
|
|
background: #dcfce7;
|
|
border-color: #16a34a;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 6px rgb(22 163 74 / 20%);
|
|
}
|
|
}
|
|
|
|
/* ─── Credit Information Companies — DQR ─── */
|
|
.cic-card {
|
|
.card-top {
|
|
margin-bottom: 0;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.cic-open-btn {
|
|
margin-left: auto;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
border: 1px solid #e2e8f0;
|
|
background: #fff;
|
|
color: #6d28d9;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
transition: all 0.15s;
|
|
|
|
&:hover {
|
|
background: #ede9fe;
|
|
border-color: #6d28d9;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 6px rgb(109 40 217 / 20%);
|
|
}
|
|
}
|
|
|
|
.cic-subtitle {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #94a3b8;
|
|
letter-spacing: 0.3px;
|
|
margin: 2px 0 10px;
|
|
}
|
|
|
|
.quality-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.quality-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
|
|
.quality-label {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.cic-logo {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 7px;
|
|
flex-shrink: 0;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.quality-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
|
|
.cic-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.cic-full {
|
|
font-size: 10px;
|
|
color: #94a3b8;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.dqr-percent {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
flex-shrink: 0;
|
|
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
|
letter-spacing: 0.3px;
|
|
|
|
&.good {
|
|
background: #ecfdf5;
|
|
color: #065f46;
|
|
}
|
|
|
|
&.moderate {
|
|
background: #fffbeb;
|
|
color: #92400e;
|
|
}
|
|
|
|
&.low {
|
|
background: #fef2f2;
|
|
color: #991b1b;
|
|
}
|
|
}
|
|
|
|
/* ─── NPA Gauge Cards ─── */
|
|
.npa-gauge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.npa-circle {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
|
|
&.gross {
|
|
background: conic-gradient($red 0% 7%, #fee2e2 7% 100%);
|
|
box-shadow: inset 0 0 0 12px #fff;
|
|
}
|
|
|
|
&.net {
|
|
background: conic-gradient($green 0% 2%, #ecfdf5 2% 100%);
|
|
box-shadow: inset 0 0 0 12px #fff;
|
|
}
|
|
}
|
|
|
|
.npa-pct {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
color: $navy;
|
|
}
|
|
|
|
.npa-detail {
|
|
.npa-status {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
margin-bottom: 4px;
|
|
|
|
&.success {
|
|
color: #065f46;
|
|
}
|
|
|
|
&.warning {
|
|
color: #b45309;
|
|
}
|
|
}
|
|
|
|
.npa-note {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
}
|
|
}
|
|
|
|
/* ─── Risk Summary ─── */
|
|
.risk-summary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin: 8px 0 12px;
|
|
}
|
|
|
|
.risk-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: #475569;
|
|
}
|
|
|
|
.risk-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
|
|
&.green {
|
|
background: $green;
|
|
}
|
|
|
|
&.yellow {
|
|
background: $orange;
|
|
}
|
|
|
|
&.red {
|
|
background: $red;
|
|
}
|
|
}
|
|
|
|
.risk-val {
|
|
margin-left: auto;
|
|
font-weight: 700;
|
|
color: $navy;
|
|
}
|
|
|
|
/* ─── Alerts ─── */
|
|
.alert-panel {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 14px 18px;
|
|
border: 1px solid #e8ecf0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.alert-item {
|
|
font-size: 13px;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
&.warning {
|
|
background: #fffbeb;
|
|
color: #92400e;
|
|
border-left: 3px solid $orange;
|
|
}
|
|
|
|
&.info {
|
|
background: #eff6ff;
|
|
color: #1e40af;
|
|
border-left: 3px solid $blue;
|
|
}
|
|
}
|
|
|
|
/* ─── Responsive ─── */
|
|
@media screen and (width <= 1200px) {
|
|
.four-col {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.five-col {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.three-col {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media screen and (width <= 768px) {
|
|
.four-col,
|
|
.five-col,
|
|
.three-col {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.card-big-value {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.mini-value {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.cbs-header {
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
text-align: center;
|
|
}
|
|
}
|