/* Site theme: "Clean and light". Loaded last by _Layout so it overrides the template. Logged-in app pages get body.app-page (set by _LayoutPortfolios). */ :root { --irc-blue: #3697d9; --irc-blue-dark: #2b7fbb; --irc-blue-wash: #eef6fc; --irc-text: #1f2937; --irc-sub: #6b7280; --irc-line: #e5e7eb; --irc-input-line: #d1d5db; --irc-page: #f6f8fa; --irc-radius: 10px; } /* ---------- Type ---------- */ body { font-family: 'Inter', Arial, sans-serif; color: var(--irc-text); } h1, h2, h3, h4, h5, h6, .navbar-nav, .btn, button, input, select, textarea { font-family: 'Inter', Arial, sans-serif; } a { color: var(--irc-blue); } a:hover, a:focus { color: var(--irc-blue-dark); } /* ---------- Header and menu ---------- */ .header-container .header { background: #fff; border-bottom: 1px solid var(--irc-line); } .header-container .navbar-nav > li > a { color: var(--irc-text); font-weight: 500; font-size: 15px; text-transform: none; } .header-container .navbar-nav > li > a:hover, .header-container .navbar-nav > li > a:focus { color: var(--irc-blue); background: transparent; } .header-container .navbar-nav > li.active > a, .header-container .navbar-nav > li.active > a:hover { color: var(--irc-blue); background: transparent; /* Underline just below the word (the link's own bottom padding is large). */ text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } /* Login link and Logout button */ .header-container .navbar-right .navbar-link, .header-container #logoutForm button.navbar-link { font-family: 'Inter', Arial, sans-serif; font-size: 14px; font-weight: 500; color: var(--irc-text); background: #fff; border: 1px solid var(--irc-input-line); border-radius: 8px; padding: 6px 14px; line-height: 1.4; } /* The account button (_LoginPartial): initial + name, opening a small menu with the full email, Account settings, Subscription and Log out. Same box as the old Logout button; the name is cut with "..." past 120px. */ .header-container .nav-acct-btn { display: inline-flex; align-items: center; gap: 6px; } .header-container .nav-acct-ava { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--irc-blue); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; } .header-container .nav-acct-btn .fa { color: var(--irc-sub); } /* main.css opens any menu dropdown on hover; this one opens on click only. */ @media (min-width: 768px) { .header-container .nav-acct > .nav-acct-menu:not(.show) { display: none; } } .header-container .nav-acct .nav-acct-menu { min-width: 230px; margin-top: 6px; padding: 4px 0; border: 1px solid var(--irc-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); font-family: 'Inter', Arial, sans-serif; font-size: 14px; } .header-container .nav-acct-who { padding: 8px 14px 10px; border-bottom: 1px solid var(--irc-line); color: var(--irc-sub); font-size: 12px; } .header-container .nav-acct-who b { display: block; margin-top: 2px; color: var(--irc-text); font-weight: 600; word-break: break-all; } .header-container .nav-acct .nav-acct-menu > li > a, .header-container .nav-acct-out button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: 0; background: none; color: var(--irc-text); font-size: 14px; text-align: left; text-transform: none; letter-spacing: 0; } .header-container .nav-acct .nav-acct-menu > li > a:hover, .header-container .nav-acct-out button:hover { background: var(--irc-blue-wash); color: var(--irc-blue-dark); text-decoration: none; } .header-container .nav-acct .nav-acct-menu .fa { width: 16px; text-align: center; color: var(--irc-sub); } .header-container .nav-acct-out { border-top: 1px solid var(--irc-line); margin-top: 4px; padding-top: 4px; } /* Phones: no button; the menu's rows sit in the opened menu under "Your account". */ @media (max-width: 767px) { .header-container .nav-acct-btn { display: none; } .header-container .nav-acct .nav-acct-menu { display: block; position: static; float: none; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; } .header-container .nav-acct-who { padding: 10px 16px; } .header-container .nav-acct .nav-acct-menu > li > a, .header-container .nav-acct-out button { padding: 10px 16px; } .header-container .nav-acct-out { margin-top: 0; padding-top: 0; } /* Line up with the menu's other rows, and skip Subscription: it's already the row just above. */ .header-container #logoutForm, .header-container #logoutForm > .navbar-nav { margin: 0; } .header-container .nav-acct-sub { display: none; } } @media (min-width: 768px) { /* Center the Login / Logout button on the 76px-tall menu row. */ .header-container ul.navbar-right { margin-top: 21px; } /* The Logout form would add its own 20px margin on top of that. */ .header-container #logoutForm { margin-top: 0; margin-bottom: 0; } /* Room for all seven signed-in links plus Logout on one row: drop the template's 120px reserved for header buttons the site doesn't use, and tighten the link spacing. */ .header-container .with-dropdown-buttons .navbar-default .navbar-collapse { padding-right: 15px; } .header-container .navbar-default .navbar-nav:not(.navbar-right) > li > a { padding-left: 12px; padding-right: 12px; } } /* Signed-in links (Reports ... Subscription): one tinted pill on the menu row; a labelled section on phones. */ .header-container .navbar-nav > li.nav-account-label { display: none; } @media (min-width: 768px) { .header-container .navbar-nav > li.nav-account { background: var(--irc-blue-wash); margin: 18px 0; } .header-container .navbar-default .navbar-nav > li.nav-account > a { padding-top: 10px; padding-bottom: 10px; } .header-container .navbar-nav > li.nav-account-first { border-radius: 999px 0 0 999px; padding-left: 6px; margin-left: 8px; } .header-container .navbar-nav > li.nav-account-last { border-radius: 0 999px 999px 0; padding-right: 6px; } .header-container .navbar-nav > li.nav-account-first.nav-account-last { border-radius: 999px; } /* Subscribe alone */ } @media (max-width: 767px) { .header-container .navbar-nav > li.nav-account-label { display: block; margin-top: 6px; padding: 10px 16px 4px; border-top: 1px solid var(--irc-line); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--irc-sub); } } @media (min-width: 992px) and (max-width: 1199px) { /* Eight signed-in links plus Logout in the 970px container. */ .header-container .navbar-default .navbar-nav:not(.navbar-right) > li > a { padding-left: 8px; padding-right: 8px; font-size: 14px; } } /* Subscribers' nine links plus Logout (_MainMenu marks the list nav-crowded): a little tighter still. */ @media (min-width: 1200px) { .header-container .navbar-default .navbar-nav.nav-crowded:not(.navbar-right) > li > a { padding-left: 9px; padding-right: 9px; font-size: 14px; } } @media (min-width: 768px) and (max-width: 1199px) { .header-container .navbar-default .navbar-nav.nav-crowded:not(.navbar-right) > li > a { padding-left: 4px; padding-right: 4px; font-size: 13px; } .header-container .navbar-nav.nav-crowded > li.nav-account-first { margin-left: 4px; padding-left: 4px; } .header-container .navbar-nav.nav-crowded > li.nav-account-last { padding-right: 4px; } .header-container .navbar-nav.nav-crowded ~ #logoutForm button.navbar-link { padding-left: 10px; padding-right: 10px; } } /* Tablets (768-991px): a small logo on the menu row instead of a row of its own, so the logo, every link and Login/Logout fit on one line (subscribers' nine links a little tighter still). */ @media (min-width: 768px) and (max-width: 991px) { .header-container .header > .container > .row { display: flex; align-items: center; flex-wrap: nowrap; } .header-container .header > .container > .row > .col-lg-2 { flex: 0 0 auto; width: auto; padding-right: 0; } .header-container .header > .container > .row > .col-lg-10 { flex: 1 1 auto; width: auto; min-width: 0; padding-left: 8px; } .header-container #logo_img { width: 64px; height: auto; transition: none; } .header-container .header-left, .header-container .logo { margin: 0; padding: 0; } .header-container .with-dropdown-buttons .navbar-default .navbar-collapse { padding-left: 0; padding-right: 0; } .header-container .navbar-default .navbar-nav:not(.navbar-right) > li > a { padding-left: 7px; padding-right: 7px; font-size: 14px; } .header-container .navbar-default .navbar-nav.nav-crowded:not(.navbar-right) > li > a { padding-left: 3px; padding-right: 3px; font-size: 12px; } .header-container .navbar-nav.nav-crowded > li.nav-account-first { margin-left: 3px; padding-left: 3px; } .header-container .navbar-nav.nav-crowded > li.nav-account-last { padding-right: 3px; } .header-container .navbar-nav.nav-crowded ~ #logoutForm button.navbar-link { padding-left: 8px; padding-right: 8px; font-size: 12px; } } .header-container #logoutForm button.navbar-link:hover, .header-container .navbar-right a.navbar-link:hover { color: var(--irc-blue); border-color: var(--irc-blue); text-decoration: none; } /* ---------- Buttons ---------- */ .btn-primary, .btn-default, .btn-primary-apm, input[type="submit"].btn-primary { background-color: var(--irc-blue); border: 1px solid var(--irc-blue); color: #fff; border-radius: 8px; font-weight: 500; text-transform: none; } .btn-primary:hover, .btn-primary:focus, .btn-default:hover, .btn-default:focus, .btn-primary-apm:hover, input[type="submit"].btn-primary:hover { background-color: var(--irc-blue-dark); border-color: var(--irc-blue-dark); color: #fff; } .btn-secondary-apm { background-color: #fff; border: 1px solid var(--irc-input-line); color: var(--irc-text); border-radius: 8px; } .btn-secondary-apm:hover { background-color: var(--irc-page); border-color: var(--irc-blue); color: var(--irc-blue); } /* ---------- Logged-in app pages ---------- */ body.app-page { background: var(--irc-page); } body.app-page .page-wrapper, body.app-page .section { background: transparent; } body.app-page .section { padding-top: 24px; } body.app-page h1, body.app-page h2 { font-size: 20px; font-weight: 600; text-transform: none; color: var(--irc-text); margin: 0 0 12px; } /* Two-column app page: controls in a card on the left, the main content on the right; stacked on narrow screens. */ .app-split { display: flex; align-items: flex-start; gap: 24px; } .app-split-side { flex: 0 0 280px; } .app-split-main { flex: 1 1 auto; min-width: 0; } .app-card { background: #fff; border: 1px solid var(--irc-line); border-radius: var(--irc-radius); padding: 16px; margin-bottom: 16px; } .app-card h3 { font-size: 14px; font-weight: 600; margin: 0 0 12px; color: var(--irc-text); text-transform: none; } /* Information pages (About, Contact), laid out like Pricing and How it works: centered column, plain heading, grey lead line, white cards. */ .info-page { max-width: 900px; margin: 0 auto; padding: 32px 16px 48px; } .info-page h1 { font-size: 28px; font-weight: 600; text-transform: none; margin: 0 0 6px; } .info-page .info-lead { color: var(--irc-sub); font-size: 16px; margin: 0 0 24px; } .info-page .app-card { padding: 20px 24px; } .info-page .app-card p:last-child { margin-bottom: 0; } .app-field { margin-bottom: 12px; } .app-field > label { display: block; font-size: 12px; font-weight: 500; color: var(--irc-sub); margin-bottom: 4px; } .app-field select, .app-field input[type="date"], .app-field input[type="number"] { width: 100%; } .app-field.app-radios > label { display: inline; font-size: 14px; font-weight: 400; color: var(--irc-text); margin: 0 0 0 6px; line-height: 28px; } /* In the irc-important layer (_Layout) so it beats Bootstrap 5's own !important justify-content-center. */ @layer irc-important { .app-split-main .d-flex.justify-content-center { justify-content: flex-start !important; } } @media (max-width: 991px) { .app-split { flex-direction: column; align-items: stretch; } .app-split-side { flex: 1 1 auto; } } /* Forms: the wizard and transaction pages hard-code colors and sizes inline; bring them into the theme. */ body.app-page fieldset.fieldSetFrame, body.app-page fieldset[style*="lightskyblue"] { background: #fff !important; border: 1px solid var(--irc-line); border-radius: var(--irc-radius); padding: 12px 16px !important; } body.app-page [style*="lightskyblue"] { background-color: #fff !important; } body.app-page input[type="text"], body.app-page input[type="date"], body.app-page input[type="number"], body.app-page input[type="email"], body.app-page input[type="password"], body.app-page select { height: 36px !important; border: 1px solid var(--irc-input-line); border-radius: 8px; padding: 4px 10px; background: #fff; color: var(--irc-text); } body.app-page input:focus, body.app-page select:focus { border-color: var(--irc-blue); outline: 0; box-shadow: 0 0 0 3px rgba(54, 151, 217, .2); } body.app-page input[type="submit"], body.app-page input[type="button"].btn-primary-apm { background-color: var(--irc-blue) !important; border: 1px solid var(--irc-blue) !important; color: #fff !important; border-radius: 8px; padding: 6px 18px; font-weight: 500; } body.app-page input[type="submit"]:hover { background-color: var(--irc-blue-dark) !important; } /* Red delete buttons stay red. */ body.app-page input[type="submit"][style*="red"] { background-color: #dc2626 !important; border-color: #dc2626 !important; } /* Data grid (Views/Shared/Components/DataGrid) */ @layer irc-important { body.app-page .table-wrapper { padding: 0 !important; } /* beats Bootstrap 5's p-1 (see _Layout) */ } body.app-page .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } body.app-page #t01 { background: #fff; border: 1px solid var(--irc-line); border-radius: var(--irc-radius); border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 13px; margin: 0; } body.app-page #t01 > thead > tr > th, body.app-page #t01 tr.grid-header > td { background: #f3f4f6; color: var(--irc-sub); font-weight: 600; font-size: 12px; border: 0; border-bottom: 1px solid var(--irc-line); padding: 8px 10px !important; /* the grid sets 0/2px padding inline */ } body.app-page #t01 .grid-header-links { color: var(--irc-sub); } body.app-page #t01 > tbody > tr > td { border: 0; border-top: 1px solid var(--irc-line); padding: 8px 10px !important; /* the grid sets 0/2px padding inline */ vertical-align: middle; color: var(--irc-text); } body.app-page #t01 > tbody > tr:first-child > td { border-top: 0; } body.app-page .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; } body.app-page #t01 > tbody > tr:hover > td { background: #f9fafb; } /* Phones: tighter cells so a four-column list (date, description, amount, Edit | Delete) fits without scrolling sideways; a long description ("OPENING BALANCE") wraps instead. */ @media (max-width: 480px) { body.app-page #t01 { font-size: 12px; } body.app-page #t01 > thead > tr > th, body.app-page #t01 tr.grid-header > td, body.app-page #t01 > tbody > tr > td { padding: 7px 5px !important; } body.app-page #t01 > tbody > tr > td { white-space: normal; } } /* ---------- Phones ---------- */ @media (max-width: 767px) { .header-container .navbar-collapse { border-top: 1px solid var(--irc-line); } .header-container .navbar-nav > li > a { padding: 12px 16px; font-size: 16px; } .header-container .navbar-nav > li.active > a { box-shadow: inset 3px 0 0 var(--irc-blue); text-decoration: none; } .header-container .navbar-right { margin: 8px 16px 12px; } body.app-page .section { padding-top: 12px; } body.app-page input[type="submit"], body.app-page .btn { min-height: 44px; } /* A link styled as a button (e.g. Reports' "New report") doesn't center its text when stretched like a