/* Df Elettro — interfaccia operativa. Caricato dopo gli stili storici.
   Le classi funzionali (open, hidden, admin-only) restano gestite dall'app. */
:root {
  color-scheme:light;
  --primary:#12638e; --primary-dark:#164b6a; --primary-light:#dcecf6;
  --bg:#fff; --surface:#fcfdfe; --surface2:#edf3f7;
  --text:#202c38; --text2:#566575; --text3:#697889;
  --border:#d0dce5; --gray:#566575; --light:#edf3f7;
  --nav-bg:#c8e4f3; --nav-surface:#b6d8ed; --nav-text:#214a62;
  --nav-muted:#34566c; --nav-active:#12638e; --nav-border:#aacde1;
  --nav-heading:#183f57; --nav-focus:#12638e;
  --toolbar:#e1eff8; --tools-bg:#d8e6ef; --section-tint:#eaf3fa;
  --tint-blue:#eaf3fc; --tint-green:#e8f5ee; --tint-amber:#fff4df; --tint-rose:#fceeed;
  --success:#23734b; --warning:#a65a0a; --danger:#bc3434; --info:#23639a;
  --shadow:none; --shadow-md:0 6px 20px #202c3810;
  --radius:16px; --radius-sm:10px; --sidebar-w:240px; --header-h:68px;
  --font-body:'Source Sans 3','Segoe UI',sans-serif;
  --font-heading:'IBM Plex Sans','Segoe UI',sans-serif;
}
[data-theme=dark] {
  color-scheme:dark;
  --primary:#8bbce7; --primary-dark:#b5d5f0; --primary-light:#253b4f;
  --bg:#171e26; --surface:#202a35; --surface2:#26323e;
  --text:#edf2f6; --text2:#b5c2ce; --text3:#9bacbc;
  --border:#3b4a59; --gray:#b5c2ce; --light:#26323e;
  --nav-bg:#26495f; --nav-surface:#31586f; --nav-text:#e1eef6;
  --nav-muted:#c0d7e5; --nav-active:#1b6089; --nav-border:#53768b;
  --nav-heading:#fff; --nav-focus:#a0dcff;
  --toolbar:#253e51; --tools-bg:#243a4b; --section-tint:#253e51;
  --tint-blue:#253d52; --tint-green:#263e37; --tint-amber:#423b2b; --tint-rose:#453139;
  --shadow:none; --shadow-md:0 6px 20px #0003;
}
body {font-family:var(--font-body);font-size:1rem;line-height:1.45;background:var(--bg);color:var(--text)}
input,select,textarea,button {font-family:var(--font-body);font-size:1rem}
h1,h2,h3,h4,.brand-text,.stat-val {font-family:var(--font-heading)}
button,input,select,textarea,a,[tabindex] {touch-action:manipulation}
:focus-visible {outline:3px solid var(--primary);outline-offset:3px}
button:disabled {cursor:not-allowed}
input[type=checkbox],input[type=radio] {accent-color:var(--primary)}
#app {height:100vh;height:100dvh}
.main-area {min-width:0}
.content {padding:28px 30px}
.skip-link {position:fixed;top:8px;left:12px;transform:translateY(-200%);z-index:10000;background:var(--surface);color:var(--text);padding:12px 18px;border-radius:10px}
.skip-link:focus {transform:translateY(0)}
#main-content {scroll-margin-top:var(--header-h)}
.sidebar,.modal {overscroll-behavior:contain}
.modal {scroll-padding-top:80px;scroll-padding-bottom:85px}
h1,h2,h3,h4 {text-wrap:balance}
.btn,.btn-icon,.nav-item,.qa-btn,.stat-card,.form-control,.btn-login {transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.page.active,tbody tr,.badge-nav,.notif-badge.pulse,.ripple {animation:none}
.ripple {display:none}

/* Navigazione: una guida stabile, con una sola voce evidenziata. */
.sidebar {background:var(--nav-bg);color:var(--nav-text);border-right:1px solid var(--nav-border)}
html:not([data-theme=dark]) .sidebar {background:#fff}
.sidebar-header {padding:22px 16px;border-color:var(--nav-border)}
.sidebar-header .brand {border:0;padding:0;gap:12px}
.brand-logo {display:block;width:88px;height:auto;flex-shrink:0;object-fit:contain;background:transparent;padding:0;border-radius:0}
.sidebar-header .brand-text {font-size:1.0625rem;font-weight:600;letter-spacing:-.4px;color:var(--nav-heading);white-space:nowrap}
.sidebar-header .brand-sub {font-size:.8125rem;opacity:1;color:var(--nav-muted);margin-top:2px}
.sidebar-nav {padding:8px 0 20px}
.nav-section {font-size:.8125rem;letter-spacing:0;text-transform:none;opacity:1;color:var(--nav-muted);padding:20px 20px 6px;margin:0}
.nav-item {width:calc(100% - 20px);text-align:left;border:0;background:transparent;color:inherit;margin:2px 10px;padding:9px 12px;min-height:40px;border-radius:10px;font-size:.9375rem;font-weight:500;gap:10px}
.nav-item:hover {background:var(--nav-surface);color:var(--nav-heading)}
.nav-item.active {background:var(--nav-active);color:#fff;box-shadow:none;font-weight:600}
.nav-item.active:hover {background:var(--nav-active);color:#fff}
.nav-item.active::before {background:#58b9ea;height:20px;width:3px;border-radius:2px;opacity:1}
.sidebar :focus-visible {outline-color:var(--nav-focus)}
.nav-item .nav-icon,.nav-item.active .nav-icon {opacity:1;filter:none;font-size:.875rem}
.nav-item:hover .nav-icon {transform:none}
.nav-item .badge-nav {background:#dcecf6;color:#164b6a;font-size:.75rem;border-radius:6px;min-width:22px;text-align:center}
.sidebar-user,[data-theme=dark] .sidebar-user {background:var(--nav-surface);border-color:var(--nav-border);padding:16px}
.sidebar-user .u-avatar {background:var(--nav-active);color:#fff;border-radius:50%;font-size:.9375rem}
.sidebar-user .u-name {font-size:.9375rem;color:var(--nav-heading)}
.sidebar-user .u-role {font-size:.8125rem;opacity:1;color:var(--nav-muted)}
.sidebar-user .btn {color:var(--nav-text)!important;border-color:var(--nav-border)!important}
.sidebar-user .btn:hover {background:var(--nav-bg)}
.topbar,[data-theme=dark] .topbar {background:var(--toolbar);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:var(--border);padding:0 30px}
.topbar-title {font-family:var(--font-heading);font-size:1rem;font-weight:500;letter-spacing:0;min-width:0}
.topbar-search input {font-size:.9375rem;border-width:1px;border-radius:10px;min-height:40px;width:300px}
.topbar-search i {color:var(--text2)}
.btn-icon {border-width:1px;border-radius:10px;width:40px;height:40px;flex-shrink:0}
.topbar-actions {gap:8px}
.notif-badge {font-size:.75rem;min-width:18px;height:18px}

/* Panoramica: accessi principali e riepilogo delle attività. */
#page-dashboard.active {display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'heading' 'actions' 'stats' 'charts' 'recent';gap:22px;align-items:start}
.workspace-heading {grid-area:heading;display:flex;align-items:center;justify-content:space-between;gap:16px}
.workspace-heading h1 {font-size:1.75rem;line-height:1.25;font-weight:600;letter-spacing:-.7px}
.workspace-heading p {color:var(--text2);margin-top:5px;font-size:1rem}
#page-dashboard > .stats-grid {grid-area:stats;margin:0;padding:0}
#page-dashboard > .charts-grid {grid-area:charts;margin:0;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
#page-dashboard > .table-card {grid-area:recent;margin:0;min-width:0}
.stats-grid {grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;padding-bottom:0}
.stat-card {position:relative;align-items:flex-start;gap:10px;padding:18px 14px;border-radius:14px;box-shadow:none;min-width:0;background:var(--surface2)}
.stat-card > div:last-child {min-width:0}
.stat-card:hover,.stat-card.clickable:hover,.stat-card.clickable:active,[data-theme=dark] .stat-card:hover {transform:none;box-shadow:none;border-color:var(--primary)}
.stat-icon {width:30px;height:30px;font-size:1rem;border-radius:10px}
.stat-card[data-tone=blue] {background:var(--tint-blue)}
.stat-card[data-tone=green] {background:var(--tint-green)}
.stat-card[data-tone=amber] {background:var(--tint-amber)}
.stat-card[data-tone=rose] {background:var(--tint-rose)}
.stat-val {font-size:1.625rem;font-weight:600;line-height:1.2;letter-spacing:-.7px;overflow-wrap:anywhere}
.stat-lbl {font-size:.875rem;line-height:1.3;font-weight:400;text-transform:none;letter-spacing:0;margin-top:6px}
.quick-actions {grid-area:actions;display:block;margin:0;padding:0;background:transparent;border:0}
.quick-actions h2 {font-size:1rem;font-weight:500;margin-bottom:14px;color:var(--text2)}
.quick-actions-primary {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.qa-btn {padding:10px 14px;font-size:.9375rem;font-weight:600;gap:10px;border:1px solid var(--border);border-radius:12px;box-shadow:none;line-height:1.3;background:var(--surface);color:var(--text);min-height:44px}
.qa-btn:hover,.qa-btn:active {transform:none;box-shadow:none;background:var(--surface);border-color:var(--primary)}
.qa-ico {background:transparent!important;color:var(--text2)!important;width:22px;height:24px;border-radius:0;font-size:1rem}
.qa-sub {display:none}
.quick-actions-primary .qa-btn {--tile-color:#19784f;--tile-border:#bdddcf;display:flex;flex-direction:column;justify-content:center;min-height:148px;padding:22px 14px;gap:18px;border:1px solid var(--tile-border);border-radius:20px;box-shadow:0 2px 3px #18232d09;text-align:center}
.quick-actions-primary .qa-btn:nth-child(2) {--tile-color:#245b9f;--tile-border:#c2d4ed}
.quick-actions-primary .qa-btn:nth-child(3) {--tile-color:#465767;--tile-border:#cbd2d9}
.quick-actions-primary .qa-btn:nth-child(4) {--tile-color:#aa6c11;--tile-border:#e8d6b7}
.quick-actions-primary .qa-btn:nth-child(1) {background:var(--tint-green)}
.quick-actions-primary .qa-btn:nth-child(2) {background:var(--tint-blue)}
.quick-actions-primary .qa-btn:nth-child(3) {background:var(--surface2)}
.quick-actions-primary .qa-btn:nth-child(4) {background:var(--tint-amber)}
.quick-actions-primary .qa-txt {order:-1}
.quick-actions-primary .qa-ico {width:44px;height:44px;background:var(--tile-color)!important;color:#fff!important;border-radius:16px;font-size:1.125rem}
.quick-actions-secondary {display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.quick-actions-secondary .qa-btn {background:var(--surface2);font-size:.875rem;font-weight:500;border-color:transparent}
.quick-actions-secondary .qa-btn:hover {background:var(--surface);border-color:var(--border)}
[data-theme=dark] .quick-actions-primary .qa-btn {border-color:var(--border)}
.chart-card {min-width:0;padding:20px;border-radius:16px;box-shadow:none;background:var(--surface)}
.chart-card h4 {font-size:.9375rem;color:var(--text);font-weight:600;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:16px}
#page-dashboard .chart-card h4 {background:var(--tint-blue);margin:-20px -20px 16px;padding:16px 20px;border-radius:16px 16px 0 0}
#page-dashboard .chart-card:nth-child(2) h4 {background:var(--tint-amber)}
.op-bar-item {gap:8px;margin-bottom:14px;flex-wrap:wrap}
.op-bar-item .op-name {width:100%;font-size:.875rem;color:var(--text2);font-weight:400}
.op-bar-wrap {height:7px;border-radius:2px;background:var(--surface2)}
.op-bar-fill {border-radius:2px}
.op-bar-item .op-count {font-size:.875rem;color:var(--text);font-weight:600}
.scad-item {padding:10px 0;border-color:var(--border);flex-wrap:wrap}
.scad-item .scad-client {font-size:.9375rem;color:var(--text)}
.scad-item .scad-meta {font-size:.8125rem;color:var(--text2)}
.scad-item .scad-date {font-size:.875rem}
.scad-item .scad-dot {width:6px;height:6px}

/* Elenchi: titoli leggibili, righe tranquille e importi allineati. */
.table-card {border-radius:16px;box-shadow:none}
.table-card-header {padding:16px 20px;background:var(--section-tint)}
th,[data-theme=dark] table th {background:var(--section-tint)}
.table-card-header h3 {font-size:1rem;font-weight:600;letter-spacing:0}
th,#clienti-table th {font-size:.875rem;font-weight:600;letter-spacing:0;text-transform:none;padding:12px 14px;border-bottom-width:1px}
td,#clienti-table td {font-size:.9375rem;padding:13px 14px;line-height:1.4}
#clienti-table td strong {font-size:.9375rem;font-weight:600}
td strong {font-weight:600}
tbody tr:hover td {background:var(--primary-light)!important;box-shadow:none}
tbody tr:hover td:first-child {box-shadow:inset 3px 0 var(--primary)}
.badge,#clienti-table .badge,.stock-badge,.pag-badge {font-size:.8125rem;font-weight:600;border-radius:6px;padding:3px 8px}
.cons-badge,.alert-rinnovo-badge {font-size:.8125rem;font-weight:600}
.badge-- {color:var(--text2);background:var(--surface2)}
.pagination {padding:12px;margin:0;flex-wrap:wrap}
.pagination:empty {display:none}
.page-btn {border-radius:10px;border-width:1px;min-width:36px;height:36px;font-size:.875rem}
.filters-bar {padding:16px;background:var(--section-tint);border:1px solid var(--border);border-radius:16px;align-items:center;gap:10px;margin-bottom:16px}
.filters-bar .form-control {min-width:130px}
.filters-bar .topbar-search {margin-left:0;min-width:180px;flex:1}
.filters-bar .topbar-search input {width:100%}
.filters-bar > div {min-width:0}
.filters-bar > div > span {font-size:.875rem!important;font-weight:500!important}
.filters-bar .btn:hover i {transform:none}
.btn {font-size:.9375rem;font-weight:600;border-radius:10px;min-height:40px;padding:8px 14px;justify-content:center}
.btn-sm {font-size:.875rem;min-height:34px;padding:5px 10px}
.btn-xs,#clienti-table .btn-xs {font-size:.8125rem;padding:5px 8px;min-height:32px;border-radius:6px}
.btn-ghost {border-width:1px;color:var(--text2)}
.btn-ghost:hover {background:var(--surface2)}
[data-theme=dark] .btn-primary {color:#142333}

/* Moduli: etichette normali, campi netti e sezioni senza decorazioni. */
.modal-overlay {background:#17243180;backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .15s,visibility .15s}
.modal {background:var(--surface);color:var(--text);border-radius:20px;box-shadow:0 16px 64px #0003;transform:none;transition:none}
.modal-overlay.open .modal {animation:none;transform:none}
.modal-header {background:var(--surface);border-radius:20px 20px 0 0;padding:20px 24px;z-index:5}
.modal-header h3 {font-size:1.125rem;font-weight:600}
.modal-footer {background:var(--surface2);border-radius:0 0 20px 20px}
.modal-close {width:36px;height:36px;border-radius:10px}
label.form-label,.form-group label {font-size:.875rem;color:var(--text);text-transform:none;letter-spacing:0;font-weight:600;margin-bottom:6px}
.form-control,.form-group input {font-size:1rem;border-width:1px;border-radius:10px;min-height:42px;background-color:var(--surface);color:var(--text);padding:9px 12px}
.form-control:focus,.form-group input:focus {background-color:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.form-control:disabled {background-color:var(--surface2);color:var(--text2)}
.form-hint {font-size:.8125rem;color:var(--text2);margin-top:5px}
.form-row {gap:16px;margin-bottom:18px}
.service-option {margin:20px 0;background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:16px}
.service-option-header {display:flex;align-items:center;justify-content:space-between;gap:16px}
.service-option h4 {font-size:1rem;font-weight:600;color:var(--text)}
.service-option p {font-size:.875rem;margin-top:4px;color:var(--text2)}
.service-switch {display:flex;align-items:center;gap:8px;padding:8px;flex-shrink:0;cursor:pointer;border-radius:10px}
.service-switch:focus-within {outline:3px solid var(--primary);outline-offset:2px}
.service-switch > span {color:var(--text)!important;font-size:.875rem!important}
#c-add-contratto:checked + #c-toggle-track,#cv-toggle:checked + #cv-toggle-track {background:var(--primary)!important}
.service-option #cv-form {border-color:var(--border)!important}
.service-option .cr-row {background:var(--surface)!important;border-color:var(--border)!important;border-radius:10px!important;margin-top:14px}
.modal-body h4 {color:var(--text)!important}
[data-theme=dark] .modal-body [style*="color:#1e293b"],
[data-theme=dark] .modal-body [style*="color:#374151"],
[data-theme=dark] .modal-body [style*="color:#1e3a8a"],
[data-theme=dark] .modal-body [style*="color:#475569"] {color:var(--text)!important}
[data-theme=dark] .modal-body [style*="color:#64748b"],
[data-theme=dark] .modal-body [style*="color:#94a3b8"] {color:var(--text2)!important}
[data-theme=dark] .modal-body [style*="background:#f8fafc"] {background:var(--surface2)!important;border-color:var(--border)!important}
.tabs,[data-theme=dark] .tabs {background:transparent;border-bottom:1px solid var(--border);border-radius:0;padding:0;gap:20px;max-width:100%;overflow-x:auto}
.tab-btn {font-size:.9375rem;padding:10px 2px;border-radius:0;border-bottom:2px solid transparent;white-space:nowrap}
.tab-btn.active,[data-theme=dark] .tab-btn.active {box-shadow:none;background:transparent;border-bottom-color:var(--primary)}
.product-card,.form-card {border-radius:16px;box-shadow:none;background:var(--surface)}
.product-card:hover,.form-card:hover {transform:none;box-shadow:none;border-color:var(--primary)}
.form-card-footer,.compenso-box {background:var(--surface2);border-color:var(--border)}
.product-name {font-size:1rem;font-weight:600}
.product-brand,.product-stock {font-size:.875rem}
.empty-state {color:var(--text2);padding:40px 20px}
.empty-state i {font-size:28px;opacity:.65}
.empty-state p {font-size:1rem;font-weight:400}
.empty-state .empty-cta:hover {transform:none}
.toast {background:var(--surface);color:var(--text);font-size:.9375rem;border-radius:10px;box-shadow:var(--shadow-md)}
.gs-results {border-radius:16px;box-shadow:var(--shadow-md)}
.gs-t {font-size:.9375rem}.gs-s,.gs-empty {font-size:.875rem}.gs-group,.gs-hint {font-size:.75rem}

/* Accesso con la stessa identità del gestionale. */
#login-overlay {background:var(--nav-bg);animation:none;padding:24px;border-top:6px solid #2699cf}
.login-box {border:1px solid var(--border);border-radius:20px;box-shadow:0 12px 40px #202c3810;padding:40px;animation:none;background:var(--surface)}
.login-logo {text-align:left;margin-bottom:28px;border:0;padding:0}
.login-brand-logo {width:128px;margin-bottom:20px}
.login-logo h1 {color:var(--text);font-size:1.625rem;font-weight:600}
.login-logo p {color:var(--text2);font-size:1rem}
.btn-login {background:var(--primary);box-shadow:none;border-radius:10px;font-size:1rem;font-weight:600;letter-spacing:0}
.btn-login:hover {background:var(--primary-dark);transform:none;box-shadow:none}
[data-theme=dark] .btn-login {color:#142333}

@media(min-width:769px) and (max-width:1200px) {
  :root {--sidebar-w:210px}
  .sidebar-header .brand {flex-direction:column;align-items:flex-start;gap:10px}
  .content {padding:22px}
  .topbar {padding:0 22px;gap:10px}
  .topbar-search input {width:230px}
  #page-dashboard.active {grid-template-columns:minmax(0,1fr);gap:20px}
  #page-dashboard > .charts-grid {grid-template-columns:1fr}
  .stats-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px) {
  .sidebar {height:100vh;height:100dvh;box-shadow:12px 0 32px #17243120}
  .topbar {padding:0 12px;gap:8px;min-height:60px}
  .topbar-title {font-size:.9375rem}
  .topbar-actions {gap:6px}
  .topbar #topbar-add-btn {padding:8px 10px;font-size:.875rem}
  .btn-icon {width:36px;height:40px}
  .content {padding:18px 12px}
  #page-dashboard.active {grid-template-columns:minmax(0,1fr);grid-template-areas:'heading' 'actions' 'stats' 'charts' 'recent';gap:16px}
  .workspace-heading h1 {font-size:1.5rem}
  .workspace-heading p {font-size:.9375rem}
  .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat-card {padding:14px 10px;gap:8px}
  .stat-val {font-size:1.5rem}
  .stat-lbl {font-size:.875rem}
  .stat-icon {width:18px;font-size:.875rem}
  #page-dashboard > .charts-grid {grid-template-columns:1fr}
  .quick-actions-primary {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .quick-actions-primary .qa-btn {min-height:130px;padding:18px 10px}
  .quick-actions-secondary {gap:8px}
  .quick-actions h2 {grid-column:1/-1;margin:0 0 6px}
  .qa-btn {font-size:.875rem;gap:8px;padding:10px 6px}
  .qa-ico {width:18px;flex-shrink:0}
  .filters-bar {padding:12px}
  .filters-bar .form-control {min-width:0}
  .filters-bar > div {flex-wrap:wrap;max-width:100%}
  th,#clienti-table th {font-size:.875rem;padding:10px 12px}
  td,#clienti-table td {font-size:.9375rem;padding:12px}
  td .btn-xs,#clienti-table .btn-xs {min-width:36px;min-height:40px}
  .modal,.modal-sm,.modal-md,.modal-lg,.modal-xl {max-height:94vh;max-height:94dvh;border-radius:22px 22px 0 0}
  .modal-header {border-radius:22px 22px 0 0;padding:16px}
  .modal-body {padding:20px}
  .modal-footer {border-radius:0;padding:12px 16px;flex-wrap:wrap}
  .form-row.cols-2,.form-row.cols-3 {grid-template-columns:minmax(0,1fr)}
  .login-box {padding:28px 24px}
  #toast-container {right:12px;left:12px;top:12px}
  .toast {min-width:0;max-width:100%}
}
@media(max-width:360px) {
  .topbar-title {font-size:.875rem}
  .topbar-actions {gap:4px}
  .topbar {gap:5px;padding:0 8px}
  .btn-icon {width:32px}
}
/* Feedback al puntatore: nessun movimento automatico né spostamento del layout. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .qa-btn,.stat-card,.product-card,.form-card,.chart-card,.table-card {transition:transform .18s ease-out}
  .qa-ico,.nav-icon {transition:transform .18s ease-out}
  .qa-btn:hover,.stat-card:hover,.stat-card.clickable:hover,[data-theme=dark] .stat-card:hover,.product-card:hover,.form-card:hover {transform:translateY(-4px);box-shadow:0 8px 18px #162c4017}
  .chart-card:hover,.table-card:hover {transform:translateY(-2px);box-shadow:0 5px 14px #162c4010}
  .qa-btn:hover .qa-ico {transform:scale(1.06)}
  .nav-item:hover .nav-icon {transform:translateX(2px)}
  .qa-btn:active,.stat-card.clickable:active {transform:translateY(-1px)}
}
.qa-btn:focus-visible {outline:3px solid var(--primary);outline-offset:4px}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}