/* GENERATED from website/directions/b-utility/assets/css/pages-account.css by build-theme.js. Do not edit. */
/* Kavio Labs, Direction B: account area (dashboard, downloads, orders, tickets, profile) and sign-in pages.
   Uses the app shell from b.css (.app, .side, .sidenav, .ahead, .summary, .ltabs). */

/* summary cells can be links */
.summary > a { padding: 12px 16px; border-right: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); text-decoration: none; }
.summary > a:last-child { border-right: 0; }
.summary > a:hover { background: var(--bg-2); }
.summary > a b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; margin-top: 2px; }
.pg-summary--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.summary b a { font-weight: 500; font-size: 13.5px; }

.pg-dpanel { margin-top: 22px; }
.pg-dpanel .panel__head h2 { font-size: 15px; }
.pg-dpanel .section__head { margin-bottom: 14px; }
.pg-dpanel .section__head p { font-size: 14px; }
.pg-dpanel .section__head h2 { font-size: 17px; }
.pg-alist { list-style: none; }
.pg-arow { display: grid; grid-template-columns: auto minmax(0, 1fr) 190px auto; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.pg-arow:last-child { border-bottom: 0; }
.pg-arow__main > b { display: block; font-size: 14.5px; font-weight: 600; }
.pg-arow__main span { font-size: 13.5px; color: var(--ink-2); }
.pg-arow__meta { display: grid; justify-items: start; gap: 4px; }
.pg-arow__meta .dom { font-size: 12.5px; color: var(--ink-3); }
.pg-arow__act { text-align: right; }
.pg-dgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.pg-dgrid .pg-dpanel { margin-top: 16px; }
.pg-dgrid .panel__body { padding: 6px 18px 14px; }
.pg-mini--rows td { vertical-align: middle; font-size: 13.5px; }
.pg-mini--rows td:nth-child(2) { text-align: left; color: var(--ink); white-space: nowrap; padding: 8px 12px; }
.pg-mini--rows td:last-child { text-align: right; }
.mini a { color: var(--brand-ink); }
.pg-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* downloads */
.pg-dls { display: grid; gap: 16px; }
.pg-dl { overflow: hidden; scroll-margin-top: 90px; }
.pg-dl__head { gap: 14px; justify-content: flex-start; }
.pg-dl__title { min-width: 0; flex: 1; }
.pg-dl__title h2 { font-size: 15.5px; }
.pg-dl__title .muted { font-size: 13px; }
.pg-dl__act { display: flex; gap: 6px; align-items: center; flex: none; }
.pg-vtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-vtable th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-3); padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.pg-vtable td { padding: 9px 18px; border-bottom: 1px solid var(--line); }
.pg-vtable tr:last-child td { border-bottom: 0; }
.pg-vtable .n { text-align: right; }
.pg-vtable .tag { height: 20px; font-size: 11.5px; margin-left: 4px; font-family: var(--font); }
.pg-vtable .muted .ico { vertical-align: -2px; }

/* orders */
.pg-otable-wrap { margin-top: 22px; overflow-x: auto; }
.pg-otable { width: 100%; border-collapse: collapse; font-size: 14px; }
.pg-otable th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: var(--bg-2); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pg-otable th:first-child { border-top-left-radius: var(--r-3); }
.pg-otable th:last-child { border-top-right-radius: var(--r-3); }
.pg-otable td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pg-otable tr:last-child td { border-bottom: 0; }
.pg-otable .n { text-align: right; white-space: nowrap; }
.pg-otable tr.is-new td { background: var(--brand-50); }
.pg-modal--wide { width: min(720px, 94vw); }
.pg-invoice { color: var(--ink); }
.pg-invoice__parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; font-size: 13.5px; }
.pg-invoice__parties > div { display: grid; gap: 1px; }
.pg-invoice__parties .muted { font-size: 12.5px; }
.pg-invoice__lines { border: 1px solid var(--line); border-radius: var(--r-2); }
.pg-invoice__lines .n { text-align: right; }
.pg-invoice__tot { width: min(320px, 100%); margin-left: auto; }

/* tickets */
.pg-tickets { display: grid; border: 1px solid var(--line); border-radius: var(--r-3); background: #fff; }
.pg-ticket { border-bottom: 1px solid var(--line); }
.pg-ticket:last-child { border-bottom: 0; }
.pg-ticket summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 16px; cursor: pointer; }
.pg-ticket summary::-webkit-details-marker { display: none; }
.pg-ticket summary:hover { background: var(--bg-2); }
.pg-ticket__main b { display: block; font-size: 14.5px; font-weight: 600; }
.pg-ticket__main .muted { font-size: 13px; }
.pg-ticket.is-new summary { background: var(--brand-50); }
.pg-thread { padding: 4px 16px 16px 60px; display: grid; gap: 10px; }
.pg-msg { border: 1px solid var(--line); border-radius: var(--r-3); padding: 10px 14px; background: #fff; max-width: 80ch; }
.pg-msg--us { background: var(--bg-2); }
.pg-msg__meta { display: flex; gap: 10px; font-size: 13px; margin-bottom: 4px; }
.pg-msg p { font-size: 14px; color: var(--ink-2); }
.pg-reply { display: grid; gap: 8px; justify-items: start; max-width: 80ch; }
.pg-newticket { margin-top: 28px; scroll-margin-top: 80px; }
.pg-newticket .panel__body { padding: 18px; }
.pg-tctx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pg-vault { padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--r-3); }
.pg-vault__fields { margin-top: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-tfoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pg-tfoot .btn--primary { margin-left: auto; }
.pg-filebtn { position: relative; overflow: hidden; }
.pg-filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pg-filebtn:focus-within { box-shadow: var(--focus); }

/* profile */
.pg-pblocks { display: grid; gap: 16px; margin-top: 22px; }
.pg-pblock { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 20px; scroll-margin-top: 80px; }
.pg-pblock__intro h2 { font-size: 15.5px; }
.pg-pblock__intro p { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }
.pg-pblock__body { min-width: 0; }
.label .tag { margin-left: 6px; height: 19px; font-size: 11.5px; vertical-align: 1px; }
.pg-tfa { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pg-switch { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 14.5px; position: relative; }
.pg-switch input { position: absolute; opacity: 0; width: 38px; height: 22px; margin: 0; cursor: pointer; }
.pg-switch__ui { flex: none; width: 38px; height: 22px; border-radius: 11px; background: var(--line-2); position: relative; transition: background .15s; margin-top: 1px; }
.pg-switch__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .15s; }
.pg-switch input:checked + .pg-switch__ui { background: var(--brand); }
.pg-switch input:checked + .pg-switch__ui::after { transform: translateX(16px); }
.pg-switch input:focus-visible + .pg-switch__ui { box-shadow: var(--focus); }
.pg-switch small { display: block; color: var(--ink-3); font-size: 13px; }
.pg-tfa__setup { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-2); }
.pg-tfa__setup .pg-numsteps { margin-top: 0; }
.pg-tfa__setup .key { margin-top: 6px; display: flex; }
.pg-joined--otp { margin-top: 8px; max-width: 380px; }
.pg-tfa__codes { margin-top: 16px; padding: 16px; border: 1px solid var(--ok-line); border-radius: var(--r-3); background: var(--ok-bg); font-size: 14px; }
.pg-codes { list-style: none; display: grid; grid-template-columns: repeat(5, auto); gap: 6px 16px; justify-content: start; margin: 10px 0 12px; font-size: 13.5px; }
.pg-apikeys { list-style: none; border: 1px solid var(--line); border-radius: var(--r-3); margin-bottom: 12px; }
.pg-apikeys li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pg-apikeys li:last-child { border-bottom: 0; }
.pg-apikeys li.is-new { background: var(--warn-bg); }
.pg-apikeys div { display: grid; gap: 1px; min-width: 0; font-size: 13px; }
.pg-apikeys b { font-size: 14.5px; }
.pg-apikeys .key .mono { overflow: hidden; text-overflow: ellipsis; }
.pg-joined--api { max-width: 480px; }
.pg-numsteps { list-style: none; counter-reset: s; display: grid; gap: 14px; }
.pg-numsteps li { counter-increment: s; position: relative; padding-left: 36px; color: var(--ink-2); font-size: 14.5px; }
.pg-numsteps li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink); background: #fff; }
.pg-numsteps b { color: var(--ink); font-weight: 600; }
.pg-checklist { display: grid; gap: 12px; }
.pg-danger { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pg-danger p { font-size: 13.5px; margin-top: 2px; }
.pg-danger__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn--danger:hover { background: var(--bad-bg); border-color: var(--bad-line); }
.modal form { margin: 0; }

/* sign in / register */
.pg-auth { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; padding: 40px 0 72px; align-items: start; }
.pg-auth__card .panel__body { padding: 28px; }
.pg-auth__card h1 { font-size: 26px; letter-spacing: -0.015em; }
.pg-auth__card > .panel__body > .muted { margin-top: 6px; font-size: 14.5px; }
.pg-auth__form { display: grid; gap: 14px; margin-top: 22px; }
.pg-label--row { display: flex; justify-content: space-between; align-items: baseline; }
.pg-label--row a { font-weight: 400; font-size: 13px; }
.pg-pwfield { position: relative; }
.pg-pwfield .input { padding-right: 42px; }
.pg-pwfield .icon-btn { position: absolute; right: 4px; top: 3px; }
.pg-auth__alt { margin-top: 18px; font-size: 14px; color: var(--ink-2); text-align: center; }
.pg-auth__side { padding-top: 18px; display: grid; gap: 18px; }
.pg-auth__side h2 { font-size: 17px; }
.pg-auth__side .list-plain { border-top: 1px solid var(--line); }

@media (max-width: 1180px) {
  .pg-arow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pg-arow__meta { grid-column: 2; grid-row: 2; display: flex; gap: 10px; align-items: center; }
  .pg-arow__act { grid-row: 1 / span 2; grid-column: 3; }
  .pg-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-cards--3 > :nth-child(3) { display: none; }
}
@media (max-width: 1024px) {
  .pg-dgrid { grid-template-columns: 1fr; }
  .pg-pblock { grid-template-columns: 1fr; gap: 14px; }
  .pg-auth { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .pg-auth__card { max-width: 520px; }
}
@media (max-width: 760px) {
  .pg-summary--3 { grid-template-columns: 1fr; }
  .pg-summary--3 > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .pg-summary--3 > div:last-child { border-bottom: 0; }
  .summary > a:nth-child(2) { border-right: 0; }
  .summary > a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .pg-arow { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px; }
  .pg-arow__meta { grid-column: 2; grid-row: auto; }
  .pg-arow__act { grid-column: 2; grid-row: auto; text-align: left; }
  .pg-cards--3 { grid-template-columns: 1fr; }
  .pg-cards--3 > :nth-child(3) { display: flex; }
  .pg-dl__head { flex-wrap: wrap; }
  .pg-dl__act { width: 100%; padding-left: 58px; }
  .pg-vtable thead { display: none; }
  .pg-vtable, .pg-vtable tbody, .pg-vtable tr, .pg-vtable td { display: block; }
  .pg-vtable tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .pg-vtable td { padding: 0; border: 0; font-size: 13px; }
  .pg-vtable td:nth-child(1) { font-size: 14px; }
  .pg-vtable td:nth-child(4) { display: none; }
  .pg-vtable td.n { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .pg-otable-wrap { border: 0; background: none; }
  .pg-otable thead { display: none; }
  .pg-otable, .pg-otable tbody, .pg-otable tr, .pg-otable td { display: block; }
  .pg-otable tr { border: 1px solid var(--line); border-radius: var(--r-3); background: #fff; margin-bottom: 10px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
  .pg-otable td { padding: 0; border: 0 !important; }
  .pg-otable td:nth-child(3) { grid-column: 1 / -1; font-size: 13.5px; }
  .pg-otable td:nth-child(4) { color: var(--ink-3); font-size: 13px; }
  .pg-otable td.n { text-align: right; }
  .pg-otable td:nth-child(5) { text-align: right; }
  .pg-otable td:last-child { grid-column: 1 / -1; }
  .pg-invoice__parties { grid-template-columns: 1fr; }
  .pg-ticket summary { grid-template-columns: auto minmax(0, 1fr); }
  .pg-ticket summary > .tag { grid-column: 2; justify-self: start; }
  .pg-thread { padding-left: 16px; }
  .pg-vault__fields { grid-template-columns: 1fr; }
  .pg-tfoot .btn--primary { margin-left: 0; width: 100%; }
  .pg-tfa { align-items: flex-start; }
  .pg-codes { grid-template-columns: repeat(2, auto); }
  .pg-auth__card .panel__body { padding: 20px; }
}
@media (min-width: 761px) {
  .pg-vtable { table-layout: fixed; }
  .pg-vtable th:nth-child(1) { width: 30%; }
  .pg-vtable th:nth-child(2) { width: 17%; }
  .pg-vtable th:nth-child(3) { width: 19%; }
  .pg-vtable th:nth-child(4) { width: 16%; }
}
.pg-otable td:nth-child(-n+2), .pg-otable td:nth-child(4) { white-space: nowrap; }
.pg-otable td:nth-child(4) { color: var(--ink-2); }
.pg-demo-note { max-width: none; }
.pg-mini--rows td:first-child { overflow-wrap: normal; }
@media (max-width: 760px) {
  .pg-mini--rows, .pg-mini--rows tbody { display: block; }
  .pg-mini--rows tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
  .pg-mini--rows tr:last-child { border-bottom: 0; }
  .pg-mini--rows td { display: block; border: 0 !important; padding: 0 !important; }
  .pg-mini--rows td:first-child { grid-column: 1 / -1; }
}