/*************************************General**************************************/
/**style.css**/
/* Global styles */
:root {
  --color-teal: #00afad;
  --color-purple: #7f4098;
  --color-orange: #ff6d4f;
  --color-gray: #eeeeee;
  --color-dark-gray: #1a1a1a;
  --color-white: #ffffff;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
}
/*headings*/
p {
  margin: 10px 0;
  font-family: Arial, sans-serif;
  color: #a7a9ac;
  font-size: 16px;
  line-height: 26px;
}

h1 {
  font-family: Arial, sans-serif;
  font-size: 40px;
  color: #7e3f98;
  font-weight: 300;
}

.seo-h1 {
  display: none;
}

.headingWithLines h4 {
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-size: 20px;
  color: black;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 400;
}

  .headingWithLines h4:after {
    content: '';
    height: 6px;
    border-top: 2px solid #D1D3D4;
    border-Bottom: 2px solid #D1D3D4;
    margin: 0 0 0 20px;
    flex: 1 0 20px;
  }

h3 {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #00afad;
  font-size: 16px;
  font-weight: 700;
}

.subHeader {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #00afad;
  font-size: 16px;
  font-weight: 700;
}

.sectionHeader {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: black;
  font-weight: 300;
}

h2 {
  color: #7f4098;
  font-size: 24px;
  font-weight: 700;
  font-family: Arial, sans-serif;
}

.purpleSubHeader {
  color: #7f4098;
  font-size: 24px;
  font-weight: 700;
  font-family: Arial, sans-serif;
}

h4 {
  margin: 10px 0;
  font-family: Arial, sans-serif;
  font-size: 22px;
}

.homePageHeading {
  position: relative;
  font-size: 18px;
  font-weight: 500;
  color: #1A1A1A;
}

.shareIcons img {
  height: 40px;
  margin: 0 2px;
}

.shareIcons {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 10px;
}

  .shareIcons button {
    border: none;
  }

    .shareIcons button:hover, .shareIcons img:hover {
      cursor: pointer;
    }


.educationalTopicBlockText a, .HomePageNewsArticlesText a {
  text-decoration: none;
}

h5 {
  margin: 0;
  font-size: 14px;
  font-family: Arial, sans-serif;
}
/*headings mobile*/
@media screen and (max-width: 700px) {
  h1 {
    font-size: 26px;
  }
}

.container {
  max-width: 1190px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 20px;
  width: -webkit-fill-available;
  flex: 1;
}

.containerSub {
  max-width: 1190px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 20px;
  width: -webkit-fill-available;
  flex: 1;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

/*Buttons*/
button {
  background-color: white;
  border-style: solid;
}

.tealBtn {
  padding: 10px 20px;
  color: #00afad;
  border-color: #00afad;
  margin: 15px;
}

  .tealBtn:hover, .tealBtn:active {
    color: #7f4098;
    border-color: #7f4098;
  }

button:focus {
  outline: none;
}

.icon {
  color: #00afad;
  height: 18px;
  width: auto;
}

p a, li a, table a {
  color: #00afad;
}

/****************************flex elements****************************/
.flex {
  display: flex;
}

.flexWrap {
  display: flex;
  flex-wrap: wrap;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexJustify {
  display: flex;
  justify-content: space-between;
}

.flexVetricallyCenter {
  display: flex;
  align-items: center;
}

/****************************RTE Elements****************************/
.custom1 {
  list-style-image: url('custom1.png');
}

#pageBody p img {
  margin: 5px 25px;
  max-width: 100%;
}

#pageBody table {
  margin: 10px;
}

#pageBody iframe {
  padding: 10px;
}

#pageBody p a, #pageBody li a, #pageBody table a {
  color: #00afad;
  cursor: pointer;
}

  #pageBody p a:hover, #pageBody li a:hover, #pageBody table a:hover {
    cursor: pointer;
  }

#pageBody {
  margin: 10px 0;
  font-family: Arial, sans-serif;
  color: #a7a9ac;
}

  #pageBody ul {
    list-style-type: disc;
    margin: 10px 0;
    font-family: Arial, sans-serif;
    color: #a7a9ac;
    font-size: 16px;
    line-height: 26px;
  }

    #pageBody ul li::marker {
      color: #00afad;
    }

    #pageBody ul ul {
      list-style-type: circle;
    }

  #pageBody ol {
    font-family: Arial, sans-serif;
    color: #a7a9ac;
    font-size: 16px;
    line-height: 26px;
  }

  #pageBody hr {
    border: none;
    border-top: 2px solid #7f4098;
  }

  /* fix for strong tags - explicitly set font weights to match header styles in RTE formats */
  #pageBody h1 strong,
  #pageBody .sectionHeader strong {
    font-weight: 300;
  }

  #pageBody h2 strong,
  #pageBody .subHeader strong,
  #pageBody .purpleSubHeader strong {
    font-weight: 700;
  }

/* Ensure strong tags in h2 and sectionHeader match intended font-weight */
h2 strong {
  font-weight: inherit;
}

.sectionHeader strong {
  font-weight: inherit;
}


.crossIcon {
  background-image: url('../Images/cross.svg');
  background-repeat: no-repeat;
  background-size: 30px;
  padding-left: 40px;
}

.tickIcon {
  background-image: url('../Images/check.svg');
  background-repeat: no-repeat;
  background-size: 30px;
  padding-left: 40px;
}

table {
  color: white;
  font-family: Arial, sans-serif;
  border-color: white;
  border: white;
}

thead tr {
  background-color: #7e3f98;
  font-weight: 700;
  color: white;
}

  thead tr p {
    color: white;
  }

  thead tr:nth-child(2) {
    background-color: #b189be;
  }

tr th {
  background-color: #a7a9ac;
  text-align: left;
  font-weight: 700;
  color: white;
}

  tr th p {
    color: white;
  }

tbody tr td, tbody tr, tbody th {
  border: 1px solid #d7f4f4;
}

thead {
  border: 1px solid white;
}

table, td, th {
  padding: 5px 10px;
}

@media screen and (max-width: 620px) {
  #pageBody table {
    max-width: 100%;
  }

  #pageBody tbody tr td img {
    max-width: 100%;
    object-fit: contain;
    padding: 0;
  }

  .fundCalculatorSection #pageBody tbody tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/****************************NAVIGATION****************************/

.covidNotification {
  order: -1;
  text-align: center;
  border-bottom: 1px solid #00afad;
  max-width: none;
  width: -webkit-fill-available;
}

.gridStyle {
  display: flex;
  flex-direction: column;
}

.asisaNav {
  padding-top: 15px;
  padding-bottom: 22px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 50px rgba(0,0,0,0.16);
  overflow: hidden;
  position: fixed;
  top: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
  transition: height 0.5s;
  z-index: 5;
}

.navTagLine {
  width: 200px;
}

.navTopBar {
  display: flex;
  justify-content: space-between;
  height: 74px;
  align-items: center;
  padding: 20px;
}

.navTagLine h3 {
  font-size: 14px;
  color: #c6c6c6;
}

.navTagLine p {
  font-size: 10px;
  color: #00afad;
  margin: 0;
}

.navBottomBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -22px;
  overflow-x: clip;
}

.navDropdown {
  text-decoration: none;
  color: black;
  justify-content: center;
  z-index: 2;
}

.navBottomBar a {
  text-decoration: none;
  color: black;
  padding: 20px 10px;
  padding-bottom: 20px;
  font-size: 14px;
}

.dropdownItem {
  text-decoration: none;
  color: black;
  padding: 20px 10px;
}

.dropdownChev {
  object-fit: none;
  max-height: 60px;
  display: none;
}

.navLogo img {
  max-height: 50px;
  margin-right: 15px;
  margin-left: 15px;
}

.dropdownLinks {
  display: none;
  position: absolute;
  z-index: 1;
  padding: 10px 0;
  height: 77px;
}

.dropdownText {
  background-color: #B0DFD8;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.dropdownLinks a {
  padding: 10px;
}

.doubleLines {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 100%;
  height: 5px;
  margin-left: 15px;
}

.navDropdown:hover .dropdownItem {
  color: #00afad;
  text-decoration: revert;
}

.navDropdown:hover .dropdownLinks {
  display: flex;
  flex-direction: column;
}

.navBottomBorder {
  border-top: 3px solid #7f4098;
  border-bottom: 3px solid #7f4098;
}

.iconsBar {
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
}

.iconDropdown {
  padding-left: 20px;
  height: 18px;
}

.asisaNavLinks {
  padding-left: 25px;
  padding-right: 25px;
  flex-wrap: wrap;
}

.asisaNav.open {
  height: 100%;
}

.navHamburger-toggle {
  display: none;
  color: #00afad;
}

.fa-chevron-down {
  color: #c6c6c6;
  margin-left: 10px;
}

.navDropdown:hover .fa-chevron-down {
  color: #00afad;
}

.logoTagLine {
  display: flex;
}

.dropdownItemDiv {
  padding: 5px 0;
}

.mobileSearch {
  display: none;
  margin-top: 10px;
}

@media screen and (max-width: 1190px) {
  .navTopBar {
    padding: 20px;
  }
}

@media screen and (max-width: 600px) {

  .navTagLine {
    width: auto;
  }
}
/************Media queries for nav************/
@media screen and (min-width: 1200px) {
  .navBottomBorder {
    padding-bottom: 38px;
    padding-top: 16px;
  }
}
/* On screens that are 1200px or less*/
@media screen and (max-width: 1200px) {
  .topnav .link {
    display: none;
  }

  .rightIcons {
    display: none;
  }

  .mobileSearch {
    display: block;
  }

  .asisaNav {
    height: 36px;
    padding-top: 25px;
    padding-bottom: 15px;
  }

  .navBottomBar {
    display: none;
    height: 85%;
  }

  .mobileNavDisplay {
    display: grid;
    padding: 20px;
    background-color: #B0DFD8;
  }

  .navHamburger-toggle {
    display: block;
  }

  .socialIconsDropdown {
    display: flex;
    grid-column-start: 1;
    grid-column-end: -1;
    margin-top: 25px;
  }

    .socialIconsDropdown a {
      padding: 0;
    }

      .socialIconsDropdown a:hover {
        border-bottom: none;
      }

  .navTopBar .logo img {
    max-height: 40px;
  }

  .navTopBar {
    height: 42px;
  }

  .dropdownInfoCol {
    width: 100%;
    margin: 0;
  }

  .dropdownLinks {
    position: inherit;
    margin-top: 0px;
    height: auto;
  }

  .dropdownInfo {
    display: block;
    padding: 0;
  }

    .dropdownInfo img {
      display: none;
    }

  .navBottomBar a {
    padding: 5px 0;
    color: #00AFAD;
  }

  .dropdownItemWithChev {
    pointer-events: none;
  }

  .navDropdown {
    flex-direction: column;
    justify-content: end
  }

  .navBottomBorder {
    border-bottom: none;
  }

  .dropdownText {
    margin-top: 0px;
    margin-left: 15px;
  }
}
/* On screens that are 900 or less*/
@media screen and (max-width: 900px) {
  .navTagLine h3 {
    font-size: 12px;
  }

  .navLogo img {
    max-height: 45px;
  }
}

/****************************BREADCRUMBS****************************/
.breadcrumbs {
  padding: 30px 12px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
}

.breadcrumbLink {
  text-decoration: none;
  color: #7ccbbf;
  padding: 5px;
  display: flex;
  float: left;
}

.activeBreadcrumb .breadcrumbLink {
  color: #00afad;
}

.activeBreadcrumb .breadcrumbDropdown .breadcrumbLink h5 {
  color: #7ccbbf;
}

.deActiveBreadcrumb .breadcrumbLink {
  color: #7ccbbf;
}

.breadcrumbDropdown {
  position: absolute;
  background-color: #D7F4F4;
  z-index: 1;
  padding: 10px;
  display: none;
  margin: 0;
  margin-top: 20px;
}

.deActiveBreadcrumb:hover .breadcrumbDropdown, .activeBreadcrumb:hover .breadcrumbDropdown {
  display: flex;
  flex-direction: column;
}

.breadcrumbs ul {
  list-style: none;
}

.deActiveBreadcrumb, .activeBreadcrumb {
  padding: 0 5px;
  display: flex;
}

.breadcrumbsChev {
  padding-left: 10px;
  padding-right: 5px;
}

.deActiveBreadcrumb:after {
  content: "• ";
  font-size: 20px;
  color: #7ccbbf;
  margin-left: 5px;
}

.breadcrumbs a {
  margin-top: -3px;
}

/****************************FOOTER****************************/
footer {
  background-color: #7f4098;
  margin-top: 80px;
}

.footer {
  display: flex;
  justify-content: space-between;
  color: white;
  height: 215px;
  align-items: flex-end;
  background-color: #7f4098;
  margin-top: 25px;
}

.footerContent {
  display: flex;
  justify-content: space-between;
  color: white;
  height: 100%;
  width: 80%;
}

  .footerContent h4 {
    color: white;
    font-size: 16px;
    font-weight: 300;
  }

  .footerContent a {
    text-decoration: none;
  }

  .footerContent .col-2 {
    width: 50%;
    margin-top: 30px;
  }

.socialIcon {
  color: white;
  text-decoration: none;
  padding-right: 10px;
  font-size: 20px;
}

  .socialIcon i {
    margin-top: 5px;
  }

.copyRight {
  display: flex;
  margin-top: 10px;
}

  .copyRight p {
    color: white;
    font-size: 13px;
  }

  .copyRight a {
    color: white;
  }

.subscribeSection {
  height: 210px;
  width: 260px;
  background-color: #00afad;
  padding: 30px 20px;
  text-align: center;
}

.subscribeSubmitted {
  margin-top: 50px;
}

.subscribeSection h4 {
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  width: 125px;
}

.subscribe label.umbraco-forms-label {
  display: none;
}

.subscribe .umbraco-forms-form input.text {
  max-width: 400px !important;
  padding: 0 5px;
  display: block;
  width: 95%;
  height: 40px;
}

.subscribe {
  margin-top: 30px;
}

  .subscribe input[type=text] {
    height: 40px;
    background-color: #40C3C2;
    border: none;
    margin-bottom: 8px;
    padding-left: 5px;
    color: WHITE;
    width: 100%;
    box-sizing: border-box;
  }

    .subscribe input[type=text]:focus {
      outline: none;
    }

  .subscribe .umbraco-forms-form .umbraco-forms-navigation {
    padding: 0;
  }

  .subscribe ::placeholder {
    color: WHITE;
  }

  .subscribe input[type=submit] {
    height: 40px;
    width: 160px;
    background-color: white;
    border: none;
    margin-top: 10px;
    padding-left: 5px;
    color: #7f4098;
  }

  .subscribe .umbraco-forms-page fieldset {
    margin: 0;
    padding: 0;
    border: none !Important;
  }

.SubmitContainer {
  margin-top: 50px;
}

.subscribe .field-validation-error {
  font-size: 12px;
}

.footerSocialIcons {
  width: 100px;
}

@media (max-width: 990px) {
  .footer {
    flex-direction: column-reverse;
    align-items: center;
    height: fit-content;
  }

  .footerContent h4 {
    font-size: 16px;
  }

  .subscribe {
    padding: 10px;
    width: -webkit-fill-available;
  }

  .footerContent {
    flex-direction: column;
    align-items: center;
  }

    .footerContent .col-2 {
      width: 300px;
      padding: 20px 0;
    }

  .copyRight {
    margin-top: 0px;
  }

  .subscribeSection {
    margin-top: -40px;
  }
}

/****************************footer image****************************/
.footerImage {
  height: 200px;
  width: 300px;
  display: flex;
  justify-content: center;
  margin-bottom: -50px;
}

.footerImageContainer {
  justify-content: flex-end;
  display: flex;
}

@media (max-width: 990px) {
  .footerImageContainer {
    justify-content: center;
    display: flex;
  }

  .footer {
    margin-top: 10px;
  }
}

/****************************GLOSSARY****************************/
.litterFilters {
  display: flex;
  justify-content: space-between;
}

  .litterFilters .anchor a {
    text-decoration: none;
    color: #00afad;
  }

  .litterFilters .anchor:hover a {
    color: #7F4098;
  }


.glossaryWord {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  position: relative;
}

.glossaryLetter h5 {
  font-size: 40px;
  margin-right: 30px;
  color: #707070;
}

.glossaryWord h6 {
  margin: 0 15px 0 0;
  font-size: 18px;
  color: #707070;
}

.glossaryWord p {
  margin-right: 15px;
  color: #707070;
}

.glossaryWordOnly {
  width: 20%;
}

.glossaryDefinition {
  width: 80%;
}

.glossary {
  align-items: baseline;
  background-color: rgba(178, 138, 191, 0.6);
  padding: 25px;
  display: inline-block;
  position: relative;
  margin: 20px 10px;
  width: 100%;
}

  .glossary:before {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid #7F4098;
  }

  .glossary:nth-child(3n+2) {
    background-color: rgba(124, 204, 191, 0.6);
  }

    .glossary:nth-child(3n+2):before {
      border: 2px solid #00afad;
    }

  .glossary:nth-child(3n+3) {
    background-color: #EEEEEE;
  }

    .glossary:nth-child(3n+3):before {
      border: 2px solid #A9A9A9;
    }

/* custom select */
.select2 {
  width: 100% !important;
}

.custom-select, .custom-select2 {
  position: relative;
  font-family: Arial, sans-serif;
}

  .custom-select select, .custom-select2 select {
    display: none;
  }

.select-selected {
  border: 2px solid #00afad;
}

  .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #00afad transparent transparent transparent;
  }

  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #00afad transparent;
    top: 7px;
  }

.select-items div, .select-selected {
  color: #00afad;
  padding: 8px 16px;
  cursor: pointer;
}

.select-items {
  position: absolute;
  background-color: white;
  border: 2px solid #00afad;
  border-top: none;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(124, 204, 191, 0.6);
}


@media screen and (max-width: 1000px) {
  .glossaryWordOnly {
    width: unset;
  }

  .glossary {
    width: auto;
  }
}

/****************************FAQ****************************/
.accordionHeading {
  margin-top: 15px;
}

.FAQquestion {
  z-index: 1;
}

  .FAQquestion h1 {
    color: white;
    margin: 0;
    text-align: center;
    padding-left: 25px;
    margin-right: 15px;
  }

.accordionHeading p {
  display: flex;
  justify-content: space-between;
  background-color: #00afad;
  padding: 20px 50px 20px 30px;
  color: white;
  cursor: pointer;
  width: 100%;
  margin-bottom: 0;
  margin-top: 0;
  margin-left: -10px;
  font-weight: 700;
  font-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-position-x: 98%;
  background-size: 20px;
  background-image: url('../images/chevron-down-solid.svg');
}

.FAQtext {
  overflow: hidden;
  display: none;
  position: relative;
  background-color: #D7F4F3;
  -webkit-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
  box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
}

  .FAQtext p {
    padding: 0px 25px 15px 30px;
    margin: 0;
    width: 90%;
    float: right;
    color: #707070;
  }

  .FAQtext #pageBody ul {
    list-style-type: disc;
    font-family: Arial, sans-serif;
    color: #707070;
    font-size: 16px;
    line-height: 26px;
    padding: 0px 25px 15px 30px;
    margin: 0;
    width: 88%;
    float: right;
  }

  .FAQtext h1 {
    padding-left: 25px;
    width: 3%;
    float: left;
    color: #707070;
  }

.accordionToggle {
  display: flex;
  transition: background .3s ease;
  -webkit-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
  box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
  background-color: #00afad;
  align-items: center;
  justify-content: center;
}

.FQAEntitiesLinks {
  text-align: center;
  margin-bottom: 70px;
}

.accordionHeading p.active {
  background-image: url('../images/chevron-up-solid.svg');
}

p.active .accordionHeading::after {
  transform: rotate( -45deg );
  top: 9px;
}



/* On screens that are 1182 or less*/
@media (max-width: 1182px) {
  .FAQtext p {
    width: 88%;
  }

  .FAQtext #pageBody ul {
    width: 86%;
  }
}

/* On screens that are 1024 or less*/
@media (max-width: 1024px) {
  .accordionHeading p {
    padding: 15px 50px 15px 10px;
    background-position-x: 98%;
  }
}

@media (max-width: 990px) {
  .FAQquestion {
    display: none;
  }

  .accordionHeading p {
    border-radius: 15px;
    margin-left: 0;
  }

  .FAQtext h1 {
    display: none;
  }

  .FAQtext p {
    padding: 5px 15px 8px 15px;
    margin: 0;
    width: -webkit-fill-available;
  }

  .FAQAccordion {
    margin-top: 15px;
    margin-bottom: 35px;
  }

  .FQAEntitiesLinks {
    margin-bottom: 60px;
  }

  .FAQtext #pageBody ul {
    width: -webkit-fill-available;
  }
}

/* On screens that are 768px or less*/
@media (max-width: 768px) {
  .FAQContainer {
    padding: 0 20px 0 20px;
  }

  .accordionHeading p {
    background-position-x: 97%;
  }
}

/****************************href tags****************************/
.downloadIcons {
  border: none;
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 19px !important;
}

.PDFIcon {
  background-image: url('../Images/PDF.png');
}

.XLSIcon {
  background-image: url('../Images/XLS.png');
}

.ZIPIcon {
  background-image: url('../Images/ZIP.png');
}

.DOCIcon {
  background-image: url('../Images/DOC.png');
}

.downloadIcons span {
  color: #00afad;
  font-weight: 400;
  letter-spacing: 0px;
  transition: 0.3s;
  font-size: 16px;
  margin-left: 24px;
}

/**************************** Details Page Key Takeaways****************************/
.KeyTakeAwaysContainer {
  position: relative;
}

.KeyTakeAwaysText {
  line-height: 26px;
}

.KeyTakeAwaysHeading {
  display: flex;
  align-items: center;
}

.KeyTakeAways {
  padding: 15px;
  background-color: #00afad;
  min-height: 200px;
}

  .KeyTakeAways h3 {
    color: white;
    font-size: 24px;
    margin-left: 10px;
  }

  .KeyTakeAways p, .KeyTakeAways ul, .KeyTakeAways ol {
    color: white
  }

.KeyTakeAwaysContainer:before {
  content: '';
  width: 1rem;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #7e3f98;
  border-right: none;
  left: -8px;
  top: -8px;
}

.KeyTakeAwaysContainer:after {
  content: '';
  width: 1rem;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #7e3f98;
  top: -8px;
  right: 8px;
  border-left: none;
}

/****************************Topics Details Page****************************/
.topicsDetailsPageIntro {
  position: relative;
  grid-column-end: span 3;
  grid-row-end: span 3;
}

.topicsDetailsPageRealtedItems {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.topicsDetailsPageRealtedItemsNoWidth {
  display: flex;
  flex-direction: column;
}

.topicsDetailsPageRealtedItems img {
  max-width: 270px;
  margin: 0 auto;
}

.topicsDetailsPageRTE {
  width: 80%;
}

.subMenu {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
}

.relatedItems {
  width: 100%;
}

  .relatedItems p {
    line-height: 22px;
    margin: 15px 0;
  }

.colorBoxWithBorder {
  background-color: #EEEEEE;
  padding: 20px;
  position: relative;
  margin: 30px 0px 30px 20px;
  width: auto;
}

  .colorBoxWithBorder p {
    color: #A9A9A9;
  }

  .colorBoxWithBorder a {
    text-decoration: none;
    position: relative;
  }

  .colorBoxWithBorder:nth-child(2n+2) {
    background-color: rgba(178, 138, 191, 0.6);
  }

    .colorBoxWithBorder:nth-child(2n+2) p {
      color: #7e3f98;
    }

    .colorBoxWithBorder:nth-child(2n+2):before {
      border: 2px solid #7e3f98;
    }

  .colorBoxWithBorder:nth-child(3n+3) {
    background-color: rgba(124, 204, 191, 0.6);
  }

    .colorBoxWithBorder:nth-child(3n+3) p {
      color: #00afad;
    }

    .colorBoxWithBorder:nth-child(3n+3):before {
      border: 2px solid #00afad;
    }

  .colorBoxWithBorder:before {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid #A9A9A9;
  }

.tipsToRemember img {
  max-width: 200px;
  max-height: 400px;
  margin-right: 30px;
  padding-top: 30px;
}

.tipsToRemember h1 {
  margin-bottom: 0;
}

.tipsToRemember p {
  padding: 15px 0;
  width: 45%;
}

.callToAction {
  background-color: #00afad;
  color: white;
  padding: 15px 30px;
  min-width: 150px;
  width: fit-content;
  margin: 10px;
  text-align: center;
  margin-bottom: 40px;
}

  .callToAction a {
    text-decoration: none;
    color: white;
    font-size: 14px;
  }

.callToActionButtons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.topicsDetailsPageBody {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 15px;
}
/*topics details page mobile*/
@media screen and (max-width: 1200px) {
  .topicsDetailsPageRTE {
    width: 70%;
  }

  .subMenu {
    justify-content: end;
  }
}

@media screen and (max-width: 1000px) {

  .educationalImageContainer {
    order: -1;
  }

  .topicsDetailsPageBody {
    display: flex;
    flex-wrap: wrap;
  }

  .topicsDetailsPageIntro {
    width: 100%;
  }

  .topicsDetailsPageRealtedItems {
    width: 100%;
  }

  .relatedItems {
    width: 100%;
  }
}

/*topics details page mobile*/
@media screen and (max-width: 700px) {
  .flex {
    display: block;
  }

  .topicsDetailsPageRTE {
    width: 100%;
  }

  .relatedItems {
    width: 100%;
  }

  .topicsDetailsPageIntro img {
    max-height: 270px;
    max-width: 270px;
    margin-left: 0px;
  }

  .tipsToRemember img {
    margin-right: 0px;
    padding-top: 10px;
  }

  .tipsToRemember p {
    padding: 5px 0;
    width: 100%;
  }
}

.hidden {
  display: none;
}

/****************************Topics Landing Page****************************/
.topicsCategories {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.deactiveSubNav {
  padding: 15px 30px;
  text-decoration: none;
  font-size: 16px;
  color: #d1d3d4;
  font-weight: 700;
  white-space: nowrap;
}

.activeSubNav {
  color: #7e3f98;
  padding: 15px 30px;
  border: 2px solid #7e3f98;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.introSection {
  background-color: #00AFAD;
  margin: 20px 0;
}

  .introSection .container {
    display: flex;
    justify-content: center;
  }

.introText {
  padding-right: 15px;
  color: white;
  display: flex;
  align-items: center;
}

.introImg img {
  height: inherit;
}

.introImg {
  height: 200px;
}

.introText p {
  color: white;
  font-size: 20px;
}

.introText h1 {
  color: white;
  font-size: 26px;
}

.quizButton {
  display: flex;
  min-height: 96px;
  background-color: #7F4098;
  align-items: center;
  justify-content: space-between;
}

.quizIcon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 96px;
  width: 96px;
  margin-right: 20px;
}

  .quizIcon img {
    max-width: 80px;
  }

.quizName {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

  .quizName p {
    color: white;
    font-size: 12px;
    margin: 0;
    font-style: italic;
    letter-spacing: 4px;
    line-height: 20px;
  }

  .quizName h6 {
    color: white;
    font-size: 18px;
    margin: 0;
  }

.takeQuizButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  margin-left: 10px;
}

  .takeQuizButton a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: white;
    border: 2px solid white;
    min-height: 40px;
    padding: 0 30px;
    font-size: 14px;  

  }

.tagsAndWidget {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.TopicsTags .tagButtonActive {
  background-color: #7F4098;
  color: white;
  border: 2px solid #7F4098;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.previewGraphs span {
  margin-left: 10px;
}

.TopicsTags button {
  border: 2px solid #00AFAD;
  color: #00AFAD;
  height: 40px;
  padding: 0 20px;
  margin-right: 10px;
  margin-top: 10px;
}

.moneyJourney {
  width: 364px;
  text-align: center;
  -webkit-box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 15%);
  -moz-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
  box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 15%);
  margin-right: 10px;
  height: fit-content;
}

  .moneyJourney .FAQtext {
    background-color: white;
    padding: 0 20px;
    box-shadow: none;
    margin-top: -40px;
  }

    .moneyJourney .FAQtext p {
      margin: 0;
      padding: 0;
      width: 100%;
      float: right;
      color: #A9A9A9;
    }

  .moneyJourney h6 {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #a7a9ac;
    font-size: 16px;
    font-weight: 100;
  }

  .moneyJourney p {
    color: #7F4098;
    font-size: 16px;
    font-weight: 100;
    background-color: white;
    margin: 17px;
    padding: 0;
    width: auto;
    margin-bottom: 0;
  }

  .moneyJourney .active p {
    padding: 0 30px 0 0;
  }

  .moneyJourney p::after {
    border-style: solid;
    border-width: 0.15em 0.15em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    right: 15px;
    position: relative;
    top: 8px;
    transform: rotate( 135deg );
    vertical-align: top;
    width: 0.45em;
    border-color: #7f4098
  }

.accordionHeading .active p::after {
  transform: rotate( -45deg );
  top: 10px;
  right: -15px;
}


.moneyJourney .accordionToggle p {
  border-bottom: 2px solid rgb(230, 230, 230);
  padding-bottom: 5px;
  border-radius: 0;
}

.previewGraph.active {
  display: none;
}

.tagsHeading {
  color: #A9A9A9;
  padding-top: 0;
  font-size: 16px;
  font-weight: 100;
  margin-top: 0;
}

figure {
  position: relative;
  display: flex;
  align-self: center;
  justify-content: center;
  margin: 0;
}

.gauageGraph figure {
  width: 348px;
  height: 120px;
  flex-direction: row;
}

.quizGraph figure, .topicsGraph figure {
  width: 130px;
  height: 60px;
  justify-content: left;
}

.quizGraph, .topicsGraph {
  margin-top: 10px;
  padding-right: 10px;
}

figure svg {
  position: absolute;
  right: 0;
  top: 0;
}

figure .color {
  position: absolute;
  right: 0;
  top: 0;
  -webkit-filter: drop-shadow( 0px 2px 2px rgba(0, 0, 0, .2));
  filter: drop-shadow( 0px 2px 2px rgba(0, 0, 0, .2));
}

figure svg path {
  transition: all 1s;
}

figure .text {
  text-align: center;
  z-index: 1;
  align-self: flex-end;
  font-family: Arial, sans-serif;
  color: #a7a9ac;
  font-size: 16px;
  position: absolute;
  bottom: 10px;
}

figure .percent {
  display: flex;
  align-items: center;
}

  figure .percent p {
    margin-right: 5px;
  }

figure .symbol {
  font-size: 16px;
}

figure .complete {
  font-size: 26px;
}

.moneyJourney .accordionToggle {
  background-color: white;
  box-shadow: none;
  margin: 0;
  height: 90px;
  display: block;
}

.journeySection {
  margin-top: 10px;
}

  .journeySection span {
    color: #7F4098;
    font-weight: 700;
  }

.LandingColorBoxWithBorder {
  background-color: #EEEEEE;
  padding-top: 0;
  position: relative;
  margin: 10px 0px 0px 10px;
  min-height: 160px;
}

.landingColorBoxHeading {
  font-weight: 700;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: left;
  margin: 10px 0;
  color: #a7a9ac;
  font-size: 16px;
  line-height: 26px;
}

  .landingColorBoxHeading:after {
    content: '';
    height: 6px;
    border-top: none;
    border-Bottom: none;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
  }

.roundImageTopics img {
  margin-top: -30px;
  max-height: 182px;
  max-width: 182px;
  object-fit: contain;
}

.questionClassImage {
  display: none;
  position: inherit;
}

.LandingColorBoxText {
  padding: 0px 20px 10px 10px;
}

.LandingColorBoxWithBorder:nth-child(10n+3) .questionClassImage, .LandingColorBoxWithBorder:nth-child(10n+6) .questionClassImage, .LandingColorBoxWithBorder:nth-child(10n+7) .questionClassImage {
  display: flex;
}

.LandingColorBoxWithBorder p {
  color: #A9A9A9;
}

.LandingColorBoxWithBorder a {
  text-decoration: none;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.LandingColorBoxWithBorder:nth-child(10n+2), .LandingColorBoxWithBorder:nth-child(9), .LandingColorBoxWithBorder:nth-child(10), .LandingColorBoxWithBorder:nth-child(10n+21) {
  grid-column-end: span 2;
}

.LandingColorBoxWithBorder:nth-child(10n+4), .LandingColorBoxWithBorder:nth-child(10n+8), .LandingColorBoxWithBorder:nth-child(10n+11) {
  background-color: rgba(178, 138, 191, 0.6);
}

  .LandingColorBoxWithBorder:nth-child(10n+4) p, .LandingColorBoxWithBorder:nth-child(10n+8) p, .LandingColorBoxWithBorder:nth-child(10n+11) p, .LandingColorBoxWithBorder:nth-child(10n+4) h2, .LandingColorBoxWithBorder:nth-child(10n+8) h2, .LandingColorBoxWithBorder:nth-child(10n+11) h2 {
    color: #7e3f98;
  }

.LandingColorBoxWithBorder:nth-child(10n+3) {
  grid-row-end: span 2;
}

.LandingColorBoxWithBorder:nth-child(10n+4):before, .LandingColorBoxWithBorder:nth-child(10n+8):before, .LandingColorBoxWithBorder:nth-child(10n+11):before {
  border: 2px solid #7e3f98;
}

.LandingColorBoxWithBorder:nth-child(10n+5), .LandingColorBoxWithBorder:nth-child(10n+6) {
  background-color: rgba(124, 204, 191, 0.6);
}

  .LandingColorBoxWithBorder:nth-child(10n+5) p, .LandingColorBoxWithBorder:nth-child(10n+6) p, .LandingColorBoxWithBorder:nth-child(10n+5) h2, .LandingColorBoxWithBorder:nth-child(10n+6) h2 {
    color: #00afad;
  }

  .LandingColorBoxWithBorder:nth-child(10n+5):before, .LandingColorBoxWithBorder:nth-child(10n+6):before {
    border: 2px solid #00afad;
  }

.LandingColorBoxWithBorder:nth-child(10n+6), .LandingColorBoxWithBorder:nth-child(10n+7) {
  grid-row-end: span 2;
}

.LandingColorBoxWithBorder:before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  right: 8px;
  bottom: 8px;
  border: 2px solid #A9A9A9;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  grid-gap: 30px;
  grid-auto-rows: minmax(160px, auto);
  grid-auto-flow: dense;
  padding: 30px 0;
  margin-left: 10px;
}

  .grid-layout.landingPageQuestions {
    margin-left: 0;
  }

.samIcon {
  grid-area: 3;
  grid-column: 3 / 3;
  grid-row-end: span 2;
  display: flex;
  justify-content: center;
}

  .samIcon img {
    max-height: 380px;
    max-width: 360px;
  }

.providersSection {
  text-align: center;
}

  .providersSection .panel, .providersSection h1 {
    margin: 0;
  }

  .providersSection a {
    text-decoration: none;
  }

.accordion {
  transition: 0.4s;
}

.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  margin: 40px 0;
}

.panelWithoutButton {
  margin: -60px 0 40px 0;
}

.panel img {
  max-width: 100px;
  max-height: 60px;
  padding: 20px 20px;
}

.panelWithoutButton img {
  max-width: 100px;
  max-height: 60px;
  padding: 20px 20px;
}

.widgetCollapsedBar .active span {
  display: block;
}

.previewGraphsOnly {
  display: flex;
  width: 100%;
}

.previewGraph figure .text {
  text-align: center;
  z-index: 1;
  align-self: center;
  position: inherit;
  bottom: 0;
}

  .previewGraph figure .text h6 {
    font-family: Arial, sans-serif;
    color: #a7a9ac;
    font-size: 12px;
  }

.previewGraph figure {
  flex-direction: column;
}

.previewGraphs .gauageGraph figure svg {
  position: absolute;
  right: -50px;
  top: -14px;
}

.widgetCollapsedBar .gauageGraph figure {
  width: 175px;
  height: 25px;
}

.widgetCollapsedBar .quizGraph figure, .widgetCollapsedBar .topicsGraph figure {
  width: 70px;
  height: 25px;
  justify-content: left;
  padding-top: 10px;
}

.previewGraphs .gauageGraph figure .text {
  text-align: center;
  z-index: 1;
  align-self: center;
  position: absolute;
  bottom: -25px;
  left: 30px;
}

.previewGraphs figure svg {
  position: absolute;
  right: -40px;
  top: 25px;
}

/* On screens that are 1200 or less*/
@media (max-width: 1200px) {
  .introSection .container {
    height: unset;
    align-items: center;
  }

  .grid-layout {
    grid-gap: 20px;
  }

  .subMenu {
    display: inline-block;
    padding: 25px;
  }

  .LandingColorBoxWithBorder {
    grid-column-end: span 3;
  }
}
/* On screens that are 1000 or less*/
@media (max-width: 1000px) {
  .grid-layout {
    display: flex;
    flex-direction: column;
  }

  .HomePageNewsArticles:nth-child(8n+6) img {
    max-width: 350px;
  }

  .introSection .container {
    flex-direction: column;
  }

  .introText {
    width: 80%;
  }

  .introImg {
    width: -webkit-fill-available;
    height: inherit;
    padding-bottom: 20px;
  }

    .introImg img {
      height: auto;
      width: 100%;
    }

  .samIcon {
    display: flex;
    justify-content: center;
  }

  .LandingColorBoxWithBorder:nth-child(10n+3), .LandingColorBoxWithBorder:nth-child(10n+6), .LandingColorBoxWithBorder:nth-child(10n+7) {
    margin-top: 20px;
  }
}

/* On screens that are 800 or less*/
@media (max-width: 800px) {
  .introSection {
    flex-direction: column;
  }

  .quizButton {
    flex-direction: column;
  }

  .takeQuizButton {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .quizName {
    padding: 10px;
  }

    .quizName h6 {
      font-size: 14px;
      line-height: 21px;
    }

  .tagsAndWidget {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .topicsTagContainer {
    justify-content: center;
  }

  .tagsHeading {
    text-align: center;
  }

  .HomePageNewsArticlesText .NewsLandingBlurb, .educationalTopicBlockText p {
    display: none;
  }
}

/* On screens that are 450 or less*/
@media (max-width: 450px) {
  .takeQuizButton a {
    padding: 5px 10px;
  }

  .moneyJourney {
    width: 300px;
    margin-right: 0;
  }

  .previewGraphs span {
    margin-left: 0px;
  }

  .moneyJourney p::after {
    top: 5px;
    right: 5px;
  }

  .widgetCollapsedBar .gauageGraph figure {
    width: 150px;
    height: 40px;
  }

  .previewGraphs .gauageGraph figure svg {
    position: absolute;
    right: -60px;
    top: -18px;
  }

  .previewGraphs .gauageGraph figure .text {
    bottom: 0px;
    left: 20px;
  }

  .widgetCollapsedBar .quizGraph figure, .widgetCollapsedBar .topicsGraph figure {
    width: 60px;
  }

  .quizGraph, .topicsGraph {
    margin-top: 0px;
  }

  .gauageGraph figure {
    width: 310px;
  }

    .gauageGraph figure .percent {
      display: flex;
      align-items: center;
      position: absolute;
      right: 10px;
      bottom: 2px;
    }

  .quizGraph figure, .topicsGraph figure {
    width: 120px;
    height: 60px;
    justify-content: left;
  }
}

/****************************NEWS Landing Page****************************/
.noMargin {
  margin: 0;
}

.newsFilter {
  color: #A9A9A9;
  padding: 8px 0px;
  cursor: pointer;
}

.select-selected {
  color: #A9A9A9;
  padding: 8px 16px;
  cursor: pointer;
}

  .newsFilter, .select-selected h4 {
    color: black;
    font-weight: 100;
  }

    .newsFilter h4 {
      color: black;
      font-weight: 100;
    }

    .newsFilter .select-selected {
      border: none;
    }

      .newsFilter .select-selected:after {
        width: 12px;
        height: 10px;
        border: none;
        background-image: url(../Images/chev.png);
        background-repeat: no-repeat;
      }

      .newsFilter .select-selected.select-arrow-active:after {
        transform: rotate(180deg);
      }

    .newsFilter .select-items {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 99;
      border-top: 2px solid #00afad;
    }

      .newsFilter .select-items div:hover, .same-as-selected {
        background-color: rgba(124, 204, 191, 0.6);
      }

.grid-layout-News {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  grid-gap: 30px;
  grid-auto-rows: minmax(160px, auto);
  grid-auto-flow: dense;
  padding: 30px 0;
  margin-left: 10px;
}

.samIconNewsLanding {
  grid-area: 1;
  grid-column: 3 / 3;
  grid-row-end: span 2;
  display: flex;
  justify-content: center;
}

  .samIconNewsLanding img {
    max-height: 380px;
    max-width: 360px;
  }

.NewsLandingDate p {
  font-weight: 700;
  font-size: 12px;
}

.NewslandingPage .LandingColorBoxWithBorder:nth-child(2), .NewslandingPage .LandingColorBoxWithBorder:nth-child(3), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+5), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n +8), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+9) {
  grid-column-end: span 2;
  grid-row-end: span 1;
}

.NewslandingPage .LandingColorBoxWithBorder:nth-child(7n +4), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n +10) {
  grid-column-end: span 1;
  grid-row-end: span 2;
}

.NewslandingPage .LandingColorBoxWithBorder:nth-child(7n + 6), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n + 7) {
  grid-column-end: span 1;
  grid-row-end: span 1;
}


.NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+3), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+6), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+9) {
  background-color: rgba(178, 138, 191, 0.6);
}

  .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+3):before, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+6):before, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+9):before {
    border: 2px solid #7e3f98;
  }

  .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+3) p, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+6) p, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+9) p {
    color: #7e3f98;
  }

.NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+4), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+7), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+10) {
  background-color: rgba(124, 204, 191, 0.6);
}

  .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+4):before, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+7):before, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+10):before {
    border: 2px solid #00afad;
  }

  .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+4) p, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+7) p, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+10) p {
    color: #00afad;
  }

.NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+5), .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+8) {
  background-color: #EEEEEE;
}

  .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+5):before, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+8):before {
    border: 2px solid #A9A9A9;
  }

  .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+5) p, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+8) p {
    color: #A9A9A9;
  }

.NewsLandingHeading h2 {
  font-size: 18px;
  color: black;
  margin: 0;
  font-weight: 100;
}

.LandingColorBoxWithBorder .NewsLandingHeading h2 {
  font-size: 18px;
  color: black;
  margin: 0;
  font-weight: 100;
}

.NewslandingPage .questionClass img {
  margin-top: -15px;
  margin-left: -15px;
  margin-bottom: -5px;
  width: 100px;
}

.NewsLandingImages {
  position: inherit;
}

.NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+2) .NewsFlex, .NewslandingPage .LandingColorBoxWithBorder:nth-child(3) .NewsFlex, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+5) .NewsFlex, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+6) .NewsFlex, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+7) .NewsFlex, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+8) .NewsFlex, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+9) .NewsFlex {
  display: flex;
}

.NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+2) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+3) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+5) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+8) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+9) img {
  width: 350px;
  height: 160px;
  object-fit: cover;
}

.NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+4) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+10) img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+6) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(7n+7) img {
  width: 160px;
  height: 160px;
  object-fit: cover;
}

.NewsLandingText {
  padding: 0 15px 15px 15px;
}

/* On screens that are 1200 or less*/
@media (max-width: 1200px) {
  .grid-layout-News {
    display: flex;
    flex-direction: column;
  }

  .NewslandingPage .LandingColorBoxWithBorder {
    grid-column-end: span 3;
  }

  .samIconNewsLanding {
    display: flex;
    justify-content: center;
  }

  .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+2), .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+3), .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+5), .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+8), .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+9) {
    display: block;
  }

    .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+2) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+3) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+5) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+8) img, .NewslandingPage .LandingColorBoxWithBorder:nth-child(10n+9) img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }
}

/****************************NEWS DETAILS PAGE****************************/
.AurthorPopUp {
  position: absolute;
  background-color: #D7F4F4;
  z-index: 1;
  display: none;
  margin: 0;
  max-width: 500px;
}

.AurthorPopUpContainer p {
  color: #00afad;
  font-size: 14px;
}

.NewsDetailsPageIntroImage img {
  width: 100%;
}

.AurthorPopUpContainer:hover .AurthorPopUp {
  display: flex;
}

.AurthorPopUp img {
  height: fit-content;
  padding: 20px;
  max-height: 100px;
  max-width: 100px;
  object-fit: cover;
}

.AurthorPopUp p {
  margin: 0;
}

.AuthorName {
  display: flex;
  margin-bottom: 15px;
}

  .AuthorName p {
    padding-right: 5px;
  }

.AurthorPopUp p:not(:first-child) {
  padding: 0 10px;
}

#tagBlock h4 {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #7e3f98;
  font-weight: 300;
}

#tagBlock p {
  color: #00afad;
  font-style: italic;
  margin-left: 15px;
}

#tagBlock {
  display: flex;
}

/****************************Quiz PAGE****************************/
.QuizHeading {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 15px;
}

  .QuizHeading h3 {
    font-size: 30px;
    margin-left: 30px;
  }

.quizModal {
  background-color: #EEEEEE;
  padding: 20px 25px 25px 20px;
  position: relative;
  margin: 20px 10px 35px 10px;
}

  .quizModal:before {
    content: "";
    position: absolute;
    left: -8px;
    top: -8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid #A9A9A9;
  }

.QuizResultsContent {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 60px 20px;
  position: inherit;
}

.QuizResultsScore {
  background-color: #D7F4F3;
  border: 2px solid #37C7C5;
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.QuizResultsContent a {
  color: #00afad;
}

.QuizScore {
  color: black;
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
}

.quizCorrectAnswer h5 {
  font-weight: 700;
  color: #7e3f98;
  font-size: 16px;
  margin: 0;
}

.QuizResultsScore p {
  color: #00afad;
  font-weight: 700;
  font-size: 20px;
}

.quizResaultsAnswer h6, .quizResaultQuestion h6 {
  font-weight: 100;
  color: #00afad;
  font-size: 16px;
  margin: 0;
}

.quizCorrectAnswer {
  border: 2px solid purple;
  padding: 5px;
}

  .quizCorrectAnswer p {
    color: #7e3f98;
  }

.quizTickImage {
  max-height: 30px;
  max-width: 30px;
  margin-left: 15px;
}

/****************************Tool Tip****************************/
.tooltip {
  position: absolute;
  width: 300px;
}

  .tooltip .tooltipText {
    visibility: hidden;
    background-color: #EEEEEE;
    padding: 10px;
    position: absolute;
    z-index: 1;
    width: 300px;
    font-weight: 300;
    word-break: break-word;
  }

  .tooltip:hover .tooltipText {
    visibility: visible;
  }

.markAsGlossary + .tooltip > .tooltip-inner {
  background-color: #ffb6a7;
  color: #3A2C2A;
  padding: 10px;
  position: absolute;
  z-index: 5;
}

.markAsGlossary + .tooltip > .tooltip-inner * {
  color: #3A2C2A;
}

.markAsGlossary {
  color: #00afad;
  cursor: pointer;
}

/****************************Ticker Banner****************************/
.ticker-banner {
  max-width: 100%;
  width: 100%;
  height: 46px;
  background-color: var(--color-gray);
  overflow: hidden;
  position: relative;
}

.ticker-track {
  position: absolute;
  display: flex;
  white-space: nowrap;
  will-change: transform;
  width: fit-content;
}

.ticker-content {
  display: inline-flex;
  align-items: center;
  padding: 12px 0;
  min-width: max-content;
}

.ticker-item {
  display: inline-block;
  margin-right: 24px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  line-height: 22px;
}

  .ticker-item:last-child {
    margin-right: 24px;
  }

.color-teal {
  color: var(--color-teal);
}

.color-purple {
  color: var(--color-purple);
}

.color-orange {
  color: var(--color-orange);
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

/****************************Search Modal****************************/
#searchModal {
  display: none;
}

.search {
  position: absolute;
  z-index: 100;
  background-color: white;
  width: -webkit-fill-available;
  border: 2px solid #00afad;
  margin: 100px;
  box-sizing: border-box;
}

.flexModal {
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.searchClose {
  height: 45px;
  width: 45px;
  float: right;
  padding: 10px;
  padding-top: 0;
  cursor: pointer;
}

.modalContent h3 {
  color: #00afad;
  font-size: 30px;
  font-weight: 700;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
}

.modalContent input {
  border: 2px solid #00afad;
  width: 100%;
  height: 40px;
  padding-left: 5px;
}

  .modalContent input:active, .modalContent input:focus {
    outline: none;
  }

.modalTextOnly {
  margin: 0 60px;
}

.modalContent h4:after {
  border-top: 2px solid #00afad;
  border-Bottom: 2px solid #00afad;
  content: '';
  height: 6px;
  flex: 1 0 20px;
  margin: 0 0 0 20px;
}

.modalContent h4 {
  font-weight: 700;
  margin-top: 30px;
  margin-block-end: 0.83em;
  font-size: 20px;
  color: black;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.searchResults a h5 {
  color: #00afad;
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
}

.Nofloat {
  float: none;
}

.SearchResult {
  margin-bottom: 30px;
}

.searchResults a {
  text-decoration: none;
}

.searchResults h5 {
  color: #00afad;
  font-size: 14px;
}

.quizModalHeading {
  display: flex;
}

.floatleft {
  float: left;
}

  .floatleft h5 {
    font-weight: 100;
    margin-right: 5px;
  }
/* On screens that are 1200 or less*/
@media (max-width: 1200px) {
  .QuizHeading h3 {
    font-size: 16px;
    margin-left: 10px;
  }

  .QuizHeading img {
    height: 40px;
  }

  .modalTextOnly {
    margin: 0 20px;
  }
}

/****************************Tools Landing Page****************************/
.ToolContainer {
  text-align: center;
  margin: 15px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 336px;
  justify-content: space-between;
}

.ToolsIcon {
  background: #37C7C5;
  height: 160px;
  width: 160px;
  align-items: center;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  margin: 0;
  margin-bottom: 15px;
}

.AllTools {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}

.ToolsButton {
  margin: 15px 0;
}

  .ToolsButton a {
    border: 2px solid #37C7C5;
    padding: 10px;
    text-decoration: none;
    color: #37C7C5;
  }

.ToolContainer p {
  color: #37C7C5;
  margin: 0;
}

.ToolContainer h2 {
  color: #37C7C5;
  margin: 0;
  font-weight: 700;
  font-size: 18px;
}

.ToolContainer:nth-child(3n+2) .ToolsButton a {
  border: 2px solid #7f4098;
  color: #7f4098;
}

.ToolContainer:nth-child(3n+2) p, .ToolContainer:nth-child(3n+2) h2 {
  color: #7f4098;
}

.ToolContainer:nth-child(3n+2) .ToolsIcon {
  background-color: #7f4098;
}

.ToolContainer:nth-child(3n+3) .ToolsButton a {
  border: 2px solid #A9A9A9;
  color: #A9A9A9;
}

.ToolContainer:nth-child(3n+3) p, .ToolContainer:nth-child(3n+3) h2 {
  color: #A9A9A9;
}

.ToolContainer:nth-child(3n+3) .ToolsIcon {
  background-color: #A9A9A9;
}

/* On screens that are 1000 or less*/
@media (max-width: 1200px) {
  .AllTools {
    justify-content: center;
  }
}

/****************************Tools and Calculators****************************/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.calculatorSection input::placeholder {
  color: #a7a9ac;
}

.budgetCalculatorTable {
  display: none;
}

.BorderBox {
  background-color: #EEEEEE;
  padding: 20px 30px 20px 20px;
  position: relative;
  margin: 30px 0px 30px 20px;
}

  .BorderBox:before {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid #A9A9A9;
  }

.categories h4 {
  background-color: #D7F4F3;
  border: 2px solid #37C7C5;
  text-align: center;
  padding: 15px;
  margin: 15px 50px;
}

.ToolsContainer h1 {
  font-size: 24px;
  font-weight: 700;
}

.TextCenter {
  text-align: center;
}

.select2-container--default .select2-selection--single {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #aaa;
  border-radius: 0px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #D7F4F4;
  color: #00afad;
}

.ownAmountTabSymbol {
  color: #7F4098;
}

/****************************HOME PAGE****************************/
.HomePgaeSamIcon {
  grid-area: 1;
  grid-column: 3 / 3;
  grid-row-end: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

  .HomePgaeSamIcon a {
    cursor: pointer;
    display: inline-block;
  }

  .HomePgaeSamIcon img {
    height: 360px;
  }

.homePageQuizBanner p {
  letter-spacing: 2px;
}

/*Tool Banner Slider*/
.tool-banner-slider-wrapper {
  position: relative;
  width: 100%;
}

.tool-banner-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: height 0.2s ease-in-out;
}

.tool-banner-slider:active {
  cursor: grabbing;
}

.tool-banner-slide {
  width: 100%;
  will-change: transform;
}

.tool-banner-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-bottom: 10px;
}

.tool-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #D1D3D4;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.tool-banner-dot:hover {
  background-color: #A7A9AC;
}

.tool-banner-dot.active {
  background-color: #7F4098;
  border-color: #7F4098;
}

@media (max-width: 800px) {
  .tool-banner-dots {
    gap: 10px;
    margin-top: 15px;
  }

  .tool-banner-dot {
    width: 10px;
    height: 10px;
  }

  .tool-banner-dot.active {
    width: 12px;
    height: 12px;
  }
}

/*Homepage featured items*/
/*default block grey and double width like the first one*/
.HomePageNewsArticles {
  background-color: #EEEEEE;
  position: relative;
  grid-column-end: span 2;
  grid-row-end: span 1;
  display: flex;
  min-height: 160px;
}

  .HomePageNewsArticles a {
    display: flex;
    text-decoration: none;
    position: inherit;
  }

.HomePageNewsArticlesImg img {
  margin-top: -10px;
  margin-left: -10px;
  margin-bottom: -5px;
  width: 350px;
  height: 160px;
  object-fit: cover;
}

.HomePageNewsArticles:before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  right: 5px;
  bottom: 5px;
  border: 2px solid #A9A9A9;
}

/*create sizes - default is the double width one*/
/*create small block*/
.HomePageNewsArticles:nth-child(3), .HomePageNewsArticles:nth-child(4), .HomePageNewsArticles:nth-child(6), .HomePageNewsArticles:nth-child(8n+8), .HomePageNewsArticles:nth-child(8n+10), .HomePageNewsArticles:nth-child(8n+13), .HomePageNewsArticles:nth-child(8n+15) {
  grid-column-end: span 1;
  grid-row-end: span 1;
  min-height: 160px;
}

  .HomePageNewsArticles:nth-child(3) img, .HomePageNewsArticles:nth-child(4) img, .HomePageNewsArticles:nth-child(8n+8) img, .HomePageNewsArticles:nth-child(8n+10) img, .HomePageNewsArticles:nth-child(8n+13) img, .HomePageNewsArticles:nth-child(8n+15) img {
    height: 160px;
    width: 160px;
    object-fit: cover;
  }

  .HomePageNewsArticles:nth-child(3) .NewsLandingBlurb, .HomePageNewsArticles:nth-child(4) .NewsLandingBlurb, .HomePageNewsArticles:nth-child(8n+8) .NewsLandingBlurb, .HomePageNewsArticles:nth-child(8n+10) .NewsLandingBlurb, .HomePageNewsArticles:nth-child(8n+13) .NewsLandingBlurb, .HomePageNewsArticles:nth-child(8n+15) .NewsLandingBlurb {
    display: none;
  }
/*create double height block*/
.HomePageNewsArticles:nth-child(6) {
  grid-column-end: span 1;
  grid-row-end: span 2;
  display: block;
}

  .HomePageNewsArticles:nth-child(6) a {
    display: block;
  }
/*create the colors- defaults is the grey*/
/*purple*/
.HomePageNewsArticles:nth-child(4), .HomePageNewsArticles:nth-child(6), .HomePageNewsArticles:nth-child(8n+10), .HomePageNewsArticles:nth-child(8n+13) {
  background-color: rgba(178, 138, 191, 0.6);
}

  .HomePageNewsArticles:nth-child(4):before, .HomePageNewsArticles:nth-child(6):before, .HomePageNewsArticles:nth-child(8n+10):before, .HomePageNewsArticles:nth-child(8n+13):before {
    border: 2px solid #7F4098;
  }

  .HomePageNewsArticles:nth-child(4) .CatAndDate p, .HomePageNewsArticles:nth-child(6) .CatAndDate p, .HomePageNewsArticles:nth-child(8n+10) .CatAndDate p, .HomePageNewsArticles:nth-child(8n+13) .CatAndDate p {
    color: #7F4098;
  }

/*teal*/
.HomePageNewsArticles:nth-child(3), .HomePageNewsArticles:nth-child(7), .HomePageNewsArticles:nth-child(8n+9), .HomePageNewsArticles:nth-child(8n+12), .HomePageNewsArticles:nth-child(8n+15) {
  background-color: rgba(124, 204, 191, 0.6);
}

  .HomePageNewsArticles:nth-child(3):before, .HomePageNewsArticles:nth-child(7):before, .HomePageNewsArticles:nth-child(8n+9):before, .HomePageNewsArticles:nth-child(8n+12):before, .HomePageNewsArticles:nth-child(8n+15):before {
    border: 2px solid #00afad;
  }

  .HomePageNewsArticles:nth-child(3) .CatAndDate p, .HomePageNewsArticles:nth-child(7) .CatAndDate p, .HomePageNewsArticles:nth-child(8n+9) .CatAndDate p, .HomePageNewsArticles:nth-child(8n+12) .CatAndDate p, .HomePageNewsArticles:nth-child(8n+15) .CatAndDate p {
    color: #37C7C5;
  }

.educationalTopicBlock a {
  text-decoration: none;
  position: inherit;
}

.HomePageNewsArticlesText {
  padding-left: 20px;
  padding-right: 25px;
  padding-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.CatAndDate {
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
  justify-content: space-between;
}

  .CatAndDate p {
    padding-right: 10px;
    margin: 0;
  }

    .CatAndDate p:nth-child(1) {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-style: italic;
    }

    .CatAndDate p:nth-child(2) {
      font-size: 12px;
      font-weight: 700;
    }

.NewsLandingBlurb p {
  font-size: 13px;
  line-height: 22px;
  color: #1A1A1A;
}

.HomePageNewsArticlesImg {
  position: relative;
}

.CalculatorSliderContainer {
  background-color: #00afad;
}

.CarouselHeading {
  width: 100%;
}

  .CarouselHeading h4 {
    color: white;
  }

    .CarouselHeading h4:after {
      border-top: 2px solid white;
      border-Bottom: 2px solid white;
    }

.button {
  padding: 10px 20px;
  color: #00afad;
  border: 2px solid #00afad;
  margin: 15px;
  text-decoration: none;
  background-color: white;
  white-space: nowrap;
}

.CarouselHeadingContainer {
  padding: 30px 20px;
}

.CarouselButton {
  background-color: transparent;
  color: white;
  border: 2px solid white;
  min-width: 160px;
  text-align: center;
}

.CarouselItemHeading h6 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #80D7D6;
  text-align: center;
  margin: 0px 0 10px 0;
  line-height: 16px;
}

.CarouselItemName h5 {
  font-size: 18px;
  font-weight: 700;
  color: white;
  text-align: center;
  margin: 15px 0 10px 0;
}

.CalculatorSlider {
  padding-bottom: 60px;
}

.slick-slide img {
  display: block;
  height: 120px;
  width: 120px;
  border: 2px solid white;
  border-radius: 50%;
}

.CaruselToolsButton {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0px;
  width: inherit;
}

.CalculatorSlider .slick-slide {
  margin: 0 10px;
}

.CarouselItemHeading {
  margin-bottom: 70px;
}

.EducationalTopicsHeadings {
  display: flex;
  overflow: auto;
  white-space: nowrap;
}

.EducationalTopicsHeading {
  color: #C5C5C5;
  font-size: 14px;
  border: none;
  padding: 10px 20px;
}

.ActiveEducationalTopicsHeading {
  border: none;
}

.activeEducationalTopic {
  color: #7f4098;
  border: 2px solid #7f4098;
}

  .activeEducationalTopic .EducationalTopicsHeading {
    color: #7f4098;
  }

ul#educationalTopicsContainer {
  margin: 0 auto;
  padding: 0;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

  ul#educationalTopicsContainer li {
    display: inline-block;
    cursor: pointer;
  }

.educationalTopic {
  margin-bottom: 30px;
}

.educationalTopicContainer {
  margin-top: 60px;
}

.educationalTopicBlock {
  width: 350px;
  background-color: #EEEEEE;
  position: relative;
  margin: 30px 15px 30px 50px;
  box-sizing: border-box;
}

  .educationalTopicBlock:before {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid #A9A9A9;
  }

.AllEducationalTopicBlock {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -30px;
}

.educationalTopicBlockText {
  padding: 20px 25px 20px 20px;
}

  .educationalTopicBlockText h4 {
    font-size: 18px;
  }

.educationalTopicBlock img {
  margin: -20px 0 0 -20px;
  position: inherit;
}

.slick-next:before {
  border-style: solid;
  border-width: 4px 4px 0 0;
  content: '';
  display: inline-block;
  height: 14px;
  left: 0;
  position: relative;
  top: 0.15em;
  transform: rotate(45deg);
  vertical-align: top;
  width: 14px;
}

.slick-prev:before {
  border-style: solid;
  border-width: 4px 4px 0 0;
  content: '';
  display: inline-block;
  height: 14px;
  left: 0;
  position: relative;
  top: 0.15em;
  transform: rotate(225deg);
  vertical-align: top;
  width: 14px;
}

.slick-prev:before, .slick-next:before {
  opacity: unset;
}

.slick-prev, .slick-next {
  top: 35%;
}

.slick-next {
  right: -100px;
}

.slick-prev {
  left: -100px;
}

.slick-dots {
  position: inherit;
  margin-bottom: 20px;
}

  .slick-dots li.slick-active button:before {
    opacity: .75;
    color: white;
  }

  .slick-dots li button:before {
    color: white;
  }

@media (max-width: 1430px) {
  .slick-next {
    right: -30px;
  }

  .slick-prev {
    left: -30px;
  }
}

@media (max-width: 1300px) {
  .slick-next {
    right: 30px;
  }

  .slick-prev {
    left: 30px;
  }

  .CalculatorSlider {
    padding: 0 60px 60px 60px;
  }
}

@media (max-width: 770px) {
  .slick-dotted.slick-slider {
    margin-bottom: 0px;
  }

  .HomePageNewsArticles {
    display: block;
    order: 3;
  }

    .HomePageNewsArticles a {
      display: block;
    }

    .HomePageNewsArticles:nth-child(3) a, .HomePageNewsArticles:nth-child(4) a, .HomePageNewsArticles:nth-child(8n+8) a, .HomePageNewsArticles:nth-child(8n+10) a, .HomePageNewsArticles:nth-child(8n+13) a, .HomePageNewsArticles:nth-child(8n+15) a {
      display: flex;
    }

  .educationalTopicBlock {
    width: 100%;
    margin: 20px 5px 20px 20px;
  }

  .HomePgaeSamIcon {
    text-align: center;
    order: 2;
  }

  .HomePageNewsArticles:nth-child(2), .HomePageNewsArticles:nth-child(3), .HomePageNewsArticles:nth-child(4), .HomePageNewsArticles:nth-child(5), .HomePageNewsArticles:nth-child(6), .HomePageNewsArticles:nth-child(7), .HomePageNewsArticles:nth-child(8), .HomePageNewsArticles:nth-child(9), .HomePageNewsArticles:nth-child(10) {
    order: 1;
  }


  .educationalTopicBlock img {
    margin: -20px 0 0 -20px;
    width: 100%;
  }

  .categories h4 {
    margin: 10px 10px;
  }

  .AllEducationalTopicBlock {
    margin: 0;
  }
}

@media (max-width: 400px) {
  .HomePageNewsArticlesImg img {
    width: 100%;
  }

  .HomePageNewsArticlesText {
    padding-left: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
  }

  .CalculatorSlider {
    padding: 0 30px 30px 30px;
  }

  .slick-next {
    right: 20px;
  }

  .slick-prev {
    left: 20px;
  }

  .slick-dots {
    position: inherit;
    margin-top: 0px;
    margin-bottom: 20px;
  }
}
/******************BUDGET CALCULATOR******************/
.accordian {
  width: 100%;
  min-height: 50px;
  font-size: 20px;
  text-align: left;
  background-color: #00afad;
  border: none;
  color: white;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

  .accordian p {
    width: fit-content;
    font-size: 20px;
    text-align: left;
    color: white;
    padding: 0;
  }

.accordianHeading p {
  width: fit-content;
  font-size: 20px;
  text-align: left;
  color: white;
  padding: 0;
}

.accordian::after {
  border-style: solid;
  border-width: 0.15em 0.15em 0 0;
  content: '';
  display: inline-block;
  height: 0.45em;
  right: 10px;
  position: relative;
  top: 0em;
  transform: rotate( 135deg );
  vertical-align: top;
  width: 0.45em;
  margin-left: 20px;
}

.accordianOpen::after {
  transform: rotate(-45deg);
}

.calculatorPage .fa-chevron-down, .calculatorPage .fa-chevron-up {
  color: white;
  margin-left: 88%;
}

.calculatorRows {
  display: flex;
  justify-content: space-between;
  width: 98%;
  margin: 15px 0;
  color: #a7a9ac;
  align-items: baseline;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.calTooltip {
  width: auto;
  position: relative;
}

.flexAlign .tooltip {
  position: relative;
}

.ownAmountCalculatorRow {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.calculatorRows .tooltip #pageBody {
  margin: 0;
}

.calculatorRowsFullWidth {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  color: #a7a9ac;
  width: 95%;
}

  .calculatorRowsFullWidth input {
    width: 130px;
    box-sizing: border-box;
    margin-left: 5px;
    height: 20px;
    color: #a7a9ac;
    border: 1px solid #a7a9ac;
  }

  .calculatorRowsFullWidth label {
    margin-right: 15px;
  }

.calculatorButtonCntainerFullWidth {
  display: flex;
  justify-content: flex-end;
  width: 95%;
}

.calculatorButtonCntainer95Width {
  display: flex;
  justify-content: flex-end;
  width: 95%;
}

.calculatorRows input {
  height: 20px;
  font-family: Arial, sans-serif;
  color: #a7a9ac;
  border: 1px solid #a7a9ac;
  margin-left: 5px;
  width: 130px;
  background-color: white;
  padding: 0 2px;
  -webkit-text-fill-color: #a7a9ac;
}

#retirementSavingsCalc input[type='date']:after {
  color: #000000;
  content: attr(placeholder);
}

.mainPanel p {
  margin-bottom: 30px;
}

.calculatorSection {
  padding-right: 15px;
  width: 75%;
}

.mainPanel .accordian {
  background-color: #7f4098;
}

.mainPanel {
  border-left: 30px solid white;
}

  .mainPanel .level3 {
    background-color: #00afad;
  }

.mainPanelLevel3 {
  border-left: 30px solid white;
}

.mainPanelLevel4 {
  border-left: 30px solid white;
}

.mainPanel .level4 {
  background-color: #7f4098;
}

.calculatorTotalRows {
  background-color: #EEEEEE;
  padding: 15px;
  width: 92%;
}

.buttonUnderGraph {
  margin-top: 20px;
}

#retirementSavingsCalcResults canvas {
  margin-top: 20px;
}

.calculatorButton {
  color: #00afad;
  border-color: #00afad;
  height: 30px;
  min-width: 134px;
  margin-bottom: 15px;
}

.calculatorButtonCntainer a {
  text-decoration: none;
  border: 1px solid #00afad;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}

.noMarginTop {
  margin-top: 0;
}

.calculatorButtonCntainer {
  display: flex;
  justify-content: flex-end;
  width: 98%;
}

.resaults {
  padding: 10px 0;
}

.calculatorTotal {
  background-color: #EEEEEE;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
}

  .calculatorTotal label, .calculatorTotalRows label {
    font-weight: 700;
  }

.calculatorButtonTotalCntainer {
  width: 100%;
}

.PercentageInput {
  position: relative;
}

.PercentageInputWithOr {
  align-items: center;
}

  .PercentageInputWithOr p {
    margin: 0;
  }

.PercentageInput input {
  height: 20px;
  margin: 0;
}

.PercentageInput .percentageIcon {
  position: absolute;
  right: 4px;
  top: 14px;
  transform: translateY(-50%);
  display: block;
  margin-top: -2px;
}

.PercentageInputWithOr span {
  top: 11px;
}

.ownAmountCalculatorButtonCntainer {
  display: flex;
  justify-content: flex-end;
}

  .ownAmountCalculatorButtonCntainer button {
    margin: 10px 0;
  }

.PercentageInputWithOr .orSpan {
  margin-right: -25px;
  font-size: 14px;
}

.mandatoryPercentageInputWithOr span:last-child {
  margin-right: 6px;
}

#payOffExtraSection h3 {
  margin-bottom: 30px;
}

.payOffExtraHeading button {
  border: 2px solid #7f4098;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 50px;
  cursor: pointer;
}

.payOffExtraHeading {
  margin-right: 10px;
  margin-bottom: 10px;
}

  .payOffExtraHeading button:hover, .payOffExtraHeading button:active, .payOffExtraHeading button:focus {
    color: white;
    background-color: #7f4098;
  }

.payOffExtraTab:focus .payOffExtraHeading, .payOffExtraTab:active .payOffExtraHeading {
  border: 2px solid #7f4098;
  color: white;
  background-color: #7f4098;
}

.payOffExtraTab {
  align-items: center;
}

.ownAmountCalculatorRow input {
  height: 20px;
  font-family: Arial, sans-serif;
  color: #a7a9ac;
  border: 1px solid #a7a9ac;
  margin-left: 5px;
  width: 150px;
  background-color: white;
  padding: 0 2px;
}

.tabContent {
  background-color: rgba(178, 138, 191, 0.6);
  padding: 15px;
  position: absolute;
  width: 400px;
}

  .tabContent p {
    color: #7F4098;
  }

.allTabs {
  display: flex;
  height: 320px;
}

.calculatorPage {
  display: flex;
  justify-content: space-between;
}

.resaults label {
  color: #a7a9ac;
}

.calculatorTags {
  margin: 15px 15px 0 0;
  height: 30px;
  color: #7f4098;
  border-color: #7f4098;
}

  .calculatorTags:hover, .calculatorTags:focus {
    background-color: #7f4098;
    color: white;
  }

.calculatorButton:hover, .calculatorButton:focus {
  border: 2px solid #7f4098;
  color: #7f4098;
}

.calculatorGoals {
  display: flex;
  flex-wrap: wrap;
}

.calculatorGoalsContainer {
  color: #a7a9ac;
  font-size: 16px;
}

.halfColumn {
  width: 49%;
}

.calculatorTotalRowsFullWidth {
  margin: 10px 0;
  color: #a7a9ac;
  background-color: #EEEEEE;
  padding: 15px;
  width: 100%;
  box-sizing: border-box;
}

.financialCalContainer {
  background-color: #EEEEEE;
  padding: 20px 25px 25px 20px;
  position: relative;
  margin: 20px 10px 35px 10px;
}

  .financialCalContainer:before {
    content: "";
    position: absolute;
    left: -8px;
    top: -8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid #A9A9A9;
  }

.resultErrorMessage {
  text-align: center;
}

.savingTaxHeadings {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #00afad;
  font-weight: 700;
}

.calculatorErrorMessage {
  color: #00afad;
  font-weight: 700;
}

.customSelectCal select {
  color: #a7a9ac;
  border-color: #a7a9ac;
  height: 30px;
}

input[type=range]::-webkit-slider-runnable-track {
  background: #00afad;
  border-radius: 8px;
  height: 8px;
}

input[type=range] {
  -webkit-appearance: none;
  width: 150px;
  background: transparent;
  border: none;
}

  input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }

  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid white;
    height: 16px;
    width: 16px;
    border-radius: 10px;
    background: #00afad;
    cursor: pointer;
    margin-top: -4px;
  }

.flexInput {
  display: flex;
  align-items: center;
  margin-left: 15px;
  margin-right: 4px;
}

.calculatorRows95 {
  width: 95%;
}

.inputRowMandatory {
  display: flex;
  margin-right: 5px;
  align-items: center;
}

  .inputRowMandatory .mandatoryIcon {
    margin-right: -9px;
    margin-top: -4px;
    color: #7e3f98;
    margin-left: 2px;
  }

.calculatorRows label {
  margin-right: 15px;
}

.disabledInput input {
  background-color: #EEEEEE;
}

.mandatoryPercentageInputWithOr {
  margin-right: -14px;
}

.randOnlyInput {
  min-width: 330px;
}

.percentageOnlyInput {
  width: 330px;
  text-align: right;
}

.twoInputs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 330px;
}

  .twoInputs p {
    margin: 0;
  }

.calculatorRows .tooltip {
  width: auto;
  position: inherit;
}

.textRight {
  text-align: right;
}

.calculatorRowsWithRand input {
  margin-left: 5px;
}

.css-2b097c-container {
  min-width: 240px;
}

.calSectionResults h6 {
  margin: 10px 0;
  font-family: Arial, sans-serif;
  color: #a7a9ac !important;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
}

.calSectionResults {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 95%;
}

.resultsFromAbove {
  margin-top: -20px;
}

  .resultsFromAbove h6 {
    margin: 0;
  }

.customSelectRow {
  margin: 15px 0;
}

.customSelectCal .css-1okebmr-indicatorSeparator {
  width: 0;
}

.customSelectCal .css-e56m7-control {
  border: none;
  border-bottom: 1px solid #a7a9ac;
  color: #a7a9ac;
}

.customSelectCal .css-1uccc91-singleValue {
  font-size: 14px;
  color: #a7a9ac;
}

.halfColumn:last-child {
  padding-left: 20px;
}

.calToolTip {
  color: #00afad;
  border: 1px solid #00afad;
  border-radius: 50%;
  padding: 1px 4px;
}

  .calTooltip #pageBody {
    margin: 0;
  }

#ownAmountTabContent .calculatorButton {
  margin: 0;
}

.sectionHeading {
  height: 50px;
  font-size: 20px;
  text-align: left;
  background-color: #00afad;
  border: none;
  color: white;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 1200px) {
  .search {
    margin: 15px;
  }

  .searchClose {
    margin-top: -8px;
  }
}

@media screen and (max-width: 1000px) {
  .calculatorPage {
    flex-direction: column;
  }

  .calculatorSection {
    width: 100%;
  }

  .allTabs {
    flex-direction: column;
    height: auto;
  }

  .tabContent {
    position: inherit;
    width: 100%;
    box-sizing: border-box;
  }

  .ownAmountCalculatorRow {
    flex-direction: column;
    height: 60px;
  }

  .payOffExtraHeading button {
    width: 100%;
    box-sizing: border-box;
  }

  .payOffExtraHeading {
    margin: 10px 0 0 0;
  }


  .calculatorSection .flexJustify {
    flex-direction: column;
  }

  .halfColumn {
    width: 80%;
  }
}

@media screen and (max-width: 700px) {
  #additionalSavingsTaxCalc .calculatorRows {
    flex-direction: column;
  }

    #additionalSavingsTaxCalc .calculatorRows label {
      margin-bottom: 6px;
    }

  .percentageOnlyInput, .randOnlyInput {
    margin-top: 6px;
  }
  .right {
    left: 50% !important;
    transform: translateX(-50%);
    margin-top: 15px;
  }

  .left {
    right: 50% !important;
    transform: translateX(-50%);
    margin-top: 15px;
  }
}

@media screen and (max-width: 600px) {
  .mainPanel, .mainPanelLevel3, .mainPanelLevel4 {
    border-left: none
  }

  .calculatorRows, .calculatorButtonCntainer {
    width: 98%;
  }

  .calculatorTotal {
    width: 100%;
  }

  .quizModal {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 10px 0px 25px 4px;
  }

    .quizModal .umbraco-forms-form {
      width: 100%;
      padding: 0px 5px;
    }

  .halfColumn {
    width: 100%;
  }

  .calculatorRows input {
    margin-left: 5px;
    width: 120px;
  }

  .compoundCalculatorGraph {
    margin-right: 0;
  }

  .calculatorRows .tooltip {
    position: inherit;
  }

  #pageBody p img {
    width: 100%;
    object-fit: contain;
    margin: 10px 0;
  }

  #pageBody table {
    margin: 0px;
  }

  .sectionHeading {
    height: auto;
    padding: 8px;
    margin: 0;
  }

  .inputRowMandatory {
    align-items: baseline;
  }

  .calSectionResults {
    width: 100%;
  }

  .calculatorRowsFullWidth input {
    width: 130px;
  }
}

@media screen and (max-width: 480px) {
  .calculatorRows.calculatorTotalRows {
    width: 90%;
  }

  .customSelectRow {
    flex-direction: column;
  }

  .tooltip .tooltipText {
    width: 250px;
  }

  .inputRowMandatory span:first-child {
    margin-left: 0px;
  }

  .twoInputs {
    flex-direction: column;
    align-items: baseline;
    min-width: 280px;
  }

  .randOnlyInput {
    min-width: 280px;
  }

  .twoInputs .PercentageInput {
    margin-left: 12px;
  }

  .percentageOnlyInput {
    width: auto;
    text-align: left;
  }
}

#educationalImageRectangular {
  border-radius: 50%;
  border: 10px solid #00afad;
  -webkit-box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 15%);
  -moz-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
  box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 15%);
  height: 250px;
  width: 250px;
  object-fit: cover;
  background-color: #00afad;
}

.educationalImage img {
  border-radius: 50%;
  border: 10px solid #00afad;
  -webkit-box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 15%);
  -moz-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
  box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 15%);
  height: 250px;
  width: 250px;
  object-fit: cover;
  background-color: #00afad;
}

.educationalLandingPageImage img {
  border-radius: 50%;
  border: 7px solid #00afad;
  -webkit-box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 15%);
  -moz-box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.15);
  box-shadow: 0px 2px 5px 1px rgb(0 0 0 / 15%);
  height: 160px;
  width: 160px;
  object-fit: cover;
  background-color: #00afad;
}
/*React L and D calculator accordian*/
.mainPanel1, .mainPanel2, .mainPanel3 {
  display: none;
}

.newAccordianOpen {
  display: block;
}

.accordianHeading {
  min-height: 50px;
  width: 100%;
  font-size: 20px;
  text-align: left;
  background-color: #00afad;
  border: none;
  color: white;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

  .accordianHeading::after {
    border-style: solid;
    border-width: 0.15em 0.15em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    right: 10px;
    position: relative;
    top: 0em;
    transform: rotate( 135deg );
    vertical-align: top;
    width: 0.45em;
    margin-left: 20px;
  }

  .accordianHeading.active::after {
    transform: rotate( 315deg );
  }

  .accordianHeading.newAccordianOpen::after {
    transform: rotate(-45deg);
  }

.mainPanel1 .accordianHeading {
  background-color: #7f4098;
}

.mainPanel2 .accordianHeading {
  background-color: #00afad;
}

.mainPanel1, .mainPanel2 {
  border-left: 30px solid white;
}

.totalSection {
  background-color: #EEEEEE;
  padding: 10px;
}

  .totalSection input:disabled {
    background-color: #EEEEEE;
  }

.ResetButtonContainer {
  display: flex;
  justify-content: flex-start;
}

input:invalid {
  border-color: red;
}

.validationMessage {
  color: red;
  font-size: 12px;
}

.inlineHyperlink {
  border: none !important;
  justify-content: normal !important;
  color: red;
  text-decoration: underline !important;
}

.calculateButtonSection {
  text-align: right;
}

.toatalSectionHeading {
  font-size: 24px;
  color: #00afad;
}

.addDependantButton {
  color: #00afad;
  border-color: #00afad;
  height: 50px;
  margin-bottom: 15px;
  width: 100%;
  font-size: 16px;
  text-align: left;
  padding-left: 10px;
  border-width: 3px;
  background-image: url('../images/ionic-add-dependant.svg');
  background-repeat: no-repeat;
  background-position: right;
  background-position-x: 98%;
}

.percentageIconLandD {
  position: absolute;
  right: 4px;
  top: 13px;
  transform: translateY(-50%);
  display: block;
  margin-top: -2px;
}

.percentageIconLandDContainer {
  position: relative;
}

@media screen and (max-width: 600px) {
  .mainPanel1, .mainPanel2 {
    border-left: none
  }

  .calculatorButton {
    width: 100%;
  }
}
/*-------------------CHECK MARKS------------------*/
/* The container */
.checkBoxContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
  /* Hide the browser's default checkbox */
  .checkBoxContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
/* Create a custom checkbox */
.calculatorCheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
/* On mouse-over, add a grey background color */
.checkBoxContainer:hover input ~ .calculatorCheckmark {
  background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.checkBoxContainer input:checked ~ .calculatorCheckmark {
  background-color: #00afad;
}
/* Create the checkmark/indicator (hidden when not checked) */
.calculatorCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.checkBoxContainer input:checked ~ .calculatorCheckmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.checkBoxContainer .calculatorCheckmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* Section Three Styling*/
.input_heading {
  color: #7f4098;
  font-weight: 600;
}

.total_cover {
  color: #00afad;
}

.calculatorTotal .adjust_cover {
  font-weight: 300;
}

.tooltipText {
  font-weight: 300;
}

/*RA calculator*/
.results-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#result {
  flex: 1;
  margin: 0px 10px 0px;
  min-width: 280px;
}

  #result .resultHeading {
    margin: 10px 0px 10px;
  }

.divToolTip {
  margin-bottom: 12px;
}

#result div > p {
  text-align: center;
  margin: 0px;
}

.infoBox {
  text-align: left !important;
}

#result div {
  text-align: center;
  font-family: Arial, sans-serif;
  color: #a7a9ac;
  font-size: 16px;
}

.resultValueColor {
  color: #00afad;
}

#chart {
  display: block;
  height: 100%;
  height: 400px;
  width: 800px;
}
/* Print Start */
@@media print {
  #result {
    flex: 0.8 !important;
  }

    #result p {
      font-size: 12px !important;
      line-height: 16px !important;
    }

  .resultHeading {
    margin: 5px 0px 0px !important;
  }

  .divToolTip {
    margin-bottom: 5px !important;
  }

  .calToolTip {
    display: none !important;
  }

  #chart {
    height: 275px !important;
    width: 550px !important;
  }

  .grid-container > div > label {
    font-size: 15px;
  }

  .grid-container {
    row-gap: 10px !important;
    padding: 10px 0 5px !important;
    grid-template:
      'savings contributions age'
      'return costs inflation'
      'pension pension .' !important;
  }

  .rand-symbol {
    position: absolute;
    left: 10px; /* adjust as needed */
    top: 45% !important;
    pointer-events: none;
    font-size: 14px;
    color: #00afad;
  }
}

/* Print End */
.result2FlexContainer {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.result2Input {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-right: 10px;
}

  .result2Input label {
    font-family: Arial, sans-serif;
    color: #a7a9ac;
    font-size: 16px;
    line-height: 26px;
  }

  .result2Input input {
    margin-top: 15px;
    height: 20px;
    font-family: Arial, sans-serif;
    color: #00afad;
    border: 1px solid #a7a9ac;
    width: 130px;
    background-color: white;
    padding: 0 2px;
    -webkit-text-fill-color: #00afad;
  }

  .result2Input .percentInput {
    position: relative;
  }

  .result2Input .percentageIcon {
    color: #00afad;
    font-size: 16px;
    position: absolute;
    right: 4px;
    top: 28px;
    transform: translateY(-50%);
    display: block;
    margin-top: -2px;
  }

.input-box {
  flex: 1;
  margin-right: 10px;
  box-sizing: border-box;
  padding: 5px;
}

#step2 {
  display: none;
}

.recalculatorSection {
  display: flex;
  align-items: center;
}

.grid-container > .item1 {
  grid-area: savings;
}

.grid-container > .item2 {
  grid-area: contributions;
}

.grid-container > .item3 {
  grid-area: age;
}

.grid-container > .item4 {
  grid-area: return;
}

.grid-container > .item5 {
  grid-area: costs;
}

.grid-container > .item6 {
  grid-area: pension;
}

.grid-container > .item7 {
  grid-area: inflation;
}

.grid-container {
  display: grid;
  row-gap: 70px;
  grid-template:
    'savings contributions age return'
    'costs pension pension inflation';
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  padding: 15px 0 40px;
}

.input-wrapper {
  position: relative;
  display: flex;
}

.rand-symbol {
  position: absolute;
  left: 5px; /* adjust as needed */
  top: 47%;
  pointer-events: none;
  font-size: 14px;
  color: #00afad;
}

#resultExistingSavings, #resultMonthlyContributions, #resultCurrentIncome {
  padding-left: 15px; /* makes space for the Rand symbol */
  height: 20;
}

@media only screen and (max-width: 1000px) {
  .grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .result2Input {
    margin-right: 50px;
  }
}

/* Fund Calculator - Associated Funds List (Based on Prototype) */
.funds-list-header {
  background-color: #d7f4f3;
  border: 2px solid #37c7c5;
  padding: 18px 30px;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 30px;
}

.funds-list-header h3 {
  font-size: 22px;
  color: #000000;
  font-weight: bold;
  margin: 0;
}

.funds-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 30px;
}

.funds-list li {
  font-size: 16px;
  color: #a7a9ac;
  line-height: 1.6;
  margin-bottom: 0;
  padding: 10px 20px;
}

/* Remove bullets */
.funds-list li::before {
  content: none;
}

/* Alternating background colors for fund items only */
.funds-list li.fund-item:nth-of-type(odd) {
  background-color: #F0F9F9;
}

.funds-list li.fund-item:nth-of-type(even) {
  background-color: transparent;
}

/* Fund Type Subheadings */
.funds-list li.fund-type-heading {
  font-size: 18px;
  font-weight: bold;
  color: #7e3f98;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-left: 0;
  padding-bottom: 5px;
  border-bottom: 2px solid #7e3f98;
  background-color: transparent !important;
}

.funds-list li.fund-type-heading::before {
  content: none;
}

/* First fund type heading shouldn't have top margin */
.funds-list li.fund-type-heading:first-child {
  margin-top: 0;
}

/* Fade-in animation for lazy loaded items */
.fund-item-fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.fund-item-fade-in.fund-item-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media only screen and (max-width: 768px) {
  .funds-list-header {
    padding: 15px 20px;
  }

  .funds-list-header h3 {
    font-size: 18px;
  }

  .funds-list li {
    font-size: 14px;
  }
  
  .funds-list li.fund-type-heading {
    font-size: 16px;
  }
}