/* SHABAB SAFARI PRO 1.5.21 - MOVING-HOVER CHARTS (js/chart21.js). Colours start from the theme: --gold (SAFARI gold / Theme Studio accent) and --pink (Theme Studio main colour). */
:root,[data-theme=dark]{--c21-1:var(--gold,#f5c542);--c21-2:#4f8cff;--c21-3:#2fc9a0;--c21-4:#ff7d5c;--c21-5:#a57bff;--c21-6:#38c3f2;--c21-7:#f06aa0;--c21-8:#9bd34a;--c21-hole:var(--bg2,#13224a);--c21-track:rgba(255,255,255,.07)}
[data-theme=light]{--c21-1:#e0a800;--c21-2:var(--pink,#1546c8);--c21-3:#12a37f;--c21-4:#f0643e;--c21-5:#7c55e6;--c21-6:#1597cf;--c21-7:#d9467f;--c21-8:#6aa61b;--c21-hole:#fff;--c21-track:rgba(21,70,200,.07)}

.c21-donut{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.c21-pic{width:184px;height:184px;flex:none;position:relative}
.c21-pic svg{width:100%;height:100%;overflow:visible;display:block}
.c21-track{fill:none;stroke:var(--c21-track);stroke-width:var(--w,22px)}
.c21-hole{fill:var(--c21-hole);opacity:.0}
.c21-seg.butt{stroke-linecap:butt}
.c21-seg{fill:none;stroke-width:var(--w,22px);stroke-linecap:round;transition:stroke-width .28s cubic-bezier(.2,.8,.2,1);animation:c21sweep .95s cubic-bezier(.22,.9,.24,1) var(--d,0ms) backwards}
@keyframes c21sweep{from{stroke-dasharray:0 100}}
.c21-sg{cursor:pointer;outline:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s ease,filter .25s ease}
.c21.c21-hot .c21-sg{opacity:.22}
.c21.c21-hot .c21-sg.on{opacity:1;transform:translate(var(--dx),var(--dy));filter:drop-shadow(0 0 7px currentColor)}
.c21.c21-hot .c21-sg.on .c21-seg{stroke-width:calc(var(--w,22px) + 7px)}
.c21-sg:focus-visible .c21-seg{stroke-width:calc(var(--w,22px) + 7px)}
.c21-t1{font-size:10.5px;font-weight:700;fill:currentColor;opacity:.75}
.c21-t2{font-weight:800;fill:currentColor;letter-spacing:-.3px}
.c21-t3{font-size:10.5px;fill:currentColor;opacity:.62}
.c21-t3.pc{font-size:13px;font-weight:800;opacity:1;fill:var(--gold,#f5c542)}
[data-theme=light] .c21-t3.pc{fill:#b07f00}
.c21-t1,.c21-t2,.c21-t3{animation:c21fade .5s ease .25s backwards;pointer-events:none}
@keyframes c21fade{from{opacity:0}}
.c21-leg{flex:1;min-width:170px;display:grid;gap:4px}
.c21-lr{display:grid;grid-template-columns:12px 1fr auto 40px;gap:8px;align-items:center;font-size:13px;padding:5px 8px;border-radius:10px;cursor:pointer;outline:none;transition:background .2s,transform .2s,opacity .2s;animation:c21up .5s ease backwards}
.c21-lr:nth-child(2){animation-delay:.06s}.c21-lr:nth-child(3){animation-delay:.12s}.c21-lr:nth-child(4){animation-delay:.18s}.c21-lr:nth-child(5){animation-delay:.24s}.c21-lr:nth-child(n+6){animation-delay:.3s}
@keyframes c21up{from{opacity:0;transform:translateY(6px)}}
.c21-lr .sw{width:12px;height:12px;border-radius:4px;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 0%,transparent)}
.c21-lr small{text-align:end;color:var(--muted)}
.c21-lr .c21-ln{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c21-lr.zero{opacity:.45;cursor:default}
.c21.c21-hot .c21-lr{opacity:.5}
.c21 .c21-lr.on,.c21-lr:focus-visible{opacity:1;background:var(--card2,rgba(255,255,255,.09));box-shadow:inset 0 0 0 1px var(--line,rgba(245,197,66,.3));transform:translateX(3px)}
[dir=rtl] .c21 .c21-lr.on,[dir=rtl] .c21-lr:focus-visible{transform:translateX(-3px)}
.c21-lr.on .sw{transform:scale(1.25);box-shadow:0 0 10px currentColor}
.c21-lr.on b{color:var(--gold,#f5c542)}
[data-theme=light] .c21-lr.on b{color:#9a6f00}

/* line chart */
.c21-lw{position:relative;outline:none;border-radius:12px}
.c21-lw:focus-visible{box-shadow:0 0 0 2px var(--gold,#f5c542)}
.c21-line{width:100%;height:auto;aspect-ratio:360/190;overflow:visible;display:block}
.c21-grid{stroke:currentColor;opacity:.08;stroke-dasharray:3 4}
.c21-ax{font-size:9px;fill:currentColor;opacity:.6}
.c21-pl{stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;animation:c21draw 1.3s cubic-bezier(.3,.8,.3,1) backwards;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.c21-pl.dash{stroke-dasharray:.012 .012;stroke-width:2;opacity:.45;animation:c21fade .8s ease backwards;filter:none}
@keyframes c21draw{from{stroke-dashoffset:1}}
.c21-area{animation:c21fade 1.2s ease .3s backwards}
.c21-guide{stroke:currentColor;stroke-width:1;opacity:0;stroke-dasharray:3 3;transition:opacity .15s,x1 .12s,x2 .12s}
.c21-dot{opacity:0;stroke:var(--c21-hole);stroke-width:2.5;transition:opacity .15s,cx .12s ease,cy .12s ease;pointer-events:none}
.c21-hit{fill:transparent;cursor:crosshair}
.c21-on .c21-guide{opacity:.45}.c21-on .c21-dot{opacity:1}
.c21-tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .15s,left .12s ease,top .12s ease;background:var(--solid,#18264d);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-size:12px;line-height:1.45;white-space:nowrap;box-shadow:var(--shadow,0 8px 22px rgba(0,0,0,.3));z-index:5}
.c21-tip b{display:block;font-size:12px;color:var(--gold,#f5c542)}
[data-theme=light] .c21-tip b{color:#9a6f00}
.c21-tip.flip{transform:translate(-92%,calc(-100% - 12px))}.c21-tip.flipl{transform:translate(-8%,calc(-100% - 12px))}
.c21-on .c21-tip{opacity:1}

/* bars of the dashboard grow in */
.oc-grid .bar-l .b i,.three .bar-l .b i,.c21-bars .b i{transform-origin:left center;animation:c21grow .9s cubic-bezier(.22,.9,.24,1) backwards;border-radius:999px}
[dir=rtl] .oc-grid .bar-l .b i,[dir=rtl] .three .bar-l .b i,[dir=rtl] .c21-bars .b i{transform-origin:right center}
.oc-grid .bar-l:nth-child(2) .b i,.three .bar-l:nth-child(2) .b i{animation-delay:.08s}.oc-grid .bar-l:nth-child(3) .b i,.three .bar-l:nth-child(3) .b i{animation-delay:.16s}.oc-grid .bar-l:nth-child(4) .b i,.three .bar-l:nth-child(4) .b i{animation-delay:.24s}
@keyframes c21grow{from{transform:scaleX(0)}}
.oc-grid .bar-l,.three .bar-l{transition:background .2s;border-radius:8px}
.oc-grid .bar-l:hover .b i,.three .bar-l:hover .b i{filter:brightness(1.15) drop-shadow(0 0 6px currentColor)}

@media (max-width:900px){.c21-pic{width:160px;height:160px}}
@media (max-width:420px){.c21-donut{justify-content:center}.c21-leg{min-width:100%}}
@media (prefers-reduced-motion:reduce){.c21-seg,.c21-pl,.c21-pl.dash,.c21-area,.c21-lr,.c21-t1,.c21-t2,.c21-t3,.oc-grid .bar-l .b i,.three .bar-l .b i,.c21-bars .b i{animation:none}.c21-sg,.c21-seg,.c21-lr,.c21-dot,.c21-tip,.c21-guide{transition:none}}

/* 1.5.21 CUSTOMER LOGO ONLY at the menu top (js/app.js coTop) + on the /CODE login page (coLogin) */
.side .logo.co21{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin:2px 4px 14px;padding:0}
.co21-card{display:flex;align-items:center;justify-content:center;background:#fff!important;opacity:1;border-radius:18px;padding:12px 14px;width:100%;min-height:84px;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 8px 22px rgba(0,0,0,.22)}
.co21-card img,.logo.co21 .co21-card img{display:block;max-width:100%;max-height:76px;width:auto;height:auto;object-fit:contain;border-radius:0;box-shadow:none}
.co21-card .pill{box-shadow:none;background:transparent;padding:0;max-width:100%}
.side .logo.co21 .co21-name{display:block;font-family:inherit;letter-spacing:.2px;font-size:14px;font-weight:800;line-height:1.3;color:var(--menu-brand,var(--gold));overflow-wrap:anywhere}
.side .logo.co21 .co21-card{opacity:1;font-size:inherit;letter-spacing:0}
.side .logo.co21 .co21-code{font-size:11px;margin-top:-6px}
.co21-pow{display:inline-flex;align-items:center;gap:5px;opacity:.85}.co21-pow img{border-radius:4px}
.co21-login{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px;text-align:center}
.co21-login .co21-card{max-width:280px;min-height:96px}.co21-login .co21-card img{max-height:84px}
.co21-login b{font-size:19px;font-weight:800}
.app.rail .side .logo.co21 .co21-card{display:flex!important;min-height:44px;padding:6px}.app.rail .side .logo.co21 .co21-card img{max-height:30px}