/* ══ v1008: CHARTSAFE OFFICE - FIRST LOOK (PREVIEW) ═════════════════════════════════════════════════
   #pane-office covers the app like the Hub (#pane-hub, same z-index). Colours are the designs' own and the same in the
   app's light and dark themes; the font is the app's own system stack (no outside font). Everything is scoped to
   #pane-office, which also undoes the app's global input styles (base.css: width 100%, translucent dark fill). */
#pane-office{position:fixed;inset:0;z-index:960;display:none;padding-top:var(--safe-top);background:#F5F7F8;color:#15202B;
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;font-size:14px;line-height:1.4;
  -webkit-font-smoothing:antialiased;color-scheme:light;}
#pane-office *{box-sizing:border-box;}
#pane-office button{font:inherit;color:inherit;cursor:pointer;}
#pane-office input, #pane-office select, #pane-office textarea{width:auto;font:inherit;color:#15202B;background:#FFFFFF;border:1px solid #D9DEE3;border-radius:8px;
  padding:0;appearance:auto;-webkit-appearance:auto;transition:none;box-shadow:none;}
#pane-office input[type=text], #pane-office input[type=search], #pane-office input[type=email], #pane-office input[type=tel],
#pane-office input[type=number], #pane-office input[type=date], #pane-office input[type=time], #pane-office select, #pane-office textarea{
  appearance:none;-webkit-appearance:none;}
#pane-office select{color-scheme:light;}
#pane-office select option{background:#FFFFFF;color:#15202B;}
#pane-office input:focus, #pane-office select:focus, #pane-office textarea:focus{outline:none;border-color:#0B6E79;box-shadow:0 0 0 3px rgba(11,110,121,.18);}
#pane-office button:focus-visible, #pane-office a:focus-visible, #pane-office [tabindex]:focus-visible{outline:2px solid #0B6E79;outline-offset:2px;}
#pane-office a{color:#0B6E79;}
#pane-office a:hover{color:#08535B;}
#pane-office h1, #pane-office h2, #pane-office h3, #pane-office h4, #pane-office p, #pane-office ul, #pane-office ol{margin:0;padding:0;}
#pane-office table{border-collapse:collapse;}

/* the Hub's "ChartSafe Office" button (preview accounts only): Office's teal, under the Hub's own style; [hidden] must win
   over .hub-open-app's display:flex */
#hub-office-btn{background:#0B6E79;margin-bottom:8px;}
#hub-office-btn:hover{background:#08535B;}
#hub-office-btn[hidden]{display:none;}

/* the side menu (Sidebar.dc.html) */
.of-side{flex:0 0 248px;width:248px;height:100%;overflow-y:auto;box-sizing:border-box;padding:20px 14px;background:#0E1C26;color:#E6EDF2;
  display:flex;flex-direction:column;gap:16px;}
.of-side-top{position:relative;padding:0 8px;display:flex;flex-direction:column;gap:10px;}
.of-brand{display:flex;align-items:baseline;gap:5px;}
.of-brand-a{font-size:18px;font-weight:700;color:#FFFFFF;letter-spacing:-.01em;}
.of-brand-b{font-size:18px;font-weight:400;color:#5FD3C8;}
#pane-office .of-div-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 10px;border-radius:10px;border:1px solid #23394A;background:#13283A;color:#E6EDF2;text-align:left;}
#pane-office .of-div-btn:hover{background:#18324A;}
.of-div-tag{flex:0 0 26px;width:26px;height:26px;border-radius:7px;background:#5FD3C8;color:#0E1C26;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.of-div-tx{flex:1;min-width:0;}
.of-div-org{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.of-div-sub{display:block;font-size:12px;color:#9FB2C1;}
.of-div-menu{position:absolute;left:8px;right:8px;top:100%;margin-top:6px;z-index:5;padding:6px;border-radius:12px;background:#13283A;border:1px solid #23394A;box-shadow:0 14px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:2px;}
#pane-office .of-div-opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:8px;border:0;background:transparent;color:#E6EDF2;text-align:left;}
#pane-office .of-div-opt span:nth-child(2){flex:1;}
#pane-office .of-div-opt:hover, #pane-office .of-div-opt.on{background:#1D4250;}
#pane-office .of-search{display:flex;align-items:center;gap:8px;margin:0 8px;min-height:44px;padding:0 10px;border-radius:10px;border:0;background:#1A3446;color:#B8C7D3;text-align:left;}
.of-search-tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.of-kbd{font-size:12px;padding:1px 6px;border-radius:5px;border:1px solid #3A5568;color:#9FB2C1;}
.of-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.of-nav-head{padding:16px 12px 6px;color:#8CA0B0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
#pane-office .of-nav-btn{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-radius:10px;border:0;background:transparent;color:#C9D4DD;text-align:left;}
#pane-office .of-nav-btn:hover{background:#15303F;}
#pane-office .of-nav-btn.on{background:#1D4250;color:#FFFFFF;font-weight:600;}
.of-nav-tx{flex:1;}
.of-badge{min-width:22px;padding:1px 7px;box-sizing:border-box;border-radius:11px;background:#F2B544;color:#2B1A00;font-size:12px;font-weight:700;text-align:center;}
.of-side-foot{margin:0 8px;padding:12px;border-radius:12px;background:#13283A;display:flex;flex-direction:column;gap:10px;}
.of-sync{display:flex;align-items:center;gap:8px;color:#B8C7D3;font-size:12px;}
.of-sync-dot{width:8px;height:8px;border-radius:4px;background:#5FD3C8;}
.of-me{display:flex;align-items:center;gap:10px;}
.of-me-av{flex:0 0 34px;width:34px;height:34px;border-radius:17px;background:#E6EDF2;color:#0E1C26;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.of-me-tx{flex:1;}
.of-me-n{display:block;color:#FFFFFF;font-weight:600;font-size:13px;}
.of-me-s{display:block;color:#9FB2C1;font-size:12px;}
#pane-office .of-me-menu{width:32px;height:32px;border-radius:8px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;}

/* the page area: the preview strip, then the page */
.of-main{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;}
.of-strip{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;padding:0 32px;background:#FDF3DC;border-bottom:1px solid #EBD9AE;color:#5C4400;font-size:13px;}
.of-strip-pv{display:flex;align-items:center;gap:8px;font-weight:600;}
.of-strip-div{color:#6B5520;white-space:nowrap;}
.of-page{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;}

/* a page or tab that is not built yet; the New Jersey office */
.of-later{padding:48px 32px;display:flex;justify-content:center;}
.of-later-card{width:100%;max-width:560px;padding:32px;border-radius:14px;background:#FFFFFF;border:1px solid #D9DEE3;text-align:center;}
#pane-office .of-later-h{font-size:20px;font-weight:700;color:#15202B;margin-bottom:8px;}
.of-later-p{font-size:15px;color:#52606D;}

@media (prefers-reduced-motion: reduce){ #pane-office *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;} }

/* ══ SCREENS ══ */

/* ── Schedule (Main.dc.html) ── */
/* ══ SCHEDULE - the home screen (Main.dc.html): Day / Week / Month, the provider's own day plan, Requests waiting ══ */
#pane-office .of-schedule{display:flex;flex-wrap:wrap;gap:24px;padding:24px;align-items:flex-start;}
#pane-office .of-schedule-main{flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:16px;}
#pane-office .of-schedule-aside{flex:1 1 280px;max-width:320px;min-width:0;display:flex;flex-direction:column;gap:16px;}

/* the top row: title, previous / Today / next, the view switch, New case */
#pane-office .of-schedule-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
#pane-office .of-schedule-h1{margin:0;padding:0;flex:1 1 auto;font-size:24px;font-weight:700;color:#15202B;}
#pane-office .of-schedule-h1:focus{outline:none;}
#pane-office .of-schedule-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
#pane-office .of-schedule-ibtn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:8px;border:1px solid #C5CCD3;background:#FFFFFF;}
#pane-office .of-schedule-tbtn{height:40px;padding:0 14px;border-radius:8px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;}
#pane-office .of-schedule-ibtn:hover, #pane-office .of-schedule-tbtn:hover{background:#F1F3F5;}
#pane-office .of-schedule-seg{display:flex;border:1px solid #C5CCD3;border-radius:8px;overflow:hidden;}
#pane-office .of-schedule-seg-btn{height:38px;padding:0 14px;border:0;border-radius:0;background:#FFFFFF;color:#15202B;}
#pane-office .of-schedule-seg-btn:hover{background:#F1F3F5;}
#pane-office .of-schedule-seg-btn.on{background:#15202B;color:#FFFFFF;font-weight:600;}
#pane-office .of-schedule-seg-btn:focus-visible{outline-offset:-3px;}
#pane-office .of-schedule-seg-btn.on:focus-visible{outline-color:#5FD3C8;}
#pane-office .of-schedule-primary{height:40px;padding:0 16px;border-radius:8px;border:0;background:#0B6E79;color:#FFFFFF;font-weight:600;}
#pane-office .of-schedule-primary:hover{background:#08535B;}

/* "Showing" chips */
#pane-office .of-schedule-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
#pane-office .of-schedule-chips-l{margin-right:4px;color:#52606D;font-size:13px;font-weight:600;}
#pane-office .of-schedule-chip{height:38px;padding:0 14px;border-radius:19px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;}
#pane-office .of-schedule-chip:hover{background:#F1F3F5;}
#pane-office .of-schedule-chip.on{border:0;background:#15202B;color:#FFFFFF;font-weight:600;}
#pane-office .of-schedule-chip.on:hover{background:#2A3742;}

/* one provider: their day plan, route map and steps */
#pane-office .of-schedule-plan{display:flex;flex-direction:column;gap:14px;padding:18px 20px;border-radius:14px;border:1px solid #D9DEE3;background:#FFFFFF;}
#pane-office .of-schedule-plan-top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
#pane-office .of-schedule-av{flex:none;width:48px;height:48px;border-radius:24px;background:#0B6E79;color:#FFFFFF;font-weight:700;display:flex;align-items:center;justify-content:center;}
#pane-office .of-schedule-plan-who{flex:1 1 300px;min-width:0;}
#pane-office .of-schedule-plan-name{font-size:18px;font-weight:700;}
#pane-office .of-schedule-plan-sub{color:#3E4C59;}
#pane-office .of-schedule-plan-drive{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
#pane-office .of-schedule-plan-dt{font-weight:700;}
#pane-office .of-schedule-plan-dn{color:#52606D;font-size:12px;}
#pane-office .of-schedule-plan-body{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch;}
#pane-office .of-schedule-map{flex:1 1 380px;min-width:0;border-radius:12px;overflow:hidden;border:1px solid #E6EAEE;background:#F4F6F2;}
#pane-office .of-schedule-map svg{display:block;width:100%;height:auto;}
#pane-office .of-schedule-steps{flex:1 1 260px;min-width:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;}
#pane-office .of-schedule-step{display:flex;gap:12px;margin:0;padding:8px 0;border-bottom:1px solid #EEF0F2;}
#pane-office .of-schedule-step-t{flex:none;width:64px;color:#52606D;font-size:13px;font-weight:600;}
#pane-office .of-schedule-step-x{min-width:0;}
#pane-office .of-schedule-step-w{display:block;font-weight:600;}
#pane-office .of-schedule-step-n{display:block;color:#52606D;font-size:13px;}
#pane-office .of-schedule-plan-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:#08535B;font-size:13px;}
#pane-office .of-schedule-grow{flex:1;}
#pane-office .of-schedule-outline{height:36px;padding:0 12px;border-radius:8px;border:1px solid #0B6E79;background:#FFFFFF;color:#08535B;font-weight:600;}
#pane-office .of-schedule-outline:hover{background:#E3F1F2;}

/* the calendar box (scrolls sideways inside itself when the page is narrow; the provider column stays put) */
#pane-office .of-schedule-box{overflow-x:auto;background:#FFFFFF;border:1px solid #D9DEE3;border-radius:12px;}
#pane-office .of-schedule-week{min-width:980px;}
#pane-office .of-schedule-week.empty{min-width:0;}
#pane-office .of-schedule-week.empty .of-schedule-row{grid-template-columns:190px repeat(5, minmax(0, 1fr));}
#pane-office .of-schedule-dayg{min-width:520px;}
#pane-office .of-schedule-row{display:grid;grid-template-columns:190px repeat(5, minmax(154px, 1fr));border-bottom:1px solid #E6EAEE;}
#pane-office .of-schedule-drow{display:grid;grid-template-columns:190px minmax(0, 1fr);border-bottom:1px solid #E6EAEE;}
#pane-office .of-schedule-row-h{border-bottom:1px solid #D9DEE3;background:#FAFBFC;}
#pane-office .of-schedule-hp{position:sticky;left:0;z-index:1;padding:12px 16px;background:#FAFBFC;box-shadow:1px 0 0 #E6EAEE;color:#52606D;font-size:13px;font-weight:600;}
#pane-office .of-schedule-hc{padding:12px;border-left:1px solid #E6EAEE;}
#pane-office .of-schedule-hc-n{font-weight:600;}
#pane-office .of-schedule-hc-d{color:#52606D;font-size:13px;}
#pane-office .of-schedule-pc{position:sticky;left:0;z-index:1;padding:14px 16px;background:#FFFFFF;box-shadow:1px 0 0 #E6EAEE;}
#pane-office .of-schedule-pname{display:inline;margin:0;padding:0;border:0;background:transparent;color:#15202B;font-weight:600;text-align:left;}
#pane-office .of-schedule-pname:hover{color:#0B6E79;text-decoration:underline;}
#pane-office .of-schedule-pc-c{color:#52606D;font-size:13px;}
#pane-office .of-schedule-pc-h{margin-top:2px;color:#52606D;font-size:12px;}
#pane-office .of-schedule-cell{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:180px;padding:10px;border-left:1px solid #E6EAEE;}
#pane-office .of-schedule-dcell{display:flex;flex-wrap:wrap;align-items:stretch;align-content:flex-start;gap:8px;min-width:0;min-height:120px;padding:10px;border-left:1px solid #E6EAEE;}

/* the blocks */
#pane-office .of-schedule-case{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;border:1px solid #9CCBD0;background:#E3F1F2;}
#pane-office .of-schedule-case-top{display:flex;justify-content:space-between;gap:6px;}
#pane-office .of-schedule-case-time{font-weight:600;font-size:13px;}
#pane-office .of-schedule-case-est{color:#08535B;font-size:11px;font-weight:600;white-space:nowrap;}
#pane-office .of-schedule-req-est{color:#7A4600;}
#pane-office .of-schedule-case-off{font-size:13px;}
#pane-office .of-schedule-case-pt{color:#3E4C59;font-size:12px;}
#pane-office .of-schedule-warn{display:flex;align-items:center;gap:4px;margin-top:4px;color:#7A4600;font-size:12px;font-weight:600;}
#pane-office .of-schedule-same{display:flex;align-items:center;gap:6px;padding:0 4px;color:#08535B;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
#pane-office .of-schedule-same-ln{flex:1;height:1px;background:#9CCBD0;}
#pane-office .of-schedule-whole{flex:1;display:flex;flex-direction:column;gap:2px;min-height:140px;padding:10px;border-radius:8px;background:#0B6E79;color:#FFFFFF;}
#pane-office .of-schedule-whole-k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.85;}
#pane-office .of-schedule-whole-t{font-weight:600;font-size:13px;}
#pane-office .of-schedule-whole-o{font-size:13px;}
#pane-office .of-schedule-whole-i{font-size:12px;opacity:.85;}
#pane-office .of-schedule-travel{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:8px;color:#3E4C59;font-size:12px;
  background:repeating-linear-gradient(135deg, #F1F3F5 0px, #F1F3F5 6px, #E6EAEE 6px, #E6EAEE 12px);}
#pane-office .of-schedule-travel-h{display:flex;align-items:center;gap:6px;font-weight:700;}
#pane-office .of-schedule-rule{padding:6px 10px;border-radius:8px;border:1px solid #C9B6E4;background:#F6F1FC;color:#4B2C7A;font-size:12px;font-weight:600;}
#pane-office .of-schedule-req{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;border:1px dashed #B87A16;background:#FFF3DC;}
#pane-office .of-schedule-req-k{color:#7A4600;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
#pane-office .of-schedule-open{padding:8px 10px;border-radius:8px;border:1px dashed #8896A4;color:#3E4C59;}
#pane-office .of-schedule-open-t{font-weight:600;font-size:13px;}
#pane-office .of-schedule-open-s{font-size:12px;}
#pane-office .of-schedule-off{padding:8px 10px;border-radius:8px;background:#EEF0F2;color:#3E4C59;font-size:13px;font-weight:600;}

/* the day view lays the same blocks out left to right, in the order of the day */
#pane-office .of-schedule-dcell > .of-schedule-case,
#pane-office .of-schedule-dcell > .of-schedule-req,
#pane-office .of-schedule-dcell > .of-schedule-open,
#pane-office .of-schedule-dcell > .of-schedule-off{flex:0 0 172px;min-width:0;}
#pane-office .of-schedule-dcell > .of-schedule-travel{flex:0 0 150px;justify-content:center;}
#pane-office .of-schedule-dcell > .of-schedule-rule{flex:0 1 240px;}
#pane-office .of-schedule-dcell > .of-schedule-whole{flex:1 1 280px;max-width:420px;min-height:96px;}
#pane-office .of-schedule-dcell > .of-schedule-same{flex:0 0 92px;flex-direction:column;justify-content:center;gap:4px;padding:2px 0;text-align:center;}
#pane-office .of-schedule-dcell .of-schedule-same-ln{flex:1 1 8px;width:1px;height:auto;min-height:8px;}

/* the month view */
#pane-office .of-schedule-month{min-width:560px;display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));}
#pane-office .of-schedule-mh{padding:10px 12px;border-left:1px solid #E6EAEE;border-bottom:1px solid #D9DEE3;background:#FAFBFC;color:#52606D;font-size:13px;font-weight:600;}
#pane-office .of-schedule-mc{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;min-width:0;min-height:112px;margin:0;padding:8px;
  border:0;border-left:1px solid #E6EAEE;border-bottom:1px solid #E6EAEE;border-radius:0;background:#FFFFFF;color:#15202B;text-align:left;}
#pane-office .of-schedule-mh:nth-child(7n+1), #pane-office .of-schedule-mc:nth-child(7n+1){border-left:0;}
#pane-office .of-schedule-mc.lastrow{border-bottom:0;}
#pane-office .of-schedule-mc.wknd, #pane-office .of-schedule-mc.out{background:#FAFBFC;}
#pane-office button.of-schedule-mc:hover{background:#F2F8F9;}
#pane-office button.of-schedule-mc:focus-visible{outline-offset:-3px;}
#pane-office .of-schedule-mn{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:12px;font-size:13px;font-weight:600;color:#15202B;}
#pane-office .of-schedule-mc.out .of-schedule-mn{color:#8896A4;}
#pane-office .of-schedule-mn.today{background:#0B6E79;color:#FFFFFF;}
#pane-office .of-schedule-mp{display:flex;align-items:center;gap:4px;min-width:0;padding:2px 6px;border-radius:6px;border:1px solid transparent;font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;}
#pane-office .of-schedule-mp-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;}
#pane-office .of-schedule-mp b{font-weight:700;}
#pane-office .of-schedule-month.one .of-schedule-mp{align-items:flex-start;white-space:normal;}
#pane-office .of-schedule-month.one .of-schedule-mp-tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;}
#pane-office .of-schedule-month.one .of-schedule-mp svg{margin-top:2px;}
#pane-office .of-schedule-mp.k-case{border-color:#9CCBD0;background:#E3F1F2;color:#15202B;}
#pane-office .of-schedule-mp.k-whole{border-color:#0B6E79;background:#0B6E79;color:#FFFFFF;}
#pane-office .of-schedule-mp.k-req{border:1px dashed #B87A16;background:#FFF3DC;color:#7A4600;}
#pane-office .of-schedule-mp.k-open{border:1px dashed #8896A4;color:#3E4C59;}
#pane-office .of-schedule-mp.k-off{border-color:#EEF0F2;background:#EEF0F2;color:#3E4C59;}
#pane-office .of-schedule-mp.k-rule{border-color:#C9B6E4;background:#F6F1FC;color:#4B2C7A;}
#pane-office .of-schedule-mnote{margin:0;color:#52606D;font-size:13px;}

/* a week, day or month with no sample cases */
#pane-office .of-schedule-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 16px;text-align:center;color:#3E4C59;}
#pane-office .of-schedule-empty-h{font-weight:600;color:#15202B;}
#pane-office .of-schedule-empty-p{margin-bottom:6px;font-size:13px;}

/* the key and the rule under the calendar */
#pane-office .of-schedule-legend{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;color:#3E4C59;font-size:13px;}
#pane-office .of-schedule-lg{display:flex;align-items:center;gap:6px;}
#pane-office .of-schedule-sw{flex:none;width:14px;height:14px;border-radius:4px;}
#pane-office .of-schedule-note{margin:0;color:#52606D;font-size:13px;}

/* Requests waiting */
#pane-office .of-schedule-rq{padding:16px;border-radius:12px;border:1px solid #D9DEE3;background:#FFFFFF;}
#pane-office .of-schedule-rq-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
#pane-office .of-schedule-h2{margin:0;padding:0;font-size:16px;font-weight:600;color:#15202B;}
#pane-office .of-schedule-link{margin:0;padding:0;border:0;background:transparent;color:#0B6E79;font-size:13px;text-decoration:underline;}
#pane-office .of-schedule-link:hover{color:#08535B;}
#pane-office .of-schedule-rq-p{margin:4px 0 12px;color:#52606D;font-size:13px;}
#pane-office .of-schedule-ri{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid #E6EAEE;}
#pane-office .of-schedule-ri-o{font-weight:600;}
#pane-office .of-schedule-ri-l{color:#3E4C59;font-size:13px;}
#pane-office .of-schedule-ri-fit{color:#08535B;font-size:12px;font-weight:600;}
#pane-office .of-schedule-ri-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
#pane-office .of-schedule-approve{min-height:36px;padding:0 14px;border-radius:8px;border:0;background:#0B6E79;color:#FFFFFF;font-size:13px;font-weight:600;}
#pane-office .of-schedule-approve:hover{background:#08535B;}
#pane-office .of-schedule-suggest{min-height:36px;padding:0 14px;border-radius:8px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-size:13px;}
#pane-office .of-schedule-suggest:hover{background:#F1F3F5;}

/* ── Requests (Main.dc.html requests + RequestLink.dc.html) ── */
/* Requests (requests.js): the requests waiting (Main.dc.html's panel, as cards) and what a dental office sees
   (RequestLink.dc.html) in a light browser-like frame */
#pane-office .of-requests{padding:24px;display:flex;flex-direction:column;gap:16px;min-width:0;color:#15202B;font-size:14px;line-height:1.4;}
#pane-office .of-requests-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
#pane-office .of-requests-titles{flex:1 1 320px;min-width:0;}
#pane-office .of-requests-trow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
#pane-office .of-requests-h1{margin:0;padding:0;font-size:24px;font-weight:700;line-height:1.4;color:#15202B;}
#pane-office .of-requests-count{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;background:#FFF3DC;border:1px dashed #B87A16;color:#7A4600;font-size:13px;font-weight:600;white-space:nowrap;}
#pane-office .of-requests-lead{margin:4px 0 0;padding:0;color:#52606D;font-size:13px;}

/* buttons */
#pane-office .of-requests-line{display:inline-flex;align-items:center;gap:8px;height:40px;margin:0;padding:0 16px;border-radius:8px;border:1px solid #0B6E79;background:#FFFFFF;color:#08535B;font-size:14px;font-weight:600;white-space:nowrap;}
#pane-office .of-requests-line:hover{background:#F1F8F8;}
#pane-office .of-requests-btn{min-height:36px;margin:0;padding:0 14px;border-radius:8px;border:0;background:#0B6E79;color:#FFFFFF;font-size:13px;font-weight:600;}
#pane-office .of-requests-btn:hover{background:#08535B;}
#pane-office .of-requests-btn2{min-height:36px;margin:0;padding:0 14px;border-radius:8px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-size:13px;font-weight:400;}
#pane-office .of-requests-btn2:hover{background:#F5F7F8;border-color:#8896A4;}

/* the requests, one card each (the panel's row) */
#pane-office .of-requests-list{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:16px;margin:0;padding:0;list-style:none;}
#pane-office .of-requests-card{min-width:0;margin:0;padding:16px;background:#FFFFFF;border:1px solid #D9DEE3;border-radius:12px;display:flex;flex-direction:column;gap:4px;}
#pane-office .of-requests-office{font-weight:600;color:#15202B;}
#pane-office .of-requests-sub{color:#3E4C59;font-size:13px;}
#pane-office .of-requests-fit{color:#08535B;font-size:12px;font-weight:600;}
#pane-office .of-requests-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px;}

/* "What a dental office sees": label row, then the browser-like frame */
#pane-office .of-requests-prev{display:flex;flex-direction:column;gap:10px;margin-top:8px;scroll-margin-top:16px;}
#pane-office .of-requests-prev-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
#pane-office .of-requests-prev-h{margin:0;padding:0;font-size:16px;font-weight:600;line-height:1.4;color:#15202B;}
#pane-office .of-requests-prev-note{flex:1 1 240px;min-width:0;color:#52606D;font-size:13px;}
#pane-office .of-requests-frame{border:1px solid #D9DEE3;border-radius:12px;overflow:hidden;background:#F5F7F8;box-shadow:0 1px 2px rgba(21,32,43,.05), 0 8px 24px rgba(21,32,43,.06);}
#pane-office .of-requests-chrome{display:flex;align-items:center;gap:14px;height:44px;padding:0 14px;background:#EEF0F2;border-bottom:1px solid #D9DEE3;}
#pane-office .of-requests-dots{flex:0 0 42px;display:flex;gap:6px;}
#pane-office .of-requests-dots-sp{flex:0 0 42px;}
#pane-office .of-requests-dot{width:10px;height:10px;border-radius:5px;background:#C5CCD3;}
#pane-office .of-requests-addr{flex:0 1 520px;min-width:0;margin:0 auto;height:28px;padding:0 12px;border-radius:8px;background:#FFFFFF;border:1px solid #D9DEE3;color:#52606D;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;}
#pane-office .of-requests-addr svg{flex:none;}
#pane-office .of-requests-addr-tx{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* RequestLink.dc.html */
#pane-office .of-requests-site{background:#F5F7F8;color:#15202B;font-size:15px;line-height:1.45;}
#pane-office .of-requests-s-top{background:#FFFFFF;border-bottom:1px solid #D9DEE3;}
#pane-office .of-requests-s-topin{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;}
#pane-office .of-requests-s-logo{flex:none;width:48px;height:48px;border-radius:10px;border:1px dashed #8896A4;display:flex;align-items:center;justify-content:center;color:#52606D;font-size:11px;}
#pane-office .of-requests-s-org{flex:1 1 300px;min-width:0;}
#pane-office .of-requests-s-name{font-size:20px;font-weight:700;}
#pane-office .of-requests-s-for{color:#52606D;font-size:14px;}
#pane-office .of-requests-s-for strong{color:#15202B;font-weight:600;}
#pane-office .of-requests-s-lock{display:flex;align-items:center;gap:8px;color:#3E4C59;font-size:13px;}
#pane-office .of-requests-s-body{max-width:1200px;margin:0 auto;padding:32px 24px 48px;}
#pane-office .of-requests-s-h1{margin:0 0 6px;padding:0;font-size:30px;font-weight:700;line-height:1.45;letter-spacing:-.01em;color:#15202B;}
#pane-office .of-requests-s-intro{margin:0 0 28px;padding:0;color:#3E4C59;max-width:700px;}
#pane-office .of-requests-s-cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;}
#pane-office .of-requests-s-card{flex:1 1 440px;min-width:0;margin:0;padding:24px;background:#FFFFFF;border:1px solid #D9DEE3;border-radius:14px;display:flex;flex-direction:column;gap:20px;}
#pane-office .of-requests-s-card.pt{gap:16px;}
#pane-office .of-requests-s-h2{margin:0;padding:0;font-size:18px;font-weight:600;line-height:1.45;color:#15202B;}
#pane-office .of-requests-s-help{margin:4px 0 0;padding:0;color:#52606D;font-size:14px;}

/* 1. days */
#pane-office .of-requests-s-month{display:flex;align-items:center;justify-content:space-between;}
#pane-office .of-requests-s-mname{font-weight:600;font-size:16px;}
#pane-office .of-requests-s-arrow{width:40px;height:40px;margin:0;padding:0;border-radius:8px;border:1px solid #C5CCD3;background:#FFFFFF;display:flex;align-items:center;justify-content:center;}
#pane-office .of-requests-s-arrow:hover{background:#F5F7F8;border-color:#8896A4;}
#pane-office .of-requests-s-cal{display:flex;flex-direction:column;gap:6px;}
#pane-office .of-requests-s-wk{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:6px;}
#pane-office .of-requests-s-wkh{color:#52606D;font-size:12px;font-weight:600;text-align:center;}
#pane-office .of-requests-s-blank{height:56px;}
#pane-office .of-requests-s-day{min-width:0;height:56px;margin:0;padding:1px 6px;border-radius:10px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-weight:600;}
#pane-office .of-requests-s-day:hover{border-color:#0B6E79;background:#F1F8F8;}
#pane-office .of-requests-s-day.on{border:2px solid #0B6E79;background:#0B6E79;color:#FFFFFF;font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:1px 0;overflow:hidden;}
#pane-office .of-requests-s-day.on:hover{border-color:#08535B;background:#08535B;}
#pane-office .of-requests-s-day-n{font-weight:700;}
#pane-office .of-requests-s-day-r{font-size:11px;white-space:nowrap;}
#pane-office .of-requests-s-day[disabled], #pane-office .of-requests-s-day[disabled]:hover{border:0;background:transparent;color:#8896A4;font-weight:400;cursor:default;}
#pane-office .of-requests-s-picked{color:#3E4C59;font-size:14px;}

/* 2. time of day */
#pane-office .of-requests-s-sec{border-top:1px solid #E6EAEE;padding-top:20px;display:flex;flex-direction:column;gap:12px;}
#pane-office .of-requests-s-tod{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px;}
#pane-office .of-requests-s-t{min-width:0;min-height:52px;margin:0;padding:1px 6px;border-radius:10px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-weight:400;}
#pane-office .of-requests-s-t:hover{border-color:#0B6E79;background:#F5F7F8;}
#pane-office .of-requests-s-t.on, #pane-office .of-requests-s-t.on:hover{border:2px solid #0B6E79;background:#F1F8F8;font-weight:600;}

/* 3. patient */
#pane-office .of-requests-s-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px;}
#pane-office .of-requests-s-f{display:flex;flex-direction:column;gap:6px;min-width:0;}
#pane-office .of-requests-s-f.wide{grid-column:span 2;}
#pane-office .of-requests-s-lab{font-size:13px;font-weight:600;color:#15202B;}
#pane-office .of-requests-s-lab span{color:#52606D;font-weight:400;}
#pane-office .of-requests-s-in{width:100%;height:44px;margin:0;padding:0 12px;border:1px solid #C5CCD3;border-radius:8px;background:#FFFFFF;color:#15202B;}
#pane-office .of-requests-s-selw{position:relative;display:block;}
#pane-office .of-requests-s-sel{width:100%;height:44px;margin:0;padding:0 34px 0 10px;border:1px solid #C5CCD3;border-radius:8px;background:#FFFFFF;color:#15202B;}
#pane-office .of-requests-s-chev{position:absolute;right:12px;top:50%;margin-top:-6px;pointer-events:none;}
#pane-office .of-requests-s-ta{display:block;width:100%;margin:0;padding:10px 12px;border:1px solid #C5CCD3;border-radius:8px;background:#FFFFFF;color:#15202B;resize:vertical;}
#pane-office .of-requests-s-in::placeholder, #pane-office .of-requests-s-ta::placeholder{color:#7B8794;opacity:1;}
#pane-office .of-requests-s-in:hover:not(:focus), #pane-office .of-requests-s-sel:hover:not(:focus), #pane-office .of-requests-s-ta:hover:not(:focus){border-color:#8896A4;}
#pane-office .of-requests-s-ok{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3E4C59;cursor:pointer;}
#pane-office .of-requests-s-ok input{flex:none;width:20px;height:20px;margin:1px 0 0;padding:0;accent-color:#0B6E79;}
#pane-office .of-requests-s-send{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border-top:1px solid #E6EAEE;padding-top:16px;}
#pane-office .of-requests-s-go{height:48px;margin:0;padding:0 22px;border-radius:10px;border:0;background:#0B6E79;color:#FFFFFF;font-weight:600;}
#pane-office .of-requests-s-go:hover{background:#08535B;}
#pane-office .of-requests-s-note{color:#52606D;font-size:13px;}
#pane-office .of-requests-s-foot{margin:32px 0 0;padding:0;color:#52606D;font-size:13px;text-align:center;}
#pane-office .of-requests-s-a{display:inline;margin:0;padding:0;border:0;background:transparent;color:#0B6E79;font-size:inherit;text-decoration:underline;}
#pane-office .of-requests-s-a:hover{color:#08535B;}

@media (max-width: 760px){
  #pane-office .of-requests-s-grid{grid-template-columns:minmax(0, 1fr);}
  #pane-office .of-requests-s-f.wide{grid-column:auto;}
}

/* ── Patients (Patients.dc.html) ── */
/* ── PATIENTS (Patients.dc.html) ── the patient list. Fixed colours (same in the app's light and dark themes). The
   table's columns flex: it fits a 1440 screen and scrolls inside its own box (never the page) at 1280. */
#pane-office .of-patients{padding:28px 28px 40px;display:flex;flex-direction:column;gap:20px;min-width:0;color:#15202B;font-size:14px;line-height:1.4;}

/* title row */
#pane-office .of-patients-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;}
#pane-office .of-patients-title{flex:1 1 360px;min-width:0;}
#pane-office .of-patients-h1{margin:0;padding:0;font-size:28px;font-weight:700;line-height:1.4;letter-spacing:-0.01em;color:#15202B;}
#pane-office .of-patients-sub{margin:4px 0 0;padding:0;font-size:14px;color:#3E4C59;}
#pane-office .of-patients-btn{height:44px;margin:0;padding:0 16px;border-radius:10px;font-size:14px;white-space:nowrap;}
#pane-office .of-patients-btn-s{border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-weight:400;}
#pane-office .of-patients-btn-s:hover{background:#F5F7F8;border-color:#9AA5B1;}
#pane-office .of-patients-btn-p{padding:0 18px;border:0;background:#0B6E79;color:#FFFFFF;font-weight:600;}
#pane-office .of-patients-btn-p:hover{background:#08535B;}

/* "2 new patients came in today" */
#pane-office .of-patients-note{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;background:#E3F1F2;border:1px solid #9CCBD0;}
#pane-office .of-patients-note svg{flex:none;}
#pane-office .of-patients-note-tx{flex:1;min-width:0;}
#pane-office .of-patients-note-h{font-weight:600;color:#15202B;}
#pane-office .of-patients-note-s{font-size:13px;color:#08535B;}
#pane-office .of-patients-note-btn{flex:none;min-height:40px;margin:0;padding:0 14px;border-radius:8px;border:1px solid #0B6E79;background:#FFFFFF;color:#08535B;font-size:14px;font-weight:600;}
#pane-office .of-patients-note-btn:hover{background:#F0F8F9;border-color:#08535B;}

/* search and drop-downs */
#pane-office .of-patients-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
#pane-office .of-patients-search{flex:1 1 360px;min-width:0;position:relative;}
#pane-office .of-patients-sicon{position:absolute;left:14px;top:15px;pointer-events:none;}
#pane-office .of-patients-q{display:block;width:100%;height:48px;margin:0;padding:0 14px 0 42px;border:1px solid #C5CCD3;border-radius:10px;background:#FFFFFF;color:#15202B;font-size:14px;}
#pane-office .of-patients-q::placeholder{color:#6B7785;opacity:1;}
#pane-office .of-patients-selw{position:relative;flex:0 1 auto;min-width:0;}
#pane-office .of-patients-sel{display:block;max-width:100%;height:48px;margin:0;padding:0 36px 0 12px;border:1px solid #C5CCD3;border-radius:10px;background:#FFFFFF;color:#15202B;font-size:14px;cursor:pointer;}
#pane-office .of-patients-sel:hover{border-color:#9AA5B1;}
#pane-office .of-patients-chev{position:absolute;right:12px;top:17px;pointer-events:none;}
#pane-office .of-patients-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* "Show" chips */
#pane-office .of-patients-chips{display:flex;flex-wrap:wrap;gap:8px;}
#pane-office .of-patients-chip{height:38px;margin:0;padding:0 14px;border-radius:19px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-size:14px;font-weight:400;white-space:nowrap;}
#pane-office .of-patients-chip:hover{background:#F5F7F8;border-color:#9AA5B1;}
#pane-office .of-patients-chipn{color:#52606D;font-weight:400;}
#pane-office .of-patients-chip.on{border-color:#15202B;background:#15202B;color:#FFFFFF;font-weight:600;}
#pane-office .of-patients-chip.on:hover{border-color:#26394A;background:#26394A;}
#pane-office .of-patients-chip.on .of-patients-chipn{color:inherit;opacity:0.75;}

/* the table */
#pane-office .of-patients-table{overflow-x:auto;background:#FFFFFF;border:1px solid #D9DEE3;border-radius:14px;}
#pane-office .of-patients-tin{min-width:1098px;}
#pane-office .of-patients-grid{display:grid;align-items:center;
  grid-template-columns:minmax(210px, 1.5fr) minmax(124px, 0.6fr) minmax(150px, 1.3fr) minmax(104px, 0.6fr) minmax(148px, 0.7fr) minmax(154px, 0.7fr) minmax(112px, 0.6fr) minmax(96px, 0.6fr);}
#pane-office .of-patients-c{min-width:0;padding:12px 10px;overflow-wrap:break-word;}
#pane-office .of-patients-nw{white-space:nowrap;}
#pane-office .of-patients-c1{padding:12px 18px;display:flex;align-items:center;gap:12px;}
#pane-office .of-patients-th{background:#FAFBFC;border-bottom:1px solid #D9DEE3;color:#52606D;font-size:13px;font-weight:600;}
#pane-office .of-patients-row{border-bottom:1px solid #E6EAEE;cursor:pointer;}
#pane-office .of-patients-row:hover{background:#F7FAFB;}
#pane-office .of-patients-table .of-patients-row:focus-visible{outline:2px solid #0B6E79;outline-offset:-2px;}
#pane-office .of-patients-av{width:36px;height:36px;flex:none;border-radius:18px;background:#E3F1F2;color:#08535B;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
#pane-office .of-patients-who{min-width:0;}
#pane-office .of-patients-nl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
#pane-office .of-patients-name{font-weight:600;color:#15202B;text-decoration:underline;}
#pane-office .of-patients-row:hover .of-patients-name{color:#08535B;}
#pane-office .of-patients-new{padding:1px 7px;border-radius:10px;background:#0B6E79;color:#FFFFFF;font-size:11px;font-weight:700;white-space:nowrap;}
#pane-office .of-patients-dob{color:#52606D;font-size:13px;white-space:nowrap;}
#pane-office .of-patients-mute{color:#3E4C59;}
#pane-office .of-patients-src{font-size:13px;}
#pane-office .of-patients-ready{display:inline-flex;align-items:center;gap:6px;color:#08535B;font-weight:600;}
#pane-office .of-patients-need{display:inline-block;padding:3px 9px;border-radius:8px;background:#FFF3DC;color:#7A4600;font-size:13px;font-weight:600;white-space:nowrap;}
#pane-office .of-patients-balw{color:#7A4600;font-weight:600;}
#pane-office .of-patients-empty{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:24px 18px;border-bottom:1px solid #E6EAEE;color:#3E4C59;}
#pane-office .of-patients-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 16px;padding:12px 18px;color:#52606D;font-size:13px;}

/* ── Patient profile (PatientProfile.dc.html + IntakeForm.dc.html) ── */
/* ── PATIENT PROFILE (PatientProfile.dc.html) ── and its "Send a form" overlay (IntakeForm.dc.html on a phone). Fixed
   colours (same in the app's light and dark themes). The two columns sit side by side at 1440 and at 1280 and stack
   below that; the Cases and Documents tables scroll inside their own box (never the page). */
#pane-office .of-profile{padding:24px 28px 48px;display:flex;flex-direction:column;gap:20px;min-width:0;color:#15202B;font-size:14px;line-height:1.45;}

/* breadcrumb and link-style buttons (the design's links) */
#pane-office .of-profile-crumb{font-size:13px;color:#52606D;}
#pane-office .of-profile-link{display:inline;margin:0;padding:0;border:0;border-radius:3px;background:transparent;color:#0B6E79;font:inherit;text-align:left;text-decoration:underline;cursor:pointer;}
#pane-office .of-profile-link:hover{color:#08535B;}
#pane-office .of-profile-link-msg{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;}
#pane-office .of-profile-link-doc{flex:1;min-width:0;}

/* buttons */
#pane-office .of-profile-btn{height:44px;margin:0;padding:0 14px;border-radius:10px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-weight:400;white-space:nowrap;}
#pane-office .of-profile-btn:hover{background:#F1F4F6;border-color:#9AA5B1;}
#pane-office .of-profile-btn-pri{border:0;background:#0B6E79;color:#FFFFFF;font-weight:600;}
#pane-office .of-profile-btn-pri:hover{background:#08535B;}
#pane-office .of-profile-btn-wide{padding:0 16px;}
#pane-office .of-profile-btn-sm{height:auto;min-height:36px;padding:0 12px;border-radius:8px;font-size:13px;}
#pane-office .of-profile-btn-md{height:auto;min-height:40px;padding:0 14px;border-radius:8px;}
#pane-office .of-profile-row{display:flex;flex-wrap:wrap;gap:8px;}
#pane-office .of-profile-row-end{flex-wrap:nowrap;justify-content:flex-end;}

/* patient summary */
#pane-office .of-profile-sum{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:24px;border-radius:16px;border:1px solid #D9DEE3;background:#FFFFFF;}
#pane-office .of-profile-av{flex:none;width:72px;height:72px;border-radius:36px;background:#0B6E79;color:#FFFFFF;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;}
#pane-office .of-profile-id{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:8px;}
#pane-office .of-profile-h1{margin:0;padding:0;font-size:30px;font-weight:700;line-height:1.45;letter-spacing:-0.01em;color:#15202B;}
#pane-office .of-profile-meta{color:#3E4C59;}
#pane-office .of-profile-chips{display:flex;flex-wrap:wrap;gap:8px;}
#pane-office .of-profile-chip{padding:4px 10px;border-radius:12px;background:#E3F1F2;color:#08535B;font-size:13px;font-weight:600;}
#pane-office .of-profile-chip-warn{background:#FFF3DC;color:#7A4600;}
#pane-office .of-profile-chip-al{display:inline-flex;align-items:center;gap:6px;background:#FDE8E8;color:#8A1C1C;font-weight:700;}
#pane-office .of-profile-acts{display:flex;flex-wrap:wrap;gap:8px;}

/* tabs */
#pane-office .of-profile-tabs{display:flex;flex-wrap:wrap;gap:4px 24px;border-bottom:1px solid #D9DEE3;}
#pane-office .of-profile-tab{margin:0;padding:10px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#3E4C59;font-weight:400;}
#pane-office .of-profile-tab:hover{color:#15202B;}
#pane-office .of-profile-tab.on{color:#15202B;font-weight:600;border-bottom-color:#0B6E79;}
#pane-office .of-profile-tab-n{color:#52606D;font-weight:400;}
#pane-office .of-profile-panel{min-width:0;}

/* Overview: two flexible columns */
#pane-office .of-profile-cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;}
#pane-office .of-profile-col{min-width:0;display:flex;flex-direction:column;gap:20px;}
#pane-office .of-profile-col-l{flex:1 1 520px;}
#pane-office .of-profile-col-r{flex:1 1 360px;}
#pane-office .of-profile-card{min-width:0;padding:20px;border-radius:14px;border:1px solid #D9DEE3;background:#FFFFFF;}
#pane-office .of-profile-stack{display:flex;flex-direction:column;gap:12px;}
#pane-office .of-profile-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;}
#pane-office .of-profile-h2{margin:0;padding:0;font-size:17px;font-weight:600;line-height:1.45;color:#15202B;}
#pane-office .of-profile-mb10{margin-bottom:10px;}
#pane-office .of-profile-mb12{margin-bottom:12px;}
#pane-office .of-profile-mb14{margin-bottom:14px;}
#pane-office .of-profile-dl{margin:0;padding:0;}
#pane-office .of-profile-dl2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:14px 24px;}
#pane-office .of-profile-dlc{display:flex;flex-direction:column;gap:10px;}
#pane-office .of-profile-dt{margin:0;padding:0;color:#52606D;font-size:12px;font-weight:600;}
#pane-office .of-profile-dd{margin:2px 0 0;padding:0;overflow-wrap:anywhere;}
#pane-office .of-profile-note{margin:16px 0 0;padding:0;color:#52606D;font-size:12px;}
#pane-office .of-profile-note0{margin:0;padding:0;color:#52606D;font-size:12px;}
#pane-office .of-profile-g2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:20px;}
#pane-office .of-profile-b{font-weight:600;}
#pane-office .of-profile-blk{display:block;}
#pane-office .of-profile-sub{color:#3E4C59;}
#pane-office .of-profile-small{margin-top:8px;color:#52606D;font-size:13px;}
#pane-office .of-profile-s{display:block;color:#52606D;font-size:13px;}
#pane-office .of-profile-ok{color:#08535B;font-weight:600;}
#pane-office .of-profile-mute{color:#52606D;}
#pane-office .of-profile-warn{color:#7A4600;font-weight:600;}
#pane-office .of-profile-red{color:#8A1C1C;font-weight:600;}

/* What happened */
#pane-office .of-profile-tl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;}
#pane-office .of-profile-tl li{display:flex;gap:14px;padding-bottom:16px;}
#pane-office .of-profile-tl li:last-child{padding-bottom:0;}
#pane-office .of-profile-dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:5px;background:#0B6E79;}
#pane-office .of-profile-dot-old{background:#8896A4;}

/* Next case */
#pane-office .of-profile-next{min-width:0;display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:14px;border:2px solid #0B6E79;background:#FFFFFF;}
#pane-office .of-profile-kicker{color:#08535B;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
#pane-office .of-profile-h2b{margin:2px 0 0;padding:0;font-size:20px;font-weight:700;line-height:1.45;color:#15202B;}
#pane-office .of-profile-chk{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
#pane-office .of-profile-chk li{display:flex;justify-content:space-between;gap:12px;}

/* Medical snapshot */
#pane-office .of-profile-tiles{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px;}
#pane-office .of-profile-tile{padding:10px;border-radius:10px;border:1px solid #E6EAEE;background:#FAFBFC;}
#pane-office .of-profile-tile-l{color:#52606D;font-size:12px;}
#pane-office .of-profile-tile-v{font-size:16px;font-weight:700;}

/* Documents card */
#pane-office .of-profile-docs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
#pane-office .of-profile-docs li{display:flex;align-items:center;gap:10px;}
#pane-office .of-profile-docs svg{flex:none;}
#pane-office .of-profile-when{color:#52606D;font-size:13px;white-space:nowrap;}

/* Cases and Documents tabs: a table that scrolls inside its own box */
#pane-office .of-profile-tw{overflow-x:auto;border:1px solid #E6EAEE;border-radius:10px;}
#pane-office .of-profile-tbl{width:100%;min-width:720px;border-collapse:collapse;}
#pane-office .of-profile-tbl th{padding:10px 12px;border-bottom:1px solid #E6EAEE;background:#FAFBFC;color:#52606D;font-size:12px;font-weight:600;text-align:left;white-space:nowrap;}
#pane-office .of-profile-tbl td{padding:12px;border-bottom:1px solid #EEF1F4;vertical-align:middle;}
#pane-office .of-profile-tbl tr:last-child td{border-bottom:0;}
#pane-office .of-profile-num{color:#3E4C59;font-variant-numeric:tabular-nums;white-space:nowrap;}
#pane-office .of-profile-nw{white-space:nowrap;}
#pane-office .of-profile-tr{text-align:right;white-space:nowrap;}
#pane-office .of-profile-docn{display:flex;align-items:flex-start;gap:10px;}
#pane-office .of-profile-docn svg{flex:none;margin-top:1px;}
#pane-office .of-profile-pill{display:inline-block;padding:3px 9px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap;}
#pane-office .of-profile-pill-up{background:#E3F1F2;color:#08535B;}
#pane-office .of-profile-pill-req{background:#FFF3DC;color:#7A4600;}
#pane-office .of-profile-pill-done{background:#EEF1F4;color:#3E4C59;}
#pane-office .of-profile-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* "Send a form": the phone overlay (fixed, above the page and the side menu) */
#pane-office .of-profile-ov{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;overscroll-behavior:contain;background:rgba(14, 28, 38, 0.88);}
#pane-office .of-profile-ov-in{display:flex;align-items:center;gap:24px;margin:auto;}
#pane-office .of-profile-phone-wrap{flex:none;position:relative;}
#pane-office .of-profile-phone{width:406px;height:860px;transform-origin:0 0;overflow:hidden;border:8px solid #0E1C26;border-radius:36px;background:#FFFFFF;box-shadow:0 24px 60px rgba(0, 0, 0, 0.35);}
#pane-office .of-profile-ov-side{flex:0 0 280px;width:280px;display:flex;flex-direction:column;gap:12px;}
#pane-office .of-profile-ov-h{margin:0;padding:0;font-size:20px;font-weight:700;color:#FFFFFF;}
#pane-office .of-profile-ov-p{margin:0;padding:0;color:#E6EDF2;font-size:14px;}
#pane-office .of-profile-ov-k{margin:0;padding:0;color:#C9D4DD;font-size:12px;}
#pane-office .of-profile-ov-side .of-profile-btn{width:100%;}
#pane-office .of-profile-ov-x{display:flex;align-items:center;justify-content:center;gap:8px;border:0;font-weight:600;}
#pane-office .of-profile-ov-x:hover{background:#E6EDF2;}
#pane-office .of-profile-ov-side button:focus-visible{outline-color:#5FD3C8;}

/* the intake form itself (390 x 844, as on the patient's phone) */
#pane-office .of-profile-f{width:390px;height:844px;display:flex;flex-direction:column;background:#FFFFFF;color:#15202B;font-size:15px;line-height:1.4;text-align:left;}
#pane-office .of-profile-f-head{display:flex;align-items:center;gap:12px;padding:18px 20px 14px;border-bottom:1px solid #E6EAEE;}
#pane-office .of-profile-f-head svg{flex:none;}
#pane-office .of-profile-f-logo{flex:none;width:38px;height:38px;border-radius:9px;border:1px dashed #8896A4;display:flex;align-items:center;justify-content:center;color:#52606D;font-size:10px;}
#pane-office .of-profile-f-ht{flex:1;min-width:0;}
#pane-office .of-profile-f-org{font-weight:700;}
#pane-office .of-profile-f-sub{color:#52606D;font-size:13px;}
#pane-office .of-profile-f-prog{display:flex;flex-direction:column;gap:8px;padding:14px 20px 0;}
#pane-office .of-profile-f-step{display:flex;justify-content:space-between;gap:8px;font-size:13px;}
#pane-office .of-profile-f-stepn{font-weight:600;}
#pane-office .of-profile-f-mute{color:#52606D;}
#pane-office .of-profile-f-bar{height:6px;border-radius:3px;background:#E6EAEE;}
#pane-office .of-profile-f-fill{width:40%;height:6px;border-radius:3px;background:#0B6E79;}
#pane-office .of-profile-f-body{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:14px 20px;}
#pane-office .of-profile-f-tip{margin:0;padding:10px 12px;border-radius:10px;background:#F1F8F8;color:#08535B;font-size:13px;}
#pane-office .of-profile-f-g2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;}
#pane-office .of-profile-f-fld{min-width:0;display:flex;flex-direction:column;gap:5px;}
#pane-office .of-profile-f-lb{font-size:13px;font-weight:600;}
#pane-office .of-profile-f-opt{color:#52606D;font-weight:400;}
#pane-office .of-profile-f-in{width:100%;height:44px;margin:0;padding:0 12px;border:1px solid #C5CCD3;border-radius:9px;background:#FFFFFF;color:#15202B;font:inherit;}
#pane-office .of-profile-f-selw{position:relative;}
#pane-office .of-profile-f-sel{padding:0 34px 0 10px;}
#pane-office .of-profile-f-chev{position:absolute;right:12px;top:15px;pointer-events:none;}
#pane-office .of-profile-f-ck{display:flex;align-items:center;gap:8px;min-height:30px;color:#3E4C59;font-size:13px;}
#pane-office .of-profile-f-cb{flex:none;width:18px;height:18px;margin:0;padding:0;accent-color:#0B6E79;}
#pane-office .of-profile-f-foot{display:flex;flex-direction:column;gap:10px;padding:12px 20px 22px;border-top:1px solid #E6EAEE;}
#pane-office .of-profile-f-btns{display:flex;gap:10px;}
#pane-office .of-profile-f-back{flex:1;height:50px;margin:0;padding:0;border-radius:12px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-weight:600;}
#pane-office .of-profile-f-back:hover{background:#F1F4F6;border-color:#9AA5B1;}
#pane-office .of-profile-f-next{flex:2;height:50px;margin:0;padding:0;border-radius:12px;border:0;background:#0B6E79;color:#FFFFFF;font-weight:600;}
#pane-office .of-profile-f-next:hover{background:#08535B;}
#pane-office .of-profile-f-enc{color:#52606D;font-size:12px;text-align:center;}

/* ── Readiness (Readiness.dc.html) ── */
/* Readiness (Readiness.dc.html): the case readiness board */
#pane-office .of-readiness{padding:24px;display:flex;flex-direction:column;gap:20px;color:#15202B;font-size:14px;line-height:1.4;}
#pane-office .of-readiness-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;}
#pane-office .of-readiness-titles{flex:1 1 400px;min-width:0;}
#pane-office .of-readiness-h1{margin:0;padding:0;font-size:24px;font-weight:700;line-height:1.4;color:#15202B;}
#pane-office .of-readiness-sub{margin:4px 0 0;padding:0;color:#3E4C59;}
#pane-office .of-readiness-chips{display:flex;gap:8px;flex-wrap:wrap;}
#pane-office .of-readiness-chip{height:40px;margin:0;padding:0 14px;border-radius:20px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-weight:400;white-space:nowrap;}
#pane-office .of-readiness-chip:hover{background:#F0F3F5;border-color:#9AA5B1;}
#pane-office .of-readiness-chip.on{border:0;background:#15202B;color:#FFFFFF;font-weight:600;}
#pane-office .of-readiness-chip.on:hover{background:#26343F;}

/* the three counts */
#pane-office .of-readiness-stats{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px;}
#pane-office .of-readiness-stat{min-width:0;margin:0;padding:16px 20px;background:#FFFFFF;border:1px solid #D9DEE3;border-radius:12px;}
#pane-office .of-readiness-stat-l{color:#52606D;font-size:13px;font-weight:600;}
#pane-office .of-readiness-stat-v{font-size:32px;font-weight:700;line-height:1.4;}
#pane-office .of-readiness-stat-ok{color:#08535B;}
#pane-office .of-readiness-stat-warn{background:#FFF8EB;border-color:#E8C27A;}
#pane-office .of-readiness-stat-warn .of-readiness-stat-l, #pane-office .of-readiness-stat-warn .of-readiness-stat-v{color:#7A4600;}

/* the board: scrolls sideways inside its own box. min-width is the columns' own minimum (the design's 1180 px left the
   last 52 px of every row clipped) */
#pane-office .of-readiness-box{overflow-x:auto;background:#FFFFFF;border:1px solid #D9DEE3;border-radius:12px;}
#pane-office .of-readiness-board{min-width:944px;}   /* v1008: flexible columns - the design's fixed ones (1232 px) did not fit beside the menu at 1440 */
#pane-office .of-readiness-grid{display:grid;grid-template-columns:minmax(100px,1fr) minmax(130px,1.5fr) minmax(56px,.6fr) minmax(92px,1fr) repeat(4, minmax(86px,1fr)) minmax(72px,.8fr) minmax(150px,1.5fr);}
#pane-office .of-readiness-th{background:#FAFBFC;border-bottom:1px solid #D9DEE3;color:#52606D;font-size:13px;font-weight:600;}
#pane-office .of-readiness-th > div{padding:12px;}
#pane-office .of-readiness-th > .of-readiness-c1{padding:12px 16px;}
#pane-office .of-readiness-row{position:relative;overflow:hidden;border-bottom:1px solid #E6EAEE;}
#pane-office .of-readiness-line{position:relative;align-items:center;}
#pane-office .of-readiness-cell{min-width:0;padding:12px 10px;}
#pane-office .of-readiness-cell.of-readiness-c1{padding:12px 16px;}
#pane-office .of-readiness-day{font-weight:600;white-space:nowrap;}
#pane-office .of-readiness-time{color:#3E4C59;font-size:13px;}
#pane-office .of-readiness-empty{padding:24px 16px;color:#52606D;}

/* the row fill: ready rows fill in teal, rows still waiting fill as far as they have got, striped */
#pane-office .of-readiness-fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:#EAF5F5;transform-origin:left center;}
#pane-office .of-readiness-wait{position:absolute;left:0;top:0;bottom:0;transform-origin:left center;
  background-image:repeating-linear-gradient(135deg, rgba(242,181,68,.30) 0 12px, rgba(242,181,68,.16) 12px 24px);background-size:48px 100%;}
#pane-office .of-readiness-anim .of-readiness-fill{animation:of-readiness-fill 1.2s cubic-bezier(.2,.7,.2,1) both;}
#pane-office .of-readiness-anim .of-readiness-wait{animation:of-readiness-fill 1.2s cubic-bezier(.2,.7,.2,1) both, of-readiness-stripes 1.6s linear infinite;}
@keyframes of-readiness-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes of-readiness-stripes{from{background-position:0 0}to{background-position:48px 0}}
@media (prefers-reduced-motion: reduce){
  #pane-office .of-readiness-fill, #pane-office .of-readiness-wait{animation:none !important;}
}

/* the four checks */
#pane-office .of-readiness-done{display:inline-flex;align-items:center;gap:6px;color:#08535B;font-weight:600;}
#pane-office .of-readiness-miss{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:6px;background:#FFFFFF;border:1px solid #E8C27A;color:#7A4600;font-weight:600;}
#pane-office .of-readiness-done svg, #pane-office .of-readiness-miss svg{flex:0 0 14px;}
#pane-office .of-readiness-na{color:#52606D;}

/* Ready column and Next step */
#pane-office .of-readiness-pill{display:inline-block;padding:4px 10px;border-radius:12px;font-weight:700;font-size:13px;}
#pane-office .of-readiness-pill-ok{background:#0B6E79;color:#FFFFFF;}
#pane-office .of-readiness-pill-wait{background:#FFFFFF;border:1px solid #E8C27A;color:#7A4600;}
#pane-office .of-readiness-act{min-height:36px;margin:0;padding:0 12px;border-radius:8px;border:1px solid #0B6E79;background:#FFFFFF;color:#08535B;font-weight:600;font-size:13px;text-align:center;}
#pane-office .of-readiness-act:hover{background:#EAF5F5;border-color:#08535B;}
#pane-office .of-readiness-act:active{background:#D5ECEC;}
#pane-office .of-readiness-none{color:#3E4C59;font-size:13px;}

#pane-office .of-readiness-note{margin:0;padding:0;color:#52606D;font-size:13px;}

/* ── Settings and Dental offices (PracticeSetup, OfficeBilling, ProviderSettings .dc.html) ── */
/* ── Settings (PracticeSetup.dc.html, OfficeBilling.dc.html, ProviderSettings.dc.html): the designs' inline styles as
   classes. Fixed colours (the same in the app's light and dark themes); the shell's font. ── */

/* the Settings sub-menu */
#pane-office .of-settings-sub{display:flex;flex-wrap:wrap;gap:4px 24px;padding:0 24px;background:#FFFFFF;border-bottom:1px solid #D9DEE3;}
#pane-office .of-settings-sub-btn{margin:0;padding:14px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#3E4C59;font-weight:400;text-align:left;}
#pane-office .of-settings-sub-btn:hover{color:#08535B;}
#pane-office .of-settings-sub-btn.of-settings-on{color:#15202B;font-weight:600;border-bottom-color:#0B6E79;cursor:default;}

/* page frame, headings, text */
#pane-office .of-settings-wrap{max-width:1040px;margin:0 auto;padding:28px 24px 48px;display:flex;flex-direction:column;gap:20px;}
#pane-office .of-settings-wrap.of-settings-narrow{max-width:1000px;}
#pane-office .of-settings-h1{margin:0;font-size:26px;font-weight:700;line-height:1.4;color:#15202B;}
#pane-office .of-settings-h1.of-settings-h1s{font-size:24px;}
#pane-office .of-settings-h2{margin:0 0 4px;font-size:18px;font-weight:600;line-height:1.4;color:#15202B;}
#pane-office .of-settings-h2s{margin:0;font-size:17px;font-weight:600;line-height:1.4;color:#15202B;}
#pane-office .of-settings-lead{margin:4px 0 0;color:#3E4C59;}
#pane-office .of-settings-lead.of-settings-lead2{margin-top:2px;}
#pane-office .of-settings-desc{margin:0;color:#52606D;font-size:13px;}
#pane-office .of-settings-desc.of-settings-desc-mb{margin-bottom:12px;}
#pane-office .of-settings-b{font-weight:600;}
#pane-office .of-settings-bb{font-weight:700;}
#pane-office .of-settings-strong{font-weight:600;}
#pane-office .of-settings-blk{display:block;}
#pane-office .of-settings-mut{color:#52606D;font-size:13px;}
#pane-office .of-settings-sec{margin:0;color:#3E4C59;font-size:13px;}
#pane-office .of-settings-fine{margin:0;color:#52606D;font-size:12px;}
#pane-office .of-settings-ok{color:#08535B;font-size:13px;}
#pane-office .of-settings-mt6{margin:6px 0 0;}
#pane-office .of-settings-grow{flex:1 1 auto;min-width:0;}
#pane-office .of-settings-ico{flex:0 0 auto;}
#pane-office .of-settings-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* cards */
#pane-office .of-settings-card{background:#FFFFFF;border:1px solid #D9DEE3;border-radius:12px;padding:20px;min-width:0;}
#pane-office .of-settings-col{display:flex;flex-direction:column;gap:12px;}
#pane-office .of-settings-col16{display:flex;flex-direction:column;gap:16px;}
#pane-office .of-settings-headrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;}
#pane-office .of-settings-g2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;}
#pane-office .of-settings-g2.of-settings-g14{gap:14px;}
#pane-office .of-settings-g2.of-settings-g16{gap:16px;}

/* switch rows (Modules, calendars) */
#pane-office .of-settings-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid #E6EAEE;}
#pane-office .of-settings-row.of-settings-row-s{padding:12px 0;}
#pane-office .of-settings-row-tx{flex:1 1 auto;min-width:0;}
#pane-office .of-settings-sw{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0 4px;border:0;border-radius:8px;background:transparent;}
#pane-office .of-settings-sw-tx{width:24px;text-align:right;font-size:13px;font-weight:600;color:#52606D;}
#pane-office .of-settings-sw.of-settings-on .of-settings-sw-tx{color:#08535B;}
#pane-office .of-settings-sw-tr{position:relative;display:block;width:44px;height:26px;border-radius:13px;background:#C5CCD3;transition:background-color .15s;}
#pane-office .of-settings-sw.of-settings-on .of-settings-sw-tr{background:#0B6E79;}
#pane-office .of-settings-sw:hover .of-settings-sw-tr{background:#B3BCC5;}
#pane-office .of-settings-sw.of-settings-on:hover .of-settings-sw-tr{background:#08535B;}
#pane-office .of-settings-sw-kn{position:absolute;top:3px;left:3px;display:block;width:20px;height:20px;border-radius:10px;background:#FFFFFF;}
#pane-office .of-settings-sw.of-settings-on .of-settings-sw-kn{left:21px;}

/* Schedule and calendars */
#pane-office .of-settings-built{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px;background:#F1F8F8;border:1px solid #9CCBD0;}
#pane-office .of-settings-pill{flex:0 0 auto;padding:3px 10px;border-radius:12px;background:#0B6E79;color:#FFFFFF;font-size:12px;font-weight:700;white-space:nowrap;}
#pane-office .of-settings-note{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:10px;background:#FAFBFC;border:1px solid #E6EAEE;}

/* Divisions */
#pane-office .of-settings-divc{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:10px;border:1px solid #C5CCD3;background:#FFFFFF;}
#pane-office .of-settings-divc.of-settings-on{border:2px solid #0B6E79;background:#F1F8F8;}
#pane-office .of-settings-divt{display:flex;align-items:center;gap:10px;}
#pane-office .of-settings-tag{flex:0 0 28px;width:28px;height:28px;border-radius:7px;background:#0B6E79;color:#FFFFFF;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
#pane-office .of-settings-tag.of-settings-tag-nj{background:#3B5BDB;}

/* Backups go to (radio cards); the chosen card keeps the same outer size with its 2px border */
#pane-office .of-settings-fs{margin:0;padding:0;border:0;min-width:0;}
#pane-office .of-settings-leg{display:block;float:none;margin:0 0 8px;padding:0;font-size:13px;font-weight:600;color:#15202B;}
#pane-office .of-settings-pick{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border:1px solid #C5CCD3;border-radius:10px;background:#FFFFFF;cursor:pointer;}
#pane-office .of-settings-pick:hover{border-color:#8896A4;}
#pane-office .of-settings-pick.of-settings-on{padding:13px 15px;border:2px solid #0B6E79;background:#F1F8F8;}
#pane-office .of-settings-radio, #pane-office .of-settings-check{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:#0B6E79;cursor:pointer;}
#pane-office .of-settings-radio{border-radius:50%;}
#pane-office .of-settings-check{border-radius:4px;}
#pane-office .of-settings-radio.of-settings-radio-top{margin-top:1px;}

/* Branding */
#pane-office .of-settings-brand{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;}
#pane-office .of-settings-full{flex:1 1 100%;}
#pane-office .of-settings-logo{flex:0 0 auto;width:120px;height:120px;margin:0;padding:0;border-radius:12px;border:1px dashed #8896A4;background:#FAFBFC;color:#3E4C59;font-size:13px;}
#pane-office .of-settings-logo:hover{border-color:#0B6E79;background:#F1F8F8;color:#08535B;}
#pane-office .of-settings-brandr{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px;}
#pane-office .of-settings-acc{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
#pane-office .of-settings-acc-l{margin-right:6px;font-size:13px;font-weight:600;}
#pane-office .of-settings-sw8{width:36px;height:36px;margin:0;padding:0;border-radius:18px;border:0;}
#pane-office .of-settings-sw8:hover{box-shadow:0 0 0 3px #D9DEE3;}
#pane-office .of-settings-sw8.of-settings-on{border:3px solid #15202B;}
#pane-office .of-settings-sw8.of-settings-on:hover{box-shadow:none;}

/* form fields */
#pane-office .of-settings-fld{display:flex;flex-direction:column;gap:6px;min-width:0;}
#pane-office .of-settings-lbl{font-size:13px;font-weight:600;color:#15202B;}
#pane-office .of-settings-in{height:44px;min-width:0;margin:0;padding:0 12px;border:1px solid #C5CCD3;border-radius:8px;background:#FFFFFF;color:#15202B;}
#pane-office .of-settings-in::placeholder{color:#7B8794;opacity:1;}
#pane-office .of-settings-in.of-settings-in-date{width:180px;}
#pane-office .of-settings-in.of-settings-in-grow{flex:1 1 auto;width:auto;}
#pane-office .of-settings-in.of-settings-in-time{width:90px;height:38px;padding:0 10px;}
#pane-office .of-settings-selw{position:relative;display:flex;min-width:0;}
#pane-office .of-settings-selw.of-settings-selw-auto{flex:0 0 auto;}
#pane-office .of-settings-sel{flex:1 1 auto;width:100%;min-width:0;height:44px;margin:0;padding:0 32px 0 10px;border:1px solid #C5CCD3;border-radius:8px;background:#FFFFFF;color:#15202B;cursor:pointer;}
#pane-office .of-settings-selw-auto .of-settings-sel{width:auto;}
#pane-office .of-settings-chev{position:absolute;right:12px;top:50%;margin-top:-6px;pointer-events:none;}
#pane-office .of-settings-opts{display:flex;flex-wrap:wrap;gap:8px 24px;}
#pane-office .of-settings-opts.of-settings-opts-s{gap:4px 20px;}
#pane-office .of-settings-opt{display:flex;align-items:center;gap:8px;min-height:36px;cursor:pointer;}
#pane-office .of-settings-cxl{display:flex;gap:8px;min-width:0;}

/* buttons */
#pane-office .of-settings-btn1{height:48px;margin:0;padding:0 22px;border-radius:10px;border:0;background:#0B6E79;color:#FFFFFF;font-weight:600;}
#pane-office .of-settings-btn1:hover{background:#08535B;}
#pane-office .of-settings-btn1s{flex:0 0 auto;min-height:40px;margin:0;padding:0 14px;border-radius:8px;border:0;background:#0B6E79;color:#FFFFFF;font-weight:600;}
#pane-office .of-settings-btn1s:hover{background:#08535B;}
#pane-office .of-settings-btn2{flex:0 0 auto;min-height:40px;margin:0;padding:0 14px;border-radius:8px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-weight:400;}
#pane-office .of-settings-btn2:hover{background:#F5F7F8;border-color:#8896A4;}
#pane-office .of-settings-btn2l{height:48px;margin:0;padding:0 18px;border-radius:10px;border:1px solid #C5CCD3;background:#FFFFFF;color:#15202B;font-weight:400;}
#pane-office .of-settings-btn2l:hover{background:#F5F7F8;border-color:#8896A4;}
#pane-office .of-settings-btnt{flex:0 0 auto;min-height:40px;margin:0;padding:0 14px;border-radius:8px;border:1px solid #0B6E79;background:#FFFFFF;color:#08535B;font-weight:600;}
#pane-office .of-settings-btnt:hover{background:#F1F8F8;}
#pane-office .of-settings-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* Dental offices and billing: office list | billing card | how a case is priced (wraps as the design does) */
#pane-office .of-settings-ob{display:flex;flex-wrap:wrap;gap:24px;padding:24px;align-items:flex-start;}
#pane-office .of-settings-oblist{flex:1 1 240px;max-width:280px;min-width:0;padding:8px;background:#FFFFFF;border:1px solid #D9DEE3;border-radius:12px;}
#pane-office .of-settings-obitem{display:block;width:100%;margin:0;padding:12px;border:0;border-radius:8px;background:transparent;color:#15202B;text-align:left;}
#pane-office .of-settings-obitem:hover{background:#F5F7F8;}
#pane-office .of-settings-obitem.of-settings-on{background:#E3F1F2;}
#pane-office .of-settings-obs{color:#52606D;font-size:13px;}
#pane-office .of-settings-obs.of-settings-own{color:#08535B;}
#pane-office .of-settings-obdiv{height:1px;margin:4px 8px;background:#E6EAEE;}
#pane-office .of-settings-obadd{display:block;width:100%;margin:8px 0 0;min-height:44px;padding:0 12px;border-radius:8px;border:1px dashed #8896A4;background:#FFFFFF;color:#15202B;font-weight:600;}
#pane-office .of-settings-obadd:hover{background:#F5F7F8;border-color:#0B6E79;}
#pane-office .of-settings-obmain{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px;}
#pane-office .of-settings-obhead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;}
#pane-office .of-settings-obtitle{flex:1 1 320px;min-width:0;}
#pane-office .of-settings-obex{flex:1 1 320px;max-width:380px;min-width:0;padding:20px;background:#FFFFFF;border:1px solid #D9DEE3;border-radius:12px;display:flex;flex-direction:column;gap:14px;}
#pane-office .of-settings-exbox{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:10px;background:#FAFBFC;border:1px solid #E6EAEE;}
#pane-office .of-settings-excap{color:#52606D;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
#pane-office .of-settings-exlist{display:flex;flex-direction:column;}
#pane-office .of-settings-exrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #E6EAEE;}
#pane-office .of-settings-exrow.of-settings-extot{padding:12px 0;border-bottom:0;font-weight:700;}
#pane-office .of-settings-exv{color:#3E4C59;}

/* Providers: My settings */
#pane-office .of-settings-me{display:flex;flex-wrap:wrap;align-items:center;gap:16px;}
#pane-office .of-settings-av{flex:0 0 56px;width:56px;height:56px;border-radius:28px;background:#0B6E79;color:#FFFFFF;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;}
#pane-office .of-settings-me-tx{flex:1 1 300px;min-width:0;}
#pane-office .of-settings-chips{display:flex;flex-wrap:wrap;gap:10px;}
#pane-office .of-settings-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:2px solid #0B6E79;background:#F1F8F8;font-weight:600;}
#pane-office .of-settings-chip.of-settings-chip-nj{border-color:#3B5BDB;background:#EEF2FE;}
#pane-office .of-settings-chip-t{width:22px;height:22px;border-radius:6px;background:#0B6E79;color:#FFFFFF;font-size:10px;display:flex;align-items:center;justify-content:center;}
#pane-office .of-settings-chip-nj .of-settings-chip-t{background:#3B5BDB;}
#pane-office .of-settings-days{display:flex;flex-direction:column;}
#pane-office .of-settings-day{display:grid;grid-template-columns:120px 150px minmax(0, 1fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid #E6EAEE;}
#pane-office .of-settings-badge{justify-self:start;padding:3px 10px;border-radius:12px;background:#EEF0F2;color:#3E4C59;font-size:12px;font-weight:700;}
#pane-office .of-settings-badge.of-settings-badge-on{background:#E3F1F2;color:#08535B;}
#pane-office .of-settings-times{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;}
#pane-office .of-settings-tl{display:flex;align-items:center;gap:6px;color:#3E4C59;font-size:13px;}
#pane-office .of-settings-hard{padding:3px 10px;border-radius:12px;background:#F6F1FC;border:1px solid #C9B6E4;color:#4B2C7A;font-size:12px;font-weight:700;}
#pane-office .of-settings-tor{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #E6EAEE;}
#pane-office .of-settings-tow{color:#52606D;}
#pane-office .of-settings-calr{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #E6EAEE;}

/* Dental offices and billing on a narrower screen (1280: the page area is 1032 px), where the three columns no longer fit
   side by side: the example card goes under the billing card in its column instead of alone at the bottom left */
@media (max-width: 1423px){
  #pane-office .of-settings-ob{display:grid;grid-template-columns:minmax(240px, 280px) minmax(0, 1fr);}
  #pane-office .of-settings-oblist{grid-column:1;grid-row:1 / span 2;max-width:none;}
  #pane-office .of-settings-obmain{grid-column:2;grid-row:1;}
  #pane-office .of-settings-obex{grid-column:2;grid-row:2;max-width:none;}
}