.customer-directory-toolbar .agent-usage-open{height:32px;padding:0 12px;border:1px solid #e5d0bf;border-radius:9px;background:#fff8f1;color:#a65130;white-space:nowrap;font-size:12px;box-shadow:none}
.customer-directory-toolbar .agent-usage-open:disabled{opacity:.5;cursor:default}
.agent-usage-dialog{margin:auto;inset:0;text-align:left}
.agent-usage-dialog #agent-usage-customer{min-width:0;max-width:240px;flex:1;border:1px solid #e4d8ce;background:#fffaf5;border-radius:8px;padding:7px 10px;font-size:12px;color:#735d4d;height:34px}
.agent-usage-dialog .traffic-usage-controls{flex-wrap:nowrap}
.agent-usage-dialog table{min-width:0}
.agent-usage-dialog .traffic-usage-content{box-shadow:none}
@media(max-width:520px){.agent-usage-dialog #agent-usage-customer{max-width:148px;padding:7px 6px}.agent-usage-dialog .traffic-usage-ranges button{padding:7px 9px}.agent-usage-dialog .traffic-usage-controls{gap:5px}.customer-directory-toolbar .agent-usage-open{padding:0 8px}}

.customer-list-head .customer-directory-toolbar{grid-template-columns:minmax(130px,190px) 94px 100px}
.agent-usage-overview{margin:0 0 16px;padding:12px 14px;border:1px solid #eadfd5;border-radius:12px;background:#fffaf5}
.agent-usage-overview .usage-overview-heading{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.agent-usage-overview button{box-shadow:none;background:transparent;color:#805b45;border:0;padding:0;font-size:12px;white-space:nowrap;min-height:30px}
.agent-usage-overview #usage-overview-toggle{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px}
.agent-usage-overview #usage-overview-total{font-size:15px;color:#ac512f}
.agent-usage-overview #traffic-usage-open{margin-left:auto;padding:0 10px;border-radius:7px;background:#f5e8dc;flex:0 0 auto;width:auto}
.agent-usage-overview #traffic-usage-open:disabled{opacity:.5}
.usage-overview-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;max-height:156px;overflow:auto}
.agent-usage-overview .usage-overview-row{display:grid;grid-template-columns:minmax(70px,110px) minmax(20px,1fr) 75px;gap:10px;align-items:center;text-align:left;width:100%;padding:2px 0}
.usage-overview-row .usage-overview-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#665549}
.usage-overview-track{height:7px;background:#efe6df;border-radius:9px;overflow:hidden}
.usage-overview-fill{display:block;height:100%;background:#df926a;border-radius:9px}
.usage-overview-value{text-align:right;font-size:11px;color:#805b45}
.agent-usage-overview button:hover:not(:disabled){color:#b54f29}
.agent-usage-overview button:focus-visible{outline:2px solid #ce7b4f;outline-offset:3px}
#usage-overview-status:empty{display:none}#usage-overview-status{font-size:12px;color:#805b45;padding:4px 0}
.agent-usage-overview [hidden]{display:none!important}
@media(max-width:650px){.usage-overview-bars{grid-template-columns:1fr;max-height:174px}.agent-usage-overview{padding:10px}.customer-list-head .customer-directory-toolbar{grid-template-columns:minmax(0,1fr) 86px 92px}.agent-usage-overview .usage-overview-heading{gap:8px}}
@keyframes usageOverviewGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}.usage-overview-fill{transform-origin:left;animation:usageOverviewGrow .34s ease-out}@media(prefers-reduced-motion:reduce){.usage-overview-fill{animation:none}}

.customer-list-panel .customer-list-head{position:relative;gap:12px}
.customer-list-head .agent-usage-overview{position:static;margin:0;padding:0;border:0;background:none;flex:0 0 auto}
.customer-list-head .usage-overview-heading{margin:0;gap:0}
.customer-list-head #usage-overview-toggle{font-size:12px;gap:8px;padding:0 9px;min-height:32px;border-radius:7px;background:#f7eee7}
.customer-list-head #usage-overview-total{font-size:12px;font-weight:600}
.customer-list-head #usage-overview-body{position:absolute;right:0;top:calc(100% + 8px);z-index:40;box-sizing:border-box;width:min(560px,100%);padding:14px;background:#fffcf8;border:1px solid #e7d9cc;border-radius:12px;box-shadow:0 10px 32px #4a342326}
.usage-overview-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:12px;color:#725a47}
.customer-list-head .usage-overview-bars{grid-template-columns:1fr;max-height:246px}
.customer-list-head .usage-overview-row{grid-template-columns:minmax(90px,130px) minmax(30px,1fr) 75px}
.customer-list-head #usage-overview-retry{margin-top:4px;text-decoration:underline}
@media(max-width:650px){.customer-list-head .agent-usage-overview{margin-left:auto}.customer-list-head #usage-overview-body{width:100%}.customer-list-head .usage-overview-row{grid-template-columns:90px minmax(20px,1fr) 70px;gap:6px}}
.customer-list-panel .customer-list-head .agent-usage-overview button{box-shadow:none!important;background-image:none!important;font-weight:400}.customer-list-panel .customer-list-head .agent-usage-overview .usage-overview-row{background:transparent!important;color:#665549!important;border:0!important;border-radius:4px!important;min-height:26px;height:26px;padding:0!important;font-weight:400!important}.customer-list-panel .customer-list-head .agent-usage-overview .usage-overview-row:hover:not(:disabled){background:#f6ece3!important}.customer-list-panel .customer-list-head .agent-usage-overview #traffic-usage-open{background:#f5e8dc!important;color:#805b45!important;padding:0 10px!important;border:0!important;min-height:28px}.customer-list-panel .customer-list-head #usage-overview-toggle{font-weight:500;background:#f7eee7!important;color:#805b45!important}