.payments {
  max-width: 740px;
  margin: 0 auto;
  padding: 32px 20px;
  background: var(--color-00);
  color: var(--color-01);
  font-size: 16px;
}

.payments .home_payment-method {
  display: none !important;
}

.payments .panel {
  padding: 24px 32px !important;
  background-color: var(--color-02) !important;
  color: var(--color-01) !important;
  font-size: 16px;
  margin: 0;
}

.payments .panel img {
  margin-bottom: 16px;
}

.payments .panel .bottom-url {
  margin-top: 16px;
  font-size: 14px;
}

.payments .homepage_payment-info .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .payments .col-centered > .row::after {
    content: '';
    clear: both !important;
    display: table !important;
  }

  .payments #payment-summary,
  .payments .tenancy-statement-panel,
  .payments .home_payment-method {
    width: 50% !important;
  }

  .payments #payment-summary {
    float: left !important;
    margin-bottom: 0 !important;
  }

  .payments .tenancy-statement-panel,
  .payments .home_payment-method {
    float: right !important;
  }
}

/* Payment Method sub-page */
.payment-method {
  max-width: 740px;
  margin: 0 auto;
  padding: 32px 20px;
  background: var(--color-00);
  color: var(--color-01);
  font-size: 16px;
}

.back-to-payments,
.payment-method .default-payment-method-wrapper i {
  display: none;
}

.payment-method > .col-centered {
  display: grid;
  gap: 20px;
}

.payment-method .panel {
  background-color: var(--color-02) !important;
  color: var(--color-01) !important;
  font-size: 16px;
  margin: 0;
}

.payment-method .panel .panel-body,
.payment-method .panel .default-payment-method-wrapper,
.payment-method .step1_iWillPay-panel {
  padding: 0;
  margin: 0;
}

.payment-method .panel h3 {
  color: var(--color-01) !important;
}

.payment-method .step1_whoPays-buttons,
.payment-method .step1_bottom-row {
  display: grid;
  gap: 10px;
  margin: 0;
}

@media (min-width: 768px) {
  .payment-method .step1_whoPays-buttons,
  .payment-method .step1_bottom-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tenancy Statement sub-page */
.tenancy-statement {
  max-width: 740px;
  margin: 0 auto;
  padding: 32px 20px;
  background: var(--color-00);
  color: var(--color-01);
  font-size: 16px;
}

.tenancy-statement #back-to-my-payments {
  display: none;
}

.tenancy-statement .summary_text {
  padding: 32px 20px !important;
}

/* Upcoming Payments sub-page */
.upcoming-payments {
  max-width: 740px;
  margin: 0 auto;
  padding: 32px 20px;
  background: var(--color-00);
  color: var(--color-01);
  font-size: 16px;
}