/* ---------- menubar / menus ---------- */
.menubar { display:flex; padding:1px 0; flex:0 0 auto; }
.menubar .mi { padding:2px 7px; font-size:11px; }
.menubar .mi:hover, .menubar .mi.open { background:var(--navy); color:#fff; }
.dropdown { position:fixed; background:var(--face); z-index:18000; min-width:140px; padding:2px;
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light),
              inset -2px -2px var(--shadow), inset 2px 2px var(--hi); }
.dropdown .di { padding:4px 18px 4px 22px; font-size:11px; position:relative; white-space:nowrap; }
.dropdown .di:hover { background:var(--navy); color:#fff; }
.dropdown .di.dis { color:#808080; }
.dropdown .di.dis:hover { background:none; color:#808080; }
.dropdown .di .key { position:absolute; right:6px; }
.dropdown hr { border:none; border-top:1px solid var(--shadow); border-bottom:1px solid var(--light); margin:2px; }
/* ---------- buttons / inputs ---------- */
.wbtn { background:var(--face); font-family:inherit; font-size:11px; padding:4px 10px; min-width:70px;
  box-shadow: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hi); }
.wbtn:active, .wbtn.down { box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow); padding:5px 9px 3px 11px; }
.wbtn:focus { outline:1px dotted #000; outline-offset:-4px; }
.wbtn:disabled { color:#808080; text-shadow:1px 1px #fff; }
.tinput { background:#fff; font-family:inherit; font-size:11px; padding:3px 4px; border:none; outline:none;
  box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
select.wsel { font-family:inherit; font-size:11px; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark); }
/* ---------- dialog ---------- */
.dlg { display:flex; flex-direction:column; }
.dlg .dbody { display:flex; gap:12px; padding:14px 12px 10px; align-items:flex-start; }
.dlg .dico { width:32px; height:32px; flex:0 0 32px; }
.dlg .dico img { width:32px; height:32px; }
.dlg .dtext { font-size:11px; line-height:1.45; padding-top:4px; white-space:pre-wrap; max-width:340px; }
.dlg .dbtns { display:flex; justify-content:center; gap:8px; padding:4px 10px 12px; }
.dlg .dtext b { display:block; margin-bottom:3px; }
/* ---------- balloon ---------- */
.balloon { position:fixed; right:8px; bottom:34px; background:#ffffe1; border:1px solid #000;
  padding:8px 10px; max-width:260px; font-size:11px; z-index:19000; box-shadow:2px 2px 3px rgba(0,0,0,.4); }
.balloon .bt { font-weight:bold; margin-bottom:3px; }
.balloon .bx { position:absolute; right:4px; top:3px; font-weight:bold; padding:0 3px; }
.balloon img { position:absolute; left:-14px; bottom:4px; width:16px; height:16px; }
/* ---------- tooltips ---------- */
#tooltip { position:fixed; background:#ffffe1; border:1px solid #000; padding:3px 6px; font-size:11px;
  z-index:19500; pointer-events:none; display:none; max-width:240px; box-shadow:2px 2px 2px rgba(0,0,0,.3); }
/* ---------- drag ghost ---------- */
#dragghost { position:fixed; z-index:19999; pointer-events:none; opacity:.75; display:none; }
#dragghost img { width:32px; height:32px; }
#dragghost .gl { font-size:10px; background:var(--navy); color:#fff; padding:0 2px; white-space:nowrap; }