/* Vego · Shared · drawnut — drawnut on its own (drawnut.com, or ?app=drawnut; the html class "drawnut"): Vego CAD under its
   own name, like Oureso on oureso.com (oureso.css, whose rules these follow). This file only puts drawnut's logo where Vego
   draws its own: the sign-in and the header. The pictures: img/drawnut/drawnut-logo.webp (dark letters, for light screens)
   and drawnut-logo-white.webp (for dark ones). */
/* the sign-in form's header row: a light and a dark picture */
html.drawnut body #lock .vba-dn{display:block;height:32px;width:auto;max-width:56%;object-fit:contain}
html.drawnut body #lock .vba-dn.dn-dark{display:none}
@media (prefers-color-scheme:dark){html.drawnut:not([data-theme="light"]) body #lock .vba-dn.dn-light{display:none}html.drawnut:not([data-theme="light"]) body #lock .vba-dn.dn-dark{display:block}}
html.drawnut[data-theme="dark"] body #lock .vba-dn.dn-light{display:none}
html.drawnut[data-theme="dark"] body #lock .vba-dn.dn-dark{display:block}
/* Vego's big faint "V" on the brand panel is not drawnut's */
html.drawnut .lhero::after{display:none}
/* the sign-in's wide-screen brand panel (blue): the white picture; the small logo above the form (phones, the older look) */
html.drawnut .lockscr .lbrand::before,html.drawnut .lockscr .lhero .lbrand::before{width:170px!important;height:42px!important;background:url("/img/drawnut/drawnut-logo-white.webp?v=c19aea8e32") left center/contain no-repeat!important}
html.drawnut .lockscr .lmini::before{width:128px!important;height:32px!important;background:url("/img/drawnut/drawnut-logo.webp?v=56542b62f4") left center/contain no-repeat!important}
@media (prefers-color-scheme:dark){html.drawnut:not([data-theme="light"]) .lockscr .lmini::before{background-image:url("/img/drawnut/drawnut-logo-white.webp?v=c19aea8e32")!important}}
html.drawnut[data-theme="dark"] .lockscr .lmini::before{background-image:url("/img/drawnut/drawnut-logo-white.webp?v=c19aea8e32")!important}
/* the app's header: the white picture on the dark header, the dark one on the light header (light mode); the compact header shows the icon */
html.drawnut .topin .wsbtn span.appname::before{background-image:url("/img/drawnut/drawnut-logo-white.webp?v=c19aea8e32")!important;width:104px!important;height:26px!important}
/* (the :not(#v…) chain: the same weight as the Vego rule in velbil.css that draws its dark logo on the light header) */
html.drawnut.vds:not(#v0):not(#v1):not(#v2):not(#v3):not(#v4):not(#v5):not(#v6):not(#v7):not(#v8):not(#v9):not(#v10):not(#v11):not(#v12):not(#v13):not(#v14):not(#v15):not(#v16):not(#v17):not(#v18):not(#v19):not(#v20):not(#v21):not(#v22):not(#v23):not(#v24):not(#v25):not(#v26):not(#v27):not(#v28):not(#v29):not(#v30):not(#v31):not(#v32):not(#v33):not(#v34):not(#v35) body header.top:not(.tight) .topin .wsbtn span.appname::before{background-image:url("/img/drawnut/drawnut-logo.webp?v=56542b62f4")!important}
html.drawnut header.top.tight .topin .wsbtn span.appname::before{background:url("/drawnut-192.png") center/cover no-repeat!important;width:30px!important;height:30px!important;border-radius:9px!important}
/* the wide-screen header search says what drawnut searches (Vego's says clients, phone, company) */
/* (in the light design the search is a round button with no words) */
@media(min-width:768px){html.drawnut:not(.vds) .topin .hsearch::after{content:"Search drawings, designs, library…"}html.drawnut[dir=rtl]:not(.vds) .topin .hsearch::after{content:'ابحث في الرسومات والتصاميم والمكتبة…'}html.drawnut.vds .topin .hsearch::after{content:none}}
/* the wide-screen help rail: the tips, quick help and shortcuts are about leads, quotes and bills, not drawnut's */
html.drawnut #drail>.rl-card,html.drawnut #drail .rl-keys{display:none}

/* ---------- 5.9.123 drawnut's Profile as the owner's pictures (29 Oct 13:12; js/shared/settings/drawnut-profile.js):
   a light grey page, ← Profile 🔍 in round white buttons, the person's card, the plan as a dark card, white rounded cards
   of rows with thin line icons, grey values and ›, plain grey headings, a green switch ---------- */
#sheet[data-mode="settings"]:has(.dnu){background:#F3F4F6}
:root[data-theme="dark"] #sheet[data-mode="settings"]:has(.dnu){background:#0E1116}
.dnu-top{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:12px 16px 8px;background:inherit}
#sheet[data-mode="settings"]:has(.dnu) .dnu-top{background:#F3F4F6}
:root[data-theme="dark"] #sheet[data-mode="settings"]:has(.dnu) .dnu-top{background:#0E1116}
html:not(#a):not(#b):not(#c):not(#d) body #sheet .dnu-top .dnu-ttl{margin:0!important;text-align:center;font:600 18px/1.2 Outfit,system-ui,sans-serif!important;letter-spacing:0!important}
.dnu-ttl{color:#1B1E23}
.dnu-ib{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:#E6E8EB;color:#1B1E23;cursor:pointer}
.dnu-ib svg{width:20px;height:20px}
.dnu-ib:active{background:#D9DCE0}
#sheet .sbody.dnu{padding:4px 16px 28px}
.dnu .dnu-find{display:flex;align-items:center;gap:8px;margin:2px 0 12px;padding:0 12px;height:44px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.dnu .dnu-find[hidden]{display:none}
.dnu .dnu-fi{display:grid;color:#8A9099}.dnu .dnu-fi svg{width:18px;height:18px}
html:not(#a):not(#b):not(#c) body #sheet .dnu .dnu-find input{flex:1;min-width:0;height:40px!important;min-height:0!important;border:0!important;background:none!important;box-shadow:none!important;padding:0!important;font:400 15.5px/1.2 system-ui,sans-serif!important;color:#1B1E23;outline:none}
.dnu .dnu-none{margin:6px 4px 14px;color:#8A9099;font-size:14px}
.dnu-me{width:100%;display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:14px 14px 14px 16px;border:0;border-radius:18px;background:#fff;text-align:start;font:inherit;color:#1B1E23;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.dnu-av{flex:none;display:grid;place-items:center}
.dnu-av .uav,.dnu-av .uavimg{width:52px!important;height:52px!important;border-radius:50%;object-fit:cover;font-size:21px!important;background:linear-gradient(135deg,#8EDB4E,#0A7F3C)!important;color:#fff!important}
.dnu-mt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dnu-mt b{font:600 17px/1.2 Outfit,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dnu-mt small{font-size:13.5px;color:#8A9099;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dnu-ch{flex:none;display:grid;color:#3A3F46}.dnu-ch svg{width:18px;height:18px}
[dir="rtl"] .dnu-ch svg,[dir="rtl"] .dnu-ib:first-child svg,[dir="rtl"] .dnu-pro-b svg{transform:scaleX(-1)}
.dnu-pro{width:100%;display:flex;align-items:center;gap:14px;margin:0 0 6px;padding:18px 16px;border:0;border-radius:18px;background:linear-gradient(110deg,#121417 0%,#22262B 60%,#33373D 100%);color:#fff;text-align:start;font:inherit;cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.dnu-pro-ic{flex:none;display:grid;color:#7BEAA8}.dnu-pro-ic svg{width:30px;height:30px}
.dnu-pro-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dnu-pro-t b{font:600 16px/1.2 Outfit,system-ui,sans-serif}
.dnu-pro-t small{font-size:12.5px;line-height:1.35;color:#C5CAD1}
.dnu-pro-b{flex:none;display:inline-flex;align-items:center;gap:3px;height:34px;padding:0 10px 0 14px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-size:13px;font-weight:600}
.dnu-pro-b svg{width:14px;height:14px}
.dnu .dnu-h{margin:20px 6px 8px;font:500 13.5px/1.2 system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#8A9099}
.dnu .dnu-h[hidden],.dnu .dnu-g[hidden],.dnu .dnu-row[hidden]{display:none}
.dnu .dnu-g{border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.dnu .dnu-out{margin-top:20px}
.dnu-row{position:relative;width:100%;min-height:52px;display:flex;align-items:center;gap:14px;padding:10px 16px;border:0;background:none;font:inherit;color:#1B1E23;text-align:start;text-decoration:none;cursor:pointer;box-sizing:border-box}
div.dnu-row{cursor:default}
.dnu-row+.dnu-row::before,.dnu-x+.dnu-row::before{content:"";position:absolute;top:0;inset-inline:52px 16px;height:1px;background:#ECEEF1}
.dnu-row:active{background:rgba(15,23,42,.035)}
.dnu-ic{flex:none;width:24px;height:24px;display:grid;place-items:center;color:#2A2F36}
.dnu-ic svg{width:22px;height:22px;stroke-width:1.6}
.dnu-l{flex:1;min-width:0;font:400 15.5px/1.25 system-ui,sans-serif;display:flex;flex-direction:column;gap:2px}
.dnu-l small{font-size:12px;color:#8A9099}
.dnu-v{flex:none;max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#8A9099}
.dnu-row .tog.on{background:#25A24B!important}
.dnu-row .dview{flex:none}
.dnu .dnu-so .dnu-l,.dnu .dnu-so .dnu-ic{color:#E5383B}
.dnu .dnu-x{padding:2px 16px 14px 54px}
.dnu .dnu-x[hidden]{display:none}
.dnu .dnu-x .vego-language{display:flex;flex-wrap:wrap;gap:8px}
.dnu .dnu-x .prseg{width:auto;max-width:260px}
.dnu .stabout{margin-top:22px}
:root[data-theme="dark"] .dnu-ttl,:root[data-theme="dark"] .dnu-me,:root[data-theme="dark"] .dnu-row,:root[data-theme="dark"] .dnu-ic,:root[data-theme="dark"] .dnu-ch{color:#E8EAED}
:root[data-theme="dark"] .dnu-ib{background:#1E232B;color:#E8EAED}
:root[data-theme="dark"] .dnu-me,:root[data-theme="dark"] .dnu .dnu-g,:root[data-theme="dark"] .dnu .dnu-find{background:#171B21;box-shadow:0 0 0 1px #262C35}
:root[data-theme="dark"] .dnu-row+.dnu-row::before,:root[data-theme="dark"] .dnu-x+.dnu-row::before{background:#262C35}