/* * DF24 Client Portal styles. * Every rule is scoped to .df24cp so themes and Elementor kits cannot leak in. * Colors and fonts come from Client Portal, Settings through the --df-* variables * printed inline by DF24CP_Assets::tokens_css(). Bump DF24CP_VERSION after edits. */ .df24cp:not(#df24cp-guard){ color-scheme:light; --primary:var(--df-primary,#0071E3); --primary-ink:var(--df-primary-ink,#0062C4); --deep:var(--df-deep,#25409E); --head:var(--df-head,#2C3338); --text:var(--df-text,#54595F); --muted:var(--df-muted,#6B6B6B); --bg:var(--df-bg,#F8F9FA); --bg-2:var(--df-bg-2,#F1F3F7); --bg-3:#F4F4F4; --white:#FFFFFF; --line:#E3E6EC; --line-2:#D2D7E0; --tint:var(--df-tint,#E9F2FD); --ok:#0E6B44; --ok-bg:#E4F5EC; --ok-solid:#0E7A4E; --warn:#8A4B00; --warn-bg:#FFF1DC; --bad:#B0182F; --bad-bg:#FDE8EB; --rev:var(--df-deep,#25409E); --rev-bg:#E8ECF8; --done:#54595F; --done-bg:#EEF0F3; --on-deep:#DCE3F7; --inv:var(--df-inv,#6D35DE); --inv-tint:#F6F2FD; --inv-line:#E2D8F7; --shadow:0 1px 2px rgba(44,51,56,.05),0 8px 24px rgba(37,64,158,.07); --shadow-h:0 2px 4px rgba(44,51,56,.06),0 16px 36px rgba(37,64,158,.13); --r:16px; --pill:var(--df-pill,41px); --f-head:var(--df-f-head,"Kameron",Georgia,serif); --f-ui:var(--df-f-ui,"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif); --pvh:0px; } .df24cp:not(#df24cp-guard),.df24cp:not(#df24cp-guard) *{box-sizing:border-box} .df24cp:not(#df24cp-guard) [hidden]{display:none!important} .df24cp:not(#df24cp-guard){background:var(--bg)} .df24cp:not(#df24cp-guard){background:var(--bg);color:var(--text);font-family:var(--f-ui);font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-align:left} /* Theme guard base. Themes, page builders and Elementor kits style plain elements * globally. These rules give every element inside the portal a neutral start, at a * strength above any theme rule without !important but below every portal component * rule (which come later and are more specific), so components always win. */ .df24cp:not(#df24cp-guard){letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;font-style:normal;font-weight:400;white-space:normal;cursor:auto} .df24cp:not(#df24cp-guard) :where(p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,figure,blockquote,table,caption,thead,tbody,tfoot,tr,th,td,form,fieldset,legend,label,a,button,input,select,textarea,img,svg,section,aside,nav,header,footer,main,article,hr){margin:0;padding:0;border:0 none;border-radius:0;font-style:normal;background-color:transparent;text-transform:none;letter-spacing:inherit;text-indent:0;text-shadow:none;box-shadow:none;float:none;background-image:none} .df24cp:not(#df24cp-guard) :where(p,ul,ol,li,dl,dt,dd,label,a,td,figure,blockquote,legend,caption,span){font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;font-style:inherit;color:inherit;text-align:inherit;vertical-align:baseline} .df24cp:not(#df24cp-guard) :where(ul,ol){list-style:none} .df24cp:not(#df24cp-guard) :where(li){list-style:inherit;display:list-item} .df24cp:not(#df24cp-guard) :where(a){background-color:transparent;text-decoration-line:underline;text-decoration-style:solid;font-family:inherit} .df24cp:not(#df24cp-guard) :where(label){display:inline;cursor:default} .df24cp:not(#df24cp-guard) :where(img){display:inline;width:auto;height:auto;max-width:100%;vertical-align:baseline;box-sizing:border-box} .df24cp:not(#df24cp-guard) :where(svg){max-width:none;vertical-align:baseline;overflow:hidden;display:inline} .df24cp:not(#df24cp-guard) :where(table){width:100%;border-collapse:collapse;border-spacing:0;table-layout:auto;font-size:inherit;line-height:inherit;color:inherit;background-color:transparent} .df24cp:not(#df24cp-guard) :where(th,td){vertical-align:middle;text-align:left;font-size:inherit;line-height:inherit;color:inherit;background-color:transparent;text-transform:none} .df24cp:not(#df24cp-guard) :where(button,input,select,textarea){font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;line-height:inherit;margin:0;min-width:auto;min-height:auto;height:auto;max-width:none;vertical-align:baseline;box-shadow:none;text-shadow:none;transition:none;box-sizing:border-box;outline-offset:0} .df24cp:not(#df24cp-guard) :where(button){background-color:transparent;border:0;padding:0;text-align:center;white-space:normal;width:auto;display:inline-block;cursor:pointer} .df24cp:not(#df24cp-guard) :where(input:not([type=checkbox]):not([type=radio]),select,textarea){width:auto;padding:0;border:0;border-radius:0;background-color:transparent} .df24cp:not(#df24cp-guard) :where(input[type=checkbox],input[type=radio]){width:auto;height:auto;padding:0;margin:3px 3px 3px 4px;vertical-align:baseline;background-color:transparent} .df24cp:not(#df24cp-guard) :where(textarea){height:auto} .df24cp:not(#df24cp-guard) h1,.df24cp:not(#df24cp-guard) h2,.df24cp:not(#df24cp-guard) h3,.df24cp:not(#df24cp-guard) h4{font-family:var(--f-head);margin:0;line-height:1.25;text-wrap:balance;color:var(--head);font-weight:600} .df24cp:not(#df24cp-guard) h1{font-size:1.85rem} .df24cp:not(#df24cp-guard) h2{font-size:1.22rem} .df24cp:not(#df24cp-guard) h3{font-size:1.04rem} .df24cp:not(#df24cp-guard) p{margin:0} .df24cp:not(#df24cp-guard) a{color:var(--primary)} .df24cp:not(#df24cp-guard) button,.df24cp:not(#df24cp-guard) input,.df24cp:not(#df24cp-guard) select,.df24cp:not(#df24cp-guard) textarea{font:inherit;color:inherit} .df24cp:not(#df24cp-guard) :focus-visible{outline:3px solid var(--primary);outline-offset:2px} .df24cp:not(#df24cp-guard) .num{font-variant-numeric:tabular-nums} .df24cp:not(#df24cp-guard) .muted{color:var(--muted)} .df24cp:not(#df24cp-guard) .sm{font-size:.84rem} .df24cp:not(#df24cp-guard) .ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .df24cp:not(#df24cp-guard) .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem} .df24cp:not(#df24cp-guard) .logo{display:block;aspect-ratio:605.5/107;width:200px;max-width:100%;background:var(--df-logo) no-repeat left center/contain;flex:none} .df24cp:not(#df24cp-guard) .logo.lg{width:260px} .df24cp:not(#df24cp-guard) .logo.sm{width:132px} .df24cp:not(#df24cp-guard) .logo.xs{width:116px} .df24cp:not(#df24cp-guard) .logo.compact{aspect-ratio:600/90;width:150px;background-image:var(--df-logo-sm)} .df24cp:not(#df24cp-guard) .logo.compact.xs{width:128px} .df24cp:not(#df24cp-guard) .app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh} .df24cp:not(#df24cp-guard) .side{background:var(--white);border-right:1px solid var(--line);padding:22px 16px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;overflow-y:auto} .df24cp:not(#df24cp-guard) .side .logo{margin:4px 8px 0} .df24cp:not(#df24cp-guard) .nav{display:flex;flex-direction:column;gap:3px} .df24cp:not(#df24cp-guard) .nav-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:12px 14px 6px} .df24cp:not(#df24cp-guard) .nav a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--pill);color:var(--head);text-decoration:none;font-size:.88rem;font-weight:500;transition:background .15s,color .15s} .df24cp:not(#df24cp-guard) .nav a:hover{background:var(--bg-2)} .df24cp:not(#df24cp-guard) .nav a[aria-current="page"]{background:var(--primary);color:#fff;font-weight:600} .df24cp:not(#df24cp-guard) .nav .count{margin-left:auto;background:var(--bg-2);color:var(--head);font-size:.7rem;font-weight:700;padding:1px 9px;border-radius:var(--pill)} .df24cp:not(#df24cp-guard) .nav a[aria-current="page"] .count{background:#fff;color:var(--primary)} .df24cp:not(#df24cp-guard) .side-help{margin-top:auto;background:var(--bg-2);border-radius:14px;padding:16px} .df24cp:not(#df24cp-guard) .side-help strong{color:var(--head);font-family:var(--f-head);font-size:.98rem;font-weight:600} .df24cp:not(#df24cp-guard) .side-help p{font-size:.8rem;color:var(--text);margin-top:4px} .df24cp:not(#df24cp-guard) .main{min-width:0;display:flex;flex-direction:column} .df24cp:not(#df24cp-guard) .topbar{display:flex;align-items:center;gap:14px;padding-block:14px;padding-inline:32px;border-bottom:1px solid var(--line);background:var(--white)} .df24cp:not(#df24cp-guard) .top-logo{display:none} .df24cp:not(#df24cp-guard) .search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--pill);padding:8px 16px;color:var(--muted)} .df24cp:not(#df24cp-guard) .search input{border:0;outline:0;background:transparent;flex:1;min-width:0;color:var(--head)} .df24cp:not(#df24cp-guard) .search input::placeholder{color:var(--muted)} .df24cp:not(#df24cp-guard) .top-actions{margin-left:auto;display:flex;align-items:center;gap:10px} .df24cp:not(#df24cp-guard) .icon-btn{width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--line-2);background:var(--white);display:grid;place-items:center;color:var(--head);cursor:pointer;position:relative;transition:.15s;flex:none} .df24cp:not(#df24cp-guard) .icon-btn:hover{border-color:var(--primary);color:var(--primary)} .df24cp:not(#df24cp-guard) .dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--bad);border:2px solid #fff} .df24cp:not(#df24cp-guard) .avatar{width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-family:var(--f-ui);font-weight:700;font-size:.86rem;letter-spacing:.02em;flex:none} .df24cp:not(#df24cp-guard) .avatar.sm{width:34px;height:34px;font-size:.74rem} .df24cp:not(#df24cp-guard) .avatar.df{background:var(--deep)} .df24cp:not(#df24cp-guard) .avatar,.df24cp:not(#df24cp-guard) .avatar.df{color:#FFFFFF!important} .df24cp:not(#df24cp-guard) .who{display:flex;align-items:center;gap:10px} .df24cp:not(#df24cp-guard) .who div b{font-weight:600;font-size:.88rem;display:block;line-height:1.2;color:var(--head)} .df24cp:not(#df24cp-guard) .who div span{font-size:.76rem;color:var(--muted)} .df24cp:not(#df24cp-guard) .view{padding-block:28px 56px;padding-inline:32px;display:flex;flex-direction:column;gap:22px;max-width:1280px;width:100%} .df24cp:not(#df24cp-guard) .head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .head p{color:var(--text);margin-top:4px} .df24cp:not(#df24cp-guard) .sample{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);padding:5px 12px;border-radius:var(--pill);border:1px dashed var(--warn)} .df24cp:not(#df24cp-guard) .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;transition:box-shadow .2s,transform .2s,border-color .2s;min-width:0} .df24cp:not(#df24cp-guard) .card.hov:hover{box-shadow:var(--shadow-h);transform:translateY(-2px);border-color:var(--line-2)} .df24cp:not(#df24cp-guard) .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .card-h a{font-size:.82rem;text-decoration:none;font-weight:600;color:var(--primary)} .df24cp:not(#df24cp-guard) .card-h a:hover{text-decoration:underline} .df24cp:not(#df24cp-guard) .grid{display:grid;gap:18px} .df24cp:not(#df24cp-guard) .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .df24cp:not(#df24cp-guard) .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .df24cp:not(#df24cp-guard) .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .df24cp:not(#df24cp-guard) .g-main{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)} .df24cp:not(#df24cp-guard) .stat{display:flex;flex-direction:column;gap:10px} .df24cp:not(#df24cp-guard) .stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px} .df24cp:not(#df24cp-guard) .stat-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--tint);color:var(--primary-ink)} .df24cp:not(#df24cp-guard) .stat .v{font-size:1.6rem;font-weight:700;line-height:1.1;color:var(--head)} .df24cp:not(#df24cp-guard) .stat .l{color:var(--text);font-size:.84rem} .df24cp:not(#df24cp-guard) .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:4px 11px;border-radius:var(--pill);white-space:nowrap;line-height:1.35} .df24cp:not(#df24cp-guard) .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .df24cp:not(#df24cp-guard) .b-ok{color:var(--ok);background:var(--ok-bg)} .df24cp:not(#df24cp-guard) .b-warn{color:var(--warn);background:var(--warn-bg)} .df24cp:not(#df24cp-guard) .b-bad{color:var(--bad);background:var(--bad-bg)} .df24cp:not(#df24cp-guard) .b-rev{color:var(--rev);background:var(--rev-bg)} .df24cp:not(#df24cp-guard) .b-done{color:var(--done);background:var(--done-bg)} .df24cp:not(#df24cp-guard) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-ui);font-weight:600;font-size:.86rem;padding:11px 22px;border-radius:var(--pill);border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s,background .15s,border-color .15s,color .15s;white-space:nowrap} .df24cp:not(#df24cp-guard) .btn-p{background:var(--primary);color:#fff} .df24cp:not(#df24cp-guard) .btn-p:hover{background:var(--deep);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,113,227,.25)} .df24cp:not(#df24cp-guard) .btn-s{background:var(--white);border-color:var(--line-2);color:var(--head)} .df24cp:not(#df24cp-guard) .btn-s:hover{border-color:var(--primary);color:var(--primary)} .df24cp:not(#df24cp-guard) .btn-ok{background:var(--ok-solid);color:#fff} .df24cp:not(#df24cp-guard) .btn-ok:hover{background:#0B6340;transform:translateY(-1px)} .df24cp:not(#df24cp-guard) .btn-sm{padding:7px 14px;font-size:.8rem} .df24cp:not(#df24cp-guard) .btn-block{width:100%} .df24cp:not(#df24cp-guard) .bar{height:8px;border-radius:var(--pill);background:var(--line);overflow:hidden} .df24cp:not(#df24cp-guard) .bar i{display:block;height:100%;border-radius:inherit;background:var(--primary)} .df24cp:not(#df24cp-guard) .proj{display:flex;flex-direction:column;gap:14px} .df24cp:not(#df24cp-guard) .proj-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 12px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .proj-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--text);font-size:.82rem} .df24cp:not(#df24cp-guard) .proj-meta span{display:inline-flex;align-items:center;gap:6px} .df24cp:not(#df24cp-guard) .pct{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text);margin-bottom:6px} .df24cp:not(#df24cp-guard) .pct b{color:var(--head);font-weight:700} .df24cp:not(#df24cp-guard) .welcome{background:var(--deep);color:#fff;border-radius:20px;padding:30px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .welcome h1{color:#fff;font-size:1.9rem} .df24cp:not(#df24cp-guard) .welcome p{color:var(--on-deep);margin-top:6px;max-width:54ch} .df24cp:not(#df24cp-guard) .welcome .acts{display:flex;gap:10px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .welcome .btn-s{background:#fff;color:var(--deep);border-color:#fff} .df24cp:not(#df24cp-guard) .welcome .btn-s:hover{background:var(--tint);color:var(--deep)} .df24cp:not(#df24cp-guard) .welcome .btn-p{border-color:#fff} .df24cp:not(#df24cp-guard) .welcome .sample{background:#fff;color:var(--warn);border-color:#fff} .df24cp:not(#df24cp-guard) .list{display:flex;flex-direction:column} .df24cp:not(#df24cp-guard) .li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line)} .df24cp:not(#df24cp-guard) .li:first-child{border-top:0;padding-top:0} .df24cp:not(#df24cp-guard) .li-ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--tint);color:var(--primary-ink);flex:none} .df24cp:not(#df24cp-guard) .li b{font-weight:600;font-size:.88rem;display:block;color:var(--head)} .df24cp:not(#df24cp-guard) .li p{font-size:.82rem;color:var(--text)} .df24cp:not(#df24cp-guard) .li time{font-size:.75rem;color:var(--muted)} .df24cp:not(#df24cp-guard) .quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .df24cp:not(#df24cp-guard) .qa{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);text-decoration:none;color:var(--head);transition:.15s;text-align:left} .df24cp:not(#df24cp-guard) .qa:hover{border-color:var(--primary);background:var(--tint);transform:translateY(-1px)} .df24cp:not(#df24cp-guard) .qa .ico{color:var(--primary-ink)} .df24cp:not(#df24cp-guard) .qa b{font-weight:600;font-size:.84rem} .df24cp:not(#df24cp-guard) .billrow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line)} .df24cp:not(#df24cp-guard) .billrow:first-child{border-top:0;padding-top:0} .df24cp:not(#df24cp-guard) .billrow b{color:var(--head);font-weight:600;font-size:.88rem;display:block} .df24cp:not(#df24cp-guard) .billrow span{font-size:.8rem} .df24cp:not(#df24cp-guard) .cardchip{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--head);font-size:.86rem} .df24cp:not(#df24cp-guard) .visa{background:var(--deep);color:#fff;font-weight:800;font-style:italic;font-size:.7rem;padding:3px 7px;border-radius:5px;letter-spacing:.03em} .df24cp:not(#df24cp-guard) .ptabs{display:flex;gap:8px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .ptab{padding:9px 18px;border-radius:var(--pill);border:1.5px solid var(--line-2);background:var(--white);font-size:.85rem;font-weight:500;cursor:pointer;color:var(--head);transition:.15s} .df24cp:not(#df24cp-guard) .ptab:hover{border-color:var(--primary)} .df24cp:not(#df24cp-guard) .ptab[aria-selected="true"]{border-color:var(--deep);background:var(--deep);color:#fff;font-weight:600} .df24cp:not(#df24cp-guard) .ph{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center} .df24cp:not(#df24cp-guard) .ring{width:108px;height:108px;position:relative} .df24cp:not(#df24cp-guard) .ring svg{width:108px;height:108px;display:block;margin:0;padding:0;border:0;fill:none;max-width:none;transform:rotate(-90deg)} .df24cp:not(#df24cp-guard) .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;font-weight:700;color:var(--head)} .df24cp:not(#df24cp-guard) .ph-info{display:flex;flex-direction:column;gap:8px} .df24cp:not(#df24cp-guard) .kv{display:flex;gap:28px;flex-wrap:wrap;margin-top:6px} .df24cp:not(#df24cp-guard) .kv div{display:flex;flex-direction:column} .df24cp:not(#df24cp-guard) .kv span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600} .df24cp:not(#df24cp-guard) .kv b{font-weight:600;font-size:.9rem;color:var(--head)} .df24cp:not(#df24cp-guard) .stages{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative;margin-top:4px} .df24cp:not(#df24cp-guard) .stage{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;position:relative;padding:0 4px} .df24cp:not(#df24cp-guard) .stage::before{content:"";position:absolute;top:17px;left:-50%;right:50%;height:3px;background:var(--line);z-index:0} .df24cp:not(#df24cp-guard) .stage:first-child::before{display:none} .df24cp:not(#df24cp-guard) .stage.done::before,.df24cp:not(#df24cp-guard) .stage.now::before{background:var(--primary)} .df24cp:not(#df24cp-guard) .stage .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid var(--line-2);color:var(--text);font-weight:700;font-size:.82rem;position:relative;z-index:1} .df24cp:not(#df24cp-guard) .stage.done .n{background:var(--primary);border-color:var(--primary);color:#fff} .df24cp:not(#df24cp-guard) .stage.now .n{border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 6px var(--tint)} .df24cp:not(#df24cp-guard) .stage b{font-size:.82rem;font-weight:600;color:var(--head)} .df24cp:not(#df24cp-guard) .stage span{font-size:.72rem;color:var(--muted)} .df24cp:not(#df24cp-guard) .tl{display:flex;flex-direction:column;position:relative;padding-left:28px} .df24cp:not(#df24cp-guard) .tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)} .df24cp:not(#df24cp-guard) .tl-i{position:relative;padding:0 0 20px} .df24cp:not(#df24cp-guard) .tl-i:last-child{padding-bottom:0} .df24cp:not(#df24cp-guard) .tl-i::before{content:"";position:absolute;left:-25px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--white);border:3px solid var(--line-2)} .df24cp:not(#df24cp-guard) .tl-i.done::before{background:var(--ok-solid);border-color:var(--ok-solid)} .df24cp:not(#df24cp-guard) .tl-i.now::before{border-color:var(--primary);box-shadow:0 0 0 4px var(--tint)} .df24cp:not(#df24cp-guard) .tl-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .tl-i b{font-weight:600;font-size:.9rem;color:var(--head)} .df24cp:not(#df24cp-guard) .tl-i p{font-size:.82rem;color:var(--text)} .df24cp:not(#df24cp-guard) .task{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--bg);transition:.2s} .df24cp:not(#df24cp-guard) .task:hover{border-color:var(--line-2)} .df24cp:not(#df24cp-guard) .task.approved{border-color:var(--ok);background:var(--ok-bg)} .df24cp:not(#df24cp-guard) .task-row{display:flex;gap:12px;align-items:flex-start} .df24cp:not(#df24cp-guard) .task-thumb{width:64px;height:48px;border-radius:8px;flex:none;background:linear-gradient(160deg,#25409E 0 40%,#fff 40% 100%);border:1px solid var(--line);position:relative;overflow:hidden} .df24cp:not(#df24cp-guard) .task-thumb::after{content:"";position:absolute;left:8px;right:22px;top:9px;height:4px;border-radius:2px;background:#fff;box-shadow:0 7px 0 #fff} .df24cp:not(#df24cp-guard) .task-thumb.t2{background:linear-gradient(160deg,#0071E3 0 50%,#F1F3F7 50%)} .df24cp:not(#df24cp-guard) .task b{font-weight:600;font-size:.9rem;color:var(--head)} .df24cp:not(#df24cp-guard) .task p{font-size:.82rem;color:var(--text)} .df24cp:not(#df24cp-guard) .task-acts{display:flex;gap:8px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .tbl-wrap{overflow-x:auto;margin:0 -22px;padding:0 22px} .df24cp:not(#df24cp-guard) table{width:100%;border-collapse:collapse;min-width:640px} .df24cp:not(#df24cp-guard) th{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)} .df24cp:not(#df24cp-guard) td{padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text)} .df24cp:not(#df24cp-guard) tr:last-child td{border-bottom:0} .df24cp:not(#df24cp-guard) tbody tr{transition:background .15s} .df24cp:not(#df24cp-guard) tbody tr:hover{background:var(--bg)} .df24cp:not(#df24cp-guard) td b{font-weight:600;color:var(--head)} .df24cp:not(#df24cp-guard) .ta-r{text-align:right} .df24cp:not(#df24cp-guard) .filters{display:flex;gap:4px;background:var(--bg-2);padding:4px;border-radius:var(--pill);width:max-content;max-width:100%;overflow-x:auto} .df24cp:not(#df24cp-guard) .filters button{border:0;background:transparent;padding:7px 16px;border-radius:var(--pill);font-size:.8rem;font-weight:500;color:var(--head);cursor:pointer} .df24cp:not(#df24cp-guard) .filters button[aria-pressed="true"]{background:var(--white);color:var(--primary);font-weight:700;box-shadow:var(--shadow)} .df24cp:not(#df24cp-guard) .pay-opt{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px} .df24cp:not(#df24cp-guard) .pay-opt h3{display:flex;align-items:center;gap:8px;font-size:1rem} .df24cp:not(#df24cp-guard) .pay-opt.main{border-color:var(--primary);box-shadow:0 0 0 3px var(--tint)} .df24cp:not(#df24cp-guard) .note{font-size:.82rem;color:var(--text);background:var(--bg-2);border-radius:12px;padding:10px 12px} .df24cp:not(#df24cp-guard) .note b{color:var(--head)} .df24cp:not(#df24cp-guard) .copy-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);border:1px dashed var(--line-2);border-radius:12px;padding:8px 12px;font-size:.84rem;color:var(--head);min-width:0} .df24cp:not(#df24cp-guard) .copy-row span{overflow-wrap:anywhere;min-width:0} .df24cp:not(#df24cp-guard) .copy-row button{border:0;background:transparent;color:var(--primary-ink);cursor:pointer;font-size:.8rem;font-weight:700;flex:none} .df24cp:not(#df24cp-guard) .field{display:flex;flex-direction:column;gap:6px;min-width:0} .df24cp:not(#df24cp-guard) .field label,.df24cp:not(#df24cp-guard) .lbl{font-size:.82rem;font-weight:600;color:var(--head)} .df24cp:not(#df24cp-guard) .field .hint{font-size:.76rem;color:var(--muted)} .df24cp:not(#df24cp-guard) .inp{width:100%;border:1px solid var(--line-2);border-radius:12px;padding:11px 14px;background:var(--white);color:var(--head);transition:border-color .15s,box-shadow .15s} .df24cp:not(#df24cp-guard) .inp::placeholder{color:var(--muted)} .df24cp:not(#df24cp-guard) .inp:hover{border-color:#AEB6C4} .df24cp:not(#df24cp-guard) .inp:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 4px var(--tint)} .df24cp:not(#df24cp-guard) textarea.inp{min-height:96px;resize:vertical} .df24cp:not(#df24cp-guard) .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .df24cp:not(#df24cp-guard) .full{grid-column:1/-1} .df24cp:not(#df24cp-guard) .chips{display:flex;flex-wrap:wrap;gap:8px} .df24cp:not(#df24cp-guard) .chip{position:relative} .df24cp:not(#df24cp-guard) .chip input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0} .df24cp:not(#df24cp-guard) .chip span{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--pill);border:1.5px solid var(--line-2);font-size:.82rem;font-weight:500;background:var(--white);color:var(--head);transition:.15s} .df24cp:not(#df24cp-guard) .chip:hover span{border-color:var(--primary)} .df24cp:not(#df24cp-guard) .chip input:checked+span{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600} .df24cp:not(#df24cp-guard) .chip input:focus-visible+span{outline:3px solid var(--primary);outline-offset:2px} .df24cp:not(#df24cp-guard) .steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .df24cp:not(#df24cp-guard) .step{display:flex;flex-direction:column;gap:8px;font-size:.76rem;color:var(--muted)} .df24cp:not(#df24cp-guard) .step i{height:5px;border-radius:var(--pill);background:var(--line)} .df24cp:not(#df24cp-guard) .step.on{color:var(--head)} .df24cp:not(#df24cp-guard) .step.on i{background:var(--primary)} .df24cp:not(#df24cp-guard) .step b{font-weight:600} .df24cp:not(#df24cp-guard) .brief-foot{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:18px;margin-top:6px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .drop{border:2px dashed var(--line-2);border-radius:14px;padding:28px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--white);transition:.15s;color:var(--text)} .df24cp:not(#df24cp-guard) .drop:hover{border-color:var(--primary);background:var(--tint)} .df24cp:not(#df24cp-guard) .drop .ico{width:28px;height:28px;color:var(--primary-ink)} .df24cp:not(#df24cp-guard) .drop b{color:var(--head);font-weight:600} .df24cp:not(#df24cp-guard) .post{display:flex;flex-direction:column;gap:14px} .df24cp:not(#df24cp-guard) .post-h{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .post-h div b{font-weight:600;font-size:.9rem;display:block;line-height:1.2;color:var(--head)} .df24cp:not(#df24cp-guard) .post-h div span{font-size:.78rem;color:var(--muted)} .df24cp:not(#df24cp-guard) .post-h .badge{margin-left:auto} .df24cp:not(#df24cp-guard) .shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;max-width:100%;background:#F1F3F7;position:relative} .df24cp:not(#df24cp-guard) .shot .nav-m{height:12%;background:#fff;display:flex;align-items:center;gap:6%;padding:0 5%;border-bottom:1px solid #E3E6EC} .df24cp:not(#df24cp-guard) .shot .nav-m i{display:block;height:20%;width:9%;border-radius:4px;background:#D2D7E0} .df24cp:not(#df24cp-guard) .shot .nav-m i:first-child{background:#25409E;width:14%} .df24cp:not(#df24cp-guard) .shot .hero-m{position:absolute;left:6%;top:24%;width:46%} .df24cp:not(#df24cp-guard) .shot .hero-m i{display:block;height:14px;border-radius:6px;background:#2C3338;margin-bottom:10px} .df24cp:not(#df24cp-guard) .shot .hero-m i:nth-child(2){width:75%;background:#25409E} .df24cp:not(#df24cp-guard) .shot .hero-m i:nth-child(3){height:8px;width:85%;background:#AEB6C4} .df24cp:not(#df24cp-guard) .shot .hero-m i:nth-child(4){height:28px;width:34%;border-radius:41px;background:#0071E3;margin-top:18px} .df24cp:not(#df24cp-guard) .shot .art-m{position:absolute;right:6%;top:20%;width:36%;bottom:14%;border-radius:12px;background:#25409E;box-shadow:0 16px 40px rgba(37,64,158,.25)} .df24cp:not(#df24cp-guard) .linkcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;text-decoration:none;color:var(--head);transition:.15s} .df24cp:not(#df24cp-guard) .linkcard:hover{border-color:var(--primary);background:var(--tint)} .df24cp:not(#df24cp-guard) .linkcard b{font-weight:600;font-size:.86rem} .df24cp:not(#df24cp-guard) .linkcard p{color:var(--text)} .df24cp:not(#df24cp-guard) .video{border-radius:14px;aspect-ratio:16/9;max-width:100%;background:var(--deep);display:grid;place-items:center;position:relative;overflow:hidden} .df24cp:not(#df24cp-guard) .video button{width:66px;height:66px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--primary);transition:transform .2s} .df24cp:not(#df24cp-guard) .video button:hover{transform:scale(1.08)} .df24cp:not(#df24cp-guard) .video span{position:absolute;left:14px;bottom:12px;color:#fff;font-size:.8rem;font-weight:600;background:#1B2F78;padding:2px 10px;border-radius:var(--pill)} .df24cp:not(#df24cp-guard) .comments{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:12px} .df24cp:not(#df24cp-guard) .cmt{display:flex;gap:10px} .df24cp:not(#df24cp-guard) .cmt div{background:var(--bg-2);border-radius:14px;padding:10px 14px;font-size:.84rem;min-width:0;color:var(--text)} .df24cp:not(#df24cp-guard) .cmt b{font-weight:600;font-size:.8rem;color:var(--head)} .df24cp:not(#df24cp-guard) .cmt-in{display:flex;gap:8px} .df24cp:not(#df24cp-guard) .cmt-in input{flex:1;min-width:0} .df24cp:not(#df24cp-guard) .inbox{display:grid;grid-template-columns:320px minmax(0,1fr);padding:0;overflow:hidden;min-height:600px} .df24cp:not(#df24cp-guard) .threads{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0} .df24cp:not(#df24cp-guard) .threads-h{padding:16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .df24cp:not(#df24cp-guard) .th{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;background:transparent;border-left:3px solid transparent;border-top:0;border-right:0;width:100%;transition:background .15s} .df24cp:not(#df24cp-guard) .th:hover{background:var(--bg)} .df24cp:not(#df24cp-guard) .th[aria-selected="true"]{background:var(--tint);border-left-color:var(--primary)} .df24cp:not(#df24cp-guard) .th-b{min-width:0;flex:1} .df24cp:not(#df24cp-guard) .th-b b{font-weight:600;font-size:.86rem;display:flex;justify-content:space-between;gap:8px;color:var(--head)} .df24cp:not(#df24cp-guard) .th-b b time{font-weight:500;font-size:.72rem;color:var(--muted)} .df24cp:not(#df24cp-guard) .th-b p{font-size:.8rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .df24cp:not(#df24cp-guard) .th-b small{font-size:.72rem;color:var(--primary-ink);font-weight:600} .df24cp:not(#df24cp-guard) .unread{width:9px;height:9px;border-radius:50%;background:var(--primary);margin-top:6px;flex:none} .df24cp:not(#df24cp-guard) .convo{display:flex;flex-direction:column;min-width:0} .df24cp:not(#df24cp-guard) .convo-h{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .msgs{flex:1;padding:22px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;background:var(--bg)} .df24cp:not(#df24cp-guard) .msg{display:flex;gap:10px;max-width:78%} .df24cp:not(#df24cp-guard) .msg.me{align-self:flex-end;flex-direction:row-reverse} .df24cp:not(#df24cp-guard) .bubble{background:var(--white);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:11px 14px;font-size:.88rem;min-width:0;color:var(--head)} .df24cp:not(#df24cp-guard) .msg.me .bubble{background:var(--primary);color:#fff;border-color:var(--primary);border-radius:16px 16px 4px 16px} .df24cp:not(#df24cp-guard) .msg time{display:block;font-size:.72rem;color:var(--muted);margin-top:4px} .df24cp:not(#df24cp-guard) .msg.me time{text-align:right} .df24cp:not(#df24cp-guard) .att{display:inline-flex;gap:8px;align-items:center;margin-top:8px;padding:6px 12px;border-radius:var(--pill);background:#fff;color:var(--deep);font-size:.8rem;font-weight:600} .df24cp:not(#df24cp-guard) .composer{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line);align-items:flex-end} .df24cp:not(#df24cp-guard) .composer textarea{flex:1;min-height:46px;max-height:140px} .df24cp:not(#df24cp-guard) .folders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .df24cp:not(#df24cp-guard) .folder{display:flex;flex-direction:column;gap:12px;cursor:pointer;text-align:left} .df24cp:not(#df24cp-guard) .folder[aria-pressed="true"]{border-color:var(--primary);box-shadow:0 0 0 3px var(--tint)} .df24cp:not(#df24cp-guard) .f-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center} .df24cp:not(#df24cp-guard) .fi-1{background:#E9F2FD;color:#0062C4} .df24cp:not(#df24cp-guard) .fi-2{background:#E8ECF8;color:#25409E} .df24cp:not(#df24cp-guard) .fi-3{background:#E4F5EC;color:#0E6B44} .df24cp:not(#df24cp-guard) .fi-4{background:#FFF1DC;color:#8A4B00} .df24cp:not(#df24cp-guard) .ftype{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:.66rem;font-weight:800;flex:none} .df24cp:not(#df24cp-guard) .ft-pdf{background:#FDE8EB;color:#B0182F} .df24cp:not(#df24cp-guard) .ft-fig{background:#E8ECF8;color:#25409E} .df24cp:not(#df24cp-guard) .ft-zip{background:#EEF0F3;color:#2C3338} .df24cp:not(#df24cp-guard) .ft-img{background:#E4F5EC;color:#0E6B44} .df24cp:not(#df24cp-guard) .ft-doc{background:#E9F2FD;color:#0062C4} .df24cp:not(#df24cp-guard) .fname{display:flex;gap:12px;align-items:center} .df24cp:not(#df24cp-guard) .acct{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start} .df24cp:not(#df24cp-guard) .subnav{display:flex;flex-direction:column;gap:4px;position:sticky;top:76px} .df24cp:not(#df24cp-guard) .subnav a{padding:10px 16px;border-radius:var(--pill);text-decoration:none;color:var(--head);font-size:.86rem;font-weight:500;white-space:nowrap} .df24cp:not(#df24cp-guard) .subnav a:hover{background:var(--white)} .df24cp:not(#df24cp-guard) .subnav a.on{background:var(--white);color:var(--primary);font-weight:700;box-shadow:var(--shadow)} .df24cp:not(#df24cp-guard) .tgl-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line)} .df24cp:not(#df24cp-guard) .tgl-row:first-child{border-top:0;padding-top:0} .df24cp:not(#df24cp-guard) .tgl-row b{font-weight:600;font-size:.88rem;display:block;color:var(--head)} .df24cp:not(#df24cp-guard) .tgl-row p{font-size:.8rem;color:var(--text)} .df24cp:not(#df24cp-guard) .switch{position:relative;width:46px;height:26px;flex:none} .df24cp:not(#df24cp-guard) .switch input{opacity:0;position:absolute;inset:0;margin:0;cursor:pointer;z-index:1} .df24cp:not(#df24cp-guard) .switch span{position:absolute;inset:0;border-radius:var(--pill);background:#8A9099;transition:.2s} .df24cp:not(#df24cp-guard) .switch span::after{content:"";position:absolute;width:20px;height:20px;top:3px;left:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s} .df24cp:not(#df24cp-guard) .switch input:checked+span{background:var(--primary)} .df24cp:not(#df24cp-guard) .switch input:checked+span::after{left:23px} .df24cp:not(#df24cp-guard) .switch input:focus-visible+span{outline:3px solid var(--primary);outline-offset:2px} .df24cp:not(#df24cp-guard) .login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh} .df24cp:not(#df24cp-guard) .login-art{background:var(--deep);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:center;gap:32px} .df24cp:not(#df24cp-guard) .login-art h2{font-size:2.3rem;color:#fff;max-width:15ch;line-height:1.2} .df24cp:not(#df24cp-guard) .login-art ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px} .df24cp:not(#df24cp-guard) .login-art li{display:flex;gap:12px;align-items:center;color:#fff;font-weight:500} .df24cp:not(#df24cp-guard) .login-art li .ico{color:#fff;background:#1B2F78;border-radius:50%;padding:7px;width:32px;height:32px} .df24cp:not(#df24cp-guard) .mini-card{background:#fff;border-radius:16px;padding:18px;max-width:380px;color:var(--head)} .df24cp:not(#df24cp-guard) .mini-card .big{font-family:var(--f-head);font-size:1.4rem;font-weight:700;margin:6px 0 10px} .df24cp:not(#df24cp-guard) .login-form{display:grid;place-items:center;padding-block:40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:var(--white)} .df24cp:not(#df24cp-guard) .login-box{width:100%;max-width:420px;display:flex;flex-direction:column;gap:18px} .df24cp:not(#df24cp-guard) .seg{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-2);border-radius:var(--pill);padding:4px} .df24cp:not(#df24cp-guard) .seg button{border:0;background:transparent;padding:9px;border-radius:var(--pill);font-size:.84rem;font-weight:500;cursor:pointer;color:var(--head)} .df24cp:not(#df24cp-guard) .seg button[aria-pressed="true"]{background:var(--white);color:var(--primary);font-weight:700;box-shadow:var(--shadow)} .df24cp:not(#df24cp-guard) .row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .check{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--text)} .df24cp:not(#df24cp-guard) .check input{width:17px;height:17px;accent-color:var(--primary)} .df24cp:not(#df24cp-guard) .sent{display:flex;gap:12px;align-items:flex-start;background:var(--ok-bg);color:var(--ok);border-radius:14px;padding:14px;font-size:.86rem} .df24cp:not(#df24cp-guard) .sec-note{display:flex;gap:8px;align-items:center;font-size:.78rem;color:var(--muted);justify-content:center;text-align:center} .df24cp:not(#df24cp-guard) .toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--head);color:#fff;padding:12px 20px;border-radius:var(--pill);font-size:.86rem;font-weight:500;box-shadow:0 12px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:.25s;z-index:80;display:flex;gap:10px;align-items:center;max-width:calc(100vw - 32px)} .df24cp:not(#df24cp-guard) .toast.show{opacity:1;transform:translate(-50%,0)} .df24cp:not(#df24cp-guard) .modal-bg{position:fixed;inset:0;background:rgba(44,51,56,.55);display:grid;place-items:center;z-index:70;padding:16px} .df24cp:not(#df24cp-guard) .modal{background:var(--white);border-radius:20px;max-width:460px;width:100%;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:16px} .df24cp:not(#df24cp-guard) .sum{display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:var(--text)} .df24cp:not(#df24cp-guard) .sum div{display:flex;justify-content:space-between;gap:10px} .df24cp:not(#df24cp-guard) .sum b{color:var(--head)} .df24cp:not(#df24cp-guard) .sum .tot{border-top:1px solid var(--line);padding-top:10px;font-weight:700;font-size:1rem;color:var(--head)} .df24cp:not(#df24cp-guard) .mnav{display:none} @media (max-width:1180px){ .df24cp:not(#df24cp-guard) .folders{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:980px){ .df24cp:not(#df24cp-guard) .app{grid-template-columns:minmax(0,1fr)} .df24cp:not(#df24cp-guard) .side{display:none} .df24cp:not(#df24cp-guard) .top-logo{display:flex} .df24cp:not(#df24cp-guard) .g-main,.df24cp:not(#df24cp-guard) .g2{grid-template-columns:minmax(0,1fr)} .df24cp:not(#df24cp-guard) .inbox{grid-template-columns:minmax(0,1fr)} .df24cp:not(#df24cp-guard) .threads{border-right:0;border-bottom:1px solid var(--line)} .df24cp:not(#df24cp-guard) .acct{grid-template-columns:minmax(0,1fr)} .df24cp:not(#df24cp-guard) .subnav{position:static;flex-direction:row;overflow-x:auto} .df24cp:not(#df24cp-guard) .login{grid-template-columns:minmax(0,1fr)} .df24cp:not(#df24cp-guard) .login-art{padding:32px 24px;order:2} .df24cp:not(#df24cp-guard) .login-art h2{font-size:1.7rem} .df24cp:not(#df24cp-guard) .mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--white);border-top:1px solid var(--line);justify-content:space-around;padding:8px max(8px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 -6px 20px rgba(44,51,56,.06)} .df24cp:not(#df24cp-guard) .mnav a{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--text);font-size:.66rem;font-weight:600;padding:5px 10px;border-radius:var(--pill)} .df24cp:not(#df24cp-guard) .mnav a[aria-current="page"]{color:#fff;background:var(--primary)} .df24cp:not(#df24cp-guard) .view{padding-bottom:32px} } @media (max-width:640px){ .df24cp:not(#df24cp-guard) .topbar{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))} .df24cp:not(#df24cp-guard) .view{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:20px} .df24cp:not(#df24cp-guard) .topbar .search,.df24cp:not(#df24cp-guard) .topbar .who div{display:none} .df24cp:not(#df24cp-guard) .g4,.df24cp:not(#df24cp-guard) .g3{grid-template-columns:minmax(0,1fr);gap:12px} .df24cp:not(#df24cp-guard) .card{padding:18px} .df24cp:not(#df24cp-guard) .tbl-wrap{margin:0 -18px;padding:0 18px} .df24cp:not(#df24cp-guard) .form-grid{grid-template-columns:minmax(0,1fr)} .df24cp:not(#df24cp-guard) .ph{grid-template-columns:minmax(0,1fr);justify-items:start} .df24cp:not(#df24cp-guard) .stages{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px} .df24cp:not(#df24cp-guard) .stage:nth-child(4)::before{display:none} .df24cp:not(#df24cp-guard) .steps .step b{display:none} .df24cp:not(#df24cp-guard) .welcome{padding:22px} .df24cp:not(#df24cp-guard) .welcome h1{font-size:1.5rem} .df24cp:not(#df24cp-guard) .msg{max-width:92%} .df24cp:not(#df24cp-guard) .stat .v{font-size:1.3rem} .df24cp:not(#df24cp-guard) .logo.lg{width:220px} } .df24cp:not(#df24cp-guard) .btn{min-height:44px} .df24cp:not(#df24cp-guard) .btn-sm{min-height:44px;padding:8px 16px} .df24cp:not(#df24cp-guard) .icon-btn{width:44px;height:44px} .df24cp:not(#df24cp-guard) .filters{padding:3px} .df24cp:not(#df24cp-guard) .filters button{min-height:44px} .df24cp:not(#df24cp-guard) .seg button{min-height:44px} .df24cp:not(#df24cp-guard) .ptab{min-height:44px} .df24cp:not(#df24cp-guard) .chip span{min-height:44px} .df24cp:not(#df24cp-guard) .nav a{min-height:44px} .df24cp:not(#df24cp-guard) .subnav a{min-height:44px;display:flex;align-items:center} .df24cp:not(#df24cp-guard) .copy-row button{min-height:44px;padding:0 8px} .df24cp:not(#df24cp-guard) .card-h a{display:inline-flex;align-items:center;min-height:44px} .df24cp:not(#df24cp-guard) .check{min-height:44px} .df24cp:not(#df24cp-guard) #forgot{display:inline-flex;align-items:center;min-height:44px} .df24cp:not(#df24cp-guard) .switch input{inset:-9px -4px} .df24cp:not(#df24cp-guard) .who{text-decoration:none;border-radius:var(--pill);padding-right:6px} .df24cp:not(#df24cp-guard) .who:hover b{color:var(--primary)} .df24cp:not(#df24cp-guard) .topbar{position:sticky;top:var(--pvh,0px);z-index:30} .df24cp:not(#df24cp-guard) .side{top:var(--pvh,0px);height:calc(100vh - var(--pvh,0px))} .df24cp:not(#df24cp-guard) .menu-btn{display:none} .df24cp:not(#df24cp-guard) .drawer-bg{position:fixed;inset:0;background:rgba(44,51,56,.5);z-index:59;opacity:0;pointer-events:none;transition:opacity .25s} .df24cp:not(#df24cp-guard) .drawer-bg.open{opacity:1;pointer-events:auto} .df24cp:not(#df24cp-guard) .drawer{position:fixed;top:0;bottom:0;left:0;width:min(320px,86vw);background:var(--white);z-index:60;transform:translateX(-102%);visibility:hidden;transition:transform .25s ease,visibility .25s;display:flex;flex-direction:column;gap:14px;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))} .df24cp:not(#df24cp-guard) .drawer.open{transform:none;visibility:visible} .df24cp:not(#df24cp-guard) .drawer-h{display:flex;justify-content:space-between;align-items:center;gap:10px} .df24cp:not(#df24cp-guard) .drawer .who div b{font-weight:600;font-size:.9rem;display:block;color:var(--head)} .df24cp:not(#df24cp-guard) .drawer .who div span{font-size:.78rem;color:var(--muted)} .df24cp:not(#df24cp-guard) .mnav button{border:0;background:transparent;font:inherit;cursor:pointer} @media (max-width:980px){ .df24cp:not(#df24cp-guard) .g4 .stat .l{font-size:.8rem} } @media (max-width:1200px){ .df24cp:not(#df24cp-guard) .acct{grid-template-columns:minmax(0,1fr)} .df24cp:not(#df24cp-guard) .subnav{position:static;flex-direction:row;overflow-x:auto} .df24cp:not(#df24cp-guard) .g-main{grid-template-columns:minmax(0,1fr)} } @media (max-width:980px){ .df24cp:not(#df24cp-guard) .menu-btn{display:grid} .df24cp:not(#df24cp-guard) .topbar{gap:10px} .df24cp:not(#df24cp-guard) .topbar .search{display:none} .df24cp:not(#df24cp-guard) .mnav a,.df24cp:not(#df24cp-guard) .mnav button{min-height:48px;min-width:56px;justify-content:center;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text);font-size:.68rem;font-weight:600;padding:5px 8px;border-radius:14px} .df24cp:not(#df24cp-guard) .mnav a[aria-current="page"]{color:#fff;background:var(--primary)} .df24cp:not(#df24cp-guard) .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))} } @media (max-width:1200px){ .df24cp:not(#df24cp-guard) .tbl-wrap{overflow:visible;margin:0;padding:0} .df24cp:not(#df24cp-guard) table.stack{min-width:0} .df24cp:not(#df24cp-guard) table.stack thead{display:none} .df24cp:not(#df24cp-guard) table.stack,.df24cp:not(#df24cp-guard) table.stack tbody,.df24cp:not(#df24cp-guard) table.stack tr,.df24cp:not(#df24cp-guard) table.stack td{display:block;width:100%} .df24cp:not(#df24cp-guard) table.stack tr{border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin-bottom:12px;background:var(--white)} .df24cp:not(#df24cp-guard) table.stack tr:last-child{margin-bottom:0} .df24cp:not(#df24cp-guard) table.stack tbody tr:hover{background:var(--white)} .df24cp:not(#df24cp-guard) table.stack td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);text-align:right;min-width:0} .df24cp:not(#df24cp-guard) table.stack td>*{min-width:0} .df24cp:not(#df24cp-guard) table.stack td::before{content:attr(data-label);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;flex:none} .df24cp:not(#df24cp-guard) table.stack td:first-child{font-size:1rem;padding-top:12px} .df24cp:not(#df24cp-guard) table.stack td:first-child::before{display:none} .df24cp:not(#df24cp-guard) table.stack td:last-child{border-bottom:0} .df24cp:not(#df24cp-guard) table.stack td.acts-cell::before{display:none} .df24cp:not(#df24cp-guard) table.stack td.acts-cell>div,.df24cp:not(#df24cp-guard) table.stack td.acts-cell>.btn{width:100%;display:flex!important;gap:8px} .df24cp:not(#df24cp-guard) table.stack td.acts-cell .btn{flex:1} } @media (max-width:640px){ .df24cp:not(#df24cp-guard) .welcome .acts{width:100%} .df24cp:not(#df24cp-guard) .welcome .acts .btn{flex:1 1 200px} .df24cp:not(#df24cp-guard) .head .btn{flex:1 1 auto} .df24cp:not(#df24cp-guard) .topbar{padding-block:10px} .df24cp:not(#df24cp-guard) .inp{font-size:16px} .df24cp:not(#df24cp-guard) .who{padding-right:0} } .df24cp:not(#df24cp-guard) .linkbtn{white-space:nowrap;border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--primary);cursor:pointer;min-height:44px;text-align:left} .df24cp:not(#df24cp-guard) .linkbtn:hover{text-decoration:underline} .df24cp:not(#df24cp-guard) .inv-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;max-width:880px;width:100%;margin:0 auto} .df24cp:not(#df24cp-guard) .inv-bar-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .paper{background:#FFFFFF;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-h);max-width:880px;width:100%;margin:0 auto;padding:56px 64px 40px;font-family:Helvetica,Arial,sans-serif;color:#2C3338;font-size:14px;line-height:1.5} .df24cp:not(#df24cp-guard) .paper h3{font-family:Helvetica,Arial,sans-serif} .df24cp:not(#df24cp-guard) .paper .logo{width:230px} .df24cp:not(#df24cp-guard) .p-rule{border-top:1.5px solid var(--inv);margin:20px 0 30px} .df24cp:not(#df24cp-guard) .pi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .p-title{font-size:2.7rem;font-weight:700;color:var(--inv);letter-spacing:.02em;line-height:1} .df24cp:not(#df24cp-guard) .p-stamp{display:inline-block;margin-top:12px;border:2px solid #0E7A4E;color:#0E7A4E;font-weight:700;font-size:.78rem;letter-spacing:.14em;padding:3px 10px;border-radius:4px} .df24cp:not(#df24cp-guard) .p-meta{text-align:right;color:#54595F;line-height:1.75} .df24cp:not(#df24cp-guard) .p-meta b{font-weight:400;color:#2C3338} .df24cp:not(#df24cp-guard) .p-parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:34px 0 30px} .df24cp:not(#df24cp-guard) .p-lbl{font-size:.68rem;font-weight:700;color:var(--inv);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px} .df24cp:not(#df24cp-guard) .p-party{color:#54595F;line-height:1.65;overflow-wrap:anywhere} .df24cp:not(#df24cp-guard) .p-party strong{color:#2C3338;font-size:1.04rem} .df24cp:not(#df24cp-guard) table.p-items{width:100%;border-collapse:collapse;min-width:0} .df24cp:not(#df24cp-guard) .p-items th{background:var(--inv);color:#FFFFFF;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:13px 12px;text-align:left;font-weight:700;border:0} .df24cp:not(#df24cp-guard) .p-items td{background:var(--inv-tint);border:1px solid var(--inv-line);padding:13px 12px;vertical-align:top;color:#2C3338} .df24cp:not(#df24cp-guard) .p-items tbody tr:hover{background:none} .df24cp:not(#df24cp-guard) .p-items .r{text-align:right;white-space:nowrap} .df24cp:not(#df24cp-guard) .p-items .c{text-align:center} .df24cp:not(#df24cp-guard) .p-sub{font-size:.8rem;color:#54595F;margin-top:2px} .df24cp:not(#df24cp-guard) .p-qu{display:none;font-size:.8rem;color:#54595F;margin-top:4px} .df24cp:not(#df24cp-guard) .p-totals{margin:22px 0 0 auto;width:min(100%,370px)} .df24cp:not(#df24cp-guard) .p-tr{display:flex;justify-content:space-between;gap:12px;padding:6px 12px;align-items:flex-start} .df24cp:not(#df24cp-guard) .p-tr .k{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#54595F} .df24cp:not(#df24cp-guard) .p-tr .k small{display:block;text-transform:none;letter-spacing:0;font-size:.78rem;color:#6B6B6B} .df24cp:not(#df24cp-guard) .p-line{border-top:1.5px solid var(--inv);margin:6px 0 4px} .df24cp:not(#df24cp-guard) .p-due{align-items:center} .df24cp:not(#df24cp-guard) .p-due .k{color:var(--inv);font-weight:700;font-size:.86rem} .df24cp:not(#df24cp-guard) .p-due .v{color:var(--inv);font-weight:700;font-size:1.95rem;line-height:1.1} .df24cp:not(#df24cp-guard) .p-note{text-align:right;color:#6B6B6B;font-size:.8rem;margin-top:4px} .df24cp:not(#df24cp-guard) .p-div{border-top:1px solid #D2D7E0;margin:32px 0 18px} .df24cp:not(#df24cp-guard) .p-pay h3{color:var(--inv);font-size:1.06rem;margin-bottom:6px} .df24cp:not(#df24cp-guard) .p-pay p{color:#54595F;margin-bottom:4px} .df24cp:not(#df24cp-guard) .p-pay a{color:var(--inv);font-weight:700} .df24cp:not(#df24cp-guard) .p-pay .p-paylink{color:var(--inv);font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-10px 0;vertical-align:middle} .df24cp:not(#df24cp-guard) table.fit{min-width:0} .df24cp:not(#df24cp-guard) .pay-desc{display:flex;flex-direction:column;gap:2px;min-width:0} .df24cp:not(#df24cp-guard) .pay-desc b{white-space:nowrap} @media (max-width:1200px){.df24cp:not(#df24cp-guard) table.stack .pay-desc{align-items:flex-end;text-align:right}} .df24cp:not(#df24cp-guard) .p-thanks{margin-top:28px;color:#2C3338;font-size:1.02rem} .df24cp:not(#df24cp-guard) .p-foot{margin-top:44px;text-align:center;color:#6B6B6B;font-size:.74rem} .df24cp:not(#df24cp-guard) .pfoot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding-block:20px 28px;padding-inline:32px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;margin-top:auto} @media (max-width:980px){ .df24cp:not(#df24cp-guard) .main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))} } @media (max-width:640px){ .df24cp:not(#df24cp-guard) .paper{padding:26px 18px 24px;border-radius:12px} .df24cp:not(#df24cp-guard) .paper .logo{width:190px} .df24cp:not(#df24cp-guard) .p-title{font-size:2.1rem} .df24cp:not(#df24cp-guard) .pi-top{flex-direction:column} .df24cp:not(#df24cp-guard) .p-meta{text-align:left} .df24cp:not(#df24cp-guard) .p-parties{grid-template-columns:minmax(0,1fr);gap:18px} .df24cp:not(#df24cp-guard) .p-items .q,.df24cp:not(#df24cp-guard) .p-items .u{display:none} .df24cp:not(#df24cp-guard) .p-qu{display:block} .df24cp:not(#df24cp-guard) .inv-bar-acts{width:100%} .df24cp:not(#df24cp-guard) .inv-bar-acts .btn{flex:1 1 auto} .df24cp:not(#df24cp-guard) .inv-bar-acts .badge{flex-basis:100%;justify-content:center} .df24cp:not(#df24cp-guard) .pfoot{flex-direction:column;align-items:center;gap:2px;padding-inline:16px} } .df24cp:not(#df24cp-guard) .inv-layout{grid-template-columns:minmax(0,1fr)} .df24cp:not(#df24cp-guard) .ways-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .df24cp:not(#df24cp-guard) table:not(.p-items) th{white-space:nowrap} .df24cp:not(#df24cp-guard) td.num,.df24cp:not(#df24cp-guard) td.ta-r{white-space:nowrap} .df24cp:not(#df24cp-guard) #invBody td:nth-child(3){min-width:120px} .df24cp:not(#df24cp-guard) .copy-row span{overflow-wrap:normal;word-break:normal} @media (max-width:640px){ .df24cp:not(#df24cp-guard) .ways-grid{grid-template-columns:minmax(0,1fr)} } @media (prefers-reduced-motion:reduce){ .df24cp:not(#df24cp-guard),.df24cp:not(#df24cp-guard) *,.df24cp:not(#df24cp-guard) *::before,.df24cp:not(#df24cp-guard) *::after{transition:none!important;animation:none!important} } /* Plugin additions: full screen template, states and helpers */ body.admin-bar .df24cp:not(#df24cp-guard){--pvh:32px} @media (max-width:782px){body.admin-bar .df24cp:not(#df24cp-guard){--pvh:0px}} body.df24cp-template:not(#df24cp-guard){margin:0;padding:0;background:var(--df-bg,#F8F9FA)} .df24cp:not(#df24cp-guard) .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .df24cp:not(#df24cp-guard) .skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--head);color:#fff;padding:12px 18px;border-radius:var(--pill);font-weight:600;text-decoration:none} .df24cp:not(#df24cp-guard) .skip-link:focus{top:12px} .df24cp:not(#df24cp-guard) .empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 20px;color:var(--text)} .df24cp:not(#df24cp-guard) .empty .empty-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--tint);color:var(--primary-ink)} .df24cp:not(#df24cp-guard) .empty .empty-ico .ico{width:26px;height:26px} .df24cp:not(#df24cp-guard) .empty h3{font-size:1.1rem} .df24cp:not(#df24cp-guard) .empty p{max-width:46ch} .df24cp:not(#df24cp-guard) .skel{position:relative;overflow:hidden;background:var(--bg-2);border-radius:10px;min-height:14px} .df24cp:not(#df24cp-guard) .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:df24cp-shimmer 1.3s infinite} @keyframes df24cp-shimmer{to{transform:translateX(100%)}} .df24cp:not(#df24cp-guard) .alert{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:14px 16px;font-size:.88rem} .df24cp:not(#df24cp-guard) .alert-ok{background:var(--ok-bg);color:var(--ok)} .df24cp:not(#df24cp-guard) .alert-bad{background:var(--bad-bg);color:var(--bad)} .df24cp:not(#df24cp-guard) .alert-info{background:var(--rev-bg);color:var(--deep)} .df24cp:not(#df24cp-guard) .alert b{font-weight:700} .df24cp:not(#df24cp-guard) .field .err{color:var(--bad);font-size:.8rem;font-weight:600} .df24cp:not(#df24cp-guard) .inp[aria-invalid="true"]{border-color:var(--bad)} .df24cp:not(#df24cp-guard) .btn[aria-busy="true"]{opacity:.75;pointer-events:none} .df24cp:not(#df24cp-guard) .btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:df24cp-spin .7s linear infinite} @keyframes df24cp-spin{to{transform:rotate(360deg)}} .df24cp:not(#df24cp-guard) .toast.is-bad .ico{color:#FF9AA8} .df24cp:not(#df24cp-guard) .side-logo{display:block;margin:4px 8px 0} .df24cp:not(#df24cp-guard) .standalone{max-width:1280px;margin:0 auto} @media (max-width:640px){.df24cp:not(#df24cp-guard) .login-box>.logo.lg{background-image:var(--df-logo-sm);aspect-ratio:600/90;width:190px}} .df24cp:not(#df24cp-guard) a.ptab,.df24cp:not(#df24cp-guard) a.th,.df24cp:not(#df24cp-guard) a.folder{text-decoration:none;color:inherit} .df24cp:not(#df24cp-guard) a.ptab{display:inline-flex;align-items:center;color:var(--head)} .df24cp:not(#df24cp-guard) a.ptab[aria-current="page"]{border-color:var(--deep);background:var(--deep);color:#fff;font-weight:600} .df24cp:not(#df24cp-guard) a.folder[aria-current="page"]{border-color:var(--primary);box-shadow:0 0 0 3px var(--tint)} .df24cp:not(#df24cp-guard) a.th[aria-current="true"]{background:var(--tint);border-left-color:var(--primary)} .df24cp:not(#df24cp-guard) .post-body{color:var(--text)} .df24cp:not(#df24cp-guard) .post-body p{margin:0 0 10px} .df24cp:not(#df24cp-guard) .post-body a{color:var(--primary)} .df24cp:not(#df24cp-guard) .post-img{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line)} .df24cp:not(#df24cp-guard) .post-img img{display:block;width:100%;max-width:100%;height:auto} .df24cp:not(#df24cp-guard) .video-embed{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:14px;overflow:hidden;background:var(--deep)} .df24cp:not(#df24cp-guard) .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .df24cp:not(#df24cp-guard) .form-err{margin:8px 0 0} .df24cp:not(#df24cp-guard) fieldset{border:0;padding:0;min-width:0} .df24cp:not(#df24cp-guard) fieldset.card{padding:22px} .df24cp:not(#df24cp-guard) .tl{padding-left:28px} .df24cp:not(#df24cp-guard) label.icon-btn{cursor:pointer} .df24cp:not(#df24cp-guard) .msgs form,.df24cp:not(#df24cp-guard) form.msgs{display:flex;flex-direction:column} @media (max-width:640px){.df24cp:not(#df24cp-guard) fieldset.card{padding:18px}} @media (max-width:640px){.df24cp:not(#df24cp-guard) .composer{flex-wrap:wrap;padding:12px}.df24cp:not(#df24cp-guard) .composer>div{flex:1 1 100%;order:-1}.df24cp:not(#df24cp-guard) .composer .btn{flex:1}} .df24cp:not(#df24cp-guard) .filters a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--pill);font-size:.8rem;font-weight:500;color:var(--head);text-decoration:none} .df24cp:not(#df24cp-guard) .filters a[aria-current="page"]{background:var(--white);color:var(--primary-ink);font-weight:700;box-shadow:var(--shadow)} .df24cp:not(#df24cp-guard) .modal-bg[hidden]{display:none!important} .df24cp:not(#df24cp-guard) .modal:focus{outline:none} .df24cp:not(#df24cp-guard) .modal-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center} @media (max-width:480px){.df24cp:not(#df24cp-guard) .modal-actions{flex-direction:column-reverse;align-items:stretch}.df24cp:not(#df24cp-guard) .modal-actions .btn{width:100%;justify-content:center}.df24cp:not(#df24cp-guard) .modal{padding:22px}} .df24cp:not(#df24cp-guard) .inv-bar .badge{flex:none} @media (prefers-reduced-motion:reduce){.df24cp:not(#df24cp-guard) .skel::after,.df24cp:not(#df24cp-guard) .btn .spin{animation:none}} /* Configurable forms: brief, message, upload, account, sign in and payment. */ .df24cp:not(#df24cp-guard).df24cp-form-wrap{background:transparent} .df24cp:not(#df24cp-guard).df24cp-toast-host{background:transparent;position:static} .df24cp:not(#df24cp-guard) .form-card{max-width:860px} .df24cp:not(#df24cp-guard) .visitor-note .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .df24cp:not(#df24cp-guard) .brief-card{max-width:860px} .df24cp:not(#df24cp-guard) .brief-form{margin-top:26px;display:flex;flex-direction:column;gap:18px} .df24cp:not(#df24cp-guard) .brief-form fieldset{border:0;padding:0;margin:0;min-width:0} .df24cp:not(#df24cp-guard) .brief-form legend{padding:0;margin-bottom:16px;float:left;width:100%} .df24cp:not(#df24cp-guard) .brief-form legend+*{clear:both} .df24cp:not(#df24cp-guard) .brief-foot-r{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .df-form .req{color:var(--bad);font-weight:700} .df24cp:not(#df24cp-guard) .df-form .form-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} .df24cp:not(#df24cp-guard) .df-form .form-err{grid-column:1/-1;margin:0} .df24cp:not(#df24cp-guard) .form-preview{grid-column:1/-1;margin:0} .df24cp:not(#df24cp-guard) .drop{cursor:pointer;min-height:44px} .df24cp:not(#df24cp-guard) .drop.is-over{border-color:var(--primary);background:var(--tint)} .df24cp:not(#df24cp-guard) .drop .drop-names{color:var(--head);font-weight:600;word-break:break-word} .df24cp:not(#df24cp-guard) .drop .drop-names:empty{display:none} .df24cp:not(#df24cp-guard) .drop-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)} .df24cp:not(#df24cp-guard) .df-f-file{position:relative} .df24cp:not(#df24cp-guard) .df-f-file:focus-within .drop{border-color:var(--primary);box-shadow:0 0 0 4px var(--tint)} .df24cp:not(#df24cp-guard) .form-done{display:flex;gap:14px;align-items:flex-start;padding:6px 2px} .df24cp:not(#df24cp-guard) .form-done:focus{outline:none} .df24cp:not(#df24cp-guard) .form-done>.ico{width:40px;height:40px;flex:none;padding:9px;border-radius:50%;background:var(--ok-bg);color:var(--ok)} .df24cp:not(#df24cp-guard) .form-done p{color:var(--head);font-size:1rem;margin:6px 0 0} .df24cp:not(#df24cp-guard) .form-done .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} .df24cp:not(#df24cp-guard) .pay-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .df24cp:not(#df24cp-guard) .df-f-method{border:0;padding:0;margin:0;min-width:0} .df24cp:not(#df24cp-guard) .df-f-method legend{padding:0;margin-bottom:6px} .df24cp:not(#df24cp-guard) .pay-choice{position:relative;display:block;cursor:pointer} .df24cp:not(#df24cp-guard) .pay-choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .df24cp:not(#df24cp-guard) .pay-choice>span{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 16px;border:1.5px solid var(--line-2);border-radius:14px;background:var(--white);transition:border-color .15s,background .15s} .df24cp:not(#df24cp-guard) .pay-choice b{color:var(--head);font-weight:600} .df24cp:not(#df24cp-guard) .pay-choice input:checked+span{border-color:var(--primary);background:var(--tint)} .df24cp:not(#df24cp-guard) .pay-choice input:focus-visible+span{outline:3px solid var(--primary);outline-offset:2px} .df24cp:not(#df24cp-guard) .login-card{max-width:460px} .df24cp:not(#df24cp-guard) .login-compact{display:flex;flex-direction:column;gap:18px;max-width:none} .df24cp:not(#df24cp-guard) .login-compact .logo{display:none} @media (max-width:640px){.df24cp:not(#df24cp-guard) .pay-choices{grid-template-columns:minmax(0,1fr)}.df24cp:not(#df24cp-guard) .brief-foot{flex-wrap:nowrap;align-items:center}.df24cp:not(#df24cp-guard) .brief-foot-r{margin-left:auto;justify-content:flex-end;flex-wrap:nowrap}.df24cp:not(#df24cp-guard) .brief-foot-r [data-df-draft-state]{display:none}.df24cp:not(#df24cp-guard) .df-form .form-actions .btn{width:100%}} /* Theme proof buttons. Hello Elementor and Elementor kits style every