h2 {
  padding-bottom: 2rem;
}

.jumbotron h1 {
  margin-top: 2rem;
}

.jumbotron h2 {
  font-size: 1.6rem;
}

#confidence-container {
  color: #fff;
  text-align: center;
  width: 1%;
  min-width: 240px;
  margin: 1rem auto 0;
}

#confidence-container a {
  display: block;
  font-weight: bold;
  margin-top: 1rem;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  line-height: 1.4rem;
}

.section-definition {
  padding-bottom: 2rem;
  margin-bottom: 0;
}

#confidence-container .btn-preamble {
  display: block;
  font-size: .8rem;
  font-weight: normal;
  line-height: .9rem;
  margin: -3px auto;
  padding-bottom: 5px;
}

#broad-interests {
  padding-top: 40px;
}

/* Override radial graph text color */

.fit-radial-graph text,
.section-fit-radial-graph text,
.broad-interest-fit-radial-graph text,
.importance-radial-graph text,
.blue-bg .option-section .importance-radial-graph text {
  fill: #000;
}

.blue-bg .fit-radial-graph text,
.blue-bg .section-fit-radial-graph text,
.blue-bg .importance-radial-graph text {
  fill: #fff;
}

.section-fit-radial-graph .fit-text,
.broad-interest-fit-radial-graph .fit-text {
  font-size: 21px;
}

.importance-radial-graph .fit-label {
  font-size: 12px;
}

/* Blue Background */

.blue-bg .interpretation {
  background: #fff;
}

.blue-bg .section-label, .blue-bg .rating, .blue-bg .bright-green, .blue-bg .orange, .blue-bg .red {
  color: #fff;
}

.blue-bg .rating strong {
  color: #c2dfff;
}

.blue-bg svg.icon {
  fill: #fff;
}

.blue-bg .bar-value {
  fill: #fff;
}

.blue-bg .grey .fit-circle {
  stroke: #bdbdbd;
}

.blue-bg svg.text {
  fill: white;
}

/* Colors for needs and aversions summary */

#satisfied-need-counter, #aversion-absent-counter {
  color: rgb(88, 161, 37);
  font-weight: bold;
}

#partially-satisfied-need-counter, #aversion-partially-present-counter {
  color: rgb(255, 152, 0);
  font-weight: bold;
}

#unsatisfied-need-counter, #aversion-present-counter {
  color: rgb(229, 45, 51);
  font-weight: bold;
}

/* Override colors for option-section divs */

.blue-bg .option-section .rating strong {
  color: #415f77;
}

.blue-bg .option-section .fit-text, .blue-bg .option-section .bright-green, .blue-bg .option-section .orange, .blue-bg .option-section .red {
  color: #000;
  fill: #000;
}

.blue-bg .bg-circle {
  stroke: rgba(255, 255, 255, .3);
}

.blue-bg .fit-circle {
  stroke: #fff;
}

.blue-bg svg text {
  fill: #fff;
}

/* At a glance */

#at-a-glance {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

#at-a-glance .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 110px;
  position: relative;
  width: 100%;
}

#at-a-glance .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 2rem;
}

#at-a-glance .card-title {
  color: #6e6e6e;
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0 1rem;
  background: white; /* same as card background */
  font-weight: bold;
  font-size: 1.2rem;
  white-space: nowrap;
  background: linear-gradient(
    to top,
    transparent 50%,
    white 50%
  );
}

#at-a-glance a {
  display: block;
  text-align: center;
  margin-top: auto;
  padding-top: .5rem;
  text-decoration: none;
}

#at-a-glance svg {
  margin: 0 auto;
}

.fit-radial-graph {
  display: block;
  margin: 0 auto;
}

/* Radial graphs */

.bg-circle, .blue-bg .interpretation .bg-circle, .blue-bg .option-section .bg-circle {
  stroke: lightgrey;
}

.fit-circle, .blue-bg .interpretation .fit-circle {
  stroke: #195172;
}

svg text, .blue-bg .interpretation svg text {
  fill: black;
}

/* Avoid painting sections until they come into view. Define expected intrinsic size. */

#basic-interests, #broad-interests {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 1900px;
}

#needs {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 1300px;
}

#aversions {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 1700px;
}

#context {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 4000px;
}

#personality {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 3500px;
}

#next {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 592px;
}

/** Colors */

.bar-background {
  stroke: #000;
}

.blue-bg .bar-background {
  stroke: #fff;
}

.bright-green.anchor {
  color: #6cc62e;
  font-weight: bold;
}

.bright-green .legend-box {
  background: #6cc62e;
}

.bright-green .fit-circle, .blue-bg .bright-green .fit-circle {
  stroke: #6cc62e;
}

.bright-green .icon-container svg, .bright-green .bar-length {
  fill: #6cc62e;
}

.bright-green .bar-background {
  stroke: #6cc62e;
}

.pale-green .legend-box {
  background: #89ba8b;
}

.pale-green .fit-circle, .blue-bg .pale-green .fit-circle {
  stroke: #89ba8b;
}

.pale-green .icon-container svg, .pale-green .bar-length {
  fill: #89ba8b;
}

.pale-green .bar-background {
  stroke: #89ba8b;
}

.grey.anchor {
  color: #6e6e6e;
  font-weight: bold;
}

.grey .legend-box {
  background: #bdbdbd;
}

.grey .fit-circle {
  stroke: #6e6e6e;
}

.grey .icon-container svg, .grey .bar-length {
  fill: #bdbdbd;
}

.grey .bar-background {
  stroke: #bdbdbd;
}

.orange .legend-box {
  background: #ff9800;
}

.orange .fit-circle, .blue-bg .orange .fit-circle {
  stroke: #ff9800;
}

.orange .icon-container svg, .orange .bar-length {
  fill: #ff9800;
}

.orange .bar-background {
  stroke: #ff9800;
}

.red.anchor {
  color: #e52d33;
  font-weight: bold;
}

.red .legend-box {
  background: #e52d33;
}

.red .fit-circle, .blue-bg .red .fit-circle {
  stroke: #e52d33;
}

.red .icon-container svg, .red .bar-length {
  fill: #e52d33;
}

.red .bar-background {
  stroke: #e52d33;
}

/** Legend boxes */

.legend-box {
  display: inline-block;
  height: 1.2rem;
  margin-right: .5rem;
  vertical-align: text-top;
  width: 30px;

}

.icon-container {
  text-align: center;
}

.icon-container svg {
  height: 50px;
  width: 50px;
}

.rating {
  color: #000;
  padding: .5rem 0;
}

.rating strong {
  color: #195172;
}

.section-label {
  padding-bottom: 1rem;
}

.section-label strong {
  font-size: 1.4rem;
}

.icon-container svg.icon {
  margin: 0 auto;
}

/** No result alert boxes */

.no-results.alert, #partial-results {
  margin: 50px auto;
  max-width: 800px;
  padding-bottom: 0;
}

.alert-heading {
  font-size: 1.4rem;
}

/** Interpretation boxes */

.interpretation {
  font-size: .9rem;
  margin: 80px auto 0;
  max-width: 1000px;
}

.alert-light h3, #personality .interpretation h3 {
  color: #195172;
  font-size: 1.4rem;
  margin-bottom: 20px;
  text-align: center;
}

.interpretation .legend-box-container {
  display: table-cell;
  text-align: center;
  width: 100px;
}

.interpretation .legend-box {
  margin: 0 0 0 5px;
  padding: 0;
  width: 30px;
}

.interpretation .row .legend-label {
  color: #000;
  display: table-cell;
  padding-left: 20px;
  width: calc(100% - 60px);
}

.interpretation .row {
  margin-top: .5rem;
}

.interpretation svg {
  height: 80px;
  width: 80px;
}

.interpretation .row {
  display: table;
}

.interpretation .row>* {
  padding: 0;
}

.interpretation .radial-graph-label {
  color: #000;
  display: table-cell;
  vertical-align: middle;
  width: calc(100% - 130px);
}

#career-specific-reminder {
  margin: 0 auto;
  max-width: 620px;
  text-align: left;
}

#career-specific-reminder h3 {
  color: #052c65;
}

#career-specific-reminder svg {
  margin-top: -2px;
}

/** Personality */

.broad-interest, .personality-trait, .context {
  padding: .5rem 0;
  position: relative;
}

@media only screen and (min-width: 576px) {
  #at-a-glance {
    grid-template-columns: repeat(3, 1fr);
  }

  .section-label {
    display: flex;
  }

  .bright-green strong, .orange strong, .red strong {
    display: inline-block;
  }
}

@media (min-width: 768px) {
  .border-end-md {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  }
}

@media (min-width: 1200px) {
  #at-a-glance {
    grid-template-columns: repeat(6, 1fr);
  }

  #career-specific-reminder {
    max-width: 730px;
  }
}

@media (min-width: 1400px) {
  #career-specific-reminder {
    max-width: 850px;
  }
}

@media print {
  .section-label strong {
    font-size: 1.1rem;
  }

  .blue-bg .bg-circle {
    stroke: lightgrey;
  }

  .blue-bg .interpretation, .blue-bg .section-label, .blue-bg .rating, .blue-bg .bright-green, .blue-bg .orange, .blue-bg .red {
    color: black;
  }

  .blue-bg svg text {
    fill: black;
  }

  .blue-bg .fit-circle {
    stroke: #195172;
  }

  .blue-bg .rating strong, .blue-bg .section-label strong, .section-label strong {
    color: #195172;
  }

  .blue-bg .bar-value {
    fill: rgb(15, 50, 71);
  }

  #basic-interests svg.icon {
    fill: #195172;
  }

  #aversion-option-sections .option-section:nth-of-type(3), #aversion-option-sections .option-section:nth-of-type(5) {
    page-break-before: always;
    margin-top: 80px;
  }

  .interpretation {
    margin-bottom: 1rem;
    margin-top: 1rem;
  }

  #next, #footer {
    display: none;
  }

  #broad-interests {
    padding-top: 0;
  }

  #aversions, #personality {
    padding-top: 30px;
  }

  #basic-interests h2, #broad-interests h2 {
    padding-bottom: 1rem;
  }

  #basic-interest-results .basic-interest:nth-of-type(4) {
    page-break-before: always;
    padding-top: 80px;
  }

  .rating.page-break {
    margin-top: 0;
    padding-top: 100px;
  }

  .no-results.alert-warning, .partial-results.alert-warning {
    display: none;
  }
}