/*
Theme Name: CityCircle Theme
Description: Video + chat + jobs social platform theme (YouTube-style videos, WhatsApp-style chat, LinkedIn-style jobs, stories, notifications, mobile bottom bar). Works with the CityCircle All-in-One plugin. v5.2: one clean design system, SVG icons, dark mode.
Version: 5.3.0
Author: citycircle.online
Author URI: https://citycircle.online
Theme URI: https://citycircle.online
Requires PHP: 7.4
Text Domain: citycircle-theme
*/

/* ============ 1. TOKENS (light, dark) ============ */
:root{
--bg:#fbf6ec;--card:#fff;--tint:#f3eefe;--tx:#17132e;--mute:#5f5a7d;--line:rgba(23,19,46,.12);--line2:rgba(23,19,46,.28);--edge:#17132e;--dot:rgba(23,19,46,.055);
--vio:#7c3aed;--vio-t:#6d28d9;--pink:#ff4fa3;--lime:#c6ff3d;--cyan:#3dd9ff;--on-lime:#17132e;--hero:#6d28d9;--cta:#17132e;--foot:#17132e;--focus:#6d28d9;
--sh-soft:0 1px 2px rgba(23,19,46,.06),0 12px 28px -10px rgba(23,19,46,.18);--pop:3px 3px 0 var(--edge);
--cc-ink:var(--tx);--cc-mute:var(--mute);--cc-line:var(--line);--cc-tint:var(--tint);--cc-surface:var(--card);--cc-p:var(--vio);--cc-p2:var(--pink);
--cc-on-ink:var(--bg);--m:var(--mute);color-scheme:light}
:root[data-theme=dark]{--bg:#0f0c1f;--card:#1a1633;--tint:#262049;--tx:#f3f0ff;--mute:#aaa4cf;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.26);--edge:#05030f;--dot:rgba(255,255,255,.045);--vio:#8b5cf6;--vio-t:#c4b0ff;--hero:#3b1a85;--cta:#241d4d;--foot:#0a0817;--focus:#c6ff3d;--sh-soft:0 1px 2px rgba(0,0,0,.4),0 12px 28px -10px rgba(0,0,0,.6);color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f0c1f;--card:#1a1633;--tint:#262049;--tx:#f3f0ff;--mute:#aaa4cf;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.26);--edge:#05030f;--dot:rgba(255,255,255,.045);--vio:#8b5cf6;--vio-t:#c4b0ff;--hero:#3b1a85;--cta:#241d4d;--foot:#0a0817;--focus:#c6ff3d;--sh-soft:0 1px 2px rgba(0,0,0,.4),0 12px 28px -10px rgba(0,0,0,.6);color-scheme:dark}}

/* ============ 2. BASE ============ */
*{box-sizing:border-box}html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:clip}
body{margin:0;color:var(--tx);font:16px/1.6 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg) radial-gradient(var(--dot) 1.2px,transparent 1.2px) 0 0/22px 22px;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
a{color:var(--vio-t)}img{max-width:100%;height:auto}::selection{background:var(--lime);color:var(--on-lime)}
h1,h2,h3,.jt-logo{font-family:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;line-height:1.15;letter-spacing:-.025em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.jt-i{display:block;flex:none}
.jt-skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--lime);color:var(--on-lime);padding:8px 14px;border-radius:10px;font-weight:700;text-decoration:none}.jt-skip:focus{top:10px}
.jt-wrap{max-width:1080px;margin:0 auto;padding:0 16px;min-width:0}

/* shared buttons: lime + ink edge = the one "pop" element */
.jt-btn,.jt-cta a,.jt-sform button{display:inline-block;border:2px solid var(--edge);background:var(--lime);color:var(--on-lime);box-shadow:var(--pop);font:inherit;font-weight:800;border-radius:14px;padding:13px 22px;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
.jt-btn:hover,.jt-cta a:hover,.jt-sform button:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.jt-more{display:inline-block;padding:8px 18px;border:1.5px solid var(--line2);border-radius:999px;background:var(--card);color:var(--tx);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:background .15s}.jt-more:hover{background:var(--tint)}

/* ============ 3. HEADER ============ */
.jt-head{position:sticky;top:0;z-index:50;background:var(--bg);background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.jt-head .jt-wrap{display:flex;align-items:center;gap:12px;height:64px}
.jt-logo{display:flex;align-items:center;gap:9px;min-width:0;max-width:55%;font-size:21px;font-weight:800;text-decoration:none;color:var(--tx)}
.jt-logo b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jt-logo img{display:block}.jt-mark{width:40px;height:40px;flex:none}
.jt-nav{flex:1;min-width:0}.jt-nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.jt-nav a{position:relative;display:block;padding:8px 14px;border-radius:999px;color:var(--tx);text-decoration:none;font-weight:700;font-size:15px;transition:background .15s}
.jt-nav a:hover{background:var(--tint)}.jt-nav .current-menu-item>a{background:var(--lime);color:var(--on-lime)}
.jt-auth{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex:none;min-width:0;white-space:nowrap;font-size:14px;font-weight:700}
.jt-auth .jc-btn{padding:8px 14px}
.jc-auth>a:not(.jc-btn){color:var(--tx);text-decoration:none;display:inline-block;max-width:120px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.jt-up,.jt-theme{display:grid;place-items:center;width:38px;height:38px;flex:none;padding:0;border-radius:50%;border:1.5px solid var(--line2);background:var(--card);color:var(--tx);cursor:pointer;text-decoration:none;transition:background .15s}
.jt-theme:hover{background:var(--tint)}.jt-theme span{display:grid}.jt-theme .i-sun{display:none}
:root[data-theme=dark] .jt-theme .i-sun{display:grid}:root[data-theme=dark] .jt-theme .i-moon{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .jt-theme .i-sun{display:grid}:root:not([data-theme=light]) .jt-theme .i-moon{display:none}}
.jt-up{background:var(--lime);color:var(--on-lime);border:2px solid var(--edge);box-shadow:2px 2px 0 var(--edge)}

/* ============ 4. HOME ============ */
.jt-hero{position:relative;color:#fff;padding:60px 0 56px;border-radius:0 0 34px 34px;background:var(--hero) radial-gradient(circle at 90% 4%,rgba(255,79,163,.7),transparent 42%)}
.jt-hero h1{font-weight:800;font-size:clamp(40px,9.5vw,76px);line-height:1.02;margin:0 0 14px;max-width:760px}
.jt-hero h1 mark{display:inline-block;background:var(--lime);color:var(--on-lime);padding:0 .15em;border-radius:.2em;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--edge);animation:jtpop .6s cubic-bezier(.2,1.4,.4,1) .15s both}
@keyframes jtpop{from{opacity:0;transform:scale(.6) rotate(-9deg)}to{opacity:1;transform:rotate(-2deg)}}
.jt-hero p{font-size:18px;font-weight:600;max-width:540px;margin:0 0 26px;color:rgba(255,255,255,.92)}
.jt-sform{display:grid;grid-template-columns:auto 2fr 1fr auto;gap:8px;max-width:720px;width:100%;padding:8px;background:var(--card);border:2px solid var(--edge);border-radius:20px;box-shadow:5px 5px 0 var(--edge)}
.jt-sform:not(:has(select)){grid-template-columns:2fr 1fr auto}
.jt-sform input,.jt-sform select{min-width:0;border:0;border-radius:13px;background:var(--tint);color:var(--tx);font:inherit;font-weight:600;padding:13px 16px}
.jt-sform select{padding:0 12px;font-weight:800}.jt-sform input::placeholder{color:var(--mute)}
.jt-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:24px;max-width:780px}
.jt-pillars a{position:relative;display:flex;flex-direction:column;gap:2px;padding:16px;border-radius:20px;background:var(--card);color:var(--tx);text-decoration:none;box-shadow:0 14px 26px -14px rgba(0,0,0,.5);transition:transform .15s}
.jt-pillars a:hover{transform:translateY(-3px)}
.jt-pillars .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;margin-bottom:8px}
.jt-pillars .p1 .ic{background:#ece3ff;color:#5b21b6}.jt-pillars .p2 .ic{background:var(--lime);color:var(--on-lime)}.jt-pillars .p3 .ic{background:#ffe0ef;color:#be185d}
.jt-pillars b{font:800 19px/1.2 'Bricolage Grotesque',sans-serif}.jt-pillars .sub{font-size:13px;line-height:1.4;font-weight:600;color:var(--mute)}
.jt-pillars .jcx-nb{right:12px;top:12px;border-color:var(--card)}
.jt-stats{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:28px}
.jt-stats div{font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}.jt-stats b{display:block;font:800 28px/1.1 'Bricolage Grotesque',sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.jt-sec{position:relative}.jt-stories{margin-top:28px}.jt-stories .jcx-tray{margin:0 0 4px}
.jt-sh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:48px 0 16px}
.jt-sh h2{margin:0;font-size:clamp(24px,4.6vw,34px);font-weight:800}.jt-sh p{margin:2px 0 0;color:var(--mute);font-size:15px}
.jt-vids.jv{padding:0;margin:0}.jv-grid{gap:22px 16px}
.jt-sec .jc{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:12px}.jt-sec .jc .jc-card{margin:0}
.jt-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:36px 16px;border:1.5px dashed var(--line2);border-radius:22px;color:var(--mute)}
.jt-empty b{font:800 18px/1.3 'Bricolage Grotesque',sans-serif;color:var(--tx)}
.jt-empty .ic,.jt-404 .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--tint);color:var(--vio-t);margin-bottom:6px}
.jt-chatdemo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;align-items:center;margin:48px 0 0;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--sh-soft)}
.jt-chatdemo h2{margin:0 0 6px;font-size:clamp(22px,4vw,30px)}.jt-chatdemo p{margin:0 0 14px;color:var(--mute)}
.jt-bub{width:fit-content;max-width:88%;padding:9px 14px;margin:6px 0;border-radius:18px 18px 18px 4px;background:var(--tint);font-weight:600;font-size:15px}
.jt-bub.me{margin-left:auto;background:var(--vio);color:#fff;border-radius:18px 18px 4px 18px}
.jt-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.jt-steps>div{min-width:0;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-soft)}
.jt-steps i{display:grid;place-items:center;width:38px;height:38px;margin-bottom:10px;border-radius:50%;background:var(--tx);color:var(--bg);font-style:normal;font-weight:800;font-size:18px}
.jt-steps h3{margin:0 0 4px;font-size:19px}.jt-steps p{margin:0;color:var(--mute);font-size:14px}
.jt-cta{margin:48px 0 20px;padding:44px 24px;text-align:center;color:#fff;border-radius:28px;background:var(--cta) radial-gradient(circle at 85% 0,rgba(124,58,237,.6),transparent 55%)}
.jt-cta h2{margin:0 0 8px;font-size:clamp(26px,5vw,36px)}.jt-cta p{margin:0 0 18px;opacity:.85}.jt-cta a{margin:6px}
.jt-cta a.alt{background:transparent;color:#fff;border-color:rgba(255,255,255,.65);box-shadow:none}.jt-cta a.alt:hover{background:rgba(255,255,255,.12)}

/* ============ 5. PAGES ============ */
.jt-main{max-width:820px;margin:0 auto;padding:30px 16px 60px;min-width:0}.jt-main.wide{max-width:1080px}
.jt-title{font-size:clamp(28px,5vw,40px);margin:0 0 16px;font-weight:800}
.jt-post{margin:16px 0;padding:24px;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-soft)}.jt-post h2{margin:0 0 6px}.jt-post h2 a{color:var(--tx);text-decoration:none}
.jt-404{text-align:center;padding:44px 24px}.jt-404 .ic{margin:0 auto 10px;width:72px;height:72px}.jt-404 h1{margin:0 0 6px}.jt-404 p{color:var(--mute);margin:0 0 20px}
.jt-main img,.jt-main iframe,.jt-main video{max-width:100%}.jt-main pre,.jt-main table{max-width:100%;overflow-x:auto;display:block}
.single-jc_video .jt-main{max-width:1000px}

/* ============ 6. FOOTER + MOBILE BAR ============ */
.jt-foot{margin-top:56px;padding:36px 0 40px;background:var(--foot);color:#cfc9f2;text-align:center;font-size:14px}
.jt-fl{border-radius:14px;background:#fff;padding:4px}.jt-fn{margin-top:8px;font:800 20px 'Bricolage Grotesque',sans-serif;color:#fff}
.jt-fk{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:12px 0}.jt-fk a{position:relative;color:#fff;font-weight:700;text-decoration:none}.jt-fk a:hover{color:var(--lime)}
.jt-fc{opacity:.7;font-size:13px}.jt-foot .jcx-nb{position:static;display:inline-block;margin-left:4px;border:0;vertical-align:middle}
.jt-bar{display:none}
.jt-chat .jt-bar,.jt-chat .jt-foot{display:none}.jt-chat .jt-main{padding:12px 10px 0;max-width:1080px}.jt-chat .jt-title{display:none}

/* ============ 7. PLUGIN COMPONENTS (body prefix beats plugin CSS whatever the load order) ============ */
body .jc-box,body .jc-card,body .jv-box,body .jcx-tray,body .jcx-share,body .jcc-app{border:1px solid var(--line);box-shadow:var(--sh-soft)}
body .jc-card{border-radius:20px;transition:transform .15s,border-color .15s}body .jc-card:hover{border-color:var(--vio)}
body .jc-empty,body .jv-empty{background:transparent;border:1.5px dashed var(--line2);box-shadow:none;color:var(--mute)}
body .jc-btn,body .jv-btn,body .jcc-b,body .jcx-dlg button{border:1.5px solid var(--line2);background:var(--card);color:var(--tx);box-shadow:none;border-radius:12px;font-weight:700;transition:background .15s,transform .12s}
body .jc-btn:hover,body .jv-btn:hover,body .jcc-b:hover,body .jcx-dlg button:hover{background:var(--tint)}
body .jc-btn.pri,body .jc #wp-submit,body .jv-btn.pri,body .jv-btn.on,body .jcc-b.pri,body .jcx-dlg button.pri{background:var(--lime);color:var(--on-lime);border:2px solid var(--edge);box-shadow:2px 2px 0 var(--edge);font-weight:800}
body .jc-btn.pri:hover,body .jv-btn.pri:hover,body .jcc-b.pri:hover,body .jcx-dlg button.pri:hover{background:var(--lime);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--edge)}
body .jc-form input,body .jc-form select,body .jc-form textarea,body .jc-search input,body .jc-search select,body .jv-form input,body .jv-form textarea,body .jv-search input,body .jcc-in,body .jcx-dlg input,body .jcx-dlg textarea{border:1.5px solid var(--line2);border-radius:12px;background:var(--card);color:var(--tx)}
body .jc-form input:focus,body .jc-form select:focus,body .jc-form textarea:focus,body .jc-search input:focus,body .jv-form input:focus,body .jv-form textarea:focus,body .jcc-in:focus{outline:0;border-color:var(--vio);box-shadow:0 0 0 3px rgba(124,58,237,.25)}
body .jc-pill{background:var(--tint);color:var(--tx);border:0}body .jc-pill.tag{background:rgba(124,58,237,.14);color:var(--vio-t)}body .jc-pill.sal{background:var(--lime);color:var(--on-lime)}body .jc-pill.new{background:var(--cyan);color:var(--on-lime)}
body .jc-note,body .jv-note{background:var(--tint);color:var(--tx);border:1px solid var(--line);border-left:4px solid var(--vio);border-radius:14px}
body .jv-th{border:1px solid var(--line);box-shadow:none;border-radius:16px}
body .jv-th img{transition:transform .35s}body .jv-card:hover .jv-th img{transform:scale(1.05)}
body .jv-th:has(img):before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--tint) 25%,var(--card) 50%,var(--tint) 75%) 0 0/200% 100%;animation:jtsk 1.4s linear infinite}
@keyframes jtsk{to{background-position:-200% 0}}
body .jv-th:after{content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(23,19,46,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/26px no-repeat;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;pointer-events:none}
body .jv-card:hover .jv-th:after,body .jv-card:focus-visible .jv-th:after{opacity:1;transform:none}
body .jv-th em{border-radius:6px;font-variant-numeric:tabular-nums;z-index:1}
body .jv-info b{font-weight:700}
body .jv-tabs a,body .jcx-share a{border:1.5px solid var(--line2);color:var(--tx);background:var(--card)}body .jv-tabs a.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
body .jv-pages .page-numbers,body .jc-pages .page-numbers{background:var(--card);color:var(--tx);border:1px solid var(--line)}
body .jcx-ring{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--pink),var(--lime)) border-box}
body .jcx-bb{border:1.5px solid var(--line2);background:var(--card);color:var(--tx)}body .jcx-badge{background:var(--pink)}
body .jcx-nb{background:var(--pink);border-color:var(--card)}
body .jcc-main{background:var(--tint)}body .jcc-h,body .jcc-comp,body .jcc-note{background:var(--card)}body .jcc-m{background:var(--card);color:var(--tx)}
body .jcc-m.me{background:var(--vio);color:#fff}body .jcc-item.on,body .jcc-item:hover{background:var(--tint)}body .jcc-il em{background:var(--pink);color:#fff}


/* inner pages: single job / video / dashboard polish */
body .jc h3,body .jv h3{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;letter-spacing:-.02em;text-transform:none;opacity:1;margin-top:28px}
body .jc h2,body .jv h2{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
body .jc-search:has(.jc-chk){grid-template-columns:2fr 1fr 1fr auto auto}
body .jv-cm{padding:12px 0;border-bottom:1px solid var(--line)}body .jv-cm:last-child{border-bottom:0}
body .jv-player{border-radius:20px;box-shadow:var(--sh-soft)}
body .jc-card .jc-cb b{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body .jc-cb span{color:var(--mute);opacity:1}body .jv-info span{opacity:1;color:var(--mute)}
body .jcx-tease{box-shadow:var(--sh-soft)}
.jt-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.jt-quick a{display:flex;align-items:center;gap:14px;min-width:0;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-soft);color:var(--tx);text-decoration:none;transition:border-color .15s}.jt-quick a:hover{border-color:var(--vio)}
.jt-quick .ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:var(--tint);color:var(--vio-t)}
.jt-quick b{display:block;font:800 17px/1.2 'Bricolage Grotesque',sans-serif}.jt-quick small{display:block;color:var(--mute);font-size:13px;font-weight:600}

/* ============ 8. MOBILE ============ */
@media(max-width:760px){
.jt-nav{display:none}.jt-head .jt-wrap{justify-content:space-between;gap:8px}.jt-logo{max-width:46%;font-size:18px}
.jt-auth{gap:6px}.jt-auth .jc-btn{padding:7px 10px;font-size:13px}.jt-up,.jt-theme{width:34px;height:34px}
.jt-hero{padding:40px 0 40px;border-radius:0 0 26px 26px}.jt-hero h1{font-size:clamp(38px,12vw,54px)}.jt-hero p{font-size:16px}
.jt-sform,.jt-sform:not(:has(select)){grid-template-columns:1fr;box-shadow:4px 4px 0 var(--edge)}.jt-sform select{padding:12px}
.jt-pillars{grid-template-columns:repeat(3,1fr);gap:8px}.jt-pillars a{padding:12px;align-items:flex-start}.jt-pillars .ic{width:36px;height:36px;margin-bottom:4px}.jt-pillars b{font-size:16px}.jt-pillars .sub{display:none}
.jt-sh{margin-top:40px}.jt-sh p{display:none}
.jv-grid{grid-template-columns:1fr}
.jt-bar{display:flex;position:fixed;z-index:60;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 20px);gap:2px;padding:6px;background:var(--card);background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:26px;box-shadow:0 12px 30px -8px rgba(23,19,46,.4)}
.jt-bar a{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border-radius:20px;color:var(--mute);font-size:12px;font-weight:700;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jt-bar i{display:block;font-style:normal;line-height:0}.jt-bar a.on{background:var(--lime);color:var(--on-lime)}.jt-bar .jcx-nb{border-color:var(--card)}
.jt-foot{padding-bottom:100px}
}
@media(max-width:430px){.jt-logo b{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
