:root {
  --header-bg: hsl(208, 70%, 23%);
  --subhead1-bg: hsl(213, 52%, 64%);
  /* --plana-bg: hsl(208, 49%, 52%); */
  /* --planb-bg: hsl(189, 28%, 60%);*/
  --plana-bg: hsl(215, 17%, 63%);
  --planb-bg: hsl(210, 15%, 11%);
  --curr-payment-bg: hsl(186, 26%, 52%);
  --stack-payment-bg: hsl(211, 25%, 35%);
}
#wait {
  z-index: 10000;
  position: absolute;
  inset: 0;
  background-color: #000000cc;
  justify-content: center;
  align-items: center;
}
.fa-spinner.fa-2xl {
  font-size: 6em;
}
.debt-error,
.add-debt-error,
.age-error,
.extra-error {
  color: red;
  font-weight: bold;
  font-size: 0.8rem;
  text-align: right;
  display: none;
}
.stack-header {
  grid-column: 1/ -1;
  margin-block: 10px;
  display: grid;
  justify-items: center;
}
.stack-header span {
  font-size: 1.2rem;
  font-weight: normal !important;
  border-radius: 100px !important;
  place-items: center;
  display: grid !important;
  text-align: center;
  width: 18rem;
  height: 3.5rem;
  background-color: var(--header-bg);
  margin: 0;
  color: white;
}

#stack-chart .age,
#stack-chart .plana,
#stack-chart .planb {
  padding: .5rem;
  border-radius: 8px 8px 0 0;
}
.plana {
  margin-left: 1rem;
  margin-right: 1rem;
}
#stack-chart span,
#stack-chart .age .cell-content,
#stack-chart .plana .cell-content,
#stack-chart .planb .cell-content {
  padding: 4px 4px;
  border-radius: 15px;
  font-weight: bold;
  text-align: center;
  color: white;
}
.age {
  grid-column-start: 1;
  background-color: var(--subhead1-bg);
}
.plana {
  grid-column-start: 2;
  background-color: var(--plana-bg);
}
.planb {
  grid-column-start: 3;
  grid-column-end: -1;
  background-color: var(--planb-bg);
}
.stack-title {
  padding: 4px 8px;
  font-weight: bold;
}
.stack-title .extra {
  font-size: 0.7rem !important;
  font-weight: normal !important;
  color: black !important;
}
.cell {
  padding: 4px 8px;
  text-align: center;
}
.stack-payment,
.monthly-payment {
  text-align: center;
  color: white;
  font-weight: bold;
  position: relative;
}
.stack-payment {
  padding: 4px 8px;
}
.cell-content {
  padding: 4px 8px;
  border-radius: 4px;
}
.stack-payment .cell-content {
  background-color: var(--stack-payment-bg);
  position: absolute;
  top: 16px;
  width: calc(100% - 16px);
  z-index: 3;
}
.stack-payment .cell-content::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  transform: translateX(50%) rotate(-45deg) ;
  bottom: -8px;
  right: 50%;
  z-index: -1;
  background-color: var(--stack-payment-bg);
}
.box-1, .box-2, .box-3 {
  background-color: #ccc;
  padding: .5rem;
}
.box-2 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.box-1-last, .box-2-last, .box-3-last {
  background-color: #ccc;
  padding: .5rem;
}
.box-3-last-start {
  border-radius: 0 0 0 8px;
}
.box-3-last-end {
  border-radius: 0 0 8px;
}
.box-1-last, .box-2-last, .box-3-last-start.box-3-last-end {
  border-radius: 0 0 8px 8px;
}

.monthly-payment .cell-content {
  background-color: var(--curr-payment-bg);
  z-index: 1;
}
.stack-total {
  font-weight: bold;
  color: red;
}
.plana-summary,
.planb-summary {
  padding: 8px 16px;
}
.plana-summary .cell-content,
.planb-summary .cell-content {
  border-radius: 15px;
  font-weight: normal;
  font-size: 1.2rem;
  padding: 12px 8px;
  color: white;
  margin-bottom: 10px;
  position: relative;
}
.plana-summary {
  grid-column: 1/ 3;
}
.plana-summary .cell-content {
  background-color: var(--plana-bg);
}
.plana-summary .cell-content::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  transform: rotate(45deg);
  top: -10px;
  right: 18%;
  background-color: var(--plana-bg);
}
.planb-summary {
  grid-column: 3/ -1;
}
.planb-summary .cell-content {
  background-color: var(--planb-bg);
}
.planb-summary .cell-content::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  transform: rotate(45deg);
  top: -10px;
  right: 50%;
  background-color: var(--planb-bg);
}
.question {
  grid-column: 1/-1;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}

.remove-debt span {
  display: none;
}

.stack-ans-container {
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.planb, .box-3,
.plana-summary, .planb-summary,
.question, .footer-text {
  opacity: 0;
  transition: opacity .5s;
}

.footer-text {
  font-size: 12px;
}