/*!
 * ===========================
 * Author: Steve Gotthardt
 * Created: 10/2024
 * ===========================
 */

.centerPromo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#RateChartMainContainer {
  max-width: 60rem;
  margin: 4rem auto 0;
}
#RateChartMainContainer h2,
#RateChartMainContainer h3,
#RateChartMainContainer p {
  text-align: center;
}
#RateChartMainContainer h3 {
  font-size: 1.45rem;
  margin: 1rem 0 0;
}
#RateChartMainContainer p {
  margin-bottom: 0;
}
#RateContainerSwitch {
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
}
#RateContainerSwitch button.rateSwitch {
  padding: 1rem;
  margin: 0;
  border: 0;
  min-width: 0;
  background: none;
  background-color: #EDEDED;
  color: #777;
  font-size: 1.1rem;
  font-weight:bold;
  border-radius: 15px 15px 0 0;
}
#RateContainerSwitch button.rateSwitch:hover,
#RateContainerSwitch button.rateSwitch:focus {
  text-decoration:underline;
}
#RateContainerSwitch button.rateSwitch.selected {
  color: white;
}
#RateContainerSwitch button.rateSwitch.selected.us {
  background-color: #2A9DCB;
}
#RateContainerSwitch button.rateSwitch.selected.cd {
  background-color: #E25120;
}
#RateContainerSwitch button.rateSwitch.selected.oth {
  background-color: #7E9F38;
}
.rateContainer {
  border: 4px solid black;
  display: none;
}
.rateContainer.open {
  display: block;
}
.rateContainer .rateTypeContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.rateContainer .rateTypeContainer.ind .rateHeader {
  grid-area: indheader;
}
.rateContainer .rateTypeContainer.ind .rateAmount {
  grid-area: indamount;
}
.rateContainer .rateTypeContainer.ind {
  grid-template-areas: "indheader indheader" "indamount indamount";
}
.rateContainer .rateTypeContainer.ind .rateSubheader {
  display: none;
}
.rateContainer .rateTypeContainer .rateSubheader,
.rateContainer .rateTypeContainer .rateAmount {
  border-top: 1px solid #dce9c0;
}
.rateContainer.us,
.rateContainer.us .rateTypeContainer {
  border-color: #2A9DCB;
}
.rateContainer.cd,
.rateContainer.cd .rateTypeContainer {
  border-color: #E25120;
}
.rateContainer.oth,
.rateContainer.oth .rateTypeContainer {
  border-color: #7E9F38;
}
.rateContainer .rateTypeContainer div {
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
}
.rateContainer .rateTypeContainer.ind .rateHeader,
.rateContainer .rateTypeContainer .rateHeader + div,
.rateContainer .rateTypeContainer .rateHeader + div + div {
  border-top-width: 0;
}
.rateContainer .rateTypeContainer .rateHeader {
  color: white;
  font-weight:bold;
  border-color: white;
  grid-column: 1/3;
  opacity: 1;
}
.rateContainer.us .rateTypeContainer .rateHeader {
  background-color: #2A9DCB;
}
.rateContainer.cd .rateTypeContainer .rateHeader {
  background-color: #E25120;
}
.rateContainer.oth .rateTypeContainer .rateHeader {
  background-color: #7E9F38;
}
.rateContainer .rateTypeContainer .rateSubheader {
  background-color: #edf4df;
}
.rateContainer .rateTypeContainer .rateSubheader:empty {
  background-color: white;
}
.rateContainer .rateTypeContainer .rateAmount {
  font-weight: bold;
}
@media screen and (min-width: 900px) {
  #RateContainerSwitch button.rateSwitch {
    font-size: 1.25rem;
  }
  .rateContainer .rateTypeContainer {
    display: grid;
    grid-template-columns: 28% 32% 40%;
  }
  .rateContainer .rateTypeContainer .rateHeader {
    justify-self: end;
    grid-column: 1/1;
  }
  .rateContainer .rateTypeContainer .rateAmount {
    justify-self: center;
  }
  .rateContainer .rateTypeContainer.ind {
    grid-template-areas: "indheader . indamount";
  }
  .rateContainer .rateTypeContainer.org .rateHeader {
    grid-row: 1/3;
  }
  .rateContainer .rateTypeContainer.trust .rateHeader {
    grid-row: 1/6;
  }
  .rateContainer .rateTypeContainer div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .rateContainer .rateTypeContainer .rateHeader {
    border-top: 3px solid white;
  }
  .rateContainer .rateTypeContainer .rateHeader + div,
  .rateContainer .rateTypeContainer .rateHeader + div + div {
    border-top-width: 3px;
  }
  .rateContainer .rateTypeContainer.ind .rateSubheader,
  .rateContainer .rateTypeContainer.ind .rateAmount {
    border-top-width: 0;
  }
  .rateContainer .rateTypeContainer.ind .rateSubheader {
    display: inline;
  }
}