/* Customer account screens: comfortable reading sizes, brighter supporting copy, and roomier controls. */
.portal-dashboard .portal-finance-source { overflow-wrap: anywhere; }
.portal-dashboard {
  color: #f7f7f7;
  font-size: 16px;
}

.portal-dashboard .portal-dashboard-heading p,
.portal-dashboard .portal-next-card > p:not(.portal-example-note),
.portal-dashboard .portal-progress-copy p,
.portal-dashboard .portal-stage p,
.portal-dashboard .portal-task p,
.portal-dashboard .portal-followup-content > p,
.portal-dashboard .portal-billing-panel .portal-panel-heading p,
.portal-dashboard .portal-billing-save p,
.portal-dashboard .portal-panel-heading > div > p {
  color: #ededed !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

.portal-dashboard .portal-panel-heading h2,
.portal-dashboard .portal-progress-header h2,
.portal-dashboard .portal-preview-heading h2 {
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
}

.portal-dashboard .portal-panel-heading > span,
.portal-dashboard .portal-card-label,
.portal-dashboard .portal-progress-copy > span,
.portal-dashboard .portal-progress-ring span,
.portal-dashboard .portal-progress-legend,
.portal-dashboard .portal-stage-number,
.portal-dashboard .portal-example-note,
.portal-dashboard .portal-guarantee-note,
.portal-dashboard .portal-followup-heading > span,
.portal-dashboard .portal-followup-form legend,
.portal-dashboard .portal-followup-time,
.portal-dashboard .portal-followup-phone,
.portal-dashboard .portal-followup-day span,
.portal-dashboard .portal-followup-form .portal-form-status,
.portal-dashboard .portal-followup-entry,
.portal-dashboard .portal-followup-entry strong,
.portal-dashboard .portal-billing-current,
.portal-dashboard .portal-billing-form legend,
.portal-dashboard .portal-billing-option small,
.portal-dashboard .portal-billing-form > .portal-form-status,
.portal-dashboard .portal-finance-summary span,
.portal-dashboard .portal-finance-detail small,
.portal-dashboard .portal-finance-status,
.portal-dashboard .portal-ledger-note {
  color: #e6e6e6 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Status colors come from their state, including dark text on the silver current badge. */
.portal-dashboard .portal-stage-status {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.portal-dashboard .portal-progress-legend {
  font-weight: 700 !important;
}

.portal-dashboard .portal-progress-copy h3 {
  font-size: 29px !important;
}

.portal-dashboard .portal-progress-ring span {
  font-size: 13px !important;
}

.portal-dashboard .portal-stage-title h3 {
  font-size: 18px !important;
  line-height: 1.4 !important;
}

.portal-dashboard .portal-task h3,
.portal-dashboard .portal-billing-option strong,
.portal-dashboard .portal-followup-option strong {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.portal-dashboard .portal-followup-option small,
.portal-dashboard .portal-referral-small,
.portal-dashboard .portal-referral-list > p,
.portal-dashboard .portal-referral-entry > div span,
.portal-dashboard .portal-referral-entry > div strong,
.portal-dashboard .portal-referral-amount,
.portal-dashboard .portal-form-status,
.portal-dashboard .portal-referral-records h3,
.portal-dashboard .portal-finance-detail strong,
.portal-dashboard .portal-finance-amount,
.portal-dashboard .portal-finance-credit,
.portal-dashboard .portal-billing-option small,
.portal-dashboard .portal-billing-save p {
  color: #ededed !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.portal-dashboard .portal-followup-day span {
  color: #e6e6e6 !important;
}

.portal-dashboard .portal-followup-time select,
.portal-dashboard .portal-followup-phone input,
.portal-dashboard .portal-followup-reason textarea,
.portal-dashboard .portal-referral-form > label:not(.portal-permission) input {
  min-height: 50px;
  color: #fff;
  font-size: 16px !important;
}

.portal-dashboard .portal-followup-reason textarea {
  min-height: 110px;
}

.portal-dashboard .portal-followup-reason textarea::placeholder,
.portal-dashboard .portal-referral-form input::placeholder {
  color: #bdbdbd !important;
}

.portal-dashboard .portal-followup-reason,
.portal-dashboard .portal-referral-form > label:not(.portal-permission),
.portal-dashboard .portal-reward-choice legend,
.portal-dashboard .portal-reward-choice label,
.portal-dashboard .portal-permission {
  color: #f5f5f5 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

.portal-dashboard .portal-followup-option small,
.portal-dashboard .portal-billing-option small,
.portal-dashboard .portal-referral-small,
.portal-dashboard .portal-ledger-note {
  color: #d5d5d5 !important;
}

.portal-dashboard .portal-button,
.portal-dashboard .portal-referral-form > .portal-button {
  font-size: 15px !important;
}

/* Make the referral reward and its explanation the first clear read in the section. */
.portal-dashboard .portal-referral-panel > .portal-panel-heading {
  display: block;
}

.portal-dashboard .portal-referral-panel > .portal-panel-heading > div {
  width: 100%;
}

.portal-dashboard .portal-referral-panel .portal-panel-heading h2 {
  max-width: 780px;
  font-size: clamp(27px, 2.6vw, 34px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em !important;
}

.portal-dashboard .portal-referral-intro {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

.portal-dashboard .portal-referral-rate {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-height: 92px;
  padding: 12px 17px;
  border-color: #a9a9a9;
  border-radius: 10px;
  background: linear-gradient(145deg, #383838, #171717);
}

.portal-dashboard .portal-referral-rate strong {
  font-size: 44px !important;
  line-height: .95 !important;
}

.portal-dashboard .portal-referral-rate span {
  color: #e9e9e9 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

.portal-dashboard .portal-referral-intro > p {
  max-width: 760px;
  color: #f0f0f0 !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

.portal-dashboard .portal-referral-example {
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
}

.portal-dashboard .portal-referral-layout {
  gap: 32px;
  margin-top: 26px;
}

.portal-dashboard .portal-referral-records {
  padding: 20px;
}

.portal-dashboard .portal-referral-records h3 {
  color: #fff !important;
  font-size: 18px !important;
}

.portal-dashboard .portal-session-bar button {
  font-size: 14px !important;
}

.portal-login-card label {
  color: #fff;
  font-size: 15px !important;
}

.portal-login-description,
.portal-login-footnote,
.portal-demo-credentials > span,
.portal-demo-credentials > div {
  color: #ededed;
  font-size: 14px !important;
}

.portal-body :is(input, select, textarea, button, a):focus-visible {
  outline: 3px solid #f1d582;
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .portal-dashboard .portal-panel-heading h2,
  .portal-dashboard .portal-progress-header h2,
  .portal-dashboard .portal-preview-heading h2 {
    font-size: 22px !important;
  }

  .portal-dashboard .portal-referral-panel .portal-panel-heading h2 {
    font-size: 26px !important;
  }

  .portal-dashboard .portal-referral-intro {
    grid-template-columns: minmax(104px, 124px) minmax(0, 1fr);
    gap: 13px;
    margin-top: 15px;
  }

  .portal-dashboard .portal-referral-rate {
    min-height: 82px;
    padding: 10px 12px;
  }

  .portal-dashboard .portal-referral-rate strong {
    font-size: 38px !important;
  }

  .portal-dashboard .portal-referral-intro > p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .portal-dashboard .portal-referral-example {
    font-size: 16px !important;
  }

  .portal-dashboard .portal-referral-layout {
    gap: 22px;
    margin-top: 22px;
  }

  .portal-dashboard .portal-stage-title h3 {
    font-size: 17px !important;
  }
}

@media (max-width: 390px) {
  .portal-dashboard .portal-referral-panel .portal-panel-heading h2 {
    font-size: 24px !important;
  }

  .portal-dashboard .portal-referral-intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 11px;
  }

  .portal-dashboard .portal-referral-rate {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-height: 0;
    width: max-content;
    max-width: 100%;
    padding: 8px 12px;
  }

  .portal-dashboard .portal-referral-rate strong {
    font-size: 35px !important;
  }
}