/* Code Blue Instructor Portal — everything is scoped under #cbp-portal so the theme/Elementor can't bleed in. */ #cbp-portal { --cbp-primary: #0b3a75; --cbp-accent: #d7263d; --cbp-ink: #13213a; --cbp-ink-2: #4a5873; --cbp-ink-3: #7a869c; --cbp-line: #e3e8f0; --cbp-bg: #f4f6fa; --cbp-card: #ffffff; --cbp-radius: 14px; --cbp-shadow: 0 1px 2px rgba(16, 32, 64, .06), 0 4px 16px rgba(16, 32, 64, .05); --cbp-primary-soft: color-mix(in srgb, var(--cbp-primary) 9%, #fff); --cbp-accent-soft: color-mix(in srgb, var(--cbp-accent) 9%, #fff); box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 24px 16px 48px; color: var(--cbp-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; text-align: left; } #cbp-portal *, #cbp-portal *::before, #cbp-portal *::after { box-sizing: border-box; } #cbp-portal h1, #cbp-portal h2, #cbp-portal h3, #cbp-portal p, #cbp-portal ul, #cbp-portal ol { margin: 0; padding: 0; font-family: inherit; letter-spacing: normal; text-transform: none; } #cbp-portal h1 { font-size: clamp(24px, 3vw, 30px); line-height: 1.2; font-weight: 750; color: var(--cbp-ink); } #cbp-portal h2 { font-size: 17px; font-weight: 700; color: var(--cbp-ink); } #cbp-portal h3 { font-size: 16px; font-weight: 650; color: var(--cbp-ink); line-height: 1.35; } #cbp-portal ul, #cbp-portal ol { list-style: none; } #cbp-portal a { color: var(--cbp-primary); text-decoration: none; } #cbp-portal a:hover { text-decoration: underline; } #cbp-portal .cbp-i { flex: none; display: inline-block; vertical-align: middle; } #cbp-portal .cbp-muted { color: var(--cbp-ink-3); font-size: 14px; } #cbp-portal [hidden] { display: none !important; } #cbp-portal :focus-visible { outline: 3px solid color-mix(in srgb, var(--cbp-primary) 45%, transparent); outline-offset: 2px; } /* ---------- Shell ---------- */ #cbp-portal .cbp-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; } #cbp-portal .cbp-side { position: sticky; top: 24px; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); padding: 16px; box-shadow: var(--cbp-shadow); } #cbp-portal .cbp-me { display: flex; gap: 12px; align-items: center; padding: 4px 4px 16px; border-bottom: 1px solid var(--cbp-line); margin-bottom: 10px; } #cbp-portal .cbp-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--cbp-primary); color: #fff; font-weight: 700; font-size: 15px; flex: none; } #cbp-portal .cbp-me-text { min-width: 0; } #cbp-portal .cbp-me-text strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #cbp-portal .cbp-me-text span { font-size: 13px; color: var(--cbp-ink-3); } #cbp-portal .cbp-nav { display: flex; flex-direction: column; gap: 2px; } #cbp-portal .cbp-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--cbp-ink-2); font-weight: 550; font-size: 15px; text-decoration: none; transition: background .15s, color .15s; } #cbp-portal .cbp-nav a span { flex: 1; } #cbp-portal .cbp-nav a em { font-style: normal; font-size: 12px; font-weight: 650; background: var(--cbp-bg); color: var(--cbp-ink-2); padding: 1px 8px; border-radius: 999px; } #cbp-portal .cbp-nav a:hover { background: var(--cbp-bg); color: var(--cbp-ink); } #cbp-portal .cbp-nav a.is-active { background: var(--cbp-primary-soft); color: var(--cbp-primary); } #cbp-portal .cbp-nav a.is-active em { background: var(--cbp-primary); color: #fff; } #cbp-portal .cbp-nav .cbp-nav-out { margin-top: 8px; border-top: 1px solid var(--cbp-line); border-radius: 0 0 10px 10px; padding-top: 14px; } #cbp-portal .cbp-admin-link { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: var(--cbp-bg); color: var(--cbp-ink-2); } #cbp-portal .cbp-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; } /* ---------- Hero / page heads ---------- */ #cbp-portal .cbp-hero { position: relative; overflow: hidden; border-radius: var(--cbp-radius); padding: 30px 30px 28px; color: #fff; background: linear-gradient(135deg, var(--cbp-primary) 0%, color-mix(in srgb, var(--cbp-primary) 70%, #000) 100%); } #cbp-portal .cbp-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; background: radial-gradient(circle, color-mix(in srgb, var(--cbp-accent) 55%, transparent) 0%, transparent 70%); opacity: .55; } #cbp-portal .cbp-hero > div { position: relative; z-index: 1; max-width: 680px; } #cbp-portal .cbp-hero h1 { color: #fff; } #cbp-portal .cbp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: 6px; } #cbp-portal .cbp-hero-sub { margin-top: 8px; opacity: .88; font-size: 15px; } #cbp-portal .cbp-hero .cbp-chips { margin-top: 16px; } #cbp-portal .cbp-hero .cbp-chip { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .22); } #cbp-portal .cbp-hero .cbp-chip-strong { background: #fff; color: var(--cbp-primary); } #cbp-portal .cbp-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } #cbp-portal .cbp-page-head p { color: var(--cbp-ink-2); margin-top: 4px; } #cbp-portal .cbp-chips { display: flex; flex-wrap: wrap; gap: 8px; } #cbp-portal .cbp-chip { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--cbp-primary-soft); color: var(--cbp-primary); border: 1px solid color-mix(in srgb, var(--cbp-primary) 18%, #fff); } #cbp-portal .cbp-chip-strong { background: var(--cbp-primary); color: #fff; } /* ---------- Stats ---------- */ #cbp-portal .cbp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } #cbp-portal .cbp-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); padding: 16px 18px; box-shadow: var(--cbp-shadow); color: var(--cbp-ink); text-decoration: none; transition: transform .15s, border-color .15s; } #cbp-portal .cbp-stat:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--cbp-primary) 35%, #fff); } #cbp-portal .cbp-stat-ic { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cbp-primary-soft); color: var(--cbp-primary); } #cbp-portal .cbp-stat:last-child:nth-child(4) .cbp-stat-ic { background: var(--cbp-accent-soft); color: var(--cbp-accent); } #cbp-portal .cbp-stat strong { font-size: 24px; line-height: 1.1; font-weight: 750; font-variant-numeric: tabular-nums; } #cbp-portal .cbp-stat span:last-child { font-size: 13px; color: var(--cbp-ink-2); } /* ---------- Panels ---------- */ #cbp-portal .cbp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; align-items: start; } #cbp-portal .cbp-panel { background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); padding: 20px; box-shadow: var(--cbp-shadow); display: flex; flex-direction: column; gap: 14px; } #cbp-portal .cbp-panel-head { display: flex; justify-content: space-between; align-items: center; } #cbp-portal .cbp-panel-head a { font-size: 14px; font-weight: 600; } #cbp-portal .cbp-recent li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-recent li:first-child { border-top: 0; padding-top: 0; } #cbp-portal .cbp-recent a { flex: 1; color: var(--cbp-ink); font-weight: 550; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cbp-portal .cbp-recent small { color: var(--cbp-ink-3); font-size: 12px; white-space: nowrap; } #cbp-portal .cbp-recent .cbp-ft { width: 34px; height: 34px; border-radius: 9px; } #cbp-portal .cbp-mini-classes li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-mini-classes li:first-child { border-top: 0; padding-top: 0; } #cbp-portal .cbp-mini-classes li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } #cbp-portal .cbp-mini-classes small { color: var(--cbp-ink-3); font-size: 13px; } #cbp-portal .cbp-mini-classes .cbp-date { width: 50px; } /* ---------- Buttons ---------- */ #cbp-portal .cbp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 18px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 650; font-size: 15px; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; background: none; color: var(--cbp-ink); text-transform: none; letter-spacing: normal; box-shadow: none; } #cbp-portal .cbp-btn:hover { text-decoration: none; } #cbp-portal .cbp-btn-sm { min-height: 36px; padding: 6px 13px; font-size: 14px; border-radius: 9px; } #cbp-portal .cbp-btn-primary { background: var(--cbp-primary); color: #fff; border-color: var(--cbp-primary); } #cbp-portal .cbp-btn-primary:hover { background: color-mix(in srgb, var(--cbp-primary) 85%, #000); color: #fff; } #cbp-portal .cbp-btn-accent { background: var(--cbp-accent); color: #fff; border-color: var(--cbp-accent); } #cbp-portal .cbp-btn-accent:hover { background: color-mix(in srgb, var(--cbp-accent) 85%, #000); color: #fff; } #cbp-portal .cbp-btn-ghost { background: var(--cbp-card); color: var(--cbp-ink); border-color: var(--cbp-line); } #cbp-portal .cbp-btn-ghost:hover { border-color: color-mix(in srgb, var(--cbp-primary) 40%, #fff); color: var(--cbp-primary); background: var(--cbp-card); } #cbp-portal .cbp-btn-danger { background: var(--cbp-card); color: #b32d2e; border-color: #f0c9ca; } #cbp-portal .cbp-btn-danger:hover { background: #fcf0f1; color: #b32d2e; } #cbp-portal .cbp-btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } #cbp-portal .cbp-icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent; color: #fff; cursor: pointer; padding: 0; } #cbp-portal .cbp-icon-btn:hover { background: rgba(255, 255, 255, .12); } /* ---------- Alerts / empty ---------- */ #cbp-portal .cbp-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid; font-size: 15px; } #cbp-portal .cbp-alert .cbp-i { margin-top: 1px; } #cbp-portal .cbp-alert-ok { background: #edf8f0; border-color: #bfe3c9; color: #1a5c2e; } #cbp-portal .cbp-alert-info { background: var(--cbp-primary-soft); border-color: color-mix(in srgb, var(--cbp-primary) 20%, #fff); color: var(--cbp-primary); } #cbp-portal .cbp-alert-warn { background: #fff7e8; border-color: #f3d9a4; color: #7a4b00; } #cbp-portal .cbp-alert-error { background: #fcf0f1; border-color: #f0c9ca; color: #8a1f20; } #cbp-portal .cbp-empty { text-align: center; padding: 48px 20px; background: var(--cbp-card); border: 1px dashed var(--cbp-line); border-radius: var(--cbp-radius); display: flex; flex-direction: column; align-items: center; gap: 8px; } #cbp-portal .cbp-empty p { color: var(--cbp-ink-2); max-width: 420px; } #cbp-portal .cbp-empty .cbp-btn { margin-top: 8px; } #cbp-portal .cbp-empty-sm { padding: 28px 20px; } #cbp-portal .cbp-empty-ic { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--cbp-primary-soft); color: var(--cbp-primary); margin-bottom: 6px; } /* ---------- Toolbar / filters ---------- */ #cbp-portal .cbp-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; } #cbp-portal .cbp-search { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: 10px; padding: 0 14px; color: var(--cbp-ink-3); margin: 0; } #cbp-portal .cbp-search:focus-within { border-color: var(--cbp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cbp-primary) 15%, transparent); } #cbp-portal .cbp-search input { flex: 1; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent; min-height: 44px; font: inherit; color: var(--cbp-ink); padding: 0; margin: 0; } #cbp-portal .cbp-toolbar select, #cbp-portal .cbp-input { min-height: 44px; border: 1px solid var(--cbp-line); border-radius: 10px; background: var(--cbp-card); padding: 8px 12px; font: inherit; font-size: 15px; color: var(--cbp-ink); width: auto; max-width: 100%; box-shadow: none; margin: 0; } #cbp-portal .cbp-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; margin-top: -8px; } #cbp-portal .cbp-cat { flex: none; border: 1px solid var(--cbp-line); background: var(--cbp-card); color: var(--cbp-ink-2); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 36px; line-height: 1.2; text-transform: none; letter-spacing: normal; } #cbp-portal .cbp-cat:hover { border-color: var(--cbp-primary); color: var(--cbp-primary); background: var(--cbp-card); } #cbp-portal .cbp-cat.is-active { background: var(--cbp-primary); border-color: var(--cbp-primary); color: #fff; } #cbp-portal .cbp-seg { display: inline-flex; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: 11px; padding: 3px; gap: 2px; } #cbp-portal .cbp-seg button { border: 0; background: transparent; color: var(--cbp-ink-2); border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 36px; line-height: 1.2; text-transform: none; letter-spacing: normal; } #cbp-portal .cbp-seg button em { font-style: normal; font-size: 12px; opacity: .7; margin-left: 4px; } #cbp-portal .cbp-seg button.is-active { background: var(--cbp-primary); color: #fff; } #cbp-portal .cbp-seg button:hover:not(.is-active) { background: var(--cbp-bg); color: var(--cbp-ink); } /* ---------- Library cards ---------- */ #cbp-portal .cbp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; } #cbp-portal .cbp-card { display: flex; flex-direction: column; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); box-shadow: var(--cbp-shadow); overflow: hidden; transition: border-color .15s, box-shadow .15s; scroll-margin-top: 90px; } #cbp-portal .cbp-card:hover { border-color: color-mix(in srgb, var(--cbp-primary) 30%, #fff); } #cbp-portal .cbp-card.is-hl, #cbp-portal .cbp-class.is-hl { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cbp-accent) 40%, transparent), var(--cbp-shadow); } #cbp-portal .cbp-card-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 18px 0; } #cbp-portal .cbp-card-body { padding: 14px 18px 0; flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } #cbp-portal .cbp-desc { color: var(--cbp-ink-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #cbp-portal .cbp-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; } #cbp-portal .cbp-tag { font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 6px; background: var(--cbp-bg); color: var(--cbp-ink-2); } #cbp-portal .cbp-size { font-size: 12px; color: var(--cbp-ink-3); } #cbp-portal .cbp-new { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; background: var(--cbp-accent-soft); color: var(--cbp-accent); } #cbp-portal .cbp-access-note { font-size: 12px; color: var(--cbp-ink-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } #cbp-portal .cbp-card-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 18px 18px; } #cbp-portal .cbp-ft { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; flex: none; background: var(--cbp-bg); color: var(--cbp-ink-2); } #cbp-portal .cbp-ft-pdf { background: #fdecee; color: #c62836; } #cbp-portal .cbp-ft-word { background: #e8f0fd; color: #1f5fbf; } #cbp-portal .cbp-ft-ppt { background: #fdf0e6; color: #c4561c; } #cbp-portal .cbp-ft-xls { background: #e7f6ec; color: #1d7a3e; } #cbp-portal .cbp-ft-video { background: var(--cbp-primary-soft); color: var(--cbp-primary); } #cbp-portal .cbp-ft-link { background: #eef1f6; color: var(--cbp-ink-2); } #cbp-portal .cbp-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 0; background: linear-gradient(135deg, var(--cbp-primary) 0%, color-mix(in srgb, var(--cbp-primary) 60%, #000) 100%); } #cbp-portal .cbp-thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--cbp-accent) 45%, transparent) 0, transparent 55%); } #cbp-portal .cbp-play { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--cbp-primary); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: transform .15s; padding-left: 3px; } #cbp-portal .cbp-thumb:hover .cbp-play { transform: scale(1.08); } /* ---------- Modal ---------- */ #cbp-portal .cbp-modal { position: fixed; inset: 0; z-index: 99999; background: rgba(8, 16, 32, .78); display: grid; place-items: center; padding: 16px; } #cbp-portal .cbp-modal-box { width: min(1000px, 100%); background: #0c1424; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); } #cbp-portal .cbp-modal-box header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; } #cbp-portal .cbp-modal-box h3 { color: #fff; font-size: 16px; } #cbp-portal .cbp-modal-media { aspect-ratio: 16 / 9; background: #000; } #cbp-portal .cbp-modal-media iframe, #cbp-portal .cbp-modal-media video { width: 100%; height: 100%; border: 0; display: block; } /* ---------- Tabs ---------- */ #cbp-portal .cbp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--cbp-line); overflow-x: auto; margin-top: -6px; } #cbp-portal .cbp-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--cbp-ink-2); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; } #cbp-portal .cbp-tabs a em { font-style: normal; font-size: 12px; background: var(--cbp-bg); border-radius: 999px; padding: 1px 8px; } #cbp-portal .cbp-tabs a:hover { color: var(--cbp-ink); } #cbp-portal .cbp-tabs a.is-active { color: var(--cbp-primary); border-bottom-color: var(--cbp-accent); } /* ---------- Forms ---------- */ #cbp-portal .cbp-form { display: flex; flex-direction: column; gap: 16px; } #cbp-portal .cbp-fs { border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); background: var(--cbp-card); padding: 18px 20px 20px; margin: 0; box-shadow: var(--cbp-shadow); min-width: 0; } #cbp-portal .cbp-fs legend { float: left; width: 100%; font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--cbp-primary); margin: 0 0 14px; padding: 0; border: 0; } #cbp-portal .cbp-fs legend + * { clear: both; } #cbp-portal .cbp-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } #cbp-portal .cbp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #cbp-portal .cbp-field.is-wide { grid-column: 1 / -1; } #cbp-portal .cbp-field label { font-size: 14px; font-weight: 600; color: var(--cbp-ink); margin: 0; display: block; } #cbp-portal .cbp-req { color: var(--cbp-accent); } #cbp-portal .cbp-opt { font-weight: 500; color: var(--cbp-ink-3); font-size: 12px; margin-left: 4px; } #cbp-portal .cbp-field .cbp-input { width: 100%; } #cbp-portal textarea.cbp-input { min-height: 88px; resize: vertical; line-height: 1.45; } #cbp-portal .cbp-input:focus { outline: 0; border-color: var(--cbp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cbp-primary) 15%, transparent); } #cbp-portal .cbp-input:disabled { background: var(--cbp-bg); color: var(--cbp-ink-3); } #cbp-portal .has-error .cbp-input { border-color: #d63638; background: #fffafa; } #cbp-portal .cbp-err { color: #b32d2e; font-size: 13px; font-weight: 600; } #cbp-portal .cbp-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); padding: 14px 20px; position: sticky; bottom: 12px; box-shadow: 0 -2px 18px rgba(16, 32, 64, .08); } #cbp-portal .cbp-form-plain .cbp-btn-row { margin-top: 4px; } /* ---------- Class history ---------- */ #cbp-portal .cbp-classes { display: flex; flex-direction: column; gap: 12px; } #cbp-portal .cbp-class { display: flex; gap: 18px; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); padding: 18px 20px; box-shadow: var(--cbp-shadow); scroll-margin-top: 90px; } #cbp-portal .cbp-class[data-when="past"] .cbp-date { background: var(--cbp-bg); color: var(--cbp-ink-3); } #cbp-portal .cbp-date { flex: none; width: 60px; border-radius: 12px; background: var(--cbp-primary-soft); color: var(--cbp-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0; align-self: flex-start; line-height: 1.1; } #cbp-portal .cbp-date small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } #cbp-portal .cbp-date b { font-size: 22px; font-weight: 800; margin: 2px 0; } #cbp-portal .cbp-class-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; } #cbp-portal .cbp-class-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; } #cbp-portal .cbp-class-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--cbp-ink-2); font-size: 14px; } #cbp-portal .cbp-class-facts li { display: flex; align-items: center; gap: 6px; } #cbp-portal .cbp-class-facts .cbp-i { color: var(--cbp-ink-3); } #cbp-portal .cbp-note { background: #fff7e8; border: 1px solid #f3d9a4; border-radius: 10px; padding: 10px 12px; font-size: 14px; color: #6b4300; } #cbp-portal .cbp-rc-live { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--cbp-ink-2); } #cbp-portal .cbp-class-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; } #cbp-portal .cbp-cancel { position: relative; } #cbp-portal .cbp-cancel summary { list-style: none; } #cbp-portal .cbp-cancel summary::-webkit-details-marker { display: none; } #cbp-portal .cbp-cancel[open] summary { background: #fcf0f1; } #cbp-portal .cbp-cancel form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid #f0c9ca; border-radius: 12px; background: #fffafa; width: min(360px, 80vw); } #cbp-portal .cbp-cancel label { font-size: 13px; font-weight: 600; } #cbp-portal .cbp-cancel .cbp-btn-danger { background: #b32d2e; color: #fff; border-color: #b32d2e; align-self: flex-start; } #cbp-portal .cbp-log { border-top: 1px solid var(--cbp-line); padding-top: 10px; font-size: 14px; } #cbp-portal .cbp-log summary { cursor: pointer; color: var(--cbp-ink-2); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; } #cbp-portal .cbp-log ol { margin-top: 10px; border-left: 2px solid var(--cbp-line); padding-left: 14px; display: flex; flex-direction: column; gap: 10px; } #cbp-portal .cbp-log ol > li { position: relative; } #cbp-portal .cbp-log ol > li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--cbp-card); border: 2px solid var(--cbp-primary); } #cbp-portal .cbp-log small { display: block; color: var(--cbp-ink-3); font-size: 12px; } #cbp-portal .cbp-log ul { margin-top: 4px; color: var(--cbp-ink-2); font-size: 13px; } #cbp-portal .cbp-log s { color: var(--cbp-ink-3); } /* ---------- Badges ---------- */ #cbp-portal .cbp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } #cbp-portal .cbp-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } #cbp-portal .cbp-badge-amber { background: #fff4de; color: #8a5300; } #cbp-portal .cbp-badge-red { background: #fdecee; color: #b3261e; } #cbp-portal .cbp-badge-green { background: #e5f6ea; color: #17692f; } #cbp-portal .cbp-badge-blue { background: #e7f0fc; color: #1d5bb5; } #cbp-portal .cbp-badge-gray { background: #eef1f5; color: #5b6576; } /* ---------- Login ---------- */ #cbp-portal .cbp-login { display: grid; grid-template-columns: 1.05fr 1fr; max-width: 920px; margin: 10px auto; border-radius: 20px; overflow: hidden; background: var(--cbp-card); border: 1px solid var(--cbp-line); box-shadow: 0 10px 40px rgba(16, 32, 64, .1); } #cbp-portal .cbp-login-brand { padding: 40px 36px; color: #fff; background: linear-gradient(150deg, var(--cbp-primary), color-mix(in srgb, var(--cbp-primary) 62%, #000)); display: flex; flex-direction: column; gap: 14px; } #cbp-portal .cbp-login-brand h2 { color: #fff; font-size: 26px; } #cbp-portal .cbp-login-brand p { opacity: .85; } #cbp-portal .cbp-login-brand ul { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } #cbp-portal .cbp-login-brand li { display: flex; gap: 10px; align-items: center; font-weight: 550; } #cbp-portal .cbp-login-mark { width: 54px; height: 54px; border-radius: 14px; background: var(--cbp-accent); display: grid; place-items: center; color: #fff; } #cbp-portal .cbp-login-mark .cbp-i { fill: #fff; stroke: none; } #cbp-portal .cbp-login-form { padding: 40px 36px; display: flex; flex-direction: column; gap: 6px; justify-content: center; } #cbp-portal .cbp-login-form h3 { font-size: 22px; margin-bottom: 8px; } #cbp-portal .cbp-login-form form p { margin: 0 0 14px; } #cbp-portal .cbp-login-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; } #cbp-portal .cbp-login-form input[type="text"], #cbp-portal .cbp-login-form input[type="password"] { width: 100%; min-height: 46px; border: 1px solid var(--cbp-line); border-radius: 10px; padding: 8px 12px; font: inherit; color: var(--cbp-ink); background: #fff; box-shadow: none; } #cbp-portal .cbp-login-form input[type="text"]:focus, #cbp-portal .cbp-login-form input[type="password"]:focus { outline: 0; border-color: var(--cbp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cbp-primary) 15%, transparent); } #cbp-portal .cbp-login-form .login-remember label { display: flex; gap: 8px; align-items: center; font-weight: 500; } #cbp-portal .cbp-login-form input[type="submit"] { width: 100%; min-height: 48px; border-radius: 10px; border: 0; background: var(--cbp-accent); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; text-transform: none; letter-spacing: normal; } #cbp-portal .cbp-login-form input[type="submit"]:hover { background: color-mix(in srgb, var(--cbp-accent) 85%, #000); } #cbp-portal .cbp-login-links { font-size: 14px; display: flex; gap: 8px; justify-content: center; color: var(--cbp-ink-3); } /* ---------- Responsive ---------- */ @media (max-width: 960px) { #cbp-portal .cbp-shell { grid-template-columns: 1fr; gap: 18px; } /* Phones & tablets: a compact bar with a Menu button; the full section list opens below it. */ #cbp-portal .cbp-side { position: static; padding: 10px 12px; min-width: 0; border-radius: 12px; } #cbp-portal .cbp-me { padding: 0; margin: 0; border-bottom: 0; } #cbp-portal .cbp-avatar { width: 36px; height: 36px; font-size: 14px; } #cbp-portal .cbp-nav { display: none; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-side.is-open .cbp-nav { display: flex; } #cbp-portal .cbp-side.is-open .cbp-nav-label { display: block; } #cbp-portal .cbp-nav a { min-height: 44px; } #cbp-portal .cbp-admin-link { display: none; } } @media (max-width: 720px) { #cbp-portal { padding: 12px 0 32px; font-size: 15px; } #cbp-portal .cbp-hero { padding: 22px 20px; } #cbp-portal .cbp-fgrid { grid-template-columns: 1fr; } #cbp-portal .cbp-fs { padding: 16px; } #cbp-portal .cbp-class { padding: 16px; gap: 12px; } #cbp-portal .cbp-date { width: 52px; } #cbp-portal .cbp-login { grid-template-columns: 1fr; } #cbp-portal .cbp-login-brand { padding: 26px 22px; } #cbp-portal .cbp-login-brand ul { display: none; } #cbp-portal .cbp-login-form { padding: 26px 22px; } #cbp-portal .cbp-form-foot { position: static; } #cbp-portal .cbp-form-foot .cbp-btn-row, #cbp-portal .cbp-form-foot .cbp-btn { width: 100%; } #cbp-portal .cbp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } #cbp-portal .cbp-stat { padding: 14px; column-gap: 10px; } #cbp-portal .cbp-stat-ic { width: 38px; height: 38px; } } @media (prefers-reduced-motion: reduce) { #cbp-portal * { transition: none !important; } } /* ---------- Payments & locked fields (v1.1) ---------- */ #cbp-portal .cbp-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } #cbp-portal .cbp-badge-pay::before { border-radius: 2px; } #cbp-portal .cbp-pay { border-color: color-mix(in srgb, var(--cbp-primary) 25%, #fff); display: flex; flex-direction: column; gap: 14px; } #cbp-portal .cbp-pay legend { margin-bottom: 0; } #cbp-portal .cbp-fee { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--cbp-primary-soft); } #cbp-portal .cbp-fee strong { font-size: 22px; font-weight: 800; color: var(--cbp-primary); font-variant-numeric: tabular-nums; } #cbp-portal .cbp-pay-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; } #cbp-portal .cbp-pay-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--cbp-line); border-radius: 12px; cursor: pointer; margin: 0; transition: border-color .15s, background .15s; } #cbp-portal .cbp-pay-opt input { margin: 3px 0 0; accent-color: var(--cbp-primary); width: 18px; height: 18px; flex: none; } #cbp-portal .cbp-pay-opt span { display: flex; flex-direction: column; gap: 2px; } #cbp-portal .cbp-pay-opt small { color: var(--cbp-ink-3); font-size: 13px; } #cbp-portal .cbp-pay-opt.is-on { border-color: var(--cbp-primary); background: var(--cbp-primary-soft); } #cbp-portal .cbp-card-fields { display: flex; flex-direction: column; gap: 10px; } #cbp-portal .cbp-secure { display: flex; gap: 6px; align-items: center; font-size: 13px; } #cbp-portal .cbp-secure .cbp-i { color: #1a7f37; } #cbp-portal .cbp-fs-locked { background: var(--cbp-bg); box-shadow: none; } #cbp-portal .cbp-fs-locked legend { color: var(--cbp-ink-3); } #cbp-portal .cbp-field.is-locked { gap: 2px; } #cbp-portal .cbp-lock-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--cbp-ink-3); text-transform: uppercase; letter-spacing: .04em; } #cbp-portal .cbp-lock-val { font-size: 15px; color: var(--cbp-ink-2); font-weight: 550; overflow-wrap: anywhere; } #cbp-portal .cbp-pay-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; } #cbp-portal .cbp-pay-table td { padding: 6px 8px 6px 0; border-top: 1px solid var(--cbp-line); color: var(--cbp-ink-2); vertical-align: top; } #cbp-portal .cbp-pay-table td:nth-child(3) { font-weight: 700; color: var(--cbp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } #cbp-portal .cbp-nav-label { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; color: var(--cbp-ink-3); padding: 14px 12px 4px; } #cbp-portal .cbp-nav a.cbp-nav-extra { font-size: 14px; padding: 8px 12px; } /* ---------- Courses (v1.1) ---------- */ #cbp-portal .cbp-sec-head { margin-bottom: 12px; } #cbp-portal .cbp-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; } #cbp-portal .cbp-course { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); box-shadow: var(--cbp-shadow); color: var(--cbp-ink); text-decoration: none; transition: border-color .15s, transform .15s; } #cbp-portal .cbp-course:hover { text-decoration: none; border-color: color-mix(in srgb, var(--cbp-primary) 40%, #fff); transform: translateY(-2px); } #cbp-portal .cbp-course-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--cbp-accent-soft); color: var(--cbp-accent); flex: none; } #cbp-portal .cbp-course-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } #cbp-portal .cbp-course-t strong { font-size: 16px; } #cbp-portal .cbp-course-t small { color: var(--cbp-ink-3); font-size: 13px; } #cbp-portal .cbp-course-go { color: var(--cbp-primary); font-size: 20px; font-weight: 700; } #cbp-portal .cbp-back { font-size: 14px; font-weight: 600; margin-bottom: -10px; } #cbp-portal .cbp-info { background: var(--cbp-card); border: 1px solid var(--cbp-line); border-left: 4px solid var(--cbp-accent); border-radius: var(--cbp-radius); padding: 20px 24px; box-shadow: var(--cbp-shadow); color: var(--cbp-ink-2); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; } #cbp-portal .cbp-info h2, #cbp-portal .cbp-info h3 { color: var(--cbp-ink); margin: 0 0 8px; font-size: 17px; } #cbp-portal .cbp-info h3 + p, #cbp-portal .cbp-info p + h3, #cbp-portal .cbp-info ul + h3, #cbp-portal .cbp-info details + h3 { margin-top: 14px; } #cbp-portal .cbp-info p { margin: 0 0 10px; } #cbp-portal .cbp-info ul { list-style: disc; padding-left: 22px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; } #cbp-portal .cbp-info a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } #cbp-portal .cbp-info details { margin-top: 12px; border-top: 1px solid var(--cbp-line); padding-top: 12px; } #cbp-portal .cbp-info summary { cursor: pointer; font-weight: 700; color: var(--cbp-primary); } #cbp-portal .cbp-info .cbp-table-wrap { overflow-x: auto; margin-top: 12px; } #cbp-portal .cbp-info table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; } #cbp-portal .cbp-info th, #cbp-portal .cbp-info td { border: 1px solid var(--cbp-line); padding: 8px 10px; text-align: left; vertical-align: top; } #cbp-portal .cbp-info thead th { background: var(--cbp-primary-soft); color: var(--cbp-primary); } #cbp-portal .cbp-info tbody th { background: var(--cbp-bg); color: var(--cbp-ink); width: 140px; } #cbp-portal .cbp-course-sections { display: flex; flex-direction: column; gap: 26px; } #cbp-portal .cbp-sec-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 18px; } #cbp-portal .cbp-sec-title em { font-style: normal; font-size: 12px; font-weight: 700; background: var(--cbp-bg); color: var(--cbp-ink-2); padding: 1px 8px; border-radius: 999px; } /* ---------- Manage hub (v1.2) ---------- */ #cbp-portal .cbp-count { font-style: normal; font-size: 12px; background: var(--cbp-bg); padding: 1px 8px; border-radius: 999px; color: var(--cbp-ink-2); margin-left: 6px; } #cbp-portal .cbp-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 28px 16px; border: 2px dashed color-mix(in srgb, var(--cbp-primary) 30%, #fff); border-radius: var(--cbp-radius); background: var(--cbp-primary-soft); cursor: pointer; margin: 0; transition: background .15s, border-color .15s; } #cbp-portal .cbp-drop.is-over, #cbp-portal .cbp-drop:hover { border-color: var(--cbp-primary); background: color-mix(in srgb, var(--cbp-primary) 14%, #fff); } #cbp-portal .cbp-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } #cbp-portal .cbp-drop-ic { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--cbp-primary); } #cbp-portal .cbp-drop small { color: var(--cbp-ink-3); } #cbp-portal .cbp-queue { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow: auto; border: 1px solid var(--cbp-line); border-radius: 10px; padding: 6px; } #cbp-portal .cbp-queue li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 14px; } #cbp-portal .cbp-queue li .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cbp-portal .cbp-queue li .s { color: var(--cbp-ink-3); font-size: 12px; } #cbp-portal .cbp-queue li .st { font-size: 12px; font-weight: 700; } #cbp-portal .cbp-queue li button { border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: var(--cbp-ink-3); padding: 0 4px; } #cbp-portal .cbp-queue li.busy { background: var(--cbp-primary-soft); } #cbp-portal .cbp-queue li.ok { background: #edf8f0; } #cbp-portal .cbp-queue li.ok .st { color: #1a7f37; } #cbp-portal .cbp-queue li.bad { background: #fcf0f1; } #cbp-portal .cbp-queue li.bad .st { color: #b32d2e; } #cbp-portal .cbp-rolepick { display: flex; flex-wrap: wrap; gap: 8px; } #cbp-portal .cbp-rchip { margin: 0; cursor: pointer; } #cbp-portal .cbp-rchip input { position: absolute; opacity: 0; width: 1px; height: 1px; } #cbp-portal .cbp-rchip span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1.5px solid var(--cbp-line); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--cbp-ink-2); background: var(--cbp-card); } #cbp-portal .cbp-rchip input:checked + span { background: var(--cbp-primary); border-color: var(--cbp-primary); color: #fff; } #cbp-portal .cbp-rchip input:checked + span::before { content: "✓"; } #cbp-portal .cbp-rchip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--cbp-primary) 45%, transparent); outline-offset: 2px; } #cbp-portal .cbp-rchip-all input:checked + span { background: #1a7f37; border-color: #1a7f37; } #cbp-portal .cbp-addlink { border-top: 1px solid var(--cbp-line); padding-top: 12px; } #cbp-portal .cbp-addlink summary { cursor: pointer; font-weight: 600; color: var(--cbp-primary); } #cbp-portal .cbp-addlink form { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } #cbp-portal .cbp-addlink .cbp-fgrid { width: 100%; } #cbp-portal .cbp-mlist { display: flex; flex-direction: column; border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-mrow { border-bottom: 1px solid var(--cbp-line); padding: 12px 4px; scroll-margin-top: 90px; } #cbp-portal .cbp-mrow.is-hl { background: color-mix(in srgb, var(--cbp-accent) 6%, #fff); } #cbp-portal .cbp-mrow-main { display: flex; gap: 12px; align-items: flex-start; } #cbp-portal .cbp-mtype { flex: none; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; background: var(--cbp-bg); color: var(--cbp-ink-2); width: 82px; text-align: center; } #cbp-portal .cbp-mtype-exam { background: #fdecee; color: #b3261e; } #cbp-portal .cbp-mtype-video { background: var(--cbp-primary-soft); color: var(--cbp-primary); } #cbp-portal .cbp-mrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } #cbp-portal .cbp-mrow-t small { color: var(--cbp-ink-3); font-size: 13px; overflow-wrap: anywhere; } #cbp-portal .cbp-mroles { display: flex; flex-wrap: wrap; gap: 4px; } #cbp-portal .cbp-mroles .cbp-chip { font-size: 11px; padding: 2px 8px; } #cbp-portal .cbp-mrow-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } #cbp-portal .cbp-medit { margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--cbp-bg); display: flex; flex-direction: column; gap: 12px; } #cbp-portal .cbp-medit form.cbp-form-plain { display: flex; flex-direction: column; gap: 12px; } #cbp-portal .cbp-mdel details summary { list-style: none; display: inline-flex; } #cbp-portal .cbp-mdel details summary::-webkit-details-marker { display: none; } #cbp-portal .cbp-mdel details[open] { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } #cbp-portal .cbp-mdel details[open] button { background: #b32d2e; color: #fff; } #cbp-portal .cbp-mcourse.is-plain { opacity: .85; } #cbp-portal .cbp-mcourse h2 { display: flex; align-items: center; gap: 8px; } #cbp-portal .cbp-secs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #cbp-portal .cbp-sec-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0; background: var(--cbp-primary-soft); color: var(--cbp-primary); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 600; } #cbp-portal .cbp-sec-chip em { font-style: normal; opacity: .7; } #cbp-portal .cbp-sec-chip button { border: 0; background: none; color: inherit; font-size: 16px; cursor: pointer; padding: 0 6px; line-height: 1; } #cbp-portal .cbp-sec-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; } #cbp-portal .cbp-sec-add .cbp-input { min-height: 36px; width: 260px; } #cbp-portal .wp-editor-wrap { width: 100%; } #cbp-portal .wp-editor-container textarea { font-family: ui-monospace, Menlo, Consolas, monospace; } @media (max-width: 720px) { #cbp-portal .cbp-mrow-main { flex-wrap: wrap; } #cbp-portal .cbp-mtype { width: auto; } #cbp-portal .cbp-mrow-act { width: 100%; justify-content: flex-start; } } #cbp-portal .cbp-secure-note { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--cbp-ink-3); width: 100%; } #cbp-portal .cbp-chip-dl { background: #edf8f0; color: #1a6b33; border-color: #bfe3c9; font-size: 11px; padding: 2px 8px; text-decoration: none; } #cbp-portal .cbp-tablewrap { overflow-x: auto; } #cbp-portal .cbp-table { width: 100%; border-collapse: collapse; font-size: 14px; } #cbp-portal .cbp-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--cbp-ink-3); padding: 8px 10px; border-bottom: 1px solid var(--cbp-line); white-space: nowrap; } #cbp-portal .cbp-table td { padding: 9px 10px; border-bottom: 1px solid var(--cbp-line); vertical-align: top; } #cbp-portal .cbp-table tr:hover td { background: var(--cbp-bg); } #cbp-portal .cbp-logfilter { justify-content: flex-start; } #cbp-portal .cbp-date-f { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cbp-ink-2); margin: 0; } /* ---------- v1.3: requests, inbox, invoices ---------- */ #cbp-portal .cbp-nav a em.is-hot, #cbp-portal .cbp-tabs a em.is-hot { background: var(--cbp-accent); color: #fff; } #cbp-portal .cbp-alert-link { text-decoration: none; } #cbp-portal .cbp-alert-link:hover { text-decoration: none; filter: brightness(.98); } #cbp-portal .cbp-todo { gap: 12px; } #cbp-portal .cbp-seg a { display: inline-flex; align-items: center; gap: 4px; border-radius: 8px; padding: 7px 14px; font-size: 14px; font-weight: 600; color: var(--cbp-ink-2); text-decoration: none; min-height: 36px; } #cbp-portal .cbp-seg a em { font-style: normal; font-size: 12px; opacity: .7; } #cbp-portal .cbp-seg a.is-active { background: var(--cbp-primary); color: #fff; } #cbp-portal .cbp-seg a:hover:not(.is-active) { background: var(--cbp-bg); color: var(--cbp-ink); } #cbp-portal .cbp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; } #cbp-portal .cbp-tile { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 12px 14px; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: 12px; color: var(--cbp-ink-2); text-decoration: none; box-shadow: var(--cbp-shadow); } #cbp-portal .cbp-tile strong { font-size: 20px; color: var(--cbp-ink); font-variant-numeric: tabular-nums; } #cbp-portal .cbp-tile span { grid-column: 1 / -1; font-size: 12px; font-weight: 600; } #cbp-portal .cbp-tile:hover { text-decoration: none; border-color: color-mix(in srgb, var(--cbp-primary) 40%, #fff); } #cbp-portal .cbp-tile.is-active { border-color: var(--cbp-primary); background: var(--cbp-primary-soft); color: var(--cbp-primary); } #cbp-portal .cbp-tile.is-hot .cbp-i, #cbp-portal .cbp-tile.is-hot strong { color: var(--cbp-accent); } #cbp-portal .cbp-panel-flush { padding: 0; overflow: hidden; } #cbp-portal .cbp-panel-flush .cbp-table th:first-child, #cbp-portal .cbp-panel-flush .cbp-table td:first-child { padding-left: 18px; } #cbp-portal .cbp-reqtable td { white-space: nowrap; } #cbp-portal .cbp-reqtable td:nth-child(2) { white-space: normal; } #cbp-portal .cbp-req-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 18px; align-items: start; } #cbp-portal .cbp-req-side { display: flex; flex-direction: column; gap: 18px; } #cbp-portal .cbp-dl { display: grid; grid-template-columns: 1fr; margin: 0; } #cbp-portal .cbp-dl > div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cbp-line); } #cbp-portal .cbp-dl > div.is-changed { background: #fff7e8; margin: 0 -10px; padding: 8px 10px; border-radius: 8px; } #cbp-portal .cbp-dl dt { font-size: 13px; color: var(--cbp-ink-3); font-weight: 600; } #cbp-portal .cbp-dl dd { margin: 0; overflow-wrap: anywhere; } #cbp-portal .cbp-btn-block { width: 100%; justify-content: flex-start; } #cbp-portal .cbp-act-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--cbp-line); border-radius: 12px; } #cbp-portal .cbp-return summary { list-style: none; } #cbp-portal .cbp-return summary::-webkit-details-marker { display: none; } #cbp-portal .cbp-return[open] summary { margin-bottom: 8px; } #cbp-portal .cbp-btn-subtle { font-weight: 500; color: var(--cbp-ink-3); } #cbp-portal .cbp-charges { display: flex; flex-direction: column; gap: 10px; } #cbp-portal .cbp-charges li { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--cbp-line); } #cbp-portal .cbp-charges small { display: block; } #cbp-portal .cbp-charge-form { display: flex; gap: 6px; } #cbp-portal .cbp-charge-form .cbp-input { min-height: 36px; font-size: 14px; } #cbp-portal .cbp-mini-log { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } #cbp-portal .cbp-mini-log small { display: block; color: var(--cbp-ink-3); font-size: 12px; } #cbp-portal .cbp-threads { display: flex; flex-direction: column; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); overflow: hidden; box-shadow: var(--cbp-shadow); } #cbp-portal .cbp-threads li + li { border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-threads a { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; color: var(--cbp-ink); text-decoration: none; } #cbp-portal .cbp-threads a:hover { background: var(--cbp-bg); } #cbp-portal .cbp-threads li.is-unread a { background: color-mix(in srgb, var(--cbp-primary) 5%, #fff); } #cbp-portal .cbp-threads li.is-unread strong { color: var(--cbp-primary); } #cbp-portal .cbp-th-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } #cbp-portal .cbp-th-top strong { flex: 1; min-width: 0; } #cbp-portal .cbp-dot { font-style: normal; font-size: 11px; font-weight: 800; background: var(--cbp-accent); color: #fff; border-radius: 999px; padding: 2px 8px; } #cbp-portal .cbp-th-meta { font-size: 13px; color: var(--cbp-ink-3); } #cbp-portal .cbp-th-snip { font-size: 14px; color: var(--cbp-ink-2); } #cbp-portal .cbp-chat { display: flex; flex-direction: column; gap: 12px; } #cbp-portal .cbp-chat li { display: flex; } #cbp-portal .cbp-chat li.is-office { justify-content: flex-start; } #cbp-portal .cbp-chat li.is-user { justify-content: flex-end; } #cbp-portal .cbp-bubble { max-width: min(640px, 88%); background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: 16px; padding: 12px 16px; box-shadow: var(--cbp-shadow); display: flex; flex-direction: column; gap: 6px; } #cbp-portal .is-office .cbp-bubble { background: var(--cbp-primary-soft); border-color: color-mix(in srgb, var(--cbp-primary) 20%, #fff); border-bottom-left-radius: 4px; } #cbp-portal .is-user .cbp-bubble { border-bottom-right-radius: 4px; } #cbp-portal .cbp-bubble-h { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; } #cbp-portal .cbp-bubble-h small { color: var(--cbp-ink-3); font-size: 12px; } #cbp-portal .cbp-bubble-b { overflow-wrap: anywhere; } #cbp-portal .cbp-attach { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 600; } #cbp-portal .cbp-reply { gap: 10px; } #cbp-portal .cbp-reply-foot { justify-content: space-between; } #cbp-portal .cbp-attach-in { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--cbp-ink-2); cursor: pointer; } #cbp-portal .cbp-attach-in input { font-size: 13px; max-width: 220px; } #cbp-portal .cbp-check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; margin: 0; } #cbp-portal .cbp-newmsg { gap: 14px; } #cbp-portal .cbp-pick { display: flex; flex-direction: column; border: 1px solid var(--cbp-line); border-radius: 12px; overflow: hidden; } #cbp-portal .cbp-pick li + li { border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-pick label { display: flex; gap: 12px; align-items: center; padding: 10px 14px; margin: 0; cursor: pointer; } #cbp-portal .cbp-pick label span { flex: 1; } #cbp-portal .cbp-inline-form { display: inline-flex; margin: 0; } #cbp-portal .cbp-invoice { background: #fff; border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); padding: 32px; box-shadow: var(--cbp-shadow); display: flex; flex-direction: column; gap: 22px; color: #111; } #cbp-portal .cbp-inv-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 3px solid var(--cbp-primary); padding-bottom: 16px; } #cbp-portal .cbp-inv-head h2 { font-size: 28px; letter-spacing: .08em; color: var(--cbp-primary); } #cbp-portal .cbp-inv-no { font-weight: 700; color: var(--cbp-ink-2); } #cbp-portal .cbp-inv-from { text-align: right; font-size: 14px; color: var(--cbp-ink-2); } #cbp-portal .cbp-inv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } #cbp-portal .cbp-inv-meta small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cbp-ink-3); font-weight: 700; } #cbp-portal .cbp-inv-meta strong { display: block; } #cbp-portal .cbp-inv-lines { width: 100%; border-collapse: collapse; } #cbp-portal .cbp-inv-lines th, #cbp-portal .cbp-inv-lines td { padding: 10px 8px; border-bottom: 1px solid var(--cbp-line); text-align: left; } #cbp-portal .cbp-inv-lines th:last-child, #cbp-portal .cbp-inv-lines td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } #cbp-portal .cbp-inv-lines thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-3); } #cbp-portal .cbp-inv-lines tfoot th { font-size: 18px; border-bottom: 0; border-top: 2px solid var(--cbp-ink); } #cbp-portal .cbp-inv-note { color: var(--cbp-ink-2); } #cbp-portal .cbp-inv-paid { align-self: flex-start; font-weight: 800; color: #1a7f37; border: 2px solid #1a7f37; border-radius: 8px; padding: 6px 12px; letter-spacing: .04em; } @media (max-width: 900px) { #cbp-portal .cbp-req-grid { grid-template-columns: 1fr; } #cbp-portal .cbp-dl > div { grid-template-columns: 1fr; gap: 2px; } } @media print { body * { visibility: hidden !important; } #cbp-invoice, #cbp-invoice * { visibility: visible !important; } #cbp-invoice { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: 0; } } #cbp-portal .cbp-course-tabs { margin-top: 0; } #cbp-portal .cbp-course-tabs a { font-size: 16px; } /* ---------- v1.3.2: read/unread ---------- */ #cbp-portal .cbp-threads li { position: relative; } #cbp-portal .cbp-threads li a { padding-right: 150px; } #cbp-portal .cbp-th-acts { position: absolute; right: 16px; bottom: 12px; } #cbp-portal .cbp-th-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: none; } #cbp-portal .cbp-threads li.is-unread .cbp-th-dot { background: var(--cbp-accent); } #cbp-portal .cbp-threads li.is-unread strong { font-weight: 800; } #cbp-portal .cbp-threads li.is-read strong { font-weight: 550; color: var(--cbp-ink-2); } #cbp-portal .cbp-readlbl { font-style: normal; font-size: 11px; font-weight: 700; color: var(--cbp-ink-3); background: var(--cbp-bg); border-radius: 999px; padding: 2px 8px; } #cbp-portal .cbp-mini-form { display: inline; margin: 0; } #cbp-portal .cbp-linkbtn { border: 0; background: none; padding: 4px 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--cbp-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-transform: none; letter-spacing: normal; min-height: 0; } #cbp-portal .cbp-linkbtn:hover { background: none; color: var(--cbp-ink); } #cbp-portal .cbp-list-actions { display: flex; justify-content: flex-end; margin-bottom: -12px; } #cbp-portal .cbp-receipt { align-self: flex-end; font-size: 11px; font-weight: 700; color: var(--cbp-ink-3); } #cbp-portal .cbp-receipt.is-read { color: #1a7f37; } #cbp-portal .cbp-chat li.is-system { justify-content: center; } #cbp-portal .cbp-chat li.is-system span { font-size: 12px; color: var(--cbp-ink-3); background: var(--cbp-bg); border-radius: 999px; padding: 4px 12px; } #cbp-portal .cbp-thread-foot { justify-content: flex-end; } @media (max-width: 720px) { #cbp-portal .cbp-threads li a { padding-right: 18px; padding-bottom: 36px; } #cbp-portal .cbp-th-acts { left: 12px; right: auto; bottom: 8px; } } #cbp-portal .cbp-tabs { overflow-y: hidden; scrollbar-width: none; } #cbp-portal .cbp-tabs::-webkit-scrollbar { display: none; } #cbp-portal .cbp-warn-text { color: #b32d2e; font-weight: 700; } /* ---------- Public class list ---------- */ #cbp-portal.cbp-public { padding-top: 8px; display: flex; flex-direction: column; gap: 16px; } #cbp-portal .cbp-pub-list { display: flex; flex-direction: column; gap: 12px; } #cbp-portal .cbp-pub { display: flex; gap: 18px; align-items: center; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); padding: 18px 20px; box-shadow: var(--cbp-shadow); } #cbp-portal .cbp-pub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } #cbp-portal .cbp-pub-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } #cbp-portal .cbp-pub-price { font-size: 22px; font-weight: 800; color: var(--cbp-ink); font-variant-numeric: tabular-nums; } #cbp-portal.cbp-public .cbp-toolbar { justify-content: flex-start; } @media (max-width: 720px) { #cbp-portal .cbp-pub { flex-wrap: wrap; } #cbp-portal .cbp-pub-side { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; } } /* ---------- v1.4.1: class request cards & decision bar ---------- */ #cbp-portal .cbp-reqlist { display: flex; flex-direction: column; gap: 10px; } #cbp-portal .cbp-req { background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); box-shadow: var(--cbp-shadow); overflow: hidden; } #cbp-portal .cbp-req:hover { border-color: color-mix(in srgb, var(--cbp-primary) 40%, #fff); } #cbp-portal .cbp-req-link { display: flex; gap: 14px; padding: 14px 16px 8px; color: var(--cbp-ink); text-decoration: none; } #cbp-portal .cbp-req-link:hover { text-decoration: none; } #cbp-portal .cbp-req-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } #cbp-portal .cbp-req-main strong { font-size: 16px; } #cbp-portal .cbp-req-main small { color: var(--cbp-ink-3); font-size: 13px; } #cbp-portal .cbp-badges-left { justify-content: flex-start; margin-top: 4px; } #cbp-portal .cbp-req-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 16px 14px 90px; } #cbp-portal .cbp-actionbar { border: 2px solid color-mix(in srgb, var(--cbp-primary) 25%, #fff); } #cbp-portal .cbp-actionbar-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } #cbp-portal .cbp-btn-lg { min-height: 50px; padding: 12px 22px; font-size: 16px; border-radius: 12px; } #cbp-portal .cbp-actionbar .cbp-btn-danger { background: #b32d2e; color: #fff; border-color: #b32d2e; } #cbp-portal .cbp-actionbar .cbp-btn-danger:hover { background: #8a1f20; color: #fff; } #cbp-portal .cbp-actionbar details:not([open]) { display: none; } #cbp-portal .cbp-actionbar details[open] { display: block; } #cbp-portal .cbp-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (max-width: 720px) { #cbp-portal .cbp-req-quick { padding-left: 16px; } #cbp-portal .cbp-actionbar-btns .cbp-btn, #cbp-portal .cbp-actionbar-btns form, #cbp-portal .cbp-actionbar-btns form .cbp-btn { width: 100%; } } /* ---------- v1.5: import, clicks, public months ---------- */ #cbp-portal .cbp-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; } #cbp-portal .cbp-pub-month { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--cbp-primary); margin: 10px 0 0; } #cbp-portal .cbp-pub-count { margin: -6px 0 0; } #cbp-portal .cbp-pub-more { display: flex; justify-content: center; } #cbp-portal .cbp-bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 8px; overflow-x: auto; } #cbp-portal .cbp-bar { flex: 1 0 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; } #cbp-portal .cbp-bar span { width: 100%; max-width: 28px; background: var(--cbp-primary); border-radius: 4px 4px 0 0; min-height: 2px; } #cbp-portal .cbp-bar small { font-size: 10px; color: var(--cbp-ink-3); white-space: nowrap; } #cbp-portal details > summary { cursor: pointer; margin: 8px 0; } #cbp-portal .cbp-prov { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; } #cbp-portal .cbp-prov-arc { background: #fdecee; color: #c8102e; } #cbp-portal .cbp-prov-aha { background: #9b1c1c; color: #fff; } #cbp-portal .cbp-pub-map { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.25); text-underline-offset: 2px; } #cbp-portal .cbp-pub-map:hover { color: #c8102e; } #cbp-portal .cbp-class-facts li { align-items: flex-start; } #cbp-portal .cbp-class-facts li svg { flex: 0 0 auto; margin-top: 2px; } /* Contractor payroll */ #cbp-portal .cbp-pr-row { position: relative; margin: 0 0 16px; } #cbp-portal .cbp-pr-remove { position: absolute; top: 6px; right: 8px; } #cbp-portal .cbp-pr-total { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: #f3f6fb; font-size: 15px; } #cbp-portal .cbp-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 16px; font-weight: 600; } #cbp-portal .cbp-check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; } #cbp-portal .cbp-err { color: #b42318; font-size: 13px; margin: 4px 0 0; } #cbp-portal .cbp-field.has-error .cbp-input { border-color: #d92d20; } #cbp-portal .cbp-pr-lines td small { color: #667085; } #cbp-portal .cbp-req:has(.cbp-pr-pick) { position: relative; } #cbp-portal .cbp-req:has(.cbp-pr-pick) .cbp-req-link { padding-right: 52px; } #cbp-portal .cbp-pr-pick { position: absolute; top: 10px; right: 10px; padding: 6px; cursor: pointer; z-index: 1; } #cbp-portal .cbp-pr-pick input { width: 20px; height: 20px; cursor: pointer; } #cbp-portal .cbp-pr-bulk { margin-top: 16px; } #cbp-portal .cbp-inline-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; } #cbp-portal .cbp-log { margin: 0; padding-left: 18px; } #cbp-portal .cbp-log li { margin: 0 0 10px; } #cbp-portal .cbp-seg a em { font-style: normal; font-size: 12px; background: rgba(0,0,0,.08); border-radius: 999px; padding: 1px 7px; margin-left: 4px; } @media (max-width: 640px) { #cbp-portal .cbp-pr-remove { position: static; margin-bottom: 8px; } } /* The floated legend must not squeeze the class fields (the hidden Remove button used to take the "clear"). */ #cbp-portal .cbp-pr-row .cbp-fgrid { clear: both; } #cbp-portal .cbp-pr-row::after { content: ""; display: block; clear: both; } /* Users: waiting for access + all users + profile */ #cbp-portal .cbp-userlist { display: grid; gap: 16px; } #cbp-portal .cbp-ucard-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } #cbp-portal .cbp-ucard-head h2, #cbp-portal .cbp-ucard-head h3 { margin: 0; } #cbp-portal .cbp-ucard-head p { margin: 2px 0 0; } #cbp-portal .cbp-ucard-when { margin-left: auto; font-size: 13px; color: var(--cbp-ink-3); } #cbp-portal .cbp-profile-head { margin: 8px 0 18px; } #cbp-portal .cbp-udl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; margin: 0 0 14px; } #cbp-portal .cbp-udl > div { display: block; border: 0; padding: 0; } #cbp-portal .cbp-udl dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cbp-ink-3); } #cbp-portal .cbp-udl dd { margin: 2px 0 0; } #cbp-portal .cbp-label { font-weight: 700; margin: 6px 0 8px; } #cbp-portal .cbp-rolegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-bottom: 14px; } #cbp-portal .cbp-rolebox { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--cbp-line); border-radius: 10px; cursor: pointer; background: var(--cbp-card); } #cbp-portal .cbp-rolebox:has(input:checked) { border-color: var(--cbp-primary); background: color-mix(in srgb, var(--cbp-primary) 7%, #fff); } #cbp-portal .cbp-rolebox input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; } #cbp-portal .cbp-rolebox small { display: block; color: var(--cbp-ink-3); font-size: 12px; font-weight: 500; } #cbp-portal .cbp-more { margin: 4px 0 10px; } #cbp-portal .cbp-more summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; } #cbp-portal .cbp-small { font-size: 13px; } #cbp-portal .cbp-ulist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } #cbp-portal .cbp-ulist a { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); color: var(--cbp-ink); text-decoration: none; } #cbp-portal .cbp-ulist a:hover { border-color: color-mix(in srgb, var(--cbp-primary) 40%, #fff); } #cbp-portal .cbp-ulist-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } #cbp-portal .cbp-ulist-main small { color: var(--cbp-ink-3); overflow-wrap: anywhere; } #cbp-portal .cbp-ulist-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } #cbp-portal .cbp-avatar-sm { width: 38px; height: 38px; font-size: 14px; flex: 0 0 auto; } #cbp-portal .cbp-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; } #cbp-portal .cbp-sticky-foot { position: sticky; bottom: 0; background: var(--cbp-bg, #fff); padding: 12px 0; z-index: 2; } @media (max-width: 640px) { #cbp-portal .cbp-ulist a { flex-wrap: wrap; } #cbp-portal .cbp-ulist-side { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; } #cbp-portal .cbp-ucard-when { margin-left: 0; width: 100%; } } #cbp-portal .cbp-plainfs { border: 0; padding: 0; margin: 0; min-width: 0; } #cbp-portal .cbp-plainfs[disabled] .cbp-form-foot { display: none; } #cbp-portal .cbp-rolebox-wide { max-width: 560px; } #cbp-portal .cbp-prov-cb { background: #e8eef8; color: #1d3f72; } #cbp-portal .cbp-tsc-row details > summary { list-style: none; display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: var(--cbp-radius); cursor: pointer; } #cbp-portal .cbp-tsc-row details > summary::-webkit-details-marker { display: none; } #cbp-portal .cbp-tsc-row details[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #cbp-portal .cbp-tsc-edit { border: 1px solid var(--cbp-line); border-top: 0; padding: 14px; border-radius: 0 0 var(--cbp-radius) var(--cbp-radius); background: var(--cbp-card); } #cbp-portal .cbp-tsc-row .cbp-ulist-side { flex-direction: row; } @media (max-width: 640px) { #cbp-portal .cbp-tsc-row details > summary { flex-wrap: wrap; } } #cbp-portal .cbp-chip-add { border: 1px dashed var(--cbp-line); background: var(--cbp-card); cursor: pointer; font: inherit; } #cbp-portal .cbp-chip-add:hover { border-color: var(--cbp-primary); } #cbp-portal .cbp-inline-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0; } .cbp-cardfilter{max-width:420px;width:100%;margin:0 0 14px} /* ---------- Documents ---------- */ #cbp-portal .cbp-dv { gap: 18px; } #cbp-portal .cbp-dv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } #cbp-portal .cbp-dv-head h2 { font-size: 19px; } #cbp-portal .cbp-dv-head p { margin-top: 2px; } #cbp-portal .cbp-dv-sum { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; border-radius: 12px; background: var(--cbp-bg); border: 1px solid var(--cbp-line); } #cbp-portal .cbp-dv-meter-top { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--cbp-ink-2); margin-bottom: 8px; } #cbp-portal .cbp-dv-meter-top strong { font-size: 20px; color: var(--cbp-ink); } #cbp-portal .cbp-dv-meter-top span { margin-left: auto; font-weight: 700; color: var(--cbp-ink); } #cbp-portal .cbp-dv-bar { position: relative; height: 10px; border-radius: 999px; background: #dfe5ee; overflow: hidden; min-width: 60px; } #cbp-portal .cbp-dv-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #e0a526, #d9822b); } #cbp-portal .cbp-dv-bar.is-done > span { background: linear-gradient(90deg, #22a06b, #1b7f55); } #cbp-portal .cbp-dv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } #cbp-portal .cbp-dv-stats li { background: #fff; border: 1px solid var(--cbp-line); border-radius: 10px; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--cbp-ink-3); text-transform: uppercase; letter-spacing: .03em; } #cbp-portal .cbp-dv-stats strong { display: block; font-size: 20px; letter-spacing: 0; line-height: 1.2; } #cbp-portal .cbp-dv-stats .is-green strong { color: #1b7f55; } #cbp-portal .cbp-dv-stats .is-red strong { color: #c0283a; } #cbp-portal .cbp-dv-stats .is-amber strong { color: #b56a00; } #cbp-portal .cbp-dv-group h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-2); margin: 4px 0 10px; } #cbp-portal .cbp-dv-group h3 span { font-size: 12px; font-weight: 650; background: var(--cbp-bg); border: 1px solid var(--cbp-line); color: var(--cbp-ink-2); border-radius: 999px; padding: 0 8px; letter-spacing: 0; } #cbp-portal .cbp-dv-list { display: flex; flex-direction: column; border: 1px solid var(--cbp-line); border-radius: 12px; overflow: hidden; } #cbp-portal .cbp-dv-row { padding: 14px 16px; border-left: 4px solid transparent; background: #fff; scroll-margin-top: 90px; } #cbp-portal .cbp-dv-row + .cbp-dv-row { border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-dv-row.is-missing, #cbp-portal .cbp-dv-row.is-expired { border-left-color: #d7263d; } #cbp-portal .cbp-dv-row.is-expiring { border-left-color: #e0a526; } #cbp-portal .cbp-dv-row.is-ok { border-left-color: #22a06b; } #cbp-portal .cbp-dv-row:target { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cbp-primary) 40%, transparent); } #cbp-portal .cbp-dv-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; } #cbp-portal .cbp-dv-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--cbp-primary-soft); color: var(--cbp-primary); } #cbp-portal .cbp-dv-row.is-missing .cbp-dv-ic, #cbp-portal .cbp-dv-row.is-expired .cbp-dv-ic { background: var(--cbp-accent-soft); color: var(--cbp-accent); } #cbp-portal .cbp-dv-title strong { display: block; font-size: 15px; font-weight: 650; } #cbp-portal .cbp-dv-title small { display: block; font-size: 12.5px; color: var(--cbp-ink-3); } #cbp-portal .cbp-dv-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 650; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } #cbp-portal .cbp-dv-pill.is-green { background: #e5f5ed; color: #1b7f55; } #cbp-portal .cbp-dv-pill.is-amber { background: #fdf3dc; color: #9a5b00; } #cbp-portal .cbp-dv-pill.is-red { background: #fde8eb; color: #b0213a; } #cbp-portal .cbp-dv-pill.is-gray { background: var(--cbp-bg); color: var(--cbp-ink-2); } #cbp-portal .cbp-dv-act { position: relative; } #cbp-portal .cbp-dv-up > summary { list-style: none; cursor: pointer; } #cbp-portal .cbp-dv-up > summary::-webkit-details-marker { display: none; } #cbp-portal .cbp-dv-up[open] > summary { background: var(--cbp-primary-soft); color: var(--cbp-primary); border-color: transparent; } #cbp-portal .cbp-dv-upform { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; width: min(360px, 86vw); display: flex; flex-direction: column; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--cbp-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 32, 64, .16); } #cbp-portal .cbp-dv-drop { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1.5px dashed #c5cfdd; border-radius: 10px; background: var(--cbp-bg); font-size: 13px; color: var(--cbp-ink-3); } #cbp-portal .cbp-dv-drop input { font-size: 14px; color: var(--cbp-ink); max-width: 100%; } #cbp-portal .cbp-dv-date { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--cbp-ink-2); } #cbp-portal .cbp-dv-note { font-size: 12.5px; } #cbp-portal .cbp-dv-file { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 0 50px; padding: 10px 12px; border-radius: 10px; background: var(--cbp-bg); } #cbp-portal .cbp-dv-file.is-old { background: #fff; border: 1px dashed var(--cbp-line); opacity: .9; } #cbp-portal .cbp-dv-fname { min-width: 0; } #cbp-portal .cbp-dv-fname span { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; } #cbp-portal .cbp-dv-fname small { display: block; font-size: 12.5px; color: var(--cbp-ink-3); } #cbp-portal .cbp-dv-fbtns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } #cbp-portal .cbp-dv-rm { margin: 0; } #cbp-portal .cbp-dv-lock { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--cbp-ink-3); } #cbp-portal .cbp-dv-empty { margin: 8px 0 0 50px; font-size: 13.5px; color: var(--cbp-ink-3); } #cbp-portal .cbp-dv-empty a { font-weight: 600; } #cbp-portal .cbp-dv-hist { margin: 8px 0 0 50px; } #cbp-portal .cbp-dv-hist > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cbp-ink-2); display: inline-flex; gap: 5px; align-items: center; } #cbp-portal .cbp-dv-hist .cbp-dv-file { margin-left: 0; } #cbp-portal .cbp-dv-foot { display: flex; gap: 6px; align-items: center; font-size: 13px; } #cbp-portal .cbp-dv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #cbp-portal .cbp-dv-tile { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--cbp-line); box-shadow: var(--cbp-shadow); color: var(--cbp-ink-2); text-decoration: none; font-size: 13px; font-weight: 600; border-top: 4px solid var(--cbp-primary); } #cbp-portal .cbp-dv-tile strong { font-size: 26px; color: var(--cbp-ink); line-height: 1.15; } #cbp-portal .cbp-dv-tile:hover { text-decoration: none; background: var(--cbp-bg); } #cbp-portal .cbp-dv-tile.is-green { border-top-color: #22a06b; } #cbp-portal .cbp-dv-tile.is-red { border-top-color: #d7263d; } #cbp-portal .cbp-dv-tile.is-amber { border-top-color: #e0a526; } #cbp-portal .cbp-dv-tile.is-on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cbp-primary) 45%, transparent); } #cbp-portal .cbp-dv-table { display: flex; flex-direction: column; border: 1px solid var(--cbp-line); border-radius: 12px; overflow: hidden; background: #fff; } #cbp-portal .cbp-dv-tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.4fr) 80px; gap: 14px; align-items: center; padding: 12px 16px; color: var(--cbp-ink); text-decoration: none; } #cbp-portal .cbp-dv-tr.has-site { grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1.3fr) 80px; } #cbp-portal .cbp-dv-tr + .cbp-dv-tr { border-top: 1px solid var(--cbp-line); } #cbp-portal a.cbp-dv-tr:hover { background: var(--cbp-bg); text-decoration: none; } #cbp-portal .cbp-dv-th { background: var(--cbp-bg); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-3); padding-top: 10px; padding-bottom: 10px; } #cbp-portal .cbp-dv-who { display: flex; gap: 10px; align-items: center; min-width: 0; } #cbp-portal .cbp-dv-who > span:last-child { min-width: 0; } #cbp-portal .cbp-dv-who strong { display: block; font-weight: 650; } #cbp-portal .cbp-dv-who small, #cbp-portal .cbp-dv-site { display: block; font-size: 13px; color: var(--cbp-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cbp-portal .cbp-dv-prog { display: flex; align-items: center; gap: 10px; } #cbp-portal .cbp-dv-prog .cbp-dv-bar { flex: 1; height: 8px; } #cbp-portal .cbp-dv-prog small { font-size: 13px; font-weight: 650; color: var(--cbp-ink-2); white-space: nowrap; } #cbp-portal .cbp-dv-need { font-size: 13.5px; font-weight: 600; } #cbp-portal .cbp-dv-need.is-red { color: #b0213a; } #cbp-portal .cbp-dv-need.is-amber { color: #9a5b00; } #cbp-portal .cbp-dv-need.is-green { color: #1b7f55; } #cbp-portal .cbp-dv-go { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 13.5px; font-weight: 650; color: var(--cbp-primary); } #cbp-portal .cbp-dv-mini { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 0 7px; border-radius: 999px; margin-left: 2px; } #cbp-portal .cbp-dv-mini.is-green { background: #e5f5ed; color: #1b7f55; } #cbp-portal .cbp-dv-mini.is-red { background: #fde8eb; color: #b0213a; } @media (max-width: 860px) { #cbp-portal .cbp-dv-sum { grid-template-columns: 1fr; } #cbp-portal .cbp-dv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } #cbp-portal .cbp-dv-th { display: none; } #cbp-portal .cbp-dv-tr, #cbp-portal .cbp-dv-tr.has-site { grid-template-columns: 1fr auto; gap: 6px 12px; } #cbp-portal .cbp-dv-who { grid-column: 1 / -1; } #cbp-portal .cbp-dv-site { grid-column: 1 / -1; } #cbp-portal .cbp-dv-go { display: none; } } @media (max-width: 600px) { #cbp-portal .cbp-dv-top { grid-template-columns: auto minmax(0, 1fr); } #cbp-portal .cbp-dv-top .cbp-dv-pill { grid-column: 2; justify-self: start; } #cbp-portal .cbp-dv-act { grid-column: 1 / -1; } #cbp-portal .cbp-dv-upform { position: static; width: 100%; margin-top: 8px; box-shadow: none; } #cbp-portal .cbp-dv-file, #cbp-portal .cbp-dv-empty, #cbp-portal .cbp-dv-hist { margin-left: 0; } #cbp-portal .cbp-dv-stats { grid-template-columns: repeat(2, 1fr); } } /* ---------- Certificate store ---------- */ #cbp-portal .cbp-cs-table { display: flex; flex-direction: column; border: 1px solid var(--cbp-line); border-radius: 12px; overflow: hidden; } #cbp-portal .cbp-cs-tr { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) 100px 110px 110px; gap: 12px; align-items: center; padding: 12px 16px; margin: 0; cursor: default; } #cbp-portal .cbp-cs-tr + .cbp-cs-tr { border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-cs-tr.is-picked { background: var(--cbp-primary-soft); } #cbp-portal .cbp-cs-th { background: var(--cbp-bg); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-3); padding-top: 10px; padding-bottom: 10px; } #cbp-portal .cbp-cs-name strong { display: block; font-weight: 650; } #cbp-portal .cbp-cs-name small { display: block; color: var(--cbp-ink-3); font-size: 13px; } #cbp-portal .cbp-cs-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--cbp-ink-2); } #cbp-portal .cbp-cs-price, #cbp-portal .cbp-cs-line, #cbp-portal .cbp-cs-amt { font-weight: 650; font-variant-numeric: tabular-nums; } #cbp-portal .cbp-cs-line { text-align: right; } #cbp-portal .cbp-cs-qty { width: 90px; text-align: center; } #cbp-portal .cbp-cs-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; font-size: 15px; color: var(--cbp-ink-2); padding: 4px 16px; } #cbp-portal .cbp-cs-total strong { font-size: 26px; color: var(--cbp-ink); font-variant-numeric: tabular-nums; } #cbp-portal .cbp-cs-pay { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } #cbp-portal .cbp-cs-pay legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; } #cbp-portal .cbp-cs-paymethod { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--cbp-line); border-radius: 12px; cursor: pointer; } #cbp-portal .cbp-cs-paymethod:has(input:checked) { border-color: var(--cbp-primary); background: var(--cbp-primary-soft); } #cbp-portal .cbp-cs-paymethod input { margin-top: 3px; accent-color: var(--cbp-primary); } #cbp-portal .cbp-cs-paymethod small { display: block; color: var(--cbp-ink-2); font-size: 13px; } #cbp-portal .cbp-cs-soon { display: flex; gap: 6px; align-items: center; font-size: 13px; } #cbp-portal .cbp-cs-otr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 100px minmax(0, 1.3fr) 70px; } #cbp-portal .cbp-cs-otr.has-site { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, 1.3fr) 100px minmax(0, 1.3fr) 70px; } #cbp-portal .cbp-cs-otr.is-new { box-shadow: inset 4px 0 0 var(--cbp-primary); } #cbp-portal .cbp-cs-ctr { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) 100px 110px minmax(0, 1.4fr); } #cbp-portal .cbp-cs-cbtns { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } #cbp-portal .cbp-cs-cbtns form { margin: 0; } #cbp-portal .cbp-dv-tile.is-blue { border-top-color: var(--cbp-primary); } #cbp-portal .cbp-cs-detail { gap: 18px; } #cbp-portal .cbp-cs-dhead { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--cbp-line); } #cbp-portal .cbp-cs-dhead h2 { font-size: 22px; } #cbp-portal .cbp-cs-dside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } #cbp-portal .cbp-cs-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } #cbp-portal .cbp-cs-box { padding: 14px 16px; border-radius: 12px; background: var(--cbp-bg); border: 1px solid var(--cbp-line); display: flex; flex-direction: column; gap: 3px; } #cbp-portal .cbp-cs-box h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-3); margin-bottom: 4px; } #cbp-portal .cbp-cs-msg { background: var(--cbp-primary-soft); border-color: transparent; } #cbp-portal .cbp-cs-items { border: 1px solid var(--cbp-line); border-radius: 12px; overflow: hidden; } #cbp-portal .cbp-cs-itr { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) 60px 100px 110px; gap: 12px; padding: 11px 16px; align-items: center; font-variant-numeric: tabular-nums; } #cbp-portal .cbp-cs-itr > span:nth-child(n+3) { text-align: right; } #cbp-portal .cbp-cs-itr + .cbp-cs-itr { border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-cs-itr small { display: block; color: var(--cbp-ink-3); font-size: 12.5px; } #cbp-portal .cbp-cs-ith { background: var(--cbp-bg); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-3); } #cbp-portal .cbp-cs-itot { background: var(--cbp-bg); font-weight: 700; font-size: 16px; } #cbp-portal .cbp-cs-seg { display: inline-flex; border: 1px solid var(--cbp-line); border-radius: 12px; padding: 4px; gap: 4px; background: var(--cbp-bg); flex-wrap: wrap; } #cbp-portal .cbp-cs-seg label { margin: 0; } #cbp-portal .cbp-cs-seg input { position: absolute; opacity: 0; pointer-events: none; } #cbp-portal .cbp-cs-seg span { display: inline-block; padding: 9px 20px; border-radius: 9px; font-weight: 650; color: var(--cbp-ink-2); cursor: pointer; } #cbp-portal .cbp-cs-seg input:checked + span { background: #fff; color: var(--cbp-primary); box-shadow: var(--cbp-shadow); } #cbp-portal .cbp-cs-seg input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--cbp-primary) 45%, transparent); } #cbp-portal .cbp-cs-levels { border: 1px solid var(--cbp-line); border-radius: 12px; padding: 14px 16px; margin: 0; } #cbp-portal .cbp-cs-levels legend { font-weight: 700; padding: 0 6px; } #cbp-portal .cbp-cs-lgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 12px; margin-top: 10px; } #cbp-portal .cbp-cs-lgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--cbp-ink-2); margin: 0; } #cbp-portal .cbp-cs-money { position: relative; } #cbp-portal .cbp-cs-money::before { content: "$"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--cbp-ink-3); } #cbp-portal .cbp-cs-money input { width: 100%; padding-left: 22px; } #cbp-portal .cbp-cs-paybox { padding: 14px 16px; border: 1px solid var(--cbp-line); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; } #cbp-portal .cbp-cs-h3 { margin-top: 6px; } #cbp-portal .cbp-cs-payrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; } #cbp-portal .cbp-cs-soonbox { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px dashed #c5cfdd; background: var(--cbp-bg); color: var(--cbp-ink-2); } #cbp-portal .cbp-cs-level { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; } #cbp-portal .cbp-cs-level label { font-weight: 600; font-size: 14px; } #cbp-portal .cbp-tsc-edit .cbp-cs-level { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cbp-line); } #cbp-portal .cbp-cs-officebar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } #cbp-portal .cbp-cs-sitepick { margin: 0; } @media (max-width: 860px) { #cbp-portal .cbp-cs-th, #cbp-portal .cbp-cs-ith { display: none; } #cbp-portal .cbp-cs-tr { grid-template-columns: 1fr auto; gap: 4px 12px; } #cbp-portal .cbp-cs-name { grid-column: 1 / -1; } #cbp-portal .cbp-cs-sku { grid-column: 1 / -1; } #cbp-portal .cbp-cs-otr, #cbp-portal .cbp-cs-otr.has-site, #cbp-portal .cbp-cs-ctr { grid-template-columns: 1fr auto; gap: 6px 12px; } #cbp-portal .cbp-cs-dgrid, #cbp-portal .cbp-cs-payrow { grid-template-columns: 1fr; } #cbp-portal .cbp-cs-itr { grid-template-columns: 1fr auto auto; } #cbp-portal .cbp-cs-itr > span:nth-child(2), #cbp-portal .cbp-cs-itr > span:nth-child(4) { display: none; } #cbp-portal .cbp-cs-lgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media print { #cbp-portal .cbp-side, #cbp-portal .cbp-noprint, #cbp-portal .cbp-tabs, #cbp-portal .cbp-page-head { display: none !important; } #cbp-portal .cbp-shell { display: block; } #cbp-portal .cbp-panel { box-shadow: none; border: 0; } } /* ---------- Card payments ---------- */ #cbp-portal .cbp-pay-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--cbp-primary); border-radius: 12px; background: #fff; } #cbp-portal #cbp-sq-card { min-height: 90px; } #cbp-portal .cbp-pay-secure { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--cbp-ink-3); } #cbp-portal .cbp-pay-test { display: flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: #9a5b00; background: #fdf3dc; padding: 8px 10px; border-radius: 8px; } #cbp-portal .cbp-pay-err { color: #b0213a; font-weight: 600; font-size: 14px; } #cbp-portal .cbp-btn.is-busy { opacity: .7; cursor: progress; } #cbp-portal .cbp-pay-choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #cbp-portal .cbp-pay-choose label { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1px solid var(--cbp-line); border-radius: 12px; cursor: pointer; margin: 0; } #cbp-portal .cbp-pay-choose label:has(input:checked) { border-color: var(--cbp-primary); background: var(--cbp-primary-soft); } #cbp-portal .cbp-pay-choose input { margin-top: 3px; accent-color: var(--cbp-primary); } #cbp-portal .cbp-pay-choose small { display: block; font-size: 12.5px; color: var(--cbp-ink-3); } #cbp-portal .cbp-pay-mode { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; } #cbp-portal .cbp-pay-mode label { display: flex; gap: 6px; align-items: center; margin: 0; } #cbp-portal .cbp-pay-prov { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--cbp-bg); border: 1px solid var(--cbp-line); } #cbp-portal .cbp-pay-steps { list-style: decimal; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; } #cbp-portal .cbp-pay-steps a { font-weight: 650; display: inline-flex; gap: 3px; align-items: center; } #cbp-portal .cbp-pay-saved { display: flex; gap: 4px; align-items: center; font-size: 12.5px; color: #1b7f55; } #cbp-portal .cbp-pay-set .cbp-form-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } @media (max-width: 700px) { #cbp-portal .cbp-pay-choose { grid-template-columns: 1fr; } } /* ---------- Store preview / Training Center ---------- */ #cbp-portal .cbp-cs-preview { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; background: #fdf3dc; border: 1px solid #f1d58e; color: #6b4300; } #cbp-portal .cbp-cs-preview-txt { display: flex; gap: 12px; align-items: flex-start; max-width: 720px; } #cbp-portal .cbp-cs-preview-txt p { font-size: 14px; } #cbp-portal .cbp-cs-preview form { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 14px; } #cbp-portal .cbp-cs-order.is-preview { border: 2px dashed #e0a526; } #cbp-portal .cbp-cs-order.is-preview .cbp-form-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } #cbp-portal .cbp-cs-lvrow { grid-template-columns: minmax(0, 1fr) 180px; } /* ---------- eCards rail group & product pages ---------- */ #cbp-portal .cbp-nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-nav-group .cbp-nav-label { margin-top: 0; } #cbp-portal .cbp-nav-group a.cbp-nav-add { font-size: 14px; padding: 8px 12px 8px 14px; color: var(--cbp-ink-2); } #cbp-portal .cbp-nav-group a.cbp-nav-add .cbp-i { width: 16px; height: 16px; padding: 2px; border-radius: 6px; background: var(--cbp-primary-soft); color: var(--cbp-primary); box-sizing: content-box; } #cbp-portal .cbp-nav-group a.cbp-nav-add.is-active { color: var(--cbp-primary); } #cbp-portal .cbp-cs-step { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; margin-top: 4px; } #cbp-portal .cbp-cs-step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cbp-primary); color: #fff; font-size: 13px; } #cbp-portal .cbp-input::placeholder { color: #9aa5b8; font-weight: 400; opacity: 1; } /* ---------- Red Cross classes ---------- */ #cbp-portal .cbp-fgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #cbp-portal .cbp-fgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #cbp-portal .cbp-field.is-wide { grid-column: 1 / -1; } #cbp-portal .cbp-input-sm { min-height: 36px; padding: 5px 8px; font-size: 14px; width: 100%; } #cbp-portal .cbp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } #cbp-portal .cbp-cl-tr { grid-template-columns: 90px minmax(0, 2.2fr) minmax(0, 1.6fr) 90px 130px; } #cbp-portal .cbp-cl-date strong { display: block; font-size: 16px; } #cbp-portal .cbp-cl-date small { color: var(--cbp-ink-3); font-size: 12.5px; } #cbp-portal .cbp-cl-enr { font-variant-numeric: tabular-nums; color: var(--cbp-ink-2); } #cbp-portal .cbp-cl-enr strong { color: var(--cbp-ink); font-size: 16px; } #cbp-portal .cbp-cl-form .cbp-cs-step { margin-top: 10px; } #cbp-portal .cbp-cl-more summary { cursor: pointer; font-weight: 600; color: var(--cbp-primary); font-size: 14px; } #cbp-portal .cbp-cl-more[open] { display: flex; flex-direction: column; gap: 10px; } #cbp-portal .cbp-cl-warn { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #9a5b00; background: #fdf3dc; padding: 10px 12px; border-radius: 10px; } #cbp-portal .cbp-cl-head { gap: 16px; } #cbp-portal .cbp-cl-htop { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #cbp-portal .cbp-cl-htop h2 { font-size: 22px; margin: 6px 0 4px; } #cbp-portal .cbp-cl-hside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } #cbp-portal .cbp-cl-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } #cbp-portal .cbp-cl-link label { display: block; font-size: 13px; font-weight: 700; color: var(--cbp-ink-2); margin-bottom: 4px; } #cbp-portal .cbp-cl-link > div { display: flex; gap: 8px; flex-wrap: wrap; } #cbp-portal .cbp-cl-link input { flex: 1; min-width: 220px; font-size: 13.5px; } #cbp-portal .cbp-cl-note { font-size: 14px; color: var(--cbp-ink-2); } #cbp-portal .cbp-cl-rtable { display: flex; flex-direction: column; border: 1px solid var(--cbp-line); border-radius: 12px; overflow: hidden; } #cbp-portal .cbp-cl-rtr { display: grid; grid-template-columns: minmax(0, 2.2fr) 90px 130px 140px minmax(0, 1fr) 50px; gap: 10px; align-items: center; padding: 10px 14px; } #cbp-portal .cbp-cl-rtr + .cbp-cl-rtr { border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-cl-rth { background: var(--cbp-bg); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-3); } #cbp-portal .cbp-cl-rtr.is-cancel { opacity: .55; } #cbp-portal .cbp-cl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #cbp-portal .cbp-cl-act > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-weight: 700; list-style: none; } #cbp-portal .cbp-cl-act > summary::-webkit-details-marker { display: none; } #cbp-portal .cbp-cl-act[open] > summary { margin-bottom: 12px; } #cbp-portal .cbp-cl-danger > summary { color: #b0213a; } #cbp-portal .cbp-cl-final { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; border-left: 4px solid var(--cbp-accent); } #cbp-portal .cbp-cl-final.is-done { border-left-color: #22a06b; } #cbp-portal .cbp-cl-final h2 { display: flex; gap: 8px; align-items: center; } #cbp-portal .cbp-cl-final p { max-width: 640px; } #cbp-portal .cbp-cl-big { font-size: 26px; } /* Public registration page */ #cbp-portal.cbp-reg-page { max-width: 760px; } #cbp-portal .cbp-reg-card { background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: 18px; box-shadow: var(--cbp-shadow); overflow: hidden; } #cbp-portal .cbp-reg-head { padding: 26px 28px; background: linear-gradient(135deg, #fff 0%, var(--cbp-bg) 100%); border-bottom: 1px solid var(--cbp-line); } #cbp-portal .cbp-reg-head h1 { font-size: clamp(22px, 3vw, 28px); margin: 10px 0 14px; } #cbp-portal .cbp-reg-facts { display: flex; flex-direction: column; gap: 10px; } #cbp-portal .cbp-reg-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--cbp-ink-2); } #cbp-portal .cbp-reg-facts li .cbp-i { color: var(--cbp-primary); margin-top: 2px; } #cbp-portal .cbp-reg-notes { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--cbp-primary-soft); font-size: 14px; } #cbp-portal .cbp-reg-form { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 16px; } #cbp-portal .cbp-reg-form h2 { font-size: 19px; } #cbp-portal .cbp-reg-form .cbp-form-foot { position: static; box-shadow: none; border: 0; padding: 0; background: none; } #cbp-portal .cbp-reg-done, #cbp-portal .cbp-reg-closed { padding: 32px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } #cbp-portal .cbp-reg-done .cbp-i { color: #1b7f55; } #cbp-portal .cbp-reg-closed .cbp-i { color: #b0213a; } @media (max-width: 860px) { #cbp-portal .cbp-fgrid-3, #cbp-portal .cbp-cl-actions { grid-template-columns: 1fr; } #cbp-portal .cbp-cl-tr { grid-template-columns: 1fr auto; gap: 4px 12px; } #cbp-portal .cbp-cl-stats { grid-template-columns: repeat(2, 1fr); } #cbp-portal .cbp-cl-rth { display: none; } #cbp-portal .cbp-cl-rtr { grid-template-columns: 1fr 1fr; } #cbp-portal .cbp-cl-rtr > span:first-child { grid-column: 1 / -1; } #cbp-portal .cbp-reg-head, #cbp-portal .cbp-reg-form { padding: 20px 16px; } } /* ---------- Class certificates ---------- */ #cbp-portal .cbp-cl-final.is-wait { border-left-color: #e0a526; } #cbp-portal .cbp-cl-certs { border-left: 4px solid #22a06b; } #cbp-portal .cbp-cl-ctable { display: flex; flex-direction: column; border: 1px solid var(--cbp-line); border-radius: 12px; overflow: hidden; } #cbp-portal .cbp-cl-ctr { display: grid; grid-template-columns: minmax(0, 1.6fr) 120px minmax(0, 2.2fr) 170px; gap: 10px; align-items: center; padding: 10px 14px; } #cbp-portal .cbp-cl-ctr + .cbp-cl-ctr { border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-cl-csent { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } @media (max-width: 860px) { #cbp-portal .cbp-cl-ctr { grid-template-columns: 1fr auto; } #cbp-portal .cbp-cl-ctr > span:nth-child(3) { grid-column: 1 / -1; } } /* ---------- Certificate charge / course types ---------- */ #cbp-portal .cbp-cl-fin code, #cbp-portal .cbp-cl-head code, #cbp-portal .cbp-cs-items code { font-size: 12.5px; background: var(--cbp-bg); padding: 1px 6px; border-radius: 6px; } #cbp-portal .cbp-cl-order { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: 14px; } #cbp-portal .cbp-cl-order.is-paid { background: #e5f5ed; color: #1b7f55; } #cbp-portal .cbp-cl-order.is-unpaid { background: #fdf3dc; color: #9a5b00; } #cbp-portal .cbp-cl-types .cbp-dv-tr { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) 80px; } #cbp-portal .cbp-cl-skus .cbp-dv-tr { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) minmax(0, 1.4fr); } #cbp-portal .cbp-cl-badsku { display: block; color: #b0213a; font-size: 12px; } #cbp-portal .cbp-cs-skuimp { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px dashed var(--cbp-line); border-radius: 10px; margin: 0; } #cbp-portal .cbp-cs-priceimp > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-weight: 700; list-style: none; } #cbp-portal .cbp-cs-priceimp > summary::-webkit-details-marker { display: none; } #cbp-portal .cbp-cs-priceimp[open] > summary { margin-bottom: 10px; } /* 1.26 – Class Scheduling rail group sits under Redcross Class Posting Service */ #cbp-portal .cbp-nav-group.is-sub { margin: 2px 0 6px 14px; padding: 6px 0 0 10px; border-top: 0; border-left: 2px solid var(--cbp-line); } #cbp-portal .cbp-nav-group.is-sub a { font-size: 14px; padding-top: 7px; padding-bottom: 7px; } #cbp-portal .cbp-page-head .cbp-eyebrow { display: block; color: var(--cbp-primary); opacity: 1; margin-bottom: 4px; } #cbp-portal .cbp-price-filter { padding: 0 20px 12px; } #cbp-portal .cbp-price-table .cbp-cs-tr { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(0, .8fr); } #cbp-portal .cbp-price-table .cbp-cs-price { text-align: right; font-weight: 700; } #cbp-portal .cbp-price-table code { font-size: 12.5px; } #cbp-portal .cbp-cs-arcnote { display: flex; gap: 8px; align-items: center; margin: 4px 20px 0; } @media (max-width: 640px) { #cbp-portal .cbp-price-table .cbp-cs-tr { grid-template-columns: 1fr auto; } #cbp-portal .cbp-price-table .cbp-cs-sku { grid-column: 1; } #cbp-portal .cbp-price-table .cbp-cs-th .cbp-cs-sku, #cbp-portal .cbp-price-table .cbp-cs-th span:nth-child(2) { display: none; } } /* 1.27 – Red Cross sites & ALTPs, open invoices */ #cbp-portal .cbp-rg-tr { grid-template-columns: 70px minmax(0, 2fr) minmax(0, 1.3fr) 110px minmax(0, 1.2fr); } @media (max-width: 760px) { #cbp-portal .cbp-rg-tr { grid-template-columns: 60px 1fr; } #cbp-portal .cbp-rg-tr > span:nth-child(n+3) { grid-column: 2; } #cbp-portal .cbp-rg-tr.cbp-dv-th { display: none; } } #cbp-portal .cbp-invpay { border: 1px solid color-mix(in srgb, var(--cbp-accent, #d92d20) 30%, var(--cbp-line)); background: color-mix(in srgb, var(--cbp-accent, #d92d20) 4%, var(--cbp-card)); border-radius: 14px; padding: 16px 18px; margin: 0 0 16px; } #cbp-portal .cbp-panel .cbp-invpay { margin: 0 16px 16px; } #cbp-portal .cbp-invpay h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; } #cbp-portal .cbp-invpay-opts { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 10px; } #cbp-portal .cbp-invpay-card { flex: 1 1 320px; margin: 0; } #cbp-portal .cbp-invpay-card .cbp-form-foot { padding: 8px 0 0; border: 0; } #cbp-portal .cbp-invpay-mail { flex: 0 1 320px; } #cbp-portal .cbp-invpay-mail summary { list-style: none; cursor: pointer; } #cbp-portal .cbp-invpay-mail summary::-webkit-details-marker { display: none; } #cbp-portal .cbp-invpay-mail form { margin-top: 10px; display: grid; gap: 10px; } #cbp-portal small.cbp-err { display: block; color: #b42318; margin-top: 6px; font-weight: 600; } #cbp-portal .cbp-dv-stats li.is-red strong { color: #b42318; } /* 1.27.2 – advertise / price confirmation */ #cbp-portal .cbp-cl-adv { margin: 14px 0 6px; padding: 14px 16px; border: 1px solid var(--cbp-line); border-radius: 12px; background: var(--cbp-card); } #cbp-portal .cbp-cl-adv-box span { line-height: 1.4; } #cbp-portal .cbp-cl-adv-off { margin: 6px 0 0 28px; } #cbp-portal .cbp-cl-adv-confirm { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--cbp-accent) 7%, #fff); border: 1px solid color-mix(in srgb, var(--cbp-accent) 25%, #fff); } /* 1.27.3 – Certificate Pricing: office add / edit */ #cbp-portal .cbp-price-table.is-office .cbp-cs-tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, .7fr) auto auto; } #cbp-portal .cbp-price-table .cbp-cs-tr.is-archived { opacity: .6; } #cbp-portal .cbp-price-act { display: contents; } #cbp-portal .cbp-price-act details { grid-column: 5; text-align: right; } #cbp-portal .cbp-price-arch { grid-column: 4; margin: 0; } #cbp-portal .cbp-price-seg { margin: 0 0 12px; } #cbp-portal .cbp-price-add > summary { display: inline-flex; width: auto; } #cbp-portal .cbp-price-act summary, #cbp-portal .cbp-price-add > summary { list-style: none; cursor: pointer; } #cbp-portal .cbp-price-act summary::-webkit-details-marker, #cbp-portal .cbp-price-add > summary::-webkit-details-marker { display: none; } #cbp-portal .cbp-price-act details[open] { grid-column: 1 / -1; text-align: right; } #cbp-portal .cbp-price-act details[open] .cbp-price-edit { text-align: left; } #cbp-portal .cbp-price-edit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--cbp-line); border-radius: 12px; background: var(--cbp-bg); } #cbp-portal .cbp-price-edit .cbp-check, #cbp-portal .cbp-price-edit .cbp-btn-row { grid-column: 1 / -1; } #cbp-portal .cbp-price-add { padding: 14px 16px; } #cbp-portal .cbp-price-add[open] > summary { margin-bottom: 4px; } @media (max-width: 760px) { #cbp-portal .cbp-price-edit { grid-template-columns: 1fr; } #cbp-portal .cbp-price-table.is-office .cbp-cs-tr { grid-template-columns: 1fr auto; } #cbp-portal .cbp-price-act details { grid-column: 1 / -1; } } /* 1.28 – AHA + Red Cross classes */ #cbp-portal .cbp-price-table .cbp-cs-tr.cbp-price-group { grid-template-columns: 1fr; background: var(--cbp-bg); padding-top: 10px; padding-bottom: 10px; } #cbp-portal .cbp-cl-types .cbp-dv-tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) 120px 80px; } #cbp-portal .cbp-price-edit { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { #cbp-portal .cbp-price-edit { grid-template-columns: 1fr 1fr; } } /* 1.29 – Activity log */ #cbp-portal .cbp-act-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; } #cbp-portal .cbp-act-filter .cbp-btn-row { grid-column: 1 / -1; } #cbp-portal .cbp-act-table td { vertical-align: top; font-size: 13.5px; } #cbp-portal .cbp-act-table .cbp-act-when { white-space: nowrap; } #cbp-portal .cbp-act-table .cbp-act-page code { font-size: 12px; word-break: break-all; } #cbp-portal .cbp-act-table tr.is-err td { background: #fef3f2; } #cbp-portal .cbp-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 14px 0; } #cbp-portal .cbp-dv-stats li a { color: inherit; text-decoration: none; display: block; } @media (max-width: 760px) { #cbp-portal .cbp-act-filter { grid-template-columns: 1fr; } } /* 1.29 – Invite instructors */ #cbp-portal .cbp-join { padding: 18px; } #cbp-portal .cbp-join-link { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; } #cbp-portal .cbp-join-link input { flex: 1 1 320px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; } #cbp-portal .cbp-join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 860px) { #cbp-portal .cbp-join-grid { grid-template-columns: 1fr; } } /* 1.30 – Training Site Dashboard cards */ #cbp-portal .cbp-tsc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 6px 0 24px; } #cbp-portal .cbp-tsc-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; background: var(--cbp-card); border: 1px solid var(--cbp-line); border-radius: 16px; text-decoration: none; color: var(--cbp-ink); box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: border-color .15s, box-shadow .15s, transform .15s; min-height: 170px; } #cbp-portal .cbp-tsc-card:hover, #cbp-portal .cbp-tsc-card:focus-visible { border-color: var(--cbp-primary); box-shadow: 0 8px 24px rgba(16,24,40,.10); transform: translateY(-2px); outline: none; } #cbp-portal .cbp-tsc-card-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cbp-primary-soft); color: var(--cbp-primary); margin-bottom: 6px; } #cbp-portal .cbp-tsc-card.is-attn .cbp-tsc-card-ic { background: var(--cbp-accent-soft); color: var(--cbp-accent); } #cbp-portal .cbp-tsc-card strong { font-size: 17px; font-weight: 700; } #cbp-portal .cbp-tsc-card-stat { font-weight: 600; color: var(--cbp-ink-2); font-size: 14px; } #cbp-portal .cbp-tsc-card.is-attn .cbp-tsc-card-stat { color: var(--cbp-accent); } #cbp-portal .cbp-tsc-card small { color: var(--cbp-muted, #667085); font-size: 13px; line-height: 1.4; } #cbp-portal .cbp-tsc-card-badge { position: absolute; top: 18px; right: 18px; font-style: normal; font-size: 12px; font-weight: 700; background: var(--cbp-accent); color: #fff; border-radius: 999px; padding: 3px 9px; } #cbp-portal .cbp-tsc-card-go { position: absolute; right: 18px; bottom: 16px; color: var(--cbp-primary); font-weight: 700; opacity: 0; transition: opacity .15s; } #cbp-portal .cbp-tsc-card:hover .cbp-tsc-card-go { opacity: 1; } /* 1.30.1 – Back button */ #cbp-portal .cbp-backbar { margin: 0 0 14px; } #cbp-portal .cbp-backbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border: 1px solid var(--cbp-line); border-radius: 999px; background: var(--cbp-card); color: var(--cbp-primary); font-weight: 600; font-size: 14px; text-decoration: none; max-width: 100%; } #cbp-portal .cbp-backbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cbp-portal .cbp-backbtn:hover, #cbp-portal .cbp-backbtn:focus-visible { border-color: var(--cbp-primary); background: var(--cbp-primary-soft); outline: none; } /* 1.31.0 – Course documents + roster review */ .cbp-cl-doclist{list-style:none;margin:.5rem 0 1rem;padding:0;display:grid;gap:.4rem} .cbp-cl-doclist li{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;padding:.55rem .75rem;border:1px solid var(--cbp-line,#e2e8f0);border-radius:10px;background:var(--cbp-surface,#fff)} .cbp-cl-doclist li a{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;word-break:break-word} .cbp-cl-doclist li small{flex:1 1 auto} .cbp-cl-doclist li form{margin:0} .cbp-cl-docup{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem} .cbp-cl-docup label.cbp-btn{cursor:pointer} .cbp-cl-review blockquote.cbp-cl-note{margin:.5rem 0 1rem;padding:.6rem .9rem;border-left:4px solid #f59e0b;background:rgba(245,158,11,.08);border-radius:6px} .cbp-cl-reviewform .cbp-btn-row{display:flex;flex-wrap:wrap;gap:.6rem} /* 1.32.0 – Courses, Locations, Course Descriptions, Class Webpages */ .cbp-sc-acts{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-start;justify-content:flex-end} .cbp-sc-acts form{margin:0} .cbp-sc-edit[open]{flex-basis:100%} .cbp-sc-edit>summary,.cbp-loc-edit>summary,.cbp-loc-add>summary{list-style:none;cursor:pointer;display:inline-flex} .cbp-sc-edit>summary::-webkit-details-marker,.cbp-loc-edit>summary::-webkit-details-marker,.cbp-loc-add>summary::-webkit-details-marker{display:none} .cbp-sc-edit form,.cbp-loc-edit form{margin-top:.6rem;padding:.75rem;border:1px solid var(--cbp-line,#e2e8f0);border-radius:10px;background:var(--cbp-soft,#f8fafc)} .cbp-loc-add[open]>summary{margin-bottom:1rem} .cbp-loc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem} .cbp-loc h3{display:flex;align-items:center;gap:.4rem;margin:0;font-size:1.05rem} .cbp-loc p{margin:.4rem 0} .cbp-loc-dir{font-size:.9rem} .cbp-loc .cbp-btn-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start} .cbp-loc .cbp-btn-row form{margin:0} .cbp-loc-edit[open]{flex-basis:100%} .cbp-contact-form{align-items:end} .cbp-cp-photos{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem} .cbp-cp-photo{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start} .cbp-cp-photo img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--cbp-line,#e2e8f0)} .cbp-cp-pick{cursor:pointer} .cbp-cp-ph ul{margin:.5rem 0 0;padding-left:1.1rem;font-size:.9rem} .cbp-cp-ph summary{cursor:pointer;color:var(--cbp-link,#0b3a75);font-weight:600} .cbp-wp-link{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between} .cbp-wp-link>div:first-child{flex:1 1 320px;min-width:0} .cbp-wp-link h3{margin:0 0 .2rem} .cbp-wp-link input{width:100%;font-size:.9rem} .cbp-wp-link .cbp-btn-row{display:flex;gap:.5rem} .cbp-reg-about{padding:1.25rem 1.5rem;border-top:1px solid var(--cbp-line,#e2e8f0)} .cbp-reg-about h2{margin:.25rem 0 .5rem;font-size:1.2rem} .cbp-reg-about h3{margin:1rem 0 .3rem;font-size:1rem} .cbp-reg-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;margin-bottom:1rem} .cbp-reg-photos.is-one{grid-template-columns:1fr} .cbp-reg-photos img{width:100%;height:160px;object-fit:cover;border-radius:10px;display:block} .cbp-reg-photos.is-one img{height:auto;max-height:340px} .cbp-reg-desc p{margin:0 0 .75rem} .cbp-pub-scope{margin:0 0 1rem} .cbp-pub-scope h2{margin:0 0 .25rem} .cbp-pub-contact{display:flex;flex-wrap:wrap;gap:1rem} .cbp-pub-contact a{display:inline-flex;align-items:center;gap:.35rem;font-weight:600} @media (max-width:640px){.cbp-sc-acts{justify-content:flex-start}} .cbp-sc-add .cbp-form-foot,.cbp-panel form .cbp-form-foot{border:0;padding:0;margin-top:.75rem;background:none;box-shadow:none} .cbp-sc-acts{align-items:center} .cbp-sc-acts .cbp-btn-sm{margin:0} .cbp-portal .cbp-reg-about h2{margin-top:1rem!important;margin-bottom:.5rem!important} .cbp-portal .cbp-reg-about h3{margin-top:1.1rem!important;margin-bottom:.35rem!important} .cbp-portal .cbp-reg-desc p{margin:0 0 .75rem!important;line-height:1.6} #cbp-portal .cbp-wp-link{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;align-items:flex-end;justify-content:space-between} #cbp-portal .cbp-wp-link>div:first-child{flex:1 1 320px;min-width:0;text-align:left} #cbp-portal .cbp-wp-link input{width:100%;max-width:none;margin-top:.4rem} #cbp-portal .cbp-cs-step span.cbp-opt{width:auto;height:auto;display:inline;background:none;color:var(--cbp-muted,#64748b);font-size:.8rem;font-weight:500;border-radius:0} /* 1.33.0 – add-ons & promo codes */ .cbp-reg-addons{border:0;padding:0;margin:1.25rem 0 0} .cbp-reg-addons legend{font-weight:700;margin-bottom:.5rem} #cbp-portal .cbp-reg-addon{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;align-items:center;padding:.75rem .9rem;border:1px solid var(--cbp-line,#e2e8f0);border-radius:12px;margin-bottom:.5rem;cursor:default} #cbp-portal .cbp-reg-addon.is-picked{border-color:var(--cbp-primary,#0b3a75);background:rgba(11,58,117,.04)} .cbp-reg-addon-main{display:flex;flex-direction:column;gap:.15rem;flex:1 1 240px;min-width:0} .cbp-reg-addon-main small{color:var(--cbp-muted,#64748b)} .cbp-reg-addon-del{display:inline-flex;align-items:center;gap:.3rem} .cbp-reg-addon-side{display:flex;align-items:center;gap:.6rem} .cbp-reg-addon-price{font-weight:700} #cbp-portal .cbp-reg-addon-qty input{width:70px} .cbp-reg-addon-line{min-width:64px;text-align:right;color:var(--cbp-muted,#64748b);font-size:.9rem} .cbp-reg-shipnote{display:flex;align-items:center;gap:.35rem} .cbp-reg-promo{margin:1rem 0 0} .cbp-reg-promo label{font-weight:600;display:block;margin-bottom:.3rem} .cbp-reg-promo-row{display:flex;gap:.5rem;max-width:360px} .cbp-reg-promo-row input{text-transform:uppercase} [data-cbp-promo-msg].is-good{color:#15803d;font-weight:600} [data-cbp-promo-msg].is-bad{color:#b91c1c;font-weight:600} .cbp-course-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.25rem .75rem;max-height:220px;overflow:auto;padding:.5rem;border:1px solid var(--cbp-line,#e2e8f0);border-radius:10px} .cbp-radio-row{display:flex;flex-wrap:wrap;gap:1rem} .cbp-promo-val{display:flex;gap:.4rem} .cbp-promo-val input{flex:1;min-width:0} .cbp-promo-val select{width:auto} .cbp-upper{text-transform:uppercase} .cbp-code{font-weight:700;letter-spacing:.03em} .cbp-loc.is-off{opacity:.7} .cbp-cl-extras{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem} #cbp-portal .cbp-dv-who small.cbp-cl-extras{display:flex;flex-wrap:wrap;white-space:normal;overflow:visible;text-overflow:clip;max-width:none} #cbp-portal .cbp-cl-extras .cbp-badge{white-space:nowrap;overflow:visible;font-size:11px} /* 1.34.0 – Online keycodes */ .cbp-kc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-bottom:1rem} #cbp-portal .cbp-kc-card{display:flex;flex-direction:column;gap:.15rem;padding:1rem} .cbp-kc-card strong{font-size:1.9rem;line-height:1.1;color:var(--cbp-primary,#0b3a75)} .cbp-kc-actions{display:grid;gap:.75rem;margin-bottom:1rem} .cbp-kc-actions details>summary{cursor:pointer} .cbp-kc-note{display:flex;align-items:center;gap:.35rem} .cbp-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .cbp-kc-type{border:1px solid var(--cbp-line,#e2e8f0);border-radius:10px;padding:.6rem .8rem;margin-bottom:.5rem} .cbp-kc-type>summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem} .cbp-kc-type[open]>summary{margin-bottom:.75rem} .cbp-kc-students{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.35rem} .cbp-kc-students li{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.45rem .6rem;border:1px solid var(--cbp-line,#e2e8f0);border-radius:8px} .cbp-kc-students .cbp-badge{font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .cbp-kc-sendrow{align-items:end} #cbp-portal [data-cbp-prerrs] ul,#cbp-portal [data-cbp-prcheck] ul{margin:.4rem 0 0;padding-left:1.1rem} #cbp-portal .cbp-pr-delete{margin-top:1rem;display:flex;justify-content:flex-end} #cbp-portal .cbp-btn-danger{color:#b91c1c;border-color:#fca5a5} /* 1.35.0 – Student Search & Export */ #cbp-portal .cbp-stu-search .cbp-input{flex:1 1 280px} .cbp-stu-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin:0} .cbp-stu-facts dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cbp-muted,#64748b);margin:0} .cbp-stu-facts dd{margin:.15rem 0 0;font-weight:600;word-break:break-word} #cbp-portal .cbp-stu-class .cbp-panel-head{align-items:flex-start} .cbp-stu-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;align-items:center} .cbp-stu-cert{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center} .cbp-stu-cert form{margin:0} .cbp-stu-cert .cbp-label{font-weight:700;margin-right:.25rem} .cbp-stu-moves{display:flex;align-items:center;gap:.35rem;font-size:.85rem} .cbp-stu-move{margin-top:.75rem} .cbp-stu-move>summary{list-style:none;cursor:pointer;display:inline-flex} .cbp-stu-move>summary::-webkit-details-marker{display:none} .cbp-stu-move form{margin-top:.75rem;padding:.9rem;border:1px solid var(--cbp-line,#e2e8f0);border-radius:10px;background:var(--cbp-soft,#f8fafc);display:grid;gap:.6rem} .cbp-stu-ranges{flex-wrap:wrap} #cbp-portal .cbp-stu-ranges label{cursor:pointer;padding:.45rem .8rem;border-radius:999px;display:inline-flex;align-items:center;gap:.3rem} #cbp-portal .cbp-stu-ranges label input{position:absolute;opacity:0;pointer-events:none} #cbp-portal .cbp-stu-ranges label.is-active{background:var(--cbp-primary,#0b3a75);color:#fff} /* 1.36.0 – Make a Payment */ #cbp-portal .cbp-pay-summary{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap} #cbp-portal .cbp-pay-summary strong{font-size:1.8rem;color:var(--cbp-primary,#0b3a75)} #cbp-portal .cbp-pay-items{white-space:pre-wrap;font-family:inherit;font-size:.92rem;margin:0 0 .5rem;background:var(--cbp-soft,#f8fafc);padding:.6rem .8rem;border-radius:8px} /* 1.37.0 – offered by / who gets paid */ #cbp-portal .cbp-offer{border:1px solid var(--cbp-line,#e2e8f0);border-radius:12px;padding:.9rem 1rem;margin:.75rem 0;display:grid;gap:.45rem} #cbp-portal .cbp-offer legend{font-weight:700;padding:0 .3rem} #cbp-portal .cbp-offer-to{padding:.6rem .8rem;border-radius:8px;font-size:.92rem} #cbp-portal .cbp-offer-to.is-ok{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.35)} #cbp-portal .cbp-offer-to.is-off{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.45)} #cbp-portal .cbp-offer-line{display:flex;gap:.45rem;align-items:flex-start;font-size:.9rem;margin:.35rem 0;padding:.5rem .7rem;border-radius:8px;background:var(--cbp-soft,#f8fafc)} #cbp-portal .cbp-offer-line.is-off{background:rgba(245,158,11,.08)} #cbp-portal .cbp-offer-line .cbp-ok{color:#15803d;font-weight:600} #cbp-portal .cbp-offer-line .cbp-bad{color:#b45309;font-weight:600} #cbp-portal .cbp-siteoffer{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin:.75rem 0;padding:.75rem .9rem;border:1px solid var(--cbp-line,#e2e8f0);border-radius:10px} #cbp-portal .cbp-siteoffer.is-on{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.05)} #cbp-portal .cbp-siteoffer strong{display:inline-flex;align-items:center;gap:.35rem} #cbp-portal .cbp-siteoffer{display:block} #cbp-portal .cbp-acct-opts{display:grid;gap:.4rem;margin:.4rem 0 .6rem} #cbp-portal .cbp-acct-opt{display:flex;gap:.55rem;align-items:flex-start;padding:.5rem .65rem;border:1px solid var(--cbp-line,#e2e8f0);border-radius:8px;cursor:pointer} #cbp-portal .cbp-acct-opt span{display:flex;flex-direction:column} #cbp-portal .cbp-acct-opt:has(input:checked){border-color:var(--cbp-primary,#0b3a75);background:rgba(11,58,117,.05)} #cbp-portal .cbp-chip-acct.is-sub{background:#eef2ff;color:#3730a3} #cbp-portal .cbp-chip-acct.is-site{background:#dcfce7;color:#166534} #cbp-portal .cbp-chip-acct.is-both{background:#fef3c7;color:#92400e} /* 1.38.0 – instructor business pages (public template) */ #cbp-portal.cbp-biz{--biz-primary:#0b3a75;--biz-accent:#d92d20} #cbp-portal .cbp-biz-hero{position:relative;border-radius:18px;overflow:hidden;background:var(--biz-primary);color:#fff;background-size:cover;background-position:center;margin-bottom:1.5rem} #cbp-portal .cbp-biz-hero.has-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--biz-primary) 0%,color-mix(in srgb,var(--biz-primary) 75%,transparent) 55%,rgba(0,0,0,.25) 100%)} #cbp-portal .cbp-biz-hero-in{position:relative;display:flex;gap:1.25rem;align-items:center;padding:2rem 1.75rem;flex-wrap:wrap} #cbp-portal .cbp-biz-logo{width:112px;height:112px;object-fit:contain;background:#fff;border-radius:16px;padding:8px;box-shadow:0 6px 20px rgba(0,0,0,.2)} #cbp-portal .cbp-biz-name{color:#fff!important;margin:0 0 .25rem!important;font-size:clamp(1.6rem,3.2vw,2.4rem)!important;line-height:1.15} #cbp-portal .cbp-biz-tag{margin:0 0 .35rem;font-size:1.1rem;opacity:.95} #cbp-portal .cbp-biz-area{margin:0 0 .8rem;display:flex;align-items:center;gap:.35rem;opacity:.9} #cbp-portal .cbp-biz-cta{display:flex;flex-wrap:wrap;gap:.5rem} #cbp-portal .cbp-biz-btn{background:var(--biz-accent)!important;border-color:var(--biz-accent)!important;color:#fff!important} #cbp-portal .cbp-biz-btn-ghost{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.55)!important;color:#fff!important} #cbp-portal .cbp-biz-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.5rem;align-items:start} @media (max-width:860px){#cbp-portal .cbp-biz-grid{grid-template-columns:1fr}} #cbp-portal .cbp-biz-sec{margin-bottom:1.75rem} #cbp-portal .cbp-biz-sec h2,#cbp-portal .cbp-biz-card h2{color:var(--biz-primary);font-size:1.3rem;margin:0 0 .6rem!important;border-bottom:3px solid var(--biz-accent);display:inline-block;padding-bottom:.2rem} #cbp-portal .cbp-biz-card h2{font-size:1.05rem} #cbp-portal .cbp-biz-text p{margin:0 0 .7rem!important;line-height:1.65} #cbp-portal .cbp-biz-card{background:#fff;border:1px solid var(--cbp-line,#e2e8f0);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1rem} #cbp-portal .cbp-biz-contact,#cbp-portal .cbp-biz-locs{list-style:none;margin:0;padding:0;display:grid;gap:.5rem} #cbp-portal .cbp-biz-contact li{display:flex;align-items:center;gap:.45rem;word-break:break-word} #cbp-portal .cbp-biz-contact a,#cbp-portal .cbp-biz-social a{color:var(--biz-primary);font-weight:600} #cbp-portal .cbp-biz-social{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem} #cbp-portal .cbp-biz-social a{border:1px solid color-mix(in srgb,var(--biz-primary) 35%,transparent);border-radius:999px;padding:.25rem .7rem;font-size:.85rem} #cbp-portal .cbp-biz-filters{flex-wrap:wrap} #cbp-portal .cbp-biz-filters .cbp-input{flex:1 1 170px} #cbp-portal .cbp-biz-from{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--cbp-muted,#64748b)} #cbp-portal .cbp-biz-classes{display:grid;gap:.65rem} #cbp-portal .cbp-biz-class{display:flex;gap:1rem;align-items:center;border:1px solid var(--cbp-line,#e2e8f0);border-left:5px solid var(--biz-primary);border-radius:12px;padding:.8rem 1rem;background:#fff} #cbp-portal .cbp-biz-class[hidden]{display:none} #cbp-portal .cbp-biz-class .cbp-date{background:color-mix(in srgb,var(--biz-primary) 10%,#fff);color:var(--biz-primary)} #cbp-portal .cbp-biz-class-main{flex:1;min-width:0} #cbp-portal .cbp-biz-class-main h3{margin:.2rem 0!important;font-size:1.05rem} #cbp-portal .cbp-biz-class-main p{margin:0;font-size:.9rem;color:var(--cbp-muted,#64748b)} #cbp-portal .cbp-biz-class-side{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;text-align:right} #cbp-portal .cbp-biz-class-side strong{font-size:1.15rem} #cbp-portal .cbp-biz-class-side .is-disabled{opacity:.6;pointer-events:none} @media (max-width:560px){#cbp-portal .cbp-biz-class{flex-wrap:wrap}#cbp-portal .cbp-biz-class-side{flex-direction:row;align-items:center;width:100%;justify-content:space-between}} #cbp-portal .cbp-biz-powered{font-size:.8rem} #cbp-portal .cbp-biz-editbar{text-align:right;margin:0 0 .5rem} #cbp-portal .cbp-biz-dircards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem} #cbp-portal .cbp-biz-dircard{display:flex;gap:.8rem;align-items:center;text-decoration:none} #cbp-portal .cbp-biz-dircard img{width:56px;height:56px;object-fit:contain;border-radius:10px} #cbp-portal .cbp-biz-dircard span{display:flex;flex-direction:column} /* editor */ #cbp-portal .cbp-biz-status{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center} #cbp-portal .cbp-biz-addr{margin:.4rem 0 0;word-break:break-all} #cbp-portal .cbp-biz-slug{display:flex;align-items:stretch;border:1px solid var(--cbp-line,#e2e8f0);border-radius:10px;overflow:hidden} #cbp-portal .cbp-biz-slug span{padding:.55rem .7rem;background:var(--cbp-soft,#f8fafc);color:var(--cbp-muted,#64748b);white-space:nowrap;font-size:.9rem;display:flex;align-items:center} #cbp-portal .cbp-biz-slug input{border:0;border-radius:0;min-width:0;flex:1} #cbp-portal .cbp-biz-thumb{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem} #cbp-portal .cbp-biz-thumb img{width:72px;height:72px;object-fit:contain;border:1px solid var(--cbp-line,#e2e8f0);border-radius:10px;background:#fff} #cbp-portal .cbp-biz-thumb.is-wide img{width:180px;object-fit:cover} #cbp-portal .cbp-biz-swatches{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center} #cbp-portal .cbp-biz-swatch input{position:absolute;opacity:0} #cbp-portal .cbp-biz-swatch span{display:block;width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--cbp-line,#cbd5e1);cursor:pointer} #cbp-portal .cbp-biz-swatch input:checked+span{box-shadow:0 0 0 3px #111827} #cbp-portal .cbp-biz-swatch input:focus-visible+span{outline:2px solid #2563eb;outline-offset:2px} #cbp-portal .cbp-biz-hex{width:110px;font-family:ui-monospace,monospace} #cbp-portal .cbp-biz-mini{--biz-primary:#0b3a75;--biz-accent:#d92d20;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;border:1px dashed var(--cbp-line,#cbd5e1);border-radius:12px;padding:.75rem;margin:.5rem 0 1rem} #cbp-portal .cbp-biz-mini-bar{background:var(--biz-primary);color:#fff;font-weight:700;padding:.5rem .9rem;border-radius:8px} #cbp-portal .cbp-biz-mini-btn{background:var(--biz-accent);color:#fff;font-weight:600;padding:.45rem .8rem;border-radius:8px} #cbp-portal .cbp-biz-mini-acc{border-bottom:3px solid var(--biz-accent);color:var(--biz-primary);font-weight:700} #cbp-portal .cbp-biz-admin{margin-top:1rem;padding:.75rem;border:1px solid var(--cbp-line,#e2e8f0);border-radius:10px;background:var(--cbp-soft,#f8fafc)} #cbp-portal .cbp-biz-rowlink{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.9rem;margin:.5rem 0} /* ---------- 1.39: Repeat this class ---------- */ .cbp-repeat { margin: 4px 0 14px; min-width: 0; } .cbp-repeat-box { min-width: 0; } .cbp-repeat-toggle { padding: 12px 14px; border: 1px solid var(--cbp-line); border-radius: 10px; background: var(--cbp-primary-soft); } .cbp-repeat-box { margin-top: 12px; display: grid; gap: 12px; } .cbp-repeat-box > p { margin: 0; } .cbp-cal { box-sizing: border-box; width: 100%; max-width: 380px; min-width: 0; border: 1px solid var(--cbp-line); border-radius: 12px; padding: 10px; background: var(--cbp-card); } .cbp-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .cbp-cal-nav { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--cbp-line); background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--cbp-ink); } .cbp-cal-nav:hover { background: var(--cbp-bg); } .cbp-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .cbp-cal-wd { font-size: 12px; font-weight: 600; color: #5b6b82; text-align: center; padding: 4px 0; } .cbp-cal-day { aspect-ratio: 1; min-height: 38px; min-width: 0; padding: 0; border-radius: 8px; border: 1px solid transparent; background: var(--cbp-bg); color: var(--cbp-ink); font: inherit; font-weight: 600; cursor: pointer; } .cbp-cal-day:hover:not(:disabled) { border-color: var(--cbp-primary); } .cbp-cal-day:focus-visible { outline: 3px solid color-mix(in srgb, var(--cbp-primary) 40%, #fff); outline-offset: 1px; } .cbp-cal-day:disabled { background: transparent; color: #b3bdcc; cursor: default; } .cbp-cal-day.is-today { border-color: #9fb0c8; } .cbp-cal-day.is-on { background: var(--cbp-primary); color: #fff; } .cbp-cal-day.is-first, .cbp-cal-day.is-first:disabled { background: var(--cbp-accent); color: #fff; cursor: default; } .cbp-repeat-sel { display: grid; gap: 8px; } .cbp-repeat-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cbp-repeat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--cbp-primary-soft); color: var(--cbp-primary); font-size: 13px; font-weight: 600; } .cbp-repeat-chip.is-first { background: var(--cbp-accent-soft); color: var(--cbp-accent); padding-right: 10px; } .cbp-repeat-chip button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; } .cbp-repeat-chip button:hover { background: rgba(0, 0, 0, .08); } .cbp-rep-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; margin: 12px 0 16px; padding: 14px; background: var(--cbp-bg); border-radius: 10px; } .cbp-rep-dl div { min-width: 0; } .cbp-rep-dl dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #5b6b82; } .cbp-rep-dl dd { margin: 2px 0 0; overflow-wrap: anywhere; } .cbp-rep-list { display: grid; gap: 8px; margin: 12px 0; } .cbp-rep-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--cbp-line); border-radius: 10px; cursor: pointer; } .cbp-rep-row input { width: 20px; height: 20px; } .cbp-rep-row.is-conflict { border-color: #f0c36d; background: #fffaf0; } .cbp-rep-row.is-off { opacity: .6; } .cbp-rep-date { display: grid; } .cbp-rep-date small, .cbp-rep-st small { color: #5b6b82; } .cbp-rep-st { display: grid; justify-items: end; gap: 2px; text-align: right; } @media (max-width: 600px) { .cbp-rep-row { grid-template-columns: auto 1fr; } .cbp-rep-st { grid-column: 2; justify-items: start; text-align: left; } } /* ---------- 1.39: Upcoming Classes PDF ---------- */ .cbp-pdf { display: grid; gap: 12px; margin-bottom: 16px; } .cbp-pdf h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 18px; } .cbp-pdf p { margin: 0; } .cbp-pdf-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .cbp-pdf-row .cbp-field { margin: 0; flex: 1 1 160px; } .cbp-pdf-row .cbp-btn { flex: 0 0 auto; } .cbp-inst-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; } /* ---------- 1.40: Red Cross posting from Class Scheduling ---------- */ .cbp-rcpost-opt { margin-top: 4px; } .cbp-rcpost-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cbp-rcpost-list { display: grid; gap: 8px; margin: 12px 0 16px; } .cbp-rcpost-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--cbp-line); border-radius: 10px; } .cbp-rcpost-row.is-bad { border-color: #f0c36d; background: #fffaf0; } .cbp-rcpost-amt { font-weight: 700; } .cbp-rcpost .cbp-warn-text { color: #92400e; } @media (max-width: 600px) { .cbp-rcpost-row { grid-template-columns: 1fr auto; } .cbp-rcpost-row .cbp-btn { grid-column: 1 / -1; justify-self: start; } } /* ---------- 1.41: Certificate invoices ---------- */ .cbp-billbox { margin-top: 14px; padding: 14px; border: 1px solid var(--cbp-line); border-radius: 12px; background: var(--cbp-bg); } .cbp-billbox-h { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; } .cbp-invpanel-links { display: flex; flex-wrap: wrap; gap: 8px; } .cbp-invpanel-edit { margin-top: 10px; } .cbp-invpanel-edit > summary { cursor: pointer; font-weight: 600; color: var(--cbp-primary); padding: 6px 0; } .cbp-invpage { max-width: 860px; margin: 0 auto; display: grid; gap: 16px; } .cbp-invdoc-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 3px solid var(--cbp-primary); padding-bottom: 12px; margin-bottom: 14px; } .cbp-invdoc-head h1 { margin: 0; font-size: 28px; color: var(--cbp-primary); letter-spacing: .04em; text-transform: uppercase; } .cbp-invdoc-from { text-align: right; line-height: 1.5; } .cbp-invdoc-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin-bottom: 14px; } .cbp-invdoc-grid h3 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-primary); } .cbp-invdoc-grid p { margin: 0; line-height: 1.5; } .cbp-invdoc-meta { margin: 0; display: grid; gap: 4px; } .cbp-invdoc-meta div { display: flex; justify-content: space-between; gap: 16px; } .cbp-invdoc-meta dt { color: #5b6b82; } .cbp-invdoc-meta dd { margin: 0; font-weight: 600; } .cbp-invdoc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; } .cbp-invpaid { display: flex; align-items: center; gap: 8px; color: #15803d; } @media (max-width: 600px) { .cbp-invdoc-grid { grid-template-columns: 1fr; } .cbp-invdoc-from { text-align: left; } } @media print { .cbp-invpage .cbp-invpay-card, .cbp-invdoc-actions, .cbp-invpage .cbp-alert { display: none !important; } } .cbp-invpage .cbp-form-foot { position: static; box-shadow: none; } /* ---------- 1.42: Mobile menu button ---------- */ #cbp-portal .cbp-menu-btn { display: none; margin-left: auto; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--cbp-line); border-radius: 10px; background: var(--cbp-bg); color: var(--cbp-ink); font: inherit; font-weight: 650; font-size: 15px; cursor: pointer; flex: none; } #cbp-portal .cbp-menu-btn[aria-expanded="true"] { background: var(--cbp-primary); border-color: var(--cbp-primary); color: #fff; } #cbp-portal .cbp-menu-btn em { font-style: normal; font-size: 12px; font-weight: 700; background: var(--cbp-accent); color: #fff; padding: 1px 7px; border-radius: 999px; } @media (max-width: 960px) { #cbp-portal .cbp-menu-btn { display: inline-flex; } } /* ---------- 1.42: Phones & tablets ---------- */ #cbp-portal img, #cbp-portal video, #cbp-portal iframe { max-width: 100%; } #cbp-portal select.cbp-input, #cbp-portal .cbp-input { max-width: 100%; } #cbp-portal .cbp-badge { max-width: 100%; white-space: normal; } @media (max-width: 960px) { #cbp-portal .cbp-subnav, #cbp-portal .cbp-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; } #cbp-portal .cbp-subnav a, #cbp-portal .cbp-tabs a { flex: none; white-space: nowrap; } #cbp-portal .cbp-seg { display: flex; max-width: 100%; overflow-x: auto; } #cbp-portal .cbp-seg > * { flex: none; } #cbp-portal .cbp-main table { display: block; max-width: 100%; overflow-x: auto; } #cbp-portal .cbp-page-head { flex-wrap: wrap; } #cbp-portal .cbp-page-head > .cbp-btn { flex: none; } } @media (max-width: 720px) { #cbp-portal .cbp-btn-row > .cbp-btn, #cbp-portal .cbp-btn-row > form { max-width: 100%; } #cbp-portal .cbp-btn { white-space: normal; text-align: center; } #cbp-portal .cbp-panel { padding-left: 14px; padding-right: 14px; } #cbp-portal .cbp-page-head h1 { font-size: 24px; } #cbp-portal input, #cbp-portal select, #cbp-portal textarea { font-size: 16px; } /* stops iPhone zooming into fields */ #cbp-portal .cbp-cs-sitepick select { width: 100%; } } @media (max-width: 720px) { #cbp-portal .cbp-panel-head { flex-direction: column; align-items: flex-start; gap: 4px; } #cbp-portal .cbp-panel-head > .cbp-muted { font-size: 13px; } #cbp-portal .cbp-cs-dside { flex-wrap: wrap; justify-content: flex-start; } } /* Roster on phones: label each field, since the column headings are hidden. */ @media (max-width: 860px) { #cbp-portal .cbp-cl-rtr:not(.cbp-cl-rth) > span:nth-child(n+2)::before { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-3); margin-bottom: 3px; } #cbp-portal .cbp-cl-rtr:not(.cbp-cl-rth) > span:nth-child(2)::before { content: "Registered"; } #cbp-portal .cbp-cl-rtr:not(.cbp-cl-rth) > span:nth-child(3)::before { content: "Payment"; } #cbp-portal .cbp-cl-rtr:not(.cbp-cl-rth) > span:nth-child(4)::before { content: "Status"; } #cbp-portal .cbp-cl-rtr:not(.cbp-cl-rth) > span:nth-child(5)::before { content: "Cert # / score"; } #cbp-portal .cbp-cl-rtr:not(.cbp-cl-rth) > span:nth-child(6)::before { content: "Here"; } #cbp-portal .cbp-cl-rtr:not(.cbp-cl-rth) > span:nth-child(6) input { width: 22px; height: 22px; } #cbp-portal .cbp-cl-rtr .cbp-input-sm { width: 100%; } } /* 1.42.1: TC Product Orders – featured card on the Training Site Dashboard */ #cbp-portal .cbp-tsc-card.is-feature { background: linear-gradient(135deg, var(--cbp-primary) 0%, color-mix(in srgb, var(--cbp-primary) 72%, #000) 100%); border-color: var(--cbp-primary); color: #fff; } #cbp-portal .cbp-tsc-card.is-feature .cbp-tsc-card-ic { background: rgba(255,255,255,.16); color: #fff; } #cbp-portal .cbp-tsc-card.is-feature .cbp-tsc-card-stat, #cbp-portal .cbp-tsc-card.is-feature small, #cbp-portal .cbp-tsc-card.is-feature .cbp-tsc-card-go { color: rgba(255,255,255,.9); } #cbp-portal .cbp-tsc-card.is-feature .cbp-tsc-card-badge { background: #fff; color: var(--cbp-primary); } /* 1.43: one-provider schedules */ #cbp-portal .cbp-pub-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; } #cbp-portal .cbp-pub-switch a { font-weight: 600; } /* 1.45: select & delete classes */ #cbp-portal .cbp-cl-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px; border: 1px solid var(--cbp-line); border-radius: 12px; background: var(--cbp-card); margin-bottom: 6px; } #cbp-portal .cbp-cl-bulkbar .cbp-btn { margin-left: auto; } #cbp-portal .cbp-cl-bulknote { margin: 0 0 10px; font-size: 13px; } #cbp-portal .cbp-cl-row { display: flex; align-items: stretch; } #cbp-portal .cbp-cl-row > .cbp-dv-tr { flex: 1; min-width: 0; } #cbp-portal .cbp-cl-row + .cbp-cl-row { border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-cl-row.is-head { background: var(--cbp-bg); } #cbp-portal .cbp-cl-sel { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; } #cbp-portal .cbp-cl-sel input { width: 20px; height: 20px; accent-color: #b32d2e; cursor: pointer; } #cbp-portal .cbp-cl-sel input:disabled { cursor: not-allowed; opacity: .35; } #cbp-portal .cbp-cl-row.is-picked { background: #fcf0f1; } @media (max-width: 720px) { #cbp-portal .cbp-cl-bulkbar .cbp-btn { margin-left: 0; width: 100%; } } /* 1.46: Student profile */ #cbp-portal .cbp-stp { display: flex; flex-direction: column; gap: 16px; } #cbp-portal .cbp-stp-head { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } #cbp-portal .cbp-stp-who { display: flex; align-items: center; gap: 14px; min-width: 0; } #cbp-portal .cbp-stp-who h2 { margin: 0; font-size: 22px; } #cbp-portal .cbp-stp-who p { margin: 2px 0 0; overflow-wrap: anywhere; } #cbp-portal .cbp-stp-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; margin: 0; } #cbp-portal .cbp-stp-dl dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-3); } #cbp-portal .cbp-stp-dl dd { margin: 2px 0 0; overflow-wrap: anywhere; } #cbp-portal .cbp-stp-sub { margin: 10px 0 0; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-primary); } #cbp-portal .cbp-stp-radios { display: flex; gap: 18px; min-height: 44px; align-items: center; } #cbp-portal .cbp-stp-del { border: 1px solid #f0c9ca; border-radius: 10px; padding: 10px 14px; } #cbp-portal .cbp-stp-del > summary { cursor: pointer; color: #b32d2e; font-weight: 600; } #cbp-portal .cbp-stp-noteform { display: flex; gap: 10px; align-items: flex-end; } #cbp-portal .cbp-stp-noteform textarea { flex: 1; } #cbp-portal .cbp-stp-elog details { border-top: 1px solid var(--cbp-line); padding: 10px 0; } #cbp-portal .cbp-stp-elog summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; } #cbp-portal .cbp-stp-elog pre { white-space: pre-wrap; font: inherit; font-size: 13px; background: var(--cbp-bg); padding: 12px; border-radius: 8px; margin: 8px 0 0; max-height: 360px; overflow: auto; } #cbp-portal .cbp-stp-kc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; } #cbp-portal .cbp-stp-move { margin-top: 4px; } #cbp-portal .cbp-stp-move[open] > summary { margin-bottom: 10px; } #cbp-portal a.cbp-cl-stu { color: var(--cbp-primary); text-decoration: underline; text-underline-offset: 2px; } #cbp-portal .cbp-cl-add { scroll-margin-top: 80px; } @media (max-width: 720px) { #cbp-portal .cbp-stp-noteform { flex-direction: column; align-items: stretch; } } /* 1.47: transactions, payments, keycodes on the student profile */ #cbp-portal .cbp-stp-bal { font-size: 14px; color: var(--cbp-ink-2); } #cbp-portal .cbp-stp-bal strong { font-size: 18px; color: #15803d; margin-left: 4px; } #cbp-portal .cbp-stp-bal.is-due strong { color: #b32d2e; } #cbp-portal .cbp-stp-txns { border: 1px solid var(--cbp-line); border-radius: 10px; overflow: hidden; } #cbp-portal .cbp-stp-tx { display: grid; grid-template-columns: 90px 110px minmax(0, 1fr) 140px 100px; gap: 10px; padding: 9px 12px; align-items: center; font-size: 14px; } #cbp-portal .cbp-stp-tx + .cbp-stp-tx { border-top: 1px solid var(--cbp-line); } #cbp-portal .cbp-stp-tx.is-head { background: var(--cbp-bg); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cbp-ink-3); } #cbp-portal .cbp-stp-tx small { display: block; color: var(--cbp-ink-3); font-size: 12px; overflow-wrap: anywhere; } #cbp-portal .cbp-stp-tx.is-payment .cbp-stp-amt, #cbp-portal .cbp-stp-tx.is-discount .cbp-stp-amt { color: #15803d; } #cbp-portal .cbp-stp-tx.is-total { background: var(--cbp-bg); font-weight: 700; } #cbp-portal .cbp-stp-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } #cbp-portal .cbp-stp-kcrow { grid-template-columns: 130px 150px minmax(0, 1fr) 130px 100px; } #cbp-portal .cbp-stp-kcrow code { font-size: 13px; } #cbp-portal .cbp-stp-actions { display: flex; flex-direction: column; gap: 10px; } #cbp-portal .cbp-stp-act[open] { border: 1px solid var(--cbp-line); border-radius: 12px; padding: 12px; } #cbp-portal .cbp-stp-act[open] > summary { margin-bottom: 10px; } #cbp-portal .cbp-stp-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } #cbp-portal .cbp-stp-inline .cbp-field { margin: 0; flex: 1 1 180px; } #cbp-portal .cbp-stp-inline .cbp-stp-qty { flex: 0 0 90px; } #cbp-portal .cbp-stp-amtf { max-width: 200px; } #cbp-portal .cbp-stp-cardpay .cbp-pay-card { display: block; } #cbp-portal .cbp-stp-due { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } @media (max-width: 760px) { #cbp-portal .cbp-stp-tx, #cbp-portal .cbp-stp-kcrow { grid-template-columns: 1fr auto; gap: 2px 10px; } #cbp-portal .cbp-stp-tx.is-head { display: none; } #cbp-portal .cbp-stp-tx > span:nth-child(3) { grid-column: 1 / -1; order: 3; } #cbp-portal .cbp-stp-tx > span:nth-child(4) { display: none; } #cbp-portal .cbp-stp-kcrow > span:nth-child(4) { display: none; } } /* ---------- 1.48: readable buttons everywhere (high contrast, hover and keyboard focus) ---------- */ /* Themes often restyle