html {
  background: rgb(112, 227, 250);
  font-family: system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, -apple-system, BlinkMacSystemFont;
  font-size: 12pt;
}

html, body {
  height: 65%;
  margin: 5;
}

body {
  display: grid;
  place-items: center;
}
#buildinfo,
#important {
  display: flex;
  text-align: center;
}
#frmtabs {
  width: 21rem;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: inset 2rem 2rem 2rem 2rem #0009,;
  display: flex;
  flex-direction: column;
  align-items: left;
  background: rgb(213, 241, 247);
}
#xnote label{
  display: flex;
  width: 20rem;
  flex-wrap: wrap
};

#frmtabs input, 
#frmtabs select {
  font-family: inherit;
  font-size: 1.1rem;
  margin-block-end: .5rem;
  text-align: center;
  width: auto;
}

#frmtabs #payoffbalance, 
#frmtabs #po-apr,
#frmtabs #po-opmt,
#frmtabs #ofinchg,
#input-fixpay, #input-apr, 
#input-lastpay {
  font-family: inherit;
  font-size: 1.1rem;
  margin-block-end: .25rem;
  text-align: center;
  width: 6rem ;
}


#frmtabs #rebfinchg,
#frmtabs #estpayoff
 {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  width: 8rem;
}

#frmtabs #ccmonthfee,
#frmtabs #ccminpmt,
#frmtabs #ccminpaypct,
#frmtabs #ccapr,
#frmtabs #ccbalance,
#frmtabs #ccfirstpay,
#frmtabs #cctotalinterest,
#frmtabs #cctotaltime,
#frmtabs #rnpay,
#frmtabs #rpayamt,
#frmtabs #rloanprin,
#frmtabs #rballoon,
#frmtabs #restimate{
  font-size: 1.25rem;
  width: 5rem;
}

#frmtabs #raprest {
  font-size: 1.25rem;
  font-weight: bold;
  width: 10rem;
}
#frmtabs #cctotalinterest,
#frmtabs #cctotaltime{
  font-size: 1.25rem;
  width: 10rem;
}

#frmtabs #cdays,
#frmtabs #cweeks,
#frmtabs #bweeks,
#frmtabs #smonths,
#frmtabs #cmonths,
#frmtabs #cyears{
  font-size: 1.25rem;
  width: 6rem;
}

#frmtabs #input-diy {
  width: 3rem;
}

#frmtabs #input-odddays,
#frmtabs #ponpmts, 
#frmtabs #poinput-odddays {
  font-size: .75rem;
  width: 1.5rem;
}

#frmtabs #input-numpay,
#frmtabs #poacqfee {
  font-size: .75rem;
  width: 1.75rem;
}

#frmtabs #ponpmts label, 
#frmtabs #poinput-odddays label,
#frmtabs #poacqfee label {
  font-size: .75rem;
}

#frmtabs #plongstr{
  width: 19rem;
  word-wrap: normal;
  font-size: 1.25rem;
  font-weight: bold;
  
}

#frmtabs #output-pmt {
  font-size: 2rem;
  font-weight: bold;
}

#frmtabs #output-top {
  font-size: 1rem;
  font-weight: bold;
}

#frmtabs #output-finchg {
  font-size: 1rem;
  font-weight: bold;
}

#frmtabs input[type=checkbox] {
  margin: 0px 0px 0px;
  line-height: normal;
  width: 20px;
  height: 20px;
  text-align: left;
}

#frmtabs input[type=checkbox] label {
  margin: 0px 0px 0px;
  line-height: normal;
  text-align: left;
  font-weight: bold;
}

#frmtabs #loancalcs{
  display: block;
}

#frmtabs input[type=date]{
 width: 7rem;
}

#frmtabs #recalc ,
#frmtabs #cccalc {
  font-size: 1.25rem;
  font-weight: bold;
}

.tablinks {
  font-size: .9rem;
  font-weight: bold;
  width: 7.5rem;
}

.tab {
  overflow: hidden;
  border: 1px solid #f80b0b;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  /* padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px; */
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #63c0f5;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #09ff00;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

#frmtabs #outputdip, 
#frmtabs #outputppy,
#frmtabs #po-outputdip, 
#frmtabs #po-outputppy, 
#frmtabs #poperspassed,
#frmtabs #lbllastpay,
#frmtabs #poperslbl, 
#frmtabs #numpay,
#frmtabs #biwklbl,
#frmtabs #semilbl, 
#frmtabs #lblpodays1st,
#frmtabs #lrateppy  {
  font-size:x-small ;
  font-weight: normal;
  font-style: italic;
  display:inline-block;
  padding: 1px;
}

#frmtabs #output-ppy,
#frmtabs #output-dip,
#frmtabs #po-output-ppy,
#frmtabs #po-output-dip,
#frmtabs #nbltxt,
#frmtabs #nblinttxt,
#frmtabs #ratedip, 
#frmtabs #rateppy  {
  font-size: small;
  font-weight: bold;
  padding: 1px;
}
#frmtabs #nblinttxt label  {
  display:block;
  font-size: small;
  font-weight: bold;
  padding: 1px;
}
#output-expmt {
  font-size: smaller;
  font-weight: bold; 
}
#po-pfreq, #ratefreq, #pfreq {
  padding:0px ;
  margin:0px;
  border:2px #ccc ;
  height: 30px;
}

#calc78,
#calcact {
  padding: 1px;
  border: 5px solid #ccc;
  background-color: #09ff00;
  font-size: 1rem;
  font-weight: bold;
}