.bandwidth-manager { overflow: visible; padding: 20px; }
.bandwidth-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 4px solid #15c9d6; }
.bandwidth-toolbar > label { display: flex; align-items: center; gap: 8px; color: #30494f; font-weight: 650; }
.bandwidth-toolbar > label:last-child { margin-left: auto; }
.bandwidth-toolbar select,
.bandwidth-toolbar input { min-height: 40px; padding: 7px 10px; border: 1px solid #bccdd1; border-radius: 4px; background: #fff; color: #263f46; font: inherit; }
.bandwidth-manage { position: relative; }
.bandwidth-manage > .button { min-height: 42px; background: #10a94e; border-color: #078f3e; color: #fff; font-weight: 850; }
.bandwidth-manage > div { position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; min-width: 270px; overflow: hidden; border: 1px solid #c6d2d4; border-radius: 3px; background: #fff; box-shadow: 0 10px 24px rgba(20,47,54,.18); }
.bandwidth-manage > div button { display: block; width: 100%; padding: 13px 18px; border: 0; border-bottom: 1px solid #e2e9ea; background: #fff; color: #283f45; text-align: left; font: inherit; cursor: pointer; }
.bandwidth-manage > div button:hover { background: #f0f8f8; }
.bandwidth-table { min-width: 760px; }
.bandwidth-table th:first-child,
.bandwidth-table td:first-child { width: 42px; text-align: center; }
.bandwidth-table th:last-child,
.bandwidth-table td:last-child { width: 130px; }
.bandwidth-name { display: block; color: #243e46; }
.bandwidth-name + small { display: block; margin-top: 5px; color: #6d858c; font-weight: 650; }
.bandwidth-modal-backdrop { z-index: 100; overflow-y: auto; }
.bandwidth-modal { width: min(700px, calc(100vw - 28px)); }
.bandwidth-modal .modal-body { display: grid; gap: 18px; }
.bandwidth-modal .field { display: grid; gap: 7px; }
.bandwidth-modal label > span,
.bandwidth-modal .field > label { color: #304b52; font-weight: 750; }
.bandwidth-modal em { color: #0fb05a; font-style: normal; }
.bandwidth-modal input,
.bandwidth-modal select { width: 100%; min-height: 48px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c4d4d7; border-radius: 3px; background: #fff; color: #263f46; font: inherit; }
.bandwidth-rate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.bandwidth-rate-row label { display: grid; gap: 7px; }
.bandwidth-rate-row label:first-child input { border-radius: 3px 0 0 3px; }
.bandwidth-rate-row label:last-child select { border-radius: 0 3px 3px 0; }

@media (max-width: 700px) {
  .bandwidth-toolbar { align-items: stretch; flex-direction: column; }
  .bandwidth-toolbar > label:last-child { margin-left: 0; }
  .bandwidth-toolbar input { flex: 1; min-width: 0; }
  .bandwidth-rate-row { grid-template-columns: 1.35fr .85fr; }
}