/* CSS Document */


/*-- calculator styles --*/
#body_head #pageSubTitle {
  display: flex;
  justify-content: center;
  align-items: center;
}
#body_head #pageSubTitleText {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--brsBlue);
  font-size: 4vh;
  font-variant: small-caps;
}

#chartContainer {
  margin-top: 4vmin;
  margin-bottom: 4vmin;
  padding: 1vmin;
}
#comparisonChart {
  padding: 1vmin;
  display:block;
  width: auto;
  max-width: 50vw;
  background-color: ghostwhite;
}

.inpFld[type="number"]::-webkit-outer-spin-button ,
.inpFld[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; /* clears hidden margins */
}
.inpFld[type="number"]{
  -moz-appearance:textfield; /* Firefox */
  padding-right: .5vmin;
  text-align: end;
}

#utilityForm .outFld, #paymentForm .outFld, #solarForm .outFld{
  padding-right: .5vmin;
  text-align: end;
}
#utilityForm .inpFldLbl, #utilityForm .outFldLbl,
#paymentForm .inpFldLbl, #paymentForm .outFldLbl,
#solarForm .inpFldLbl, #solarForm .outFldLbl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#utilityForm .inpFldLbl .subtext, #utilityForm .outFldLbl .subtext,
#paymentForm .inpFldLbl .subtext, #paymentForm .outFldLbl .subtext,
#solarForm .inpFldLbl .subtext, #solarForm .outFldLbl .subtext {
  font-size: 1.5vmin;
}


/*-- new form wrapper styles --*/
#solarForm .formBody.col2 .column > .col2 {
  margin-top: 1vmin;
}
#budgetRow.collapsed,
#savingsRow.collapsed {
  display: none;
  height: 0;
}
.formInput.locked * {
  cursor: not-allowed;
}
.formInput.locked {
  visibility: hidden;
}
.inpFldLblText {
  font-size: 2.5vmin;
  color: var(--brsBlue);
}
.inpFldLblNote {
  font-size: 1.5vmin;
  font-style: italic;
  color: var(--brsBlue);
}
.formWrapper {
  margin-bottom: 2vh;
  border: 1px solid white;
  border-radius: 1.5vmin;
}
.formWrapper.locked * {
  cursor: no-drop;
}
.formTitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 1.5vmin 1.5vmin 0 0;
  cursor: pointer;
}
.formTitleText {
  padding-bottom: 1vmin;
  font-size: 4vmin;
}
.formSubTitleText {
  padding-bottom: 1vmin;
  font-size: 1.5vmin;
  font-style: italic;
}
.formWrapper.collapsed .formBody {
  display: none;
  visibility: collapse;
  height: 0;
}
.formWrapper.collapsed:not(.locked) .formTitle {
  color: var(--brsBlue);
  background-color: transparent;
}
.formWrapper:not(.collapsed):not(.locked) .formTitle {
  color: var(--brsBlue);
  background-color: ghostwhite;
  text-shadow: 2px 2px 4px black;
}
.formWrapper:not(.locked) .formTitle:hover,
.formWrapper:not(.locked) .formTitle:focus,
.formWrapper.collapsed:not(.locked) .formTitle:hover,
.formWrapper.collapsed:not(.locked) .formTitle:focus {
  color: var(--ikagGreen);
  background-color: ghostwhite;
  text-shadow: 2px 2px 4px black;
}
.formWrapper.locked .formTitle,
.formWrapper.collapsed.locked .formTitle {
  color: dimgrey;
  background-color: transparent;
}

/*-- new form wrapper styles end --*/

.formBody {
  padding: 2vmin .5vmin;
  background-color: lightslategrey;
  border-radius: 0 0 1.5vmin 1.5vmin;
}
.formInput,
.formOutput{
  width: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.inpRad {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}
.inpRadBtn {
  margin: 0px 1.5vmin 0px 0px;
  height: 2vmin;
  width: 2vmin;
  accent-color: yellow;
}
.inpRadLbl {
  font-size: 2vmin;
  color: darkgrey;
}      
.inpRadBtn:checked + .inpRadLbl {
  color: yellow;
}
.inpRadBtn:checked:hover {
  accent-color: green;
}
.inpRadLbl:hover,
.inpRadBtn:hover + .inpRadLbl,
.inpRadBtn:checked:hover + .inpRadLbl {
  color: green;
} 
.inpFld {
  height: 3vmin;
  width: -webkit-fill-available;
  font-size: 3vmin;
  color: purple;
  cursor: text;
}
.inpFldLbl {
  height: 2.5vmin;
  width: -webkit-fill-available;
  font-size: 2.5vmin;
  color: purple;
}
.outFld {
  height: 3vmin;
  width: -webkit-fill-available;
  border: 1px solid grey;
  color: darkblue;
  background-color: darkgray;
  font-size: 3vmin;
  cursor: not-allowed;
}
.outFldLbl {
  height: 2.5vmin;
  width: -webkit-fill-available;
  font-size: 2.5vmin;
  color: black;
}
.inpBtn {
  margin: 1vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 150px;
  border: 1px solid var(--shadow);
  border-radius: 1vmin;
  color: ghostwhite;
  background-color: darkgrey;
  box-shadow: 2px 5px 9px var(--shadow);
  cursor: pointer;
}
.inpBtnLbl {
  font-size: 2vmin;
  text-shadow: 2px 2px 4px var(--shadow);
}
.inpBtn:hover, .inpBtn:focus {
  color: rgb(20,100,20);
  background-color: rgb(200,255,200);
  box-shadow: 0 0 transparent;
}
.inpChk {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}
.inpChkLbl {
  color: darkgrey;
  font-size: 2vmin;
}
.inpChkBox {
  height: 2vmin;
  width: 2vmin;
  margin: 0 1.5vmin 0 0;
  accent-color: darkgreen;
}
.inpChkBox:checked + .inpChkLbl {
  color: darkgreen;
}



table { 
  width: -webkit-fill-available;
}
table th {
  padding: 5px;
  height: 3vmin;
  font-size: 2vmin;
  text-align: center;
  word-wrap: break-word;
}
table td {
  padding: 2px 0;
  height: 3vmin;
  font-size: 2vmin;
  text-align: end;
}
table td:nth-child(1) {
  text-align: center;
}

.formWrapper table {
  display: none;
  margin-top: 1.5vmin;
  margin-bottom: 1.5vmin;
  border: 2px solid black;
}
.formWrapper table.showing {
  display: table;
}
.formWrapper table th {
  border-bottom: 4px solid black;
}
.formWrapper table td {
  padding-right: 1.5vmin;
  border-right: 1px solid black;
}

#utilityTable th, #utilityTable td {
  background-color: var(--costRed);
}
#paymentTable th, #paymentTable td {
  background-color: var(--solarBlue);
}
#solarTable th:nth-child(2),#solarTable th:nth-child(3),
#solarTable td:nth-child(2),#solarTable td:nth-child(3){
  background-color: var(--costRed);
}
#solarTable th:nth-child(4),#solarTable th:nth-child(5),
#solarTable td:nth-child(4),#solarTable td:nth-child(5){
  background-color: var(--solarBlue);
}
#solarTable th:nth-child(6),#solarTable th:nth-child(7),
#solarTable td:nth-child(6),#solarTable td:nth-child(7){
  background-color: var(--saveGreen);
}
table th:nth-child(1) {
  background-color: rgba(100,100,100,0.5);
}
table tbody tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.5);
}

#solarTable thead tr:nth-child(1) th:nth-child(1) {
  background-color: rgba(100,100,100,0.5);
}
#solarTable thead tr:nth-child(1) th:nth-child(2) {
  background-color: var(--costRed);
}
#solarTable thead tr:nth-child(1) th:nth-child(3) {
  background-color: var(--solarBlue);
}
#solarTable thead tr:nth-child(1) th:nth-child(4) {
  background-color: var(--saveGreen);
}
#solarTable thead tr:nth-child(1) th {
  border-bottom: 1px solid black;
}
/*-- calculator styles end --*/