/* Cliente Nexo: totales de factura, transacciones y selector de cuenta. */
@media screen {
  body.kl-portal.kl-invoice .invoice-container {
    padding: clamp(16px, 5vw, 60px);
  }
  body.kl-portal.kl-invoice .invoice-container td.total-row {
    background: var(--kl-raised);
    color: var(--kl-text);
    border-color: var(--kl-line);
    font-variant-numeric: tabular-nums;
  }
  body.kl-portal.kl-invoice .invoice-container tbody tr:last-child td.total-row {
    background: var(--kl-field);
    color: var(--kl-cyan);
    border-top: 1px solid var(--kl-line);
    font-weight: 700;
  }
  body.kl-portal.kl-invoice .invoice-container :is(.panel-body, .transactions-container) .table-responsive {
    border-color: var(--kl-line);
    margin-bottom: 0;
  }
  body.kl-portal.kl-invoice .invoice-container .table :is(td, th):last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  body.kl-portal.kl-invoice .invoice-container .transactions-container tbody tr:last-child td {
    background: var(--kl-raised);
    color: var(--kl-text);
  }
  @media (max-width: 575px) {
    body.kl-portal.kl-invoice .invoice-container { margin-inline: 10px; }
    body.kl-portal.kl-invoice .invoice-container .panel-body { padding: 10px; }
    body.kl-portal.kl-invoice .invoice-container .table { margin-bottom: 0; }
    body.kl-portal.kl-invoice .invoice-container .table td:first-child {
      overflow-wrap: anywhere;
    }
    body.kl-portal.kl-invoice .invoice-container .transactions-container .table {
      table-layout: fixed;
    }
    body.kl-portal.kl-invoice .invoice-container .transactions-container .table td {
      padding-inline: 5px;
      font-size: 12px;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    body.kl-portal.kl-invoice .invoice-container .transactions-container .table thead td:last-child {
      width: 34%;
    }
  }
}

body.kl-portal #order-standard_cart #containerExistingAccountSelect {
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  margin-inline: -4px;
  border: 0;
}
body.kl-portal #order-standard_cart #containerExistingAccountSelect > div {
  float: none;
  min-width: 0;
  padding-inline: 4px;
}
body.kl-portal #order-standard_cart #containerExistingAccountSelect > .col-sm-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (max-width: 767px) {
  body.kl-portal #order-standard_cart #containerExistingAccountSelect > .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
body.kl-portal #order-standard_cart #containerExistingAccountSelect div.account {
  height: 100%;
  padding: 0;
  color: var(--kl-text);
  background: var(--kl-panel);
  border: 1px solid var(--kl-line);
  border-radius: 10px;
}
body.kl-portal #order-standard_cart #containerExistingAccountSelect div.account.active {
  color: var(--kl-text);
  background: var(--kl-raised);
  border-color: var(--kl-cyan);
}
body.kl-portal #order-standard_cart #containerExistingAccountSelect div.account:not(.active):hover {
  background: var(--kl-raised);
}
body.kl-portal #order-standard_cart #containerExistingAccountSelect .radio-inline {
  display: block;
  min-height: 44px;
  padding: 12px 12px 12px 38px;
  color: var(--kl-text);
  overflow-wrap: anywhere;
}
body.kl-portal #order-standard_cart #containerExistingAccountSelect .radio-inline .small {
  color: var(--kl-muted);
}
body.kl-portal #order-standard_cart #containerExistingAccountSelect .radio-inline:focus-within {
  outline: 2px solid var(--kl-cyan);
  outline-offset: 2px;
  border-radius: 9px;
}

body.kl-portal .marketing-email-optin {
  background: var(--kl-panel);
  color: var(--kl-text);
  border-color: var(--kl-line);
  border-radius: 9px;
}
body.kl-portal .bootstrap-switch {
  border-color: var(--kl-line);
}
body.kl-portal .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  background: var(--kl-green);
  color: var(--kl-ink);
}
body.kl-portal .bootstrap-switch :is(.bootstrap-switch-handle-off, .bootstrap-switch-label) {
  background: var(--kl-raised);
  color: var(--kl-text);
}

@media (max-width: 360px) {
  body.kl-portal #header ul.top-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    padding-inline: 0;
    width: 100%;
  }
  body.kl-portal #header ul.top-nav > li {
    float: none;
    margin: 0;
    max-width: 100%;
  }
}