/* Shared data-list skin, matched to developer-glass.css.
 * Screen-only: printable invoices retain their document styling.
 * No per-row backdrop blur, no JS hooks, and no overflow clipping on menu hosts.
 */
@media screen {
#whmcs-tw-app-shell.hx-shell-glass #main-body  {
  --hx-table-surface: var(--hx-page-surface, rgba(20, 25, 34, .96));
  --hx-table-line: rgba(228, 239, 255, .065);
  --hx-table-edge: rgba(226, 237, 255, .13);
  --hx-table-text: #e0e6f0;
  --hx-table-muted: var(--hx-page-muted, #b1bbcc);
  --hx-table-font: var(--hx-page-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif);
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-panel-outline,
#whmcs-tw-app-shell.hx-shell-glass #main-body .table-container,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-support-table-wrap,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-tab-panel-card:has(.hx-pd-network-table, .hx-pd-data-rows__head) {
  border: 1px solid var(--hx-table-edge);
  border-radius: 22px;
  background: var(--hx-table-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 36px rgba(0,0,0,.16);
  overflow: visible;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .card:has(.table-container) {
  background: transparent; border: 0; box-shadow: none;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .card:has(.table-container) > .card-body {
  padding: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-panel-outline .hx-pd-tab-panel-content {
  padding: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-panel-outline .hx-pd-tab-panel-card {
  border: 0; border-radius: inherit; background: transparent; box-shadow: none;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-panel-outline .hx-pd-network-table-wrap {
  border-radius: 22px 22px 0 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) {
  width: 100%;
  border: 0; border-radius: 0; box-shadow: none;
  border-collapse: separate; border-spacing: 0;
  margin: 0 !important;
  background: var(--hx-table-surface) !important;
  color: var(--hx-table-text);
  font-family: var(--hx-table-font) !important;
  font-size: 13px; line-height: 1.5;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > thead,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tfoot,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > thead > tr,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tfoot > tr {
  background: transparent !important;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > :is(thead, tbody) > tr > th,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr > td,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tfoot > tr > td {
  padding: 16px 24px;
  box-sizing: border-box;
  vertical-align: middle;
  border: 0; border-bottom: 1px solid var(--hx-table-line);
  font-family: var(--hx-table-font) !important;
  font-size: 13px; line-height: 1.5;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > :is(thead, tbody) > tr > th {
  height: 46px;
  padding-top: 12px; padding-bottom: 12px;
  background: rgba(255,255,255,.025) !important;
  color: #b8c3d4 !important;
  font-size: 11px !important; font-weight: 600; letter-spacing: .02em;
  text-transform: none; text-align: left;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > :is(thead, tbody) > tr:first-child > th:first-child {
  border-top-left-radius: 20px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > :is(thead, tbody) > tr:first-child > th:last-child {
  border-top-right-radius: 20px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr > td,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tfoot > tr > td {
  background: transparent !important; color: var(--hx-table-text); font-size: 13px !important; font-weight: 400;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr {
  transition: background-color .16s ease;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr:hover,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr:focus-within {
  background: rgba(207,227,255,.035) !important;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr.selected,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr.active {
  background: rgba(8,117,245,.13) !important;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr:last-child > td {
  border-bottom: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr:last-child > td:first-child {
  border-bottom-left-radius: 20px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr:last-child > td:last-child {
  border-bottom-right-radius: 20px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) th.sorting,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) th.sorting_asc,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) th.sorting_desc {
  padding-right: 30px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) code,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) .text-muted {
  color: var(--hx-table-muted) !important;
}
/* Status adapters cover native WHMCS, generated lists and Developer rows.
 * Keep state labels readable without the old button/pill chrome.
 */
#whmcs-tw-app-shell.hx-shell-glass #main-body table :is(.hx-table-status, .hx-servers-status, .status, .label-bordered, .hx-dev-status, .hx-dev-key-status) {
  --hx-table-status-color: var(--hx-table-muted);
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; min-height: 0; margin: 0; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  color: var(--hx-table-status-color) !important;
  font-family: var(--hx-table-font) !important; font-size: 13px !important;
  font-weight: 500 !important; line-height: 20px !important;
  letter-spacing: normal; text-transform: none; white-space: nowrap;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body table :is(.hx-servers-status--active, .hx-dev-status--active, .hx-dev-key-status--active, .status-active, .status-open, .status-completed, .status-paid, .status-accepted, .label-bordered.label-success) {
  --hx-table-status-color: #91eab1;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body table :is(.hx-table-status--warning, .hx-servers-status--deploying, .hx-servers-status--cancelling, .hx-dev-key-status--expiring, .status-pending, .status-pending-transfer, .status-pending-registration, .status-inprogress, .status-onhold, .status-payment-pending, .status-customer-reply, .status-refunded, .status-grace, .status-redemption, .label-bordered.label-warning, .label-bordered.label-warning-dark) {
  --hx-table-status-color: #f0cf81;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body table :is(.hx-servers-status--suspended, .hx-dev-status--error, .hx-dev-key-status--expired, .status-suspended, .status-expired, .status-unpaid, .status-fraud, .status-collections, .label-bordered.label-danger) {
  --hx-table-status-color: #ffaaa9;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body table :is(.status-answered, .status-delivered) {
  --hx-table-status-color: #a8ceff;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body table .hx-servers-status .hx-system-status-text {
  color: inherit !important; font: inherit !important;
}
/* Remove inconsistent decorative icons; retain spinners and key lifetime progress. */
#whmcs-tw-app-shell.hx-shell-glass #main-body table .hx-servers-status :is(.hx-system-status-dot, .hx-system-status-icon:not(:has(.fa-spin))),
#whmcs-tw-app-shell.hx-shell-glass #main-body table .label-bordered > .dot,
#whmcs-tw-app-shell.hx-shell-glass #main-body table .hx-dev-key-status > .hx-dev-status-dot {
  display: none;
}
/* Row actions keep their button semantics/handlers but use a quiet link treatment.
 * Scope to data rows so toolbar, pagination and confirmation buttons keep their shape.
 */
#whmcs-tw-app-shell.hx-shell-glass #main-body :where(table, #CPROWS) :is(.btn, .hx-servers-manage-btn, .hx-servers-renew-btn, .hx-dev-icon-btn, .hx-table-action) {
  --hx-table-action-color: #a8ceff;
  --hx-btn-bg: transparent !important; --hx-btn-hover: transparent !important;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: auto; height: auto; min-width: 24px; min-height: 32px; margin: 0; padding: 6px 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  color: var(--hx-table-action-color) !important; -webkit-text-fill-color: currentColor;
  font-family: var(--hx-table-font) !important; font-size: 13px !important;
  font-weight: 500 !important; line-height: 20px !important;
  letter-spacing: normal; text-transform: none; text-decoration: none; white-space: nowrap;
  vertical-align: middle; transform: none; transition: color .16s ease;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :where(table, #CPROWS) :is(.btn-danger, .btn-delete, .btn-cancel-invite, .hx-dev-icon-btn--danger) {
  --hx-table-action-color: #ffaaa9;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :where(table, #CPROWS) :is(.btn, .hx-servers-manage-btn, .hx-servers-renew-btn, .hx-dev-icon-btn, .hx-table-action):not(:disabled, .disabled, .is-disabled, [aria-disabled="true"]):is(:hover, :focus-visible) {
  text-decoration: underline; text-underline-offset: 3px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :where(table, #CPROWS) :is(.btn, .hx-servers-manage-btn, .hx-servers-renew-btn, .hx-dev-icon-btn, .hx-table-action):focus-visible {
  outline: 2px solid #9bcaff !important; outline-offset: 3px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :where(table, #CPROWS) :is(.btn, .hx-servers-manage-btn, .hx-servers-renew-btn, .hx-dev-icon-btn, .hx-table-action):is(:disabled, .disabled, .is-disabled, [aria-disabled="true"]) {
  opacity: .45; pointer-events: none; cursor: default; text-decoration: none;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body table :is(.hx-servers-manage-btn, .hx-servers-renew-btn) :is(.hx-system-status-text, .hx-system-status-icon) {
  color: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit;
}
/* Center the icon glyph independently of the label's 20px text line. */
#whmcs-tw-app-shell.hx-shell-glass #main-body table :is(.hx-servers-manage-btn, .hx-servers-renew-btn) .hx-system-status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1em; height: 20px; line-height: 1;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body table :is(.hx-servers-manage-btn, .hx-servers-renew-btn) .hx-system-status-icon > i {
  display: block; line-height: 1;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :where(table, #CPROWS) :is(.hx-table-actions, .hx-servers-action-wrap, .hx-dev-actions, [id="CPACTION"]) {
  display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 0; margin: 0;
}
/* Empty pseudo-elements provide visual dividers without extra spoken punctuation. */
#whmcs-tw-app-shell.hx-shell-glass #main-body :where(table, #CPROWS) :is(.hx-table-actions, .hx-servers-action-wrap, .hx-dev-actions, [id="CPACTION"]) > :is(a, button) + :is(a, button) {
  margin-left: 12px; padding-left: 12px !important;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :where(table, #CPROWS) :is(.hx-table-actions, .hx-servers-action-wrap, .hx-dev-actions, [id="CPACTION"]) > :is(a, button) + :is(a, button)::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px;
  background: var(--hx-table-edge); transform: translateY(-50%); pointer-events: none;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_wrapper,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__footer,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__search,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-data-rows__head,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(#FULLLOGS, #CPROWS) {
  font-family: var(--hx-table-font) !important; font-size: 13px; color: var(--hx-table-text);
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_wrapper .listtable {
  border: 0; background: transparent; overflow: visible;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__footer {
  padding: 16px 24px; margin: 0;
  border-top: 1px solid var(--hx-table-line); border-radius: 0 0 22px 22px;
  background: rgba(255,255,255,.015); overflow: visible;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__footer > .row {
  margin: 0; gap: 12px 24px;
}
/* The Servers frame owns its height; extra grid space belongs above the footer. */
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-table-panel {
  display: flex; flex-direction: column; min-width: 0;
  height: var(--hx-server-panel-height, auto);
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-table-panel .hx-servers-list-card,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-table-panel .hx-pd-tab-panel-content {
  display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-table-panel .hx-pd-network-table-wrap {
  flex: 1 1 auto; min-height: 0; overflow: auto;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-table-panel .hx-servers-datatable__footer {
  flex: 0 0 auto; border-radius: 0; padding-bottom: 12px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-table-panel .hx-table-footer__pagination {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-table-panel #paginationNav { justify-content: flex-end; }
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-bar {
  display: flex; flex: 0 0 36px; align-items: stretch; justify-content: center;
  border-radius: 0 0 22px 22px; border-top: 1px solid var(--hx-table-line);
  color: var(--hx-table-muted); font: 11px/1.2 var(--hx-table-font);
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-bar[hidden] { display: none; }
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-handle {
  display: flex; flex: 1 1 auto; min-width: 0; gap: 10px; align-items: center; justify-content: center;
  cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-grip {
  width: 28px; height: 5px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .65;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-step {
  flex: 0 0 44px; border: 0; padding: 0; background: transparent; color: inherit; font: 18px/1 var(--hx-table-font);
  cursor: pointer; border-radius: inherit;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-step:disabled,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-handle[aria-disabled="true"] { opacity: .45; cursor: default; }
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-handle:hover,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-step:not(:disabled):hover,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-table-panel.is-resizing .hx-server-resize-bar { color: #a8ceff; background: rgba(105,170,255,.06); }
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-bar :focus-visible { outline: 2px solid #a8ceff; outline-offset: -3px; }
body.hx-server-table-dragging { user-select: none; -webkit-user-select: none; cursor: ns-resize; }
body.hx-server-table-dragging #main-body { overflow-anchor: none; }
@media (any-pointer: coarse) {
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-server-resize-bar { flex-basis: 44px; }
}
/* Renewal's inset table leaves a bottom strip for summary and controls.
   Keep this variant scoped to renewal while the shared table skin stays intact. */
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-panel-outline.hx-sr-renewal-panel {
  --hx-sr-panel-inset: 6px;
  --hx-sr-frame-tint: rgba(24, 31, 43, .72);
  --hx-sr-inset-tint: rgba(7, 12, 20, .20);
  /* Separate tracks reserve the scroller's full height, including its scrollbar. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  /* Absorb grid-height rounding in the table area, keeping the footer snug. */
  grid-template-rows: minmax(0, 1fr) auto;
  padding: var(--hx-sr-panel-inset);
  border-color: rgba(217,233,255,.20);
  background: linear-gradient(155deg, rgba(255,255,255,.045), transparent 55%), var(--hx-sr-frame-tint) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.035), 0 12px 32px rgba(0,0,0,.16);
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-panel .hx-sr-renewal-panel__table {
  margin: 0; border: 1px solid var(--hx-table-edge); border-radius: 16px;
  overflow-x: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 60%), var(--hx-sr-inset-tint) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 2px 8px rgba(0,0,0,.10);
}
/* The wrapper supplies the tint; a second table fill would make it opaque. */
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-panel .hx-sr-renewal-table {
  background: transparent !important;
  height: 100%;
}
/* Blur only the outer frame once, keeping the inset and table rows lightweight. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-panel-outline.hx-sr-renewal-panel {
    --hx-sr-frame-tint: rgba(24, 31, 43, .16);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    backdrop-filter: blur(10px) saturate(135%);
  }
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-panel .hx-sr-renewal-table :is(th, td) {
  border-radius: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-panel .hx-sr-renewal-footer {
  /* The frame supplies the bottom inset; match it in the gap above the actions. */
  padding: var(--hx-sr-panel-inset) 0 0; border: 0; border-radius: 0; background: transparent;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-footer__form {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 0;
  flex: 1 1 100%; width: 100%; min-width: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-panel__subtotal {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 0 var(--hx-sr-subtotal-offset, 0px); white-space: nowrap;
  color: var(--hx-table-muted); font-size: 13px; line-height: 20px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-panel__subtotal strong {
  color: var(--hx-table-text); font-weight: 600; font-variant-numeric: tabular-nums;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-footer__form > .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; min-height: 40px; margin: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-footer__form > .btn > svg {
  display: block; flex-shrink: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-sr-service-link, .hx-sr-history-link) {
  display: inline-flex; align-items: center; gap: 8px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-service-link {
  gap: 6px; color: #a8ceff; white-space: nowrap;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(.hx-sr-service-link, .hx-sr-history-link) > svg {
  display: block; flex-shrink: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-table-footer__info {
  display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-width: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-table-footer__pagination {
  flex: 0 0 auto; margin-left: auto;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .pagination-container :is(.table-controls, .page-size-selector, .hx-page-size-trigger, .hx-page-size-suffix, .page-size-selector label),
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-table-footer__info p {
  margin: 0; font-family: var(--hx-table-font); font-size: 12px; line-height: 20px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-table-footer__info :is(.table-controls, .page-size-selector) {
  flex-wrap: nowrap; justify-content: flex-start;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_filter,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_info,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_length,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate {
  padding: 16px 24px; color: var(--hx-table-muted) !important; font-size: 12px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_filter label,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_length label {
  margin: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_filter input,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_length select,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-size-trigger,
#whmcs-tw-app-shell.hx-shell-glass #main-body .pagination-container .page-link,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .paginate_button:not(.page-item),
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .page-link {
  min-height: 32px;
  border: 1px solid rgba(239,247,255,.20) !important; border-radius: 999px !important;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02)), #303949 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 3px 9px rgba(0,0,0,.14);
  color: #f5f8ff !important; font-family: var(--hx-table-font); font-size: 12px;
}
/* The search field and toolbar actions share an outer height, including borders. */
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__search .input-group {
  box-sizing: border-box; height: var(--hx-toolbar-control-height, 50px); flex-wrap: nowrap; align-items: stretch;
  border: 1px solid var(--hx-table-edge) !important; border-radius: 999px !important;
  background: var(--hx-table-surface) !important; color: var(--hx-table-text); box-shadow: 0 3px 9px rgba(0,0,0,.14);
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__search .input-group:focus-within {
  outline: 2px solid #9bcaff; outline-offset: 3px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__search .input-group-text,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__search .form-control {
  height: 100%; min-height: 0; min-width: 0; padding: 0 17px;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--hx-table-text) !important; -webkit-text-fill-color: currentColor; font-family: var(--hx-table-font); font-size: 13px; line-height: 20px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__search .input-group-text {
  border-radius: 0 999px 999px 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__search .form-control {
  border-radius: 999px 0 0 999px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__search .form-control::placeholder {
  color: var(--hx-table-muted) !important; opacity: 1; -webkit-text-fill-color: currentColor;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-table-search-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-tag-filter-btn {
  min-height: calc(var(--hx-toolbar-control-height, 50px) - 12px); max-width: 55%; margin: 0; padding: 5px 12px;
  border: 1px solid var(--hx-table-edge); border-radius: 999px;
  background: rgba(255,255,255,.055); color: var(--hx-table-text); font-family: var(--hx-table-font); font-size: 13px; line-height: 20px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-tag-filter-btn:is(:hover, .is-open, .is-filtered) { background: rgba(137,184,248,.15); border-color: #7fa9df; color: #d4e7ff; }
/* The tag menu is portalled to body, outside the table/shell overflow contexts. */
body.hx-body-glass-shell .hx-servers-tag-filter-overlay__panel { border-color: var(--hx-page-edge); border-radius: 14px; background: #202734; font-family: var(--hx-page-font); }
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_filter input::placeholder {
  color: var(--hx-table-muted); opacity: 1;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_filter input {
  box-sizing: border-box; height: var(--hx-toolbar-control-height, 50px); min-height: var(--hx-toolbar-control-height, 50px); max-width: 100%;
  padding: 0 17px; font-size: 13px; line-height: 20px;
  background: var(--hx-table-surface) !important; border-color: var(--hx-table-edge) !important; color: var(--hx-table-text) !important;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_length select {
  padding: 5px 28px 5px 12px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_length select option {
  background: #202734; color: #f5f7fb;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .pagination-container .pagination,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .pagination {
  gap: 6px; flex-wrap: wrap;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .pagination-container .page-link,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .page-link,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .paginate_button:not(.page-item) {
  padding: 5px 13px; margin: 0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .pagination-container .page-item.active .page-link,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .page-item.active .page-link,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .paginate_button.current {
  background: var(--hx-btn-primary-bg) !important; border-color: var(--hx-btn-primary-border) !important; color: #fff !important;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .pagination-container .page-item.disabled .page-link,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .page-item.disabled .page-link,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .paginate_button.disabled {
  opacity: .45; box-shadow: none; cursor: default;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-size-dropdown-menu {
  border: 1px solid rgba(239,247,255,.20); border-radius: 14px; padding: 6px; background: #202734; box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-size-dropdown-menu .dropdown-item {
  border-radius: 8px; color: #e0e6f0;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-size-dropdown-menu .dropdown-item.active,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-size-dropdown-menu .dropdown-item:hover {
  background: rgba(137,184,248,.15); color: #fff;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-pd-data-rows__head {
  min-height: 46px; align-items: center; margin: 0; padding: 12px 0;
  background: rgba(255,255,255,.025); border-bottom: 1px solid var(--hx-table-line);
  color: #b8c3d4; font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(#FULLLOGS, #CPROWS) > .row {
  margin: 0; padding: 16px 0; border-bottom: 1px solid var(--hx-table-line); color: var(--hx-table-text);
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(#FULLLOGS, #CPROWS) > .row:hover {
  background: rgba(207,227,255,.035);
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(#FULLLOGS, #CPROWS) > hr {
  display: none;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(.dataTables_wrapper, .pagination-container, .hx-servers-datatable__search) :is(a,button,input,select):focus-visible {
  outline: 2px solid #9bcaff !important; outline-offset: 3px;
}
@media (max-width: 767.98px) {
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > :is(thead, tbody) > tr > th,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr > td,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tfoot > tr > td {
  padding: 14px 18px;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_filter,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_info,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_length,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate {
  float: none; text-align: left; padding: 12px 18px;
}
}
@media (max-width: 575.98px) {
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-footer__form { flex-direction: column; align-items: stretch; }
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-panel__subtotal { justify-content: flex-end; }
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-footer__form > .btn { width: 100%; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr {
  transition: none;
}
}
@media (prefers-contrast: more) {
#whmcs-tw-app-shell.hx-shell-glass #main-body  {
  --hx-table-line: #626f84; --hx-table-edge: #8999af; --hx-table-muted: #d6e2f3;
}
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-panel-outline.hx-sr-renewal-panel {
  --hx-sr-frame-tint: #171d27;
  --hx-sr-inset-tint: #141922;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-panel-outline.hx-sr-renewal-panel,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-sr-renewal-panel .hx-sr-renewal-panel__table {
  background-image: none !important;
}
}
@media (forced-colors: active) {
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-panel-outline.hx-sr-renewal-panel {
  --hx-sr-frame-tint: Canvas; --hx-sr-inset-tint: Canvas; border-color: CanvasText;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > :is(thead, tbody) > tr > th,
#whmcs-tw-app-shell.hx-shell-glass #main-body :is(table.table, table.table-list, table.dataTable, table.data-driven, table.hx-pd-network-table) > tbody > tr > td {
  background: Canvas !important; color: CanvasText !important; border-bottom-color: CanvasText;
}
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_filter input,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_length select,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-page-size-trigger,
#whmcs-tw-app-shell.hx-shell-glass #main-body .hx-servers-datatable__search .input-group,
#whmcs-tw-app-shell.hx-shell-glass #main-body .pagination-container .page-link,
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .paginate_button:not(.page-item),
#whmcs-tw-app-shell.hx-shell-glass #main-body .dataTables_paginate .page-link {
  background: ButtonFace !important; color: ButtonText !important; border-color: ButtonText !important; box-shadow: none;
}
}
}