.gridInput2ColShort {
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: 40px 40% 1fr 40% 40px;
  grid-template-areas: ". gridInput2Col_Col1 . gridInput2Col_Col2 .";
  margin-top: 15px;
}
@media screen and (max-width: 750px) {
  .gridInput2ColShort {
    grid-template-columns: 40px 60% 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput2Col_Col1 . ." ". gridInput2Col_Col2 . .";
  }
}
@media screen and (max-width: 500px) {
  .gridInput2ColShort {
    grid-template-columns: 40px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput2Col_Col1 ." ". gridInput2Col_Col2 .";
  }
}
.gridInput2Col {
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: 40px 42% 1fr 42% 40px;
  grid-template-areas: ". gridInput2Col_Col1 . gridInput2Col_Col2 .";
  margin-top: 15px;
}
@media screen and (max-width: 750px) {
  .gridInput2Col {
    grid-template-columns: 20px 60% 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput2Col_Col1 . ." ". gridInput2Col_Col2 . .";
  }
}
@media screen and (max-width: 500px) {
  .gridInput2Col {
    grid-template-columns: 20px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput2Col_Col1 ." ". gridInput2Col_Col2 .";
  }
}
.gridInput2Col_Col1 {
  grid-area: gridInput2Col_Col1;
}
.gridInput2Col_Col2 {
  grid-area: gridInput2Col_Col2;
}
.gridInput3Col {
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: 40px 40% 1fr 20% 1fr 20% 40px;
  grid-template-areas: ". gridInput3Col_Col1 . gridInput3Col_Col2 . gridInput3Col_Col3 .";
  margin-top: 15px;
}
@media screen and (max-width: 750px) {
  .gridInput3Col {
    grid-template-columns: 40px 40% 1fr 40% 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput3Col_Col1 gridInput3Col_Col1 gridInput3Col_Col1 ." ". gridInput3Col_Col2 . . ." ". gridInput3Col_Col3 . . .";
  }
}
@media screen and (max-width: 500px) {
  .gridInput3Col {
    grid-template-columns: 40px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput3Col_Col1 ." ". gridInput3Col_Col2 ." ". gridInput3Col_Col3 .";
  }
}
.gridScheduleControl {
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: 1fr 25% 1fr 35% 1fr 25% 1fr;
  grid-template-areas: ". gridInput3Col_Col1 . gridInput3Col_Col2 . gridInput3Col_Col3 .";
}
@media screen and (max-width: 630px) {
  .gridScheduleControl {
    grid-template-columns: 40px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput3Col_Col2 ." ". gridInput3Col_Col1 ." ". gridInput3Col_Col3 .";
  }
}
.gridVolunteerList3Col {
  display: grid;
  justify-content: left;
  margin-top: 5px;
  color: black;
  grid-template-columns: 10px 1fr 0px 1fr 0px 1fr 10px;
  grid-template-areas: ". gridInput3Col_Col1 . gridInput3Col_Col2 . gridInput3Col_Col3 .";
}
@media screen and (max-width: 630px) {
  .gridVolunteerList3Col {
    grid-template-columns: 40px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput3Col_Col1 ." ". gridInput3Col_Col2 ." ". gridInput3Col_Col3 .";
  }
}
.gridRadioBtn3Col {
  height: 100%;
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: 30px 1fr 10px 1fr 10px 1fr 30px;
  grid-template-areas: ". gridInput3Col_Col1 . gridInput3Col_Col2 . gridInput3Col_Col3 .";
}
@media screen and (max-width: 630px) {
  .gridRadioBtn3Col {
    grid-template-columns: 40px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput3Col_Col1 ." ". gridInput3Col_Col2 ." ". gridInput3Col_Col3 .";
  }
}
.gridInput3Col_Col1 {
  grid-area: gridInput3Col_Col1;
}
.gridInput3Col_Col2 {
  grid-area: gridInput3Col_Col2;
}
.gridInput3Col_Col3 {
  grid-area: gridInput3Col_Col3;
}
.gridRadioBtn2Col {
  height: 100%;
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: 30px 1fr 40px 1fr 30px;
  grid-template-areas: ". gridInput2Col_Col1 . gridInput2Col_Col2 .";
}
@media screen and (max-width: 630px) {
  .gridRadioBtn2Col {
    grid-template-columns: 40px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput2Col_Col1 ." ". gridInput2Col_Col2 .";
  }
}
.gridAdultChild {
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: 20px 40% 1fr 18% 1fr 18% 33px 36px 20px;
  grid-template-areas: ". gridInput3Col_Col1 . gridInput3Col_Col2 . gridInput3Col_Col3 . gridRemoveAdultChild .";
  margin-top: 15px;
}
@media screen and (max-width: 800px) {
  .gridAdultChild {
    grid-template-columns: 40px 40% 30% 10px 36px 40px;
    grid-template-areas: ". gridInput3Col_Col1 gridInput3Col_Col1 . . gridRemoveAdultChild" ". gridInput3Col_Col2 . . . ." ". gridInput3Col_Col3 . . . .";
  }
}
@media screen and (max-width: 500px) {
  .gridAdultChild {
    grid-template-columns: 40px 1fr 36px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: ". gridInput3Col_Col1 gridInput3Col_Col1 gridInput3Col_Col1 ." ". gridInput3Col_Col2 gridInput3Col_Col2 gridInput3Col_Col2 ." ". gridInput3Col_Col3 gridInput3Col_Col3 gridInput3Col_Col3 ." ". . gridRemoveAdultChild . .";
  }
}
.gridRemoveAdultChild {
  grid-area: gridRemoveAdultChild;
}
.txtElementDiv {
  float: left;
  height: 37px;
  /* margin-top: 5px; */
  margin-left: 10px;
  text-align: left;
  font-size: 18px;
  border: 2px solid black;
  /* border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px; */
  border-bottom-width: 3px;
  border-radius: 15px;
  box-shadow: 5px 7px 8px 4px #818181;
  background-color: white;
  position: relative;
}
.txtElementInput {
  outline: none;
  /* height: 18px;
    margin-top: 8px;
    margin-left: 13px;
    font-weight: bold;
    font-size: 22px; */
  border: 0px;
  background-color: white;
}
.noshadow {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none;
  float: left;
  height: 90%;
  margin-top: -1px;
  margin-left: 5px;
  margin-right: 5px;
}
.DropDownDiv {
  position: absolute;
  height: 240px;
  background-color: white;
  top: 40px;
  border: 2px solid black;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  box-shadow: 5px 7px 8px 4px #818181;
  overflow-x: auto;
  overflow-y: auto;
  z-index: 100;
}
.DropDownLine {
  height: 24px;
  font-size: 24px;
  font-weight: bold;
  margin-top: 9px;
  margin-left: 15px;
  color: blue;
  text-align: left;
}
.DropDownLine:hover {
  cursor: pointer;
  background-color: #e7e7e7;
  text-decoration: underline;
}
.CityStateZipDropDownLine {
  position: relative;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  margin-top: 3px;
  border: 3px solid transparent;
}
.CityStateZipDropDownLine:hover {
  cursor: pointer;
  border: 3px solid red;
}
.CityStateZipDropDownLine:nth-of-type(odd) {
  background-color: #ffffde;
}
.CityStateZipDropDownItem {
  position: absolute;
  top: 0px;
  bottom: 0px;
  display: flex;
  justify-content: left;
  align-items: center;
}
.txtInputBorderColorRed {
  border-color: red !important;
}
.txtInputBorderColorGreen {
  border-color: green !important;
}
input[type="range"] {
  width: 150px;
  transform: scale(1.8);
  cursor: pointer;
}
.selectTimeContentDiv {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 340px;
  height: auto;
  z-index: 500;
  display: none;
  border-radius: 20px;
  border: 7px ridge #9e2052;
  background-color: #ffffff;
  box-shadow: 4px 4px 15px 4px rgba(0, 0, 0, 0.4);
}
#timeDialogDiv {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 85px 5px 16px 85px 40px 30px 1fr;
  grid-template-areas: ". timeDialogHour . timeDialogSemiColon timeDialogMinute timeDialogAmPm . .";
  width: 100%;
  height: 90px;
  margin-top: 15px;
}
#timeDialogHour {
  grid-area: timeDialogHour;
  width: 100%;
  height: 100%;
  font-size: 62px;
  font-weight: bold;
  text-align: right;
}
#timeDialogSemiColon {
  grid-area: timeDialogSemiColon;
  width: 100%;
  height: 100%;
  font-size: 62px;
  font-weight: bold;
}
#timeDialogMinute {
  grid-area: timeDialogMinute;
  width: 100%;
  height: 100%;
  font-size: 62px;
  font-weight: bold;
}
#timeDialogAmPm {
  grid-area: timeDialogAmPm;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  font-size: 24px;
  font-weight: bold;
  margin-left: 10px;
}
.gridTimeElement {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 12px 1fr 5px 40px 5px;
  grid-template-rows: 36px;
  grid-template-areas: ". gridTimeInput . gridClockBtn .";
  width: 100%;
  border: 2px solid black;
  border-bottom-width: 3px;
  border-radius: 15px;
  box-shadow: 5px 7px 8px 4px #818181;
  background-color: white;
  position: relative;
}
.gridTimeInput {
  grid-area: gridTimeInput;
}
.gridClockBtn {
  grid-area: gridClockBtn;
}
.textareaCopy {
  position: absolute;
  top: -45px;
  left: 85%;
}
#video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width: 320px;
  height: 240px;
}
#photo {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width: 320px;
  height: 240px;
}
#canvas {
  display: none;
}
.camera {
  width: 340px;
  display: inline-block;
}
.output {
  width: 340px;
  display: inline-block;
  vertical-align: top;
}
.content-area {
  font-size: 16px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  width: 760px;
}
.onlineGivingMainDiv {
  position: fixed;
  inset: 0;
  background-color: white;
  overflow: hidden;
}
.pageWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
.headerWrapper {
  width: 100%;
  height: 360px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 10;
}
#givingModalContainerDiv {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200 !important;
}
#givingModalBkGround {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid black;
}
.headerGrid {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: auto;
  grid-template-areas: "headSectionLeft headSectionCenter headSectionRight";
  width: 100%;
  height: 360px;
}
.headSectionLeft {
  grid-area: headSectionLeft;
}
.headSectionCenter {
  grid-area: headSectionCenter;
}
.headSectionRight {
  grid-area: headSectionRight;
}
.imgLogoDiv {
  width: 200px;
  height: 200px;
}
.imgLogo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cancelBtn {
  position: absolute;
  width: 60px;
  height: 40px;
  top: 0px;
  right: 0px;
  background-color: red;
  color: white;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
.unPublishBtn {
  position: absolute;
  width: 160px;
  height: 40px;
  top: 0px;
  border-radius: 10px;
  background-color: #b50000;
  color: white;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
.infoBtn {
  position: absolute;
  width: 160px;
  height: 40px;
  top: 0px;
  border-radius: 10px;
  background-color: purple;
  color: yellow;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
.contentWrapper {
  flex-grow: 1;
  background-color: #f5f5f5;
}
.formWrapper {
  position: relative;
  width: 730px;
  max-width: 90%;
  height: auto;
  background-color: white;
  border: 3px solid lightgray;
  border-radius: 25px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
  margin-top: -12vh;
  margin-left: auto;
  margin-right: auto;
  z-index: 20;
}
#OnlineGivingBuilderContentDiv .ui-widget-content {
  font-size: 22px;
}
#OnlineGivingBuilderContentDiv .ui-accordion-content {
  padding: 20px 20px;
}
/* 1. Name your items (same as before) */
.btn1 {
  grid-area: one;
}
.btn2 {
  grid-area: two;
}
.btn3 {
  grid-area: three;
}
.btn4 {
  grid-area: four;
}
.btn5 {
  grid-area: five;
}
/* 2. MOBILE: Default single-column stack */
.btnContainer {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  /* Only one column */
  grid-template-areas: "one" "two" "three" "four" "five";
}
/* 3. DESKTOP: Switch to the 3-column layout at 768px wide */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "one  two   three" "four five  .    ";
  }
}
.swatchDiv {
  position: relative;
  width: 60px;
  height: 60px;
  border: 3px solid black;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s;
}
.swatchDiv:hover {
  cursor: pointer;
  transform: scale(1.15);
}
.swatchDivCancel {
  position: absolute;
  width: 25px;
  height: 25px;
  top: -10px;
  right: -10px;
  color: whitesmoke;
  border-radius: 50px;
  background-color: black;
  border: 1px solid white;
}
.swatchDivCancel:hover {
  cursor: pointer;
  transform: scale(1.15);
}
.swatchHalfDiv {
  width: 30px;
  height: 60px;
}
.swatchesDiv {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.colorPickerDiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.borderSelected {
  border: 3px solid red!important;
}
.cbNameElementDiv {
  display: grid;
  grid-template-columns: 25px 30px 1fr 30px;
  grid-template-rows: auto;
  grid-template-areas: "cbElementDiv . nameElementDiv . ";
  width: 100%;
}
.cbElementDiv {
  grid-area: cbElementDiv;
  width: 100%;
  height: 100%;
}
.nameElementDiv {
  grid-area: nameElementDiv;
  width: 100%;
}
.currency-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: Arial, sans-serif;
}
.currency-wrapper span {
  color: #555;
  margin-right: 4px;
  font-weight: bold;
  user-select: none;
  /* Prevents selecting the $ sign */
}
.currency-input {
  border: none;
  outline: none;
  /* Removes the blue box on click */
  font-size: 80px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  /* Keeps cursor/numbers on the right */
}
.formInfoDiv {
  display: inline-block;
  position: relative;
  width: 370px;
  max-width: 90%;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
}
.carrotDiv::after {
  content: "▼";
  font-size: 26px;
  color: #3a3a3a;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  position: absolute;
  pointer-events: none;
  /* Ensure clicks pass through to the select */
}
.fundLine {
  position: relative;
  height: 45px;
  border: 1px solid transparent;
}
.givingModalContentDiv {
  width: 90%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  overflow-x: hidden;
  flex-grow: 1;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
}
.formBtnGrid6 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "formAmtBtn1 formAmtBtn2 formAmtBtn3" "formAmtBtn4 formAmtBtn5 formAmtBtn6";
  gap: 10px;
  width: 100%;
  font-size: 26px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 750px) {
  .formBtnGrid6 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "formAmtBtn1 formAmtBtn2" "formAmtBtn3 formAmtBtn4" "formAmtBtn5 formAmtBtn6";
    max-width: 500px;
  }
}
@media screen and (max-width: 450px) {
  .formBtnGrid6 {
    font-size: 22px;
  }
}
.formBtnGrid5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "formAmtBtn1 formAmtBtn1 formAmtBtn2 formAmtBtn2 formAmtBtn3 formAmtBtn3" "formAmtBtn4 formAmtBtn4 formAmtBtn4 formAmtBtn5 formAmtBtn5 formAmtBtn5";
  gap: 10px;
  width: 100%;
  font-size: 26px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 750px) {
  .formBtnGrid5 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "formAmtBtn1 formAmtBtn2" "formAmtBtn3 formAmtBtn4" "formAmtBtn5 formAmtBtn5";
    max-width: 500px;
  }
}
@media screen and (max-width: 450px) {
  .formBtnGrid5 {
    font-size: 22px;
  }
}
.formBtnGrid4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "formAmtBtn1 formAmtBtn1 formAmtBtn2 formAmtBtn2" "formAmtBtn3 formAmtBtn3 formAmtBtn4 formAmtBtn4";
  gap: 10px;
  width: 100%;
  max-width: 500px;
  font-size: 26px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 450px) {
  .formBtnGrid4 {
    font-size: 22px;
  }
}
.formBtnGrid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "formAmtBtn1 formAmtBtn1 formAmtBtn2 formAmtBtn2" "formAmtBtn3 formAmtBtn3 formAmtBtn3 formAmtBtn3";
  gap: 10px;
  width: 100%;
  max-width: 500px;
  font-size: 26px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 450px) {
  .formBtnGrid3 {
    font-size: 22px;
  }
}
.formBtnGrid2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "formAmtBtn1 formAmtBtn1 formAmtBtn2 formAmtBtn2";
  gap: 10px;
  width: 100%;
  max-width: 500px;
  font-size: 26px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 450px) {
  .formBtnGrid2 {
    font-size: 22px;
  }
}
.formBtnGrid1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "formAmtBtn1";
  gap: 10px;
  width: 100%;
  max-width: 500px;
  font-size: 26px;
  margin-left: auto;
  margin-right: auto;
}
.formAmtBtn1 {
  grid-area: formAmtBtn1;
}
.formAmtBtn2 {
  grid-area: formAmtBtn2;
}
.formAmtBtn3 {
  grid-area: formAmtBtn3;
}
.formAmtBtn4 {
  grid-area: formAmtBtn4;
}
.formAmtBtn5 {
  grid-area: formAmtBtn5;
}
.formAmtBtn6 {
  grid-area: formAmtBtn6;
}
.formAmtBtnDiv {
  max-width: 100%;
  height: 40px;
  border: 1px solid black;
  color: black;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
}
.formAmtBtnDiv:active {
  transform: scale(0.95) !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15) !important;
}
/* The track */
.toggle-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 500px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid black;
  border-radius: 20px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
  padding: 5px;
  cursor: pointer;
  user-select: none;
}
/* Hidden checkbox to handle state */
.toggle-input {
  display: none;
}
/* The Labels */
.toggle-label {
  flex: 1;
  text-align: center;
  z-index: 1;
  font-family: sans-serif;
  font-size: 26px;
  font-weight: bold;
  color: #898989;
  transition: color 0.3s;
}
/* The Sliding Button */
.sliderBtn {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 250px;
  /* Roughly half the container width */
  height: 40px;
  background-color: #007bff;
  border: 1px solid black;
  border-radius: 18px;
  transition: transform 0.3s ease;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
}
/* Logic: When checkbox is checked, slide the button */
.toggle-input:checked + .toggle-container .sliderBtn {
  transform: translateX(250px);
  /* Moves it to the right label */
}
/* Optional: Change text color when active */
.toggle-input:checked + .toggle-container .label-right {
  color: white;
}
.toggle-input:not(:checked) + .toggle-container .label-left {
  color: white;
}
.PaymentFrequencyDiv {
  width: 90%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  border-radius: 15px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
}
.PaymentFrequencyHeaderDiv {
  width: 100%;
  height: 40px;
  position: relative;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px solid black;
}
.PaymentFrequencyContentDiv {
  background-color: rgba(0, 0, 0, 0.05);
}
.formContinueBtnDiv {
  width: 90%;
  max-width: 500px;
  height: 40px;
  font-size: 26px;
  border: 1px solid black;
  cursor: pointer;
  border-radius: 25px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
}
.formContinueBtnDiv:active {
  transform: scale(0.95) !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.formRecurringBtnDiv {
  display: inline-block;
  height: 30px;
  font-size: 22px;
  border: 1px solid black;
  border-radius: 25px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25) !important;
}
.ui-datepicker {
  width: 17em;
  /* Standard readable width (~270-300px) */
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-family: inherit;
  padding: 10px;
}
.ui-datepicker-header {
  background: #f8fafc;
  border: none;
  color: #1e293b;
  font-weight: 600;
}
/* Day Styling */
.ui-datepicker th {
  color: #64748b;
  font-size: 0.8rem;
  text-transform: uppercase;
}
.ui-state-default,
.ui-widget-content .ui-state-default {
  background: #ffffff;
  border: 1px solid transparent;
  color: #334155;
  text-align: center;
  border-radius: 4px;
}
/* Selected Date Highlight */
.ui-state-active,
.ui-widget-content .ui-state-active {
  background: #3b82f6 !important;
  /* Brand Blue */
  color: #ffffff !important;
  border: 1px solid #3b82f6;
}
/* Hover State */
.ui-state-hover {
  background: #eff6ff !important;
  color: #3b82f6 !important;
}
.InsetClass {
  position: absolute;
  inset: 0;
}
.FontRedBgWhite {
  color: red;
  background-color: white;
}
.CancelDoneGrid {
  display: grid;
  grid-template-columns: 10px 1fr 10px 1fr 10px;
  grid-template-rows: auto;
  grid-template-areas: " . cancelDiv . doneDiv . ";
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.cancelDiv {
  grid-area: cancelDiv;
}
.doneDiv {
  grid-area: doneDiv;
}
.sectionDiv {
  border: 2px solid red;
}
.sectionTopDiv {
  border: 2px solid black;
}
.sectionBottomDiv {
  border: 2px solid black;
}
input[readonly] {
  background-color: #ffffff;
  /* Keeps it from turning gray */
  color: #000000;
  /* Keeps text high-contrast */
  cursor: not-allowed;
  /* The "red circle with a line" icon */
}
.GivingSectionDiv {
  position: relative;
  width: 90%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  border-radius: 15px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
}
.GivingSectionCloseDiv {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  color: white;
  border: 2px solid white;
  background-color: black;
  border-radius: 50px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
  z-index: 50;
  transition: transform 0.3s;
}
.GivingSectionCloseDiv:hover {
  cursor: pointer;
  transform: scale(1.15);
}
.GivingSectionAmountDiv {
  width: 100%;
  height: 60px;
  position: relative;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px solid black;
}
.GivingSectionFundContentDiv {
  position: relative;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.05);
}
.BottomNoticeDiv {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 70px;
  background-color: #f6f6f9;
  border-top: 2px solid lightgray;
}
.gridHonorMemory {
  display: grid;
  grid-template-columns: 1fr 40px 1fr ;
  grid-template-areas: "gridHonor . gridMemory";
}
@media screen and (max-width: 630px) {
  .gridHonorMemory {
    grid-template-columns: 40px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: "gridHonor" "gridMemory";
  }
}
.gridHonor {
  grid-area: gridHonor;
  display: flex;
  justify-content: right;
  align-items: center;
}
.gridMemory {
  grid-area: gridMemory;
  display: flex;
  justify-content: left;
  align-items: center;
}
.gridHonorMemoryDeliveryType {
  display: grid;
  grid-template-columns: 20px 1fr 1fr 1fr 20px;
  grid-template-areas: ". gridDeliveryTypeEmail gridDeliveryTypeMail gridDeliveryTypeDoNotDelver .";
}
@media screen and (max-width: 630px) {
  .gridHonorMemoryDeliveryType {
    grid-template-columns: 40px 1fr 40px;
    row-gap: 15px;
    grid-template-areas: "gridDeliveryTypeEmail" "gridDeliveryTypeMail" "gridDeliveryTypeDoNotDelver";
  }
}
.gridDeliveryTypeEmail {
  grid-area: gridDeliveryTypeEmail;
}
.gridDeliveryTypeMail {
  grid-area: gridDeliveryTypeMail;
}
.gridDeliveryTypeDoNotDelver {
  grid-area: gridDeliveryTypeDoNotDelver;
}
.HonorMemoryPos {
  position: absolute;
  height: 90px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-top: 2px solid #d3d3d3;
  border-radius: 25px;
  background-image: linear-gradient(rgba(244, 244, 244, 0.4), #f4f4f4);
}
#checkout-viewports {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  /* Instructs the card box to smoothly adjust its height when steps swap */
  transition: grid-template-rows 0.4s ease, height 0.4s ease;
}
#GivingGridContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  /* Instructs the card box to smoothly adjust its height when steps swap */
  transition: grid-template-rows 0.4s ease, height 0.4s ease;
}
/* This forces both steps to occupy the exact same row and column cell block */
.StepGridDiv {
  grid-area: 1 / 1;
  width: 100%;
  height: max-content;
  /* Dictates height based on inner contents only */
}
/* Keeps Step 2 completely invisible on initial load without stopping script processing */
.hidden-step {
  display: none;
  opacity: 0;
}
.hidden-viewport {
  display: none !important;
}
/* Container to stretch buttons across your screen with a gap */
.custom-square-tabs {
  display: flex;
  flex-direction: row;
  gap: 16px;
  /* The horizontal space between buttons */
  width: 100%;
  margin-bottom: 28px;
  /* Vertical gap between buttons and the inputs below */
}
/* Base styling to make the buttons perfectly square-ish blocks */
.payment-tab {
  display: flex;
  flex-direction: column;
  /* Icon sits on top, text stacks below */
  align-items: center;
  /* Center content horizontally */
  justify-content: center;
  /* Center content vertically */
  gap: 20px;
  /* Vertical space between the icon and text */
  flex: 1;
  /* Distributes tabs evenly across the page */
  height: 120px;
  /* Hardcodes a perfect square-like block layout */
  border-radius: 15px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
  /* UNSELECTED: Full user background and custom foreground text/icon color */
  background-color: var(--dynamic-bg) !important;
  border: 2px solid color-mix(in srgb, var(--dynamic-bg), #000000 15%) !important;
  color: var(--dynamic-fg) !important;
}
/* 2. Hover State: Adds a subtle darkening overlay on the unselected button */
.payment-tab:not(.active-tab):hover {
  background-color: color-mix(in srgb, var(--dynamic-bg), #000000 10%) !important;
}
.payment-tab:hover {
  background-color: color-mix(in srgb, var(--dynamic-bg), #ffffff 90%) !important;
}
/* THE CLICK TRANSLATION */
.payment-tab:active {
  transform: scale(0.95) !important;
  /* Shrinks the element down 5% */
}
/* Large Icon Presentation */
.payment-tab .tab-icon,
.payment-tab .tab-icon-wallet {
  font-size: 32px;
  /* Increases icon size significantly */
  color: #64748b;
}
/* Target the SVG inside your custom layout container */
.tab-icon-svg svg {
  width: 50px;
  /* Scales smoothly relative to font size */
  height: 50px;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .tab-icon-svg svg {
    width: 40px;
    /* Automatically shrinks slightly on mobile phones */
    height: 40px;
  }
}
/* Horizontal text configuration sitting below the graphic */
.payment-tab .tab-text {
  font-size: 24px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}
/* ACTIVE HIGHLIGHT STATUS: Selected Button Layout */
.payment-tab.active-tab {
  /* SELECTED LOOK: Turns into a soft, illuminated background (85% white, 15% user bg color) */
  background-color: color-mix(in srgb, var(--dynamic-bg), #ffffff 25%) !important;
  /* Text and SVG icons dynamically change to the raw background color so they stand out sharply */
  color: var(--dynamic-bg) !important;
  /* Border changes to match the user's custom background color */
  border-color: var(--dynamic-bg) !important;
  font-weight: 600 !important;
  /* The "Pushed Down" visual engine: Heavy internal inset shading */
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.15) !important;
}
.payment-tab.active-tab .tab-text,
.payment-tab.active-tab .tab-icon,
.payment-tab.active-tab .tab-icon-wallet {
  color: #16a34a;
  /* Updates contents to match active style */
}
/* CSS Helper to hide panels cleanly */
.hidden-viewport {
  display: none !important;
}
/* Container when incomplete */
.status-box-required {
  background-color: #FEF2F2;
  /* Soft red alert */
  border: 1px solid #FCA5A5;
  padding: 14px 16px;
  border-radius: 8px;
  margin: 20px 0;
  cursor: pointer;
  user-select: none;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  /* SMOOTH TRANSITION */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Required Card Hover State */
.status-box-required:hover {
  border-color: #DC2626;
  /* Deepens to a solid, rich red */
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.25);
  /* Slightly crispier shadow */
}
.status-text-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Badge highlight */
.status-badge-required {
  background-color: #DC2626;
  color: white;
  font-size: 24px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 10px;
  text-transform: uppercase;
}
.status-instruction-required {
  color: #991B1B;
  font-size: 26px;
  font-weight: 700;
}
.status-instruction-complete {
  color: black;
  font-size: 26px;
  font-weight: 700;
}
.status-action-btn {
  background-color: #DC2626;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
/* Container when completed successfully */
.status-box-complete {
  background-color: #F0FDF4;
  /* Soft success green */
  border: 1px solid #BBF7D0;
  padding: 14px 16px;
  border-radius: 6px;
  margin: 20px 0;
  font-size: 22px;
  cursor: pointer;
  user-select: none;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  /* SMOOTH TRANSITION */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Completed Card Hover State */
.status-box-complete:hover {
  border-color: #166534;
  /* Deepens to a solid, rich forest green */
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.25);
  /* Enhanced depth */
}
/* The new Optional Box style */
.status-box-optional {
  background-color: #F9FAFB;
  /* Neutral light gray */
  border: 1px solid #caccd1;
  /* Subtle gray border */
  padding: 14px 16px;
  border-radius: 8px;
  margin: 20px 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  /* SMOOTH TRANSITION */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Optional Card Hover State */
.status-box-optional:hover {
  border-color: #2563EB;
  /* Changes to your brand interactive blue! */
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.25);
}
/* Optional Text Instruction */
.status-instruction-optional {
  color: #4B5563;
  /* Dark neutral gray text */
  font-size: 26px;
  font-weight: 700;
}
/* Complete Green Badge */
.status-badge-complete {
  background-color: #046f2a;
  /* Medium gray badge */
  color: white;
  font-size: 24px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 10px;
  text-transform: uppercase;
}
/* Optional Gray Badge */
.status-badge-optional {
  background-color: #6B7280;
  /* Medium gray badge */
  color: white;
  font-size: 24px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 10px;
  text-transform: uppercase;
}
.coverTheFeesLabel {
  font-size: 22px;
  margin-left: 15px;
  color: black;
}
.stripePaymentDiv {
  background-color: rgba(0, 0, 0, 0.02);
  border: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.25);
}
.google-btn-shadow-wrapper {
  display: inline-block;
  /* Shrinks the container wrapper to wrap the button snugly */
  border-radius: 4px;
  /* Match this to your Google button shape choice (4px for rectangular, 20px+ for pill) */
  overflow: hidden;
  /* Prevents the internal iframe corners from leaking past the shadow edges */
  border-radius: 25px;
  margin-left: auto;
  margin-right: auto;
  /* The Shadow Configuration (X-offset, Y-offset, Blur-radius, Spread, Color) */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Smooth transform transition layer for hover animations */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Optional: Make the shadow deeper and lift the button slightly when hovered */
.google-btn-shadow-wrapper:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.fb-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 340px;
  height: 40px;
  padding: 0 16px;
  border-radius: 25px;
  border: 2px solid darkgray;
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  /* The Shadow Configuration (X-offset, Y-offset, Blur-radius, Spread, Color) */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Smooth transform transition layer for hover animations */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* Coloring and hover state for the blue theme */
.fb-blue {
  background-color: #0866ff;
  color: #ffffff;
}
.fb-blue:hover {
  background-color: #0652cc;
}
.SignInLogo {
  position: absolute;
  top: 10px;
  left: 170px;
}
.back-to-step1-lnk {
  display: inline-block;
  font-size: 24px;
  /* Slightly smaller than your 24px Stripe text */
  color: #4a5568;
  /* Muted slate gray instead of bright neon blue */
  text-decoration: none;
  /* Removes the distracting line underneath */
  font-weight: 500;
  padding: 12px 16px 10px 0px;
  transition: color 0.2s ease;
}
/* 🚀 THE UX TRICK: Only show the underline when they actually hover their mouse over it */
.back-to-step1-lnk:hover {
  color: #1a0dab;
  /* Snaps back to a clean blue on hover */
  text-decoration: underline;
  cursor: pointer;
}
.warningRed {
  color: #e11d48 !important;
  opacity: 1;
}
.receiptUrlDiv {
  width: 100%;
  height: 1000px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}
.stripeIFrameDiv {
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.DisplayGridOr {
  display: grid;
  grid-template-columns: 1fr 60px 70px 60px 1fr;
  grid-template-areas: ". orLineDiv1 orDiv orLineDiv2 .";
}
.orDiv {
  grid-area: orDiv;
  text-align: center;
}
.orLineDiv1 {
  grid-area: orLineDiv1;
  overflow: hidden;
}
.orLineDiv2 {
  grid-area: orLineDiv2;
  overflow: hidden;
}
.signPutImgDiv {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 20px;
  right: -20px;
  cursor: pointer;
  border: 3px solid black;
  background-color: #e60000;
  border-radius: 50px;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and older */
  user-select: none;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
}
.signPutImgDiv:active {
  transform: scale(0.95) !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.signPutImgDiv:hover {
  background-color: color-mix(in srgb, #e60000, white 30%);
}
.PassKeyPasswordBtnDiv {
  width: 200px;
  height: 40px;
  font-size: 26px;
  border: 1px solid black;
  cursor: pointer;
  border-radius: 25px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
}
@media screen and (max-width: 550px) {
  .PassKeyPasswordBtnDiv {
    width: 150px;
    font-size: 24px;
  }
}
@media screen and (max-width: 400px) {
  .PassKeyPasswordBtnDiv {
    width: 120px;
    font-size: 22px;
  }
}
.PassKeyPasswordBtnDiv:active {
  transform: scale(0.95) !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15) !important;
}
.socialMediaGridBtn {
  display: grid;
  grid-template-columns: 5px 30px 10px 1fr 10px;
  grid-template-areas: ". smImg . smTitle .";
  width: 90%;
  max-width: 300px;
  height: 40px;
  border: 1px solid black;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;
}
.smImg {
  grid-area: smImg;
}
.smTitle {
  grid-area: smTitle;
}
.socialMediaGridBtn:active {
  transform: scale(0.95) !important;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15) !important;
}
a.legalFullPageLink,
a.legalFullPageLink:link,
a.legalFullPageLink:visited,
a.legalFullPageLink:hover,
a.legalFullPageLink:active,
a.legalFullPageLink:focus {
  color: #176bfb;
  font-size: 20px;
}
.bgcBlack {
  background-color: black;
}
.bgcBlue {
  background-color: blue;
}
.bgcAquaBlue {
  background-color: aqua;
}
.bgcLtBlue {
  background-color: #2ecbff;
}
.bgcCBBlue {
  background-color: #2196F3;
}
.bgcDarkGreen {
  background-color: darkgreen;
}
.bgcGray {
  background-color: gray;
}
.bgcLightGray {
  background-color: #f6f6f6;
}
.bgcPurple {
  background-color: #800080;
}
.bgcRed {
  background-color: Red;
}
.bgcWhite {
  background-color: white;
}
.borderBlack1 {
  border: 1px solid black !important;
}
.borderBlack2 {
  border: 2px solid black !important;
}
.borderBlack3 {
  border: 3px solid black !important;
}
.borderRed1 {
  border: 1px solid red !important;
}
.borderRed2 {
  border: 2px solid red !important;
}
.borderRed3 {
  border: 3px solid red !important;
}
.borderLRB {
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}
.breakWord {
  overflow-wrap: break-word;
}
.lineBGGray:nth-of-type(even) {
  background-color: #f3f3f3;
}
.link24 {
  display: flex;
  color: blue;
  font-size: 24px;
  font-weight: bold;
}
.link24:hover {
  cursor: pointer;
}
.dNone {
  display: none;
}
.dInlineBlock {
  display: inline-block;
}
.fcAuditBlue {
  background-color: #f6f9ff;
}
.fcBlack {
  color: black;
}
.fcBlackAnchor {
  color: black;
}
.fcBlackBlueHover {
  color: black;
}
.fcBlackBlueHover:hover {
  color: blue;
  text-decoration: underline;
}
.fcGrayBlueHover {
  color: gray;
}
.fcGrayBlueHover:hover {
  color: blue;
  text-decoration: underline;
}
.fcBlackAnchor:hover {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}
.fcBlueUnderlineLink {
  color: blue;
  font-weight: bold;
  cursor: pointer;
  text-decoration: underline;
}
.fcBlueUnderlineLink:hover {
  color: darkblue;
  text-decoration-thickness: 3px;
}
.fcGreen {
  color: #003900;
}
.fcBlue {
  color: blue;
}
.fcBlueDark {
  color: Darkblue;
}
.fcBlueWithHover {
  color: blue;
}
.fcBlueWithHover:hover {
  cursor: pointer;
  text-decoration: underline;
}
.fcYellow {
  color: yellow;
}
.fcDarkGreen {
  color: darkgreen;
}
.fcDarkGray {
  color: #393939;
}
.fcFireBrick {
  color: firebrick;
}
.fcGoldenRod {
  color: goldenrod;
}
.fcGray {
  color: gray;
}
.fcGrayDark {
  color: darkgray;
}
.fcRed {
  color: red;
}
.fcRedDark {
  color: darkred;
}
.fcWheat {
  color: wheat;
}
.fcWhite {
  color: white;
}
.fcWhiteAnchor {
  color: white;
}
.fcWhiteAnchor:hover {
  cursor: pointer;
  text-decoration: underline;
}
.dFlex {
  display: flex;
}
.flexCC {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flexCCWithHover {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flexCCWithHover:hover {
  cursor: pointer;
}
.flexRC {
  display: flex;
  justify-content: right;
  align-items: center;
}
.flexLC {
  display: flex;
  justify-content: left;
  align-items: center;
}
.flexRC {
  display: flex;
  justify-content: right;
  align-items: center;
}
.flexEvenC {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.flexVEvenC {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.flexBetweenC {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flexWrap_FC {
  flex-wrap: wrap;
  min-width: fit-content;
}
.fs12 {
  font-size: 12px;
  font-weight: bold;
}
.fs14 {
  font-size: 14px;
  font-weight: bold;
}
.fs16 {
  font-size: 16px;
  font-weight: bold;
}
.fs18 {
  font-size: 18px;
  font-weight: bold;
}
.fs19 {
  font-size: 19px;
  font-weight: bold;
}
.fs20 {
  font-size: 20px;
  font-weight: bold;
}
.fs22 {
  font-size: 22px;
  font-weight: bold;
}
.fs23 {
  font-size: 23px;
  font-weight: bold;
}
.fs24 {
  font-size: 24px;
  font-weight: bold;
}
.fs25 {
  font-size: 25px;
  font-weight: bold;
}
.fs26 {
  font-size: 26px;
  font-weight: bold;
}
.fs28 {
  font-size: 28px;
  font-weight: bold;
}
.fs30 {
  font-size: 30px;
  font-weight: bold;
}
.fs32 {
  font-size: 32px;
  font-weight: bold;
}
@media screen and (max-width: 550px) {
  .fs32 {
    font-size: 30px;
  }
}
@media screen and (max-width: 450px) {
  .fs32 {
    font-size: 28px;
  }
}
.fs34 {
  font-size: 34px;
  font-weight: bold;
}
.fs36 {
  font-size: 36px;
  font-weight: bold;
}
.fs38 {
  font-size: 38px;
  font-weight: bold;
}
.fs42 {
  font-size: 42px;
  font-weight: bold;
}
.fs48 {
  font-size: 48px;
  font-weight: bold;
}
.fsItalic {
  font-style: italic;
}
.h30 {
  height: 30px;
}
.h50 {
  height: 50px;
}
.h80per {
  height: 80%;
  margin-top: 10%;
}
.h90per {
  height: 90%;
  margin-top: 5%;
}
.h100per {
  height: 100%;
}
.hoverDiv:hover {
  cursor: pointer;
}
.lineColor:nth-of-type(odd) {
  background-color: #ffffde;
}
.lineColor:nth-of-type(even) {
  background-color: white;
}
.lineBorder {
  border-top: 3px solid transparent;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid lightgray;
}
.lineBorder:hover {
  border: 3px solid red !important;
}
.linkHover:hover {
  cursor: pointer;
  text-decoration: underline;
}
.linkHover:hover {
  cursor: pointer;
  text-decoration: underline;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb25 {
  margin-bottom: 25px;
}
.mb30 {
  margin-bottom: 30px;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.ml20 {
  margin-left: 20px;
}
.ml25 {
  margin-left: 25px;
}
.ml30 {
  margin-left: 30px;
}
.ml35 {
  margin-left: 35px;
}
.ml40 {
  margin-left: 40px;
}
.ml50 {
  margin-left: 50px;
}
.ml55 {
  margin-left: 55px;
}
.ml60 {
  margin-left: 60px;
}
.ml65 {
  margin-left: 65px;
}
.ml80 {
  margin-left: 80px;
}
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.mt0 {
  margin-top: 0px;
}
.mt2 {
  margin-top: 2px;
}
.mt3 {
  margin-top: 3px;
}
.mt5 {
  margin-top: 5px;
}
.mt8 {
  margin-top: 8px;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt22 {
  margin-top: 22px;
}
.mt25 {
  margin-top: 25px;
}
.mt30 {
  margin-top: 30px;
}
.mt35 {
  margin-top: 35px;
}
.mt40 {
  margin-top: 40px;
}
.mt45 {
  margin-top: 45px;
}
.mt50 {
  margin-top: 50px;
}
.mt60 {
  margin-top: 60px;
}
.mt70 {
  margin-top: 70px;
}
.mt80 {
  margin-top: 80px;
}
.mt90 {
  margin-top: 90px;
}
.mt100 {
  margin-top: 100px;
}
.mt110 {
  margin-top: 110px;
}
.ofAutoHidden {
  overflow-y: auto;
  overflow-x: hidden;
}
.ofHidden {
  overflow: hidden;
}
.pb5 {
  padding-bottom: 5px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb20 {
  padding-bottom: 20px;
}
.pd3 {
  padding: 3px;
}
.pd5 {
  padding: 5px;
}
.pRelative {
  position: relative;
}
.pt5 {
  padding-top: 5px;
}
.pt10 {
  padding-top: 10px;
}
.pt15 {
  padding-top: 15px;
}
.pt20 {
  padding-top: 20px;
}
.pt30 {
  padding-top: 30px;
}
.pt40 {
  padding-top: 40px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb30 {
  padding-bottom: 30px;
}
.pointer {
  position: relative;
}
.pointer:hover {
  cursor: pointer;
}
.redBorderOnHover:hover {
  cursor: pointer;
  border: 1px solid red;
}
.scale1 {
  transform: scale(1.1);
}
.scale2 {
  transform: scale(1.2);
}
.scale3 {
  transform: scale(1.3);
}
.scaleHover1 {
  transition: transform, 0.4s;
}
.scaleHover1:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.scaleHover2 {
  transition: transform, 0.4s;
}
.scaleHover2:hover {
  cursor: pointer;
  transform: scale(1.2);
}
.scaleHover3 {
  transition: transform, 0.4s;
}
.scaleHover3:hover {
  cursor: pointer;
  transform: scale(1.3);
}
.scrollY {
  overflow-y: scroll!important;
  overflow-x: hidden!important;
}
.shadow {
  box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
}
.taCenter {
  text-align: center;
}
.taLeft {
  text-align: left;
}
.taRight {
  text-align: right;
}
.tdItalic {
  font-style: italic;
}
.tdNone {
  text-decoration: none;
}
.tdUnderline {
  text-decoration: underline;
}
.tdLineThrough {
  text-decoration: line-through;
}
.toEllipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.twNone {
  text-wrap: nowrap;
}
.w80per {
  width: 80%;
  margin-left: 10%;
}
.w90per {
  width: 90%;
  margin-left: 5%;
}
.w96per {
  width: 96%;
  margin-left: 2%;
}
.w100per {
  width: 100%;
}
.wh100 {
  width: 100%;
  height: 100%;
}
.textWrap {
  text-wrap: wrap;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v24/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v24/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUUsj.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj4PVksj.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v24/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v24/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QNig.ttf) format('truetype');
}
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #d9d9d9;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  line-height: 1.3;
  color: black;
  box-sizing: border-box;
  transition: opacity 0.7s ease-in-out, visibility 0.5s ease-in-out;
}
.DesktopLayout {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: calc((100% - 1265px)/2);
  width: 1265px;
  background-color: #E8E8E8;
  border-left: 2px solid lightgray;
  border-right: 2px solid lightgray;
  overflow-x: hidden;
  overflow-y: auto;
}
.MobileLayout {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #E8E8E8;
  overflow-x: hidden;
  overflow-y: auto;
}
#givingModalContainerDiv {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200 !important;
}
#givingModalBkGround {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid black;
}
.modalDialogCloseBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  top: -20px;
  right: -20px;
  position: absolute;
  font-size: 24px;
  font-weight: 900;
  color: white;
  background-color: black;
  border: 2px solid white;
  border-radius: 50px;
  cursor: pointer;
  z-index: 100;
}
.reqAsterisk {
  position: relative;
}
.reqAsterisk:after {
  content: '*';
  position: absolute;
  top: 0px;
  right: -28px;
  font-size: 36px;
  font-weight: bold;
  color: red;
}
.txtElementLabel {
  display: block !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  margin-left: 10px !important;
  color: black !important;
  font-weight: bold !important;
  font-size: 24px !important;
  text-align: left!important;
}
.HRRule {
  width: 90%;
  margin-top: 30px;
  margin-left: 5%;
  color: gray;
}
.gridInputClearDropDownBtn {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 13px 1fr 3px 36px 36px;
  grid-template-rows: 36px;
  grid-template-areas: ". gridTextInput . gridClearBtn gridDropDownBtn";
  border: 2px solid black;
  border-bottom-width: 3px;
  border-radius: 15px;
  box-shadow: 5px 7px 8px 4px #818181;
  background-color: white;
  position: relative;
}
.DropDownClass {
  position: relative;
}
.DropDownClass:after {
  content: '';
  position: absolute;
  height: 40px;
  width: 40px;
  top: 0px;
  right: -28px;
  font-size: 36px;
  font-weight: bold;
  background-color: green;
}
.gridInputClear {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 13px 1fr 3px 36px;
  grid-template-rows: 36px;
  grid-template-areas: ". gridTextInput . gridClearBtn";
  border: 2px solid black;
  border-bottom-width: 3px;
  border-radius: 15px;
  box-shadow: 5px 7px 8px 4px #818181;
  background-color: white;
  position: relative;
}
.gridIcon {
  grid-area: gridIcon;
  width: 30px;
  height: 30px;
}
.gridTextInput {
  grid-area: gridTextInput;
  width: 100%;
  font-size: 22px;
  font-weight: bold;
  color: black;
}
.gridClearBtn {
  grid-area: gridClearBtn;
  display: flex;
  justify-content: center;
  align-items: center;
}
.noBorder {
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  resize: none;
}
.txtInputBgColorWhite {
  background-color: white;
  color: black;
}
.txtInputBgColorWhite::placeholder {
  color: #707070;
  font-style: italic;
}
.txtInputBgColorWhite:-ms-input-placeholder {
  color: #707070;
  font-style: italic;
}
.txtInputBgColorWhite::-ms-input-placeholder {
  color: #707070;
  font-style: italic;
}
.txtInputBgColorGreen {
  background-color: green;
  color: white;
}
.txtInputBgColorGreen::placeholder {
  color: white;
  font-style: italic;
}
.txtInputBgColorGreen:-ms-input-placeholder {
  color: white;
  font-style: italic;
}
.txtInputBgColorGreen::-ms-input-placeholder {
  color: white;
  font-style: italic;
}
.txtInputBgColorRed {
  background-color: red;
  color: white;
}
.txtInputBgColorRed::placeholder {
  color: white;
  font-style: italic;
}
.txtInputBgColorRed:-ms-input-placeholder {
  color: white;
  font-style: italic;
}
.txtInputBgColorRed::-ms-input-placeholder {
  color: white;
  font-style: italic;
}
.gridInput1Col {
  display: grid;
  justify-content: left;
  align-items: center;
  grid-template-columns: 40px 1fr 40px;
  grid-template-areas: ". gridInput1Col_Col1 .";
  margin-top: 15px;
}
@media screen and (max-width: 550px) {
  .gridInput1Col {
    grid-template-columns: 30px 1fr 30px;
  }
}
@media screen and (max-width: 450px) {
  .gridInput1Col {
    grid-template-columns: 25px 1fr 25px;
  }
}
.gridInput1Col_Col1 {
  grid-area: gridInput1Col_Col1;
}
.underlineOnHover:hover {
  text-decoration: underline;
}
#spinnerContainerDiv {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 650 !important;
}
#dialogBkGround {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid black;
}
.AgreeCkBoxLabel {
  font-size: 26px;
  font-weight: bold;
  margin-left: 10px;
  color: black;
}
.AgreeCkBoxInput {
  width: 22px;
  height: 22px;
  display: inline-block;
  margin-left: 20px;
  min-width: 22px;
}
.legalBody {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  margin: 40px auto;
  max-width: 900px;
  padding: 20px;
  color: #222;
}
.legalH1 {
  border-bottom: 3px solid #444;
  padding-bottom: 10px;
}
.legalH2 {
  margin-top: 35px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 6px;
}
.legalH3 {
  margin-top: 20px;
}
.legalP {
  margin: 10px 0;
  font-size: 20px;
  font-weight: normal;
}
ul {
  margin-left: 25px;
  font-size: 20px;
  font-weight: normal;
}
.section {
  margin-bottom: 40px;
}
.last-updated {
  font-style: italic;
  font-size: 20px;
  color: #555;
}
/*# sourceMappingURL=./main.css.map */