body {
  font-family: "Poppins", sans-serif;
}

body {
  font-size: 0.8rem;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 0.9rem;
  }
}
@media screen and (min-width: 1024px) {
  body {
    font-size: 1rem;
  }
}

h1 {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  h1 {
    font-size: 2.571rem;
  }
}
@media screen and (min-width: 1024px) {
  h1 {
    font-size: 3rem;
  }
}

h2 {
  font-size: 1.714rem;
}
@media screen and (min-width: 768px) {
  h2 {
    font-size: 2.285rem;
  }
}
@media screen and (min-width: 1024px) {
  h2 {
    font-size: 2.571rem;
  }
}

h3 {
  font-size: 1.428rem;
}
@media screen and (min-width: 768px) {
  h3 {
    font-size: 1.999rem;
  }
}
@media screen and (min-width: 1024px) {
  h3 {
    font-size: 2.142rem;
  }
}

h4 {
  font-size: 1.285rem;
}
@media screen and (min-width: 768px) {
  h4 {
    font-size: 1.713rem;
  }
}
@media screen and (min-width: 1024px) {
  h4 {
    font-size: 1.857rem;
  }
}

h5 {
  font-size: 1.142rem;
}
@media screen and (min-width: 768px) {
  h5 {
    font-size: 1.428rem;
  }
}
@media screen and (min-width: 1024px) {
  h5 {
    font-size: 1.571rem;
  }
}

h6 {
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  h6 {
    font-size: 1.285rem;
  }
}
@media screen and (min-width: 1024px) {
  h6 {
    font-size: 1.428rem;
  }
}

.h1 {
  font-size: 2rem;
}
@media screen and (min-width: 768px) {
  .h1 {
    font-size: 2.571rem;
  }
}
@media screen and (min-width: 1024px) {
  .h1 {
    font-size: 3rem;
  }
}

.h2 {
  font-size: 1.714rem;
}
@media screen and (min-width: 768px) {
  .h2 {
    font-size: 2.285rem;
  }
}
@media screen and (min-width: 1024px) {
  .h2 {
    font-size: 2.571rem;
  }
}

.h3 {
  font-size: 1.428rem;
}
@media screen and (min-width: 768px) {
  .h3 {
    font-size: 1.999rem;
  }
}
@media screen and (min-width: 1024px) {
  .h3 {
    font-size: 2.142rem;
  }
}

.h4 {
  font-size: 1.285rem;
}
@media screen and (min-width: 768px) {
  .h4 {
    font-size: 1.713rem;
  }
}
@media screen and (min-width: 1024px) {
  .h4 {
    font-size: 1.857rem;
  }
}

.h5 {
  font-size: 1.142rem;
}
@media screen and (min-width: 768px) {
  .h5 {
    font-size: 1.428rem;
  }
}
@media screen and (min-width: 1024px) {
  .h5 {
    font-size: 1.571rem;
  }
}

.h6 {
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  .h6 {
    font-size: 1.285rem;
  }
}
@media screen and (min-width: 1024px) {
  .h6 {
    font-size: 1.428rem;
  }
}

.btn {
  font-size: 0.75rem;
  padding: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
@media screen and (min-width: 768px) {
  .btn {
    font-size: 0.85rem;
  }
}
@media screen and (min-width: 1024px) {
  .btn {
    font-size: 1rem;
  }
}

.sponsored-by {
  font-size: 0.8rem;
}
@media screen and (min-width: 768px) {
  .sponsored-by {
    font-size: 1rem;
  }
}
@media screen and (min-width: 1024px) {
  .sponsored-by {
    font-size: 1.2rem;
  }
}

/* Font weight classes */
.fw-100 {
  font-weight: 100;
}

.fw-200 {
  font-weight: 200;
}

.fw-300 {
  font-weight: 300;
}

.fw-400 {
  font-weight: 400;
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.fw-700 {
  font-weight: 700;
}

.fw-800 {
  font-weight: 800;
}

.fw-900 {
  font-weight: 900;
}

/* Specific typography classes */
.summary-text-title {
  font-size: 0.8rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .summary-text-title {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 1024px) {
  .summary-text-title {
    font-size: 1.5rem;
  }
}

.summary-text-result {
  font-size: 0.8rem;
  font-weight: 500;
}
@media screen and (min-width: 768px) {
  .summary-text-result {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 1024px) {
  .summary-text-result {
    font-size: 1.5rem;
  }
}

.container-fluid {
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}
@media only screen and (min-width: 576px) {
  .container-fluid {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
}
@media only screen and (min-width: 768px) {
  .container-fluid {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
@media only screen and (min-width: 992px) {
  .container-fluid {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  grid-template-areas: "hd1 hd2 hd3 hd4 hd5 hd6 hd7" "ct11 ct12 ct13 ct14 hd5 hd6 hd7" "ct21 ct22 ct23 ct23 hd5 hd6 hd7" "ct31 ct32 ct33 ct34 ct35 ct36 ct37" "ct41 ct42 ct43 ct44 ct45 ct46 ct47" "ct51 ct52 ct53 ct54 ct55 ct56 ct57" "ct61 ct62 ct63 ct63 ct64 ct65 ct65";
}
@media only screen and (min-width: 576px) {
  .grid-container {
    gap: 5px;
  }
}
@media only screen and (min-width: 768px) {
  .grid-container {
    gap: 10px;
  }
}

.grid-item {
  padding: 5px;
  text-align: center;
}

.grid-item.hd1 {
  grid-area: hd1;
}

.grid-item.hd2 {
  grid-area: hd2;
}

.grid-item.hd3 {
  grid-area: hd3;
}

.grid-item.hd4 {
  grid-area: hd4;
}

.grid-item.hd5 {
  grid-area: hd5;
}

.grid-item.hd6 {
  grid-area: hd6;
}

.grid-item.hd7 {
  grid-area: hd7;
}

.grid-item.ct11 {
  grid-area: ct11;
}

.grid-item.ct12 {
  grid-area: ct12;
}

.grid-item.ct13 {
  grid-area: ct13;
}

.grid-item.ct14 {
  grid-area: ct14;
}

.grid-item.ct21 {
  grid-area: ct21;
}

.grid-item.ct22 {
  grid-area: ct22;
}

.grid-item.ct23 {
  grid-area: ct23;
}

.grid-item.ct24 {
  grid-area: ct24;
}

.grid-item.ct31 {
  grid-area: ct31;
}

.grid-item.ct32 {
  grid-area: ct32;
}

.grid-item.ct33 {
  grid-area: ct33;
}

.grid-item.ct34 {
  grid-area: ct34;
}

.grid-item.ct41 {
  grid-area: ct41;
}

.grid-item.ct42 {
  grid-area: ct42;
}

.grid-item.ct43 {
  grid-area: ct43;
}

.grid-item.ct44 {
  grid-area: ct44;
}

.grid-item.ct51 {
  grid-area: ct51;
}

.grid-item.ct52 {
  grid-area: ct52;
}

.grid-item.ct53 {
  grid-area: ct53;
}

.grid-item.ct54 {
  grid-area: ct54;
}

.grid-item.ct55 {
  grid-area: ct55;
}

.grid-item.ct56 {
  grid-area: ct56;
}

.grid-item.ct57 {
  grid-area: ct57;
}

.grid-item.ct61 {
  grid-area: ct61;
}

.grid-item.ct62 {
  grid-area: ct62;
}

.grid-item.ct63 {
  grid-area: ct63;
}

.grid-item.ct64 {
  grid-area: ct64;
}

.grid-item.ct65 {
  grid-area: ct65;
}

.column-span-2 {
  grid-column: span 2;
}

.column-span-3 {
  grid-column: span 3;
}

.column-span-4 {
  grid-column: span 4;
}

.column-span-5 {
  grid-column: span 5;
}

/*! 
    bgc stands for background-color
    path: assets/scss/utilities/_colors.scss
*/
.bgc-blue-primary {
  background-color: #32538E;
  color: #fff;
}

.bgc-white {
  background-color: #fff;
  color: #000;
}

.color-blue-primary {
  color: #32538E;
}

[class^=col-] .input-col {
  height: calc(100% - 1rem);
}

#output-section .output-cards-container {
  font-family: "Roboto", sans-serif;
}
#output-section .output-cards-container * {
  font-size: 0.4rem;
}
@media only screen and (min-width: 576px) {
  #output-section .output-cards-container * {
    font-size: 0.7rem;
  }
}
@media only screen and (min-width: 768px) {
  #output-section .output-cards-container * {
    font-size: 1rem;
  }
}

.box-grayish {
  box-shadow: none;
}
@media only screen and (min-width: 768px) {
  .box-grayish {
    box-shadow: 0px 0px 3px #888888;
  }
}

.output-cards-container [class^=box]:not(.box-grayish) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  min-height: 3em;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .output-cards-container [class^=box]:not(.box-grayish) {
    min-height: 6em;
  }
}

.btn-assessment {
  height: calc(100% - 8px);
}

.btn-blue-primary {
  background-color: #32538E;
  color: #fff;
}
.btn-blue-primary:hover {
  background-color: #395ea1;
}