/*======================================================
== SASSMQ
=====================================*/
/*======================================================
== END SASSMQ
=====================================*/
/*======================================================
== SCREEN
=====================================*/
/*======================================================
== TYPE
=====================================*/
/*======================================================
== SPACING
=====================================*/
/*======================================================
== APP
=====================================*/
/* Top Header --------------------------------------------- */
.tfc-app-heading-xl {
  font-family: "Overpass", system-ui;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.09375;
  margin-top: 0;
  margin-bottom: 30px; }
  @media print {
    .tfc-app-heading-xl {
      font-family: sans-serif; } }
  @media (min-width: 40.0625em) {
    .tfc-app-heading-xl {
      font-size: 3rem;
      line-height: 1.0416666667; } }
  @media print {
    .tfc-app-heading-xl {
      font-size: 32pt;
      line-height: 1.15; } }
  @media (min-width: 40.0625em) {
    .tfc-app-heading-xl {
      margin-bottom: 50px; } }
.tfc-app-heading-l {
  font-family: "Overpass", system-ui;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  font-size: 1.6875rem;
  line-height: 1.1111111111;
  margin-top: 0;
  margin-bottom: 20px; }
  @media print {
    .tfc-app-heading-l {
      font-family: sans-serif; } }
  @media (min-width: 40.0625em) {
    .tfc-app-heading-l {
      font-size: 2.25rem;
      line-height: 1.1111111111; } }
  @media print {
    .tfc-app-heading-l {
      font-size: 24pt;
      line-height: 1.05; } }
  @media (min-width: 40.0625em) {
    .tfc-app-heading-l {
      margin-bottom: 30px; } }
.tfc-app-heading-m {
  font-family: "Overpass", system-ui;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.1904761905;
  margin-top: 0;
  margin-bottom: 15px; }
  @media print {
    .tfc-app-heading-m {
      font-family: sans-serif; } }
  @media (min-width: 40.0625em) {
    .tfc-app-heading-m {
      font-size: 1.5rem;
      line-height: 1.25; } }
  @media print {
    .tfc-app-heading-m {
      font-size: 18pt;
      line-height: 1.15; } }
  @media (min-width: 40.0625em) {
    .tfc-app-heading-m {
      margin-bottom: 20px; } }
.tfc-app-heading-s {
  font-family: "Overpass", system-ui;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.3157894737;
  margin-top: 0;
  margin-bottom: 15px; }
  @media print {
    .tfc-app-heading-s {
      font-family: sans-serif; } }
  @media print {
    .tfc-app-heading-s {
      font-size: 14pt;
      line-height: 1.15; } }
  @media (min-width: 40.0625em) {
    .tfc-app-heading-s {
      margin-bottom: 20px; } }
.tfc-app-prose {
  font-family: "Overpass", system-ui;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 15px; }
  @media print {
    .tfc-app-prose {
      font-family: sans-serif; } }
  @media print {
    .tfc-app-prose {
      font-size: 14pt;
      line-height: 1.2; } }
  @media (min-width: 40.0625em) {
    .tfc-app-prose {
      margin-bottom: 20px; } }
/* Top Header --------------------------------------------- */
.top-header {
  background-color: var(--beige-dark);
  padding-top: 15px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--black);
  width: 100%; }

.top-header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; }
  .top-header-container > strong {
    font-size: 1.5rem; }

.top-header-heading {
  grid-area: heading;
  margin: none; }

.top-header-nav {
  grid-area: nav; }

/* Error Page --------------------------------------------- */
.error-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

.error-page > .error-name {
  margin-bottom: 1rem; }

.error-page > .error-msg {
  margin-bottom: 2rem; }

/**********************************************************
** Home 
*/
.home-layout {
  padding: 2rem; }

/* Application Page --------------------------------------------- */
.application__layout {
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: auto;
  grid-template-areas: "header header" "blurb error" "blurb form";
  column-gap: 6rem;
  margin-top: 4rem; }

.application__header {
  grid-area: header; }

.application__blurb {
  grid-area: blurb; }

.application__form {
  grid-area: form; }

.application__error {
  grid-area: error;
  font-weight: 600;
  font-size: 1rem;
  color: var(--red); }

.application-success__layout {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content 1fr;
  grid-template-areas: "nav" "content";
  padding: 2rem; }

/**********************************************************
** Member Portal 
*/
.member-layout {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 4rem;
  grid-template-areas: "nav content"; }

.member-nav {
  grid-area: nav;
  display: flex;
  flex-direction: column; }

.member-content {
  grid-area: content; }

.member-payment {
  grid-area: content;
  display: grid;
  grid-template-columns: 47.5% 5% 47.5%;
  grid-template-rows: max-content max-content;
  grid-template-areas: "header header header" "blurb gutter form";
  height: 100%; }

.member-payment-header {
  grid-area: header;
  margin-bottom: 2rem; }

.member-payment-blurb {
  grid-area: blurb; }

.member-payment-form {
  grid-area: form;
  width: max-content; }

.member-payment-form > iframe {
  width: max-content; }

/**********************************************************
** Admin 
*/
.adm-layout {
  grid-area: wrapper;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content 1fr;
  grid-template-areas: "nav" "content"; }

.adm-page {
  display: flex;
  flex-direction: column;
  flex-grow: 1; }

.adm-panel {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--beige); }

.adm-panel-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--beige-darker);
  /* padding: 1rem; */ }

.adm-heading-l {
  font-weight: 700;
  margin-bottom: 3rem;
  font-size: 3rem; }

.adm-heading-m {
  margin-bottom: 2rem;
  font-weight: 700; }

.adm-page-caption {
  font-size: 1.5rem;
  color: #666; }

.adm-column-two-thirds {
  max-width: 67%; }

/* Admin Nav --------------------------------------------- */
.adm-nav {
  font-family: "Overpass", system-ui;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.3157894737;
  display: flex;
  grid-area: nav;
  background-color: var(--beige-darker);
  border-bottom: 1px solid var(--beige-dark);
  width: 100%;
  justify-content: center; }
  @media print {
    .adm-nav {
      font-family: sans-serif; } }
  @media print {
    .adm-nav {
      font-size: 14pt;
      line-height: 1.15; } }
.adm-nav__list,
.adm-subnav__list {
  list-style: none;
  margin: 0; }

.adm-nav__list {
  min-height: 50px; }

.adm-nav__item {
  padding-top: 20px;
  padding-bottom: 15px;
  float: left; }

.adm-nav__item--selected {
  border-bottom: 5px solid var(--black); }

.adm-nav__item:not(:last-child) {
  margin-right: 1rem; }

.adm-subnav__list {
  display: flex;
  flex-direction: column;
  padding: 0; }

.adm-subnav__item {
  margin-bottom: 1rem; }

.adm-subnav__item--selected {
  border-left: 3px solid black;
  font-weight: bold;
  padding-left: 10px;
  margin-left: -13px; }

.adm-nav__link,
.adm-subnav__link {
  display: block;
  text-decoration: none; }

.adm-nav__link {
  font-size: 1.25rem;
  font-weight: 600; }

.adm-subnav__link {
  font-size: 1rem; }

/* Admin Home --------------------------------------------- */
/* Admin Members --------------------------------------------- */
.adm-members-layout {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: max-content 1fr;
  grid-template-areas: "header" "content";
  background-color: inherit; }

.adm-members__header {
  grid-area: header;
  background-color: inherit;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 15px; }
  @media (min-width: 40.0625em) {
    .adm-members__header {
      margin-bottom: 20px; } }
.adm-members-content {
  grid-area: content; }

.adm-member-search {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  max-width: 100%; }

.adm-member-search > input {
  flex-grow: 1;
  margin-right: 1rem; }

.adm-member-table {
  width: 100%;
  height: max-content;
  grid-area: content;
  padding: 2rem;
  padding-top: 0; }

.adm-member-table > tbody tr {
  transition: all 150ms; }

.adm-member-page {
  display: flex;
  flex-direction: row;
  flex-grow: 1; }

.adm-member-page-content {
  flex-grow: 1;
  background-color: var(--beige-dark);
  padding: 1rem; }

.adm-member-dashboard-layout {
  flex-grow: 1; }

.adm-member-dashboard-layout > header {
  grid-area: header;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
  background-color: var(--beige); }

.adm-member-details-panel {
  grid-area: details;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--beige); }

.adm-member-details-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between; }

.adm-member-charge-layout {
  display: flex;
  flex-direction: column;
  flex-grow: 1; }

.member-plan-panel {
  grid-area: plan; }

.member-payments-layout {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: max-content 1fr 1fr;
  grid-template-areas: "header header" "new-payment payment-methods" "invoices space";
  column-gap: 1rem;
  row-gap: 1rem; }

.member-payments-layout > header {
  grid-area: header; }

.member-new-payment-panel {
  grid-area: new-payment; }

.new-payment-options {
  flex-grow: 1;
  display: flex;
  flex-direction: row; }

.new-payment-options > a:not(:last-child) {
  margin-right: 1rem; }

.member-payment-methods-panel {
  grid-area: payment-methods; }

.member-invoices-panel {
  grid-area: invoices; }

.invoice-list {
  list-style: none; }

.adm-member-status-layout {
  flex-grow: 1; }

.adm-member-charge-layout {
  flex-grow: 1; }

.adm-panel.invoice {
  grid-area: invoice; }

.adm-panel.products {
  grid-area: products; }

.invoice-list {
  list-style: none; }

.invoice-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; }

.invoice-item-row {
  display: flex;
  align-items: center; }

.invoice-item-row:not(:last-child) {
  margin-bottom: .25rem; }

.invoice-item > .label {
  grid-area: label; }

.invoice-item .price {
  margin-left: 1rem; }

.invoice-item > .qty {
  grid-area: qty; }

.invoice-item .action {
  margin-left: 1rem; }

.invoice-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; }

.adm-new-member-layout {
  display: flex;
  flex-direction: column; }

/* Adm Tasks --------------------------------------------- */
.adm-member-task-layout {
  padding: 2rem; }

/**********************************************************
** Members 
*/
.members-page-header {
  grid-area: header;
  display: flex;
  padding: 2rem;
  position: sticky;
  top: 0;
  background-color: var(--beige-lighter); }

.members-page-search-form {
  display: flex;
  flex-direction: row;
  width: max-content;
  align-items: center;
  width: 100%;
  max-width: 100% !important; }

.member-nav {
  grid-area: nav; }

.members-page-search-form .form-input {
  margin-right: 1rem;
  margin-bottom: 0;
  width: 50%;
  flex-direction: row; }

.members-page-search-form .form-input > input {
  flex-grow: 1; }

.members-page-search-form .button {
  padding: .35rem .75rem; }

.member-info {
  margin-top: 2rem; }

.member-home {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: max-content 1fr;
  grid-template-areas: "header header" "details payment"; }

.member-home-header {
  grid-area: header; }

.payment-details {
  grid-area: payment;
  display: flex;
  flex-direction: column;
  height: max-content; }

/**********************************************************
** Components 
*/
.labeled-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem; }

.labeled-value > span:first-child {
  font-size: 0.9rem; }

.labeled-value > span:last-child {
  font-size: 1.25rem; }

.new-member-form {
  display: flex;
  flex-direction: column;
  max-width: 600px; }

.new-member-form > label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem; }

.new-member-form > button {
  margin-top: 1rem; }

.member-info-item {
  display: flex;
  justify-content: space-between;
  max-width: 50%; }

.adm-member-edit-layout {
  padding: 2rem; }

.edit-member-form {
  display: flex;
  flex-direction: column;
  max-width: 600px; }

.edit-member-form > label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem; }

.edit-member-form > button {
  margin-top: 1rem; }

.adm-new-member-page {
  flex-grow: 1;
  padding: 2rem; }

/**********************************************************
** Member Page 
*/
.member-page {
  grid-area: wrapper;
  overflow: clip;
  display: flex;
  background-color: var(--beige); }

.member-page-nav {
  padding: 2rem; }

.member-page-nav-list > li {
  list-style: none;
  padding: 0.5rem 2rem; }

.member-page-content {
  flex-grow: 1;
  padding: 2rem;
  background: var(--beige-lighter); }

.member-home-header > h2 {
  margin-bottom: 2rem; }

/**********************************************************
** Payment 
*/
.payment-form-error {
  padding: 2rem;
  background-color: var(--lavender);
  margin-bottom: 1rem;
  display: none; }

.payment-form-error.visible {
  display: unset; }

.pricing-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 2rem; }

.pricing-option {
  margin-bottom: 0.5rem; }

.pricing-option:not(:last-child) {
  margin-right: 0.5rem; }

.pricing-plan-label {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid var(--black);
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  width: 120px; }

.pricing-plan-label-name {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.pricing-plan-label-price {
  font-size: 1.4rem; }

input[name="pricing"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none; }

input[name="pricing"]:checked + .pricing-plan-label {
  background-color: var(--green);
  color: var(--white); }

.credit-card {
  display: flex;
  flex-direction: row;
  width: max-content;
  align-items: center;
  justify-content: space-between;
  background-color: var(--beige-darker);
  padding: 1rem;
  font-size: 1rem; }

.credit-card-icon {
  margin-right: 1rem;
  font-size: 1.5rem; }

.credit-card-desc {
  margin-right: 1rem; }

.credit-card-exp {
  margin-right: 1rem; }

/**********************************************************
** Elements 
*/
/**********************************************************
** Pages 
*/
.page-heading {
  margin-bottom: 2rem; }

/* Tables --------------------------------------------- */
.table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%; }

.table__caption {
  display: table-caption;
  margin-bottom: 2rem;
  text-align: left;
  font-weight: 700;
  font-size: 1.5rem; }

.table__header, .table__cell {
  padding: .5rem 1rem .5rem 0;
  border-bottom: 1px solid var(--grey);
  text-align: left;
  vertical-align: top; }

.table__header {
  font-weight: 700; }

.table__cell:last-child {
  padding-right: 0; }

/* Summary List --------------------------------------------- */
/*======================================================
== SUMMARY LIST
=====================================*/
.summary-list {
  font-family: "Overpass", system-ui;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.3157894737;
  margin-bottom: 3rem; }
  @media print {
    .summary-list {
      font-family: sans-serif; } }
  @media print {
    .summary-list {
      font-size: 14pt;
      line-height: 1.15; } }
  @media (min-width: 40.0625em) {
    .summary-list {
      display: table;
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%; } }
.summary-list__row {
  display: table-row;
  border-bottom: 1px solid #ccc; }

.summary-list__key,
.summary-list__value {
  overflow-wrap: break-word; }

.summary-list__key,
.summary-list__value,
.summary-list__action {
  display: table-cell;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px; }

.summary-list__key {
  font-weight: 700;
  width: 40%; }

.summary-list__value:last-child {
  text-align: right; }

.summary-list__action {
  width: 20%;
  text-align: right; }

/* Task List --------------------------------------------- */
.task-list {
  display: table;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 3rem;
  font-size: 1rem;
  line-height: 1.3; }

.task-list__row {
  display: table-row;
  border-bottom: 1px solid #ccc; }

.task-list__action,
.task-list__status {
  overflow-wrap: break-word; }

.task-list__action,
.task-list__status {
  display: table-cell;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px; }

.task-list__action {
  /* font-weight: 700; */
  width: 40%; }

.task-list__status {
  width: 20%;
  text-align: right; }