.QxFwoV7XpSGcscMjndow{max-width:1.5rem;padding:.2rem;transition:.3s;cursor:pointer}.QxFwoV7XpSGcscMjndow:hover{color:#0157ff}.QxFwoV7XpSGcscMjndow:focus{box-shadow:0 0 .188rem 0 #0157ff;border-radius:1rem}.QxFwoV7XpSGcscMjndow:focus-within{box-shadow:0 0 .1rem .1rem #0157ff;border-radius:1rem}.QxFwoV7XpSGcscMjndow.rR5721hTdEykgqx06EOB{pointer-events:none !important;cursor:initial}.QxFwoV7XpSGcscMjndow.rR5721hTdEykgqx06EOB:hover{color:rgba(0,0,0,0)}.QxFwoV7XpSGcscMjndow.rR5721hTdEykgqx06EOB:focus{box-shadow:0 0 .188rem 0 rgba(0,0,0,0)}.QxFwoV7XpSGcscMjndow.rR5721hTdEykgqx06EOB:focus-within{box-shadow:0 0 .1rem .1rem rgba(0,0,0,0)}.eOefWr_gndhkV06DX3zj:hover::after{content:"";height:.625rem;width:.625rem;position:absolute;background-color:#151515;top:1.375rem;left:.438rem;border-top:#151515 solid .125rem;border-left:#151515 solid .125rem;transform:rotate(45deg)}.eOefWr_gndhkV06DX3zj.rR5721hTdEykgqx06EOB:hover::after{display:none}[data-hint]{position:relative}[data-hint]:hover::before{content:attr(data-hint);font-family:"CircularStd-Book",Arial,sans-serif;position:absolute;width:max-content;max-width:18rem;background-color:#151515;color:#fff;padding:.65rem .625rem;top:1.7rem;font-size:.875rem;border-radius:.3rem;z-index:1}[data-hint].rR5721hTdEykgqx06EOB:hover::before{display:none}.wXbgTBQO1vhsApudpjRU:hover::before{left:0}.z5k5ZLJC3mSNiUZYo3o0:hover::before{right:0}
*,::before,::after{box-sizing:border-box}.e_KAXeuSLhv6OVAr6qUu,.YGQ5rv77cMIiEeyb0kIZ,.Pwi47clRynwWcwi5CAdO{padding-bottom:.25rem;color:#151515;font-family:"CircularStd-Bold",Arial,sans-serif !important;letter-spacing:.0125rem !important;font-size:.875rem !important;font-weight:700 !important;line-height:1.25rem !important}.e_KAXeuSLhv6OVAr6qUu:first-letter,.YGQ5rv77cMIiEeyb0kIZ:first-letter,.Pwi47clRynwWcwi5CAdO:first-letter{text-transform:uppercase}.YGQ5rv77cMIiEeyb0kIZ{width:100vw}.uC5THFLTMU6DMTGEhmTO{color:#515260;display:block;font-family:"CircularStd-Book",Arial,sans-serif;font-size:.875rem;font-style:normal;font-weight:400}.uC5THFLTMU6DMTGEhmTO:first-letter{text-transform:uppercase}.UgLCIfCqVP80BSnypkmX,.B0h3HR_RL4u8vWu_5Z_L{color:#151515;font-family:"CircularStd-Book",Arial,sans-serif;letter-spacing:.016rem;font-size:1rem;font-weight:400;line-height:1rem;padding-left:.25rem;display:grid;grid-template-columns:1.375rem auto;align-items:flex-start;transition:.3s;border-radius:.25rem;padding-right:.25rem;width:100%}.UgLCIfCqVP80BSnypkmX:first-letter,.B0h3HR_RL4u8vWu_5Z_L:first-letter{text-transform:uppercase}.UgLCIfCqVP80BSnypkmX.VDMGp_ww_MEVqaELMJBR,.B0h3HR_RL4u8vWu_5Z_L.VDMGp_ww_MEVqaELMJBR{outline:.15rem solid #0157ff;box-shadow:0 0 .335rem #0157ff !important}.UgLCIfCqVP80BSnypkmX:hover:not(.PISb643LDnpmqjlfZe5c),.B0h3HR_RL4u8vWu_5Z_L:hover:not(.PISb643LDnpmqjlfZe5c){background-color:#e5eeff}.UgLCIfCqVP80BSnypkmX .aSathc98Khe3tEAa50wE,.B0h3HR_RL4u8vWu_5Z_L .aSathc98Khe3tEAa50wE{display:flex;align-items:center}.UgLCIfCqVP80BSnypkmX{padding-top:.25rem;padding-bottom:.25rem;gap:.25rem}.UgLCIfCqVP80BSnypkmX .aSathc98Khe3tEAa50wE{min-height:1.125rem}.B0h3HR_RL4u8vWu_5Z_L{gap:.9rem;column-gap:.65rem;padding-top:.3rem;padding-bottom:.2rem}.B0h3HR_RL4u8vWu_5Z_L .aSathc98Khe3tEAa50wE{min-height:1.5rem}.Abq1XfTPqT9XOlNA5QWd{-webkit-appearance:none;appearance:none;background-color:#fff;color:#0157ff;width:1.5rem;height:1.5rem;border:.0625rem solid #515260;border-radius:.15rem;transform:translateY(-0.075em);display:grid;place-content:center}.Abq1XfTPqT9XOlNA5QWd::before{content:"";width:.65rem;height:.65rem;transform:scale(0);box-shadow:inset 1rem 1rem #0157ff;transform-origin:center;-webkit-clip-path:polygon(12% 52%, 36% 72%, 87% 4%, 98% 13%, 36% 96%, 2% 67%);clip-path:polygon(12% 52%, 36% 72%, 87% 4%, 98% 13%, 36% 96%, 2% 67%)}.Abq1XfTPqT9XOlNA5QWd:focus{outline-color:rgba(0,0,0,0)}.Abq1XfTPqT9XOlNA5QWd:checked::before{transform:scale(1.6)}.Abq1XfTPqT9XOlNA5QWd:disabled{background-color:#f3f4f8;border-color:#b1b7c5}.Abq1XfTPqT9XOlNA5QWd:checked:disabled::before{box-shadow:inset 1rem 1rem #b1b7c5}.BsPh5pITe4ngiBgWp7Vt,.qR15cmi2RAw1rLRfnGe_{background-color:#fff;border-radius:.25rem;color:#151515;display:block;font-family:"CircularStd-Book",Arial,sans-serif;font-size:1rem;font-style:normal;font-weight:400;min-height:3rem;height:3rem;line-height:1.75rem;width:100%}.BsPh5pITe4ngiBgWp7Vt.oVAzI2wcR1MEHaFhPFoQ,.qR15cmi2RAw1rLRfnGe_.oVAzI2wcR1MEHaFhPFoQ{background-color:#f3f4f8 !important;border-color:#b1b7c5 !important;pointer-events:none !important;color:#868a9a !important}.qR15cmi2RAw1rLRfnGe_{border:.0625rem solid #515260}.qR15cmi2RAw1rLRfnGe_:focus{border-color:#0157ff;outline:.0325rem solid #0157ff}.qR15cmi2RAw1rLRfnGe_.P5JquHDm1kHK4bm6Ioq0{border-color:#d71919 !important}.qR15cmi2RAw1rLRfnGe_.P5JquHDm1kHK4bm6Ioq0:focus{outline-color:#d71919 !important}.PISb643LDnpmqjlfZe5c{color:#b1b7c5 !important;pointer-events:none}.pvkmvqSCsogqw1gNxT73{padding-top:.25rem}.Te3hRXoKBtgNqg31UhYa{margin-top:.25rem}.Ief90C8NmvmkDG5VMNyw{display:grid;grid-template-columns:repeat(2, minmax(min(50%, 6.25rem), max-content));grid-column-gap:1rem;grid-row-gap:.25rem}
.EuSJ9FTDrg_ye9OFDv_S{max-width:1.5rem}.hSEjrsbRziI5OQvu4_Ly{margin-left:.15rem}.oFdBNtzlpdDoE41xlr1F{margin-top:.15rem}
.koERVitu2SzlvSsw6ho0{display:grid;grid-template-columns:1fr fit-content(50%);border-radius:.25rem;border:.0625rem solid #515260;margin-bottom:-0.0625rem}.koERVitu2SzlvSsw6ho0:focus-within{border-color:#0157ff;outline:.0325rem solid #0157ff}.koERVitu2SzlvSsw6ho0.V9ee856NVbnqtNa7XEng,.koERVitu2SzlvSsw6ho0.a8Hg2wBGTM6P7qNrliBp{grid-template-columns:fit-content(50%) 1fr}.koERVitu2SzlvSsw6ho0.V9ee856NVbnqtNa7XEng input,.koERVitu2SzlvSsw6ho0.a8Hg2wBGTM6P7qNrliBp input{padding-left:.5rem}.koERVitu2SzlvSsw6ho0.GeqbVMxPrTZp4a2PPeaW input,.koERVitu2SzlvSsw6ho0.m5L2eUAwSz_UgjnArqtI input{padding-right:.5rem}.koERVitu2SzlvSsw6ho0 .di9rx46mRpzNAidzESJM{padding:.625rem 0;display:flex;align-items:center;color:#151515;font-family:"CircularStd-Book",Arial,sans-serif;font-size:1rem;line-height:1;text-align:right}.koERVitu2SzlvSsw6ho0 .di9rx46mRpzNAidzESJM.a8Hg2wBGTM6P7qNrliBp,.koERVitu2SzlvSsw6ho0 .di9rx46mRpzNAidzESJM.V9ee856NVbnqtNa7XEng{order:-1;padding-left:.875rem}.koERVitu2SzlvSsw6ho0 .di9rx46mRpzNAidzESJM.m5L2eUAwSz_UgjnArqtI,.koERVitu2SzlvSsw6ho0 .di9rx46mRpzNAidzESJM.GeqbVMxPrTZp4a2PPeaW{padding-right:.875rem}.koERVitu2SzlvSsw6ho0 .di9rx46mRpzNAidzESJM.VPlavUfCNBZab1iURfGa{color:#868a9a}.koERVitu2SzlvSsw6ho0.VPlavUfCNBZab1iURfGa{background-color:#f3f4f8}.koERVitu2SzlvSsw6ho0.VPlavUfCNBZab1iURfGa::after,.koERVitu2SzlvSsw6ho0.VPlavUfCNBZab1iURfGa::before{color:#868a9a;opacity:.5}.koERVitu2SzlvSsw6ho0.mGAOc8yijxbOXGJovDbd{border-color:#d71919}.koERVitu2SzlvSsw6ho0.mGAOc8yijxbOXGJovDbd:focus-within{outline-color:#d71919}.qVwpghzECqFvciuwqvaW{padding:.625rem 0;padding-left:.875rem;padding-right:.75rem}.qVwpghzECqFvciuwqvaW:focus{outline:none}.qVwpghzECqFvciuwqvaW:focus::placeholder{opacity:0}
.mXIsnM6xteW_fCw24ITZ{-webkit-appearance:none;appearance:none;background-color:#fff;margin:0;color:#0157ff;width:1.125rem;height:1.125rem;border-radius:1.125rem;border:.063rem solid #868a9a;display:grid;place-content:center}.mXIsnM6xteW_fCw24ITZ::before{content:"";width:.65rem;height:.65rem;border-radius:50%;transform:scale(0);box-shadow:inset 1rem 1rem #0157ff}.mXIsnM6xteW_fCw24ITZ:focus{outline-color:rgba(0,0,0,0)}.mXIsnM6xteW_fCw24ITZ:checked::before{transform:scale(1)}.mXIsnM6xteW_fCw24ITZ:disabled{background-color:#f3f4f8;border-color:#b1b7c5}.mXIsnM6xteW_fCw24ITZ:checked:disabled::before{box-shadow:inset 1rem 1rem #b1b7c5}.c6k7Xhvh8qtk_eep_UX_{display:grid;grid-template-columns:repeat(2, minmax(min(100%, 6.25rem), 12.5rem));grid-column-gap:1.5rem;grid-row-gap:.75rem}
.Kd5byQis5wOPkQnfNJv_{border-bottom:1px solid #e3e6ee;display:flex;flex-direction:column;gap:1.5rem;padding-bottom:1.4rem}.CkO_sm1OdX3aXTjyR0y1{display:flex;flex-direction:column;flex:1 1;margin-top:1.4rem}@media(min-width: 37.4375em){.Kd5byQis5wOPkQnfNJv_{width:100%;max-width:20.2rem;flex:1 1;border-right:1px solid #e3e6ee;padding-right:1.5rem;border-bottom:0;padding-bottom:0}.Kd5byQis5wOPkQnfNJv_ button{margin-top:1rem}.CkO_sm1OdX3aXTjyR0y1{margin-top:0;width:100%}.zFE1xBRtdBdL7TeVGUUc{display:flex;align-items:stretch;flex-wrap:wrap;gap:1.35rem}.wCSjLlOgUjU6rC0Uxr0z{margin-bottom:1.5rem}}
.hbrNbgA4sqQuDNDknUor{background-color:rgba(1,87,255,.05)}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.bankrate.com/static/fonts/DMSerifDisplay.woff2')
    format('woff2');
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://www.bankrate.com/static/fonts/DMSerifDisplay.woff2')
    format('woff2');
}

@font-face {
  font-family: 'CircularStd';
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  src: local('Circular Book'),
    url('https://www.bankrate.com/static/fonts/CircularStd-Book.woff2')
      format('woff2'),
    url('https://www.bankrate.com/static/fonts/CircularStd-Book.woff')
      format('woff');
}

@font-face {
  font-family: 'CircularStd';
  font-display: swap;
  font-weight: 700;
  font-style: normal;
  src: local('Circular Bold'),
    url('https://www.bankrate.com/static/fonts/CircularStd-Bold.woff2')
      format('woff2'),
    url('https://www.bankrate.com/static/fonts/CircularStd-Bold.woff')
      format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto-Regular'),
    url('https://www.bankrate.com/static/fonts/Roboto-Regular.woff2')
      format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto-Bold'),
    url('https://www.bankrate.com/static/fonts/Roboto-Bold.woff2')
      format('woff2');
}

:where(#react-loan-calculator) *, :where(#react-loan-calculator) ::before, :where(#react-loan-calculator) ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(84, 141, 255, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

:where(#react-loan-calculator) ::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(84, 141, 255, 0.5);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

/* @import '@bankrate/treasury/dist/styles/base'; */

:where(#react-loan-calculator) .Icon {
  position: relative;
  display: inline-block;
  height: 2rem;
  width: 2rem;
  vertical-align: middle;
  color: inherit;
}

:where(#react-loan-calculator) .Avatar:where(.Icon) {
  height: 2.5rem;
  width: 2.5rem;
}

:where(#react-loan-calculator) .Button {
  margin: 0px;
  display: inline-block;
  max-width: 24rem;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  overflow: visible;
  white-space: normal;
  border-radius: 0px;
  border-width: 0px;
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  vertical-align: middle;
  font-family: var(--font-family-sans);
  font-size: 1.125rem;
  letter-spacing: -0.015625rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  color: inherit;
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.17,0.67,0.44,0.89);
}

:where(#react-loan-calculator) .Button::-moz-focus-inner {
  border-width: 0px;
  padding: 0px;
}

:where(#react-loan-calculator) .Button[disabled], :where(#react-loan-calculator) .Button.is-disabled {
  pointer-events: none;
  --tw-bg-opacity: 1;
  background-color: rgba(168, 173, 187, 1);
  background-color: rgba(168, 173, 187, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(21, 21, 21, 1);
  color: rgba(21, 21, 21, var(--tw-text-opacity));
  opacity: 0.4;
  --tw-shadow: 0 0 #000000;
  --tw-shadow-colored: 0 0 var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 0 #000000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

:where(#react-loan-calculator) .Button.is-loading {
  pointer-events: none;
  position: relative;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

:where(#react-loan-calculator) .Button.is-loading::before {
  position: absolute;
  left: calc(50% - 0.5em);
  top: calc(50% - 0.5em);
  display: block;
  height: 1em;
  content: var(--tw-content);
  width: 1em;
}

@keyframes spin {

  to {
    content: var(--tw-content);
    transform: rotate(360deg);
  }
}

:where(#react-loan-calculator) .Button.is-loading::before {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgba(168, 173, 187, 1);
  border-color: rgba(168, 173, 187, var(--tw-border-opacity));
  border-right-color: transparent;
  border-top-color: transparent;
  content: var(--tw-content);
  transition-duration: 100ms;
}

:where(#react-loan-calculator) .Button.is-loading, :where(#react-loan-calculator) .Button.is-loading:hover, :where(#react-loan-calculator) .Button.is-loading:focus, :where(#react-loan-calculator) .Button.is-loading:active {
  color: transparent;
}

:where(#react-loan-calculator) .Button--primary {
  border-radius: 0.25rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgba(1, 87, 255, 1);
  border-color: rgba(1, 87, 255, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(1, 87, 255, 1);
  background-color: rgba(1, 87, 255, var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-family: var(--font-family-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.03125rem;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--primary::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--primary::after {
  content: var(--tw-content);
  margin-top: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--primary:hover {
  --tw-border-opacity: 1;
  border-color: rgba(1, 52, 151, 1);
  border-color: rgba(1, 52, 151, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(0, 73, 192, 1);
  background-color: rgba(0, 73, 192, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--primary {
    transition: background-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), border-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89);
  }

:where(#react-loan-calculator) .Button--primary:before, :where(#react-loan-calculator) .Button--primary:after {
  display: block;
  height: 0px;
  width: 0px;
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}

:where(#react-loan-calculator) .Button--primary:focus-visible, :where(#react-loan-calculator) .Button--primary:active {
  --tw-border-opacity: 1;
  border-color: rgba(1, 52, 151, 1);
  border-color: rgba(1, 52, 151, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(1, 52, 151, 1);
  background-color: rgba(1, 52, 151, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--primary[disabled], :where(#react-loan-calculator) .Button--primary[disabled]:hover, :where(#react-loan-calculator) .Button--primary.is-disabled, :where(#react-loan-calculator) .Button--primary.is-disabled:hover {
  --tw-border-opacity: 1;
  border-color: rgba(1, 87, 255, 1);
  border-color: rgba(1, 87, 255, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(1, 87, 255, 1);
  background-color: rgba(1, 87, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--secondary {
  border-radius: 0.25rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgba(1, 87, 255, 1);
  border-color: rgba(1, 87, 255, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-family: var(--font-family-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.03125rem;
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--secondary::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--secondary::after {
  content: var(--tw-content);
  margin-top: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(234, 241, 255, 1);
  background-color: rgba(234, 241, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--secondary {
    transition: background-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), border-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89);
  }

:where(#react-loan-calculator) .Button--secondary:before, :where(#react-loan-calculator) .Button--secondary:after {
  display: block;
  height: 0px;
  width: 0px;
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}

:where(#react-loan-calculator) .Button--secondary:focus-visible, :where(#react-loan-calculator) .Button--secondary:active {
  --tw-bg-opacity: 1;
  background-color: rgba(234, 241, 255, 1);
  background-color: rgba(234, 241, 255, var(--tw-bg-opacity));
}

:where(#react-loan-calculator) .Button--secondary[disabled], :where(#react-loan-calculator) .Button--secondary[disabled]:hover, :where(#react-loan-calculator) .Button--secondary.is-disabled, :where(#react-loan-calculator) .Button--secondary.is-disabled:hover {
  --tw-border-opacity: 1;
  border-color: rgba(1, 87, 255, 1);
  border-color: rgba(1, 87, 255, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--neutral {
  border-radius: 0.25rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgba(168, 173, 187, 1);
  border-color: rgba(168, 173, 187, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-family: var(--font-family-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.03125rem;
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--neutral::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--neutral::after {
  content: var(--tw-content);
  margin-top: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--neutral:hover {
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgba(1, 87, 255, 1);
  border-color: rgba(1, 87, 255, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(234, 241, 255, 1);
  background-color: rgba(234, 241, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--neutral {
    transition: background-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), border-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89);
  }

:where(#react-loan-calculator) .Button--neutral:before, :where(#react-loan-calculator) .Button--neutral:after {
  display: block;
  height: 0px;
  width: 0px;
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}

:where(#react-loan-calculator) .Button--neutral:focus-visible, :where(#react-loan-calculator) .Button--neutral:active {
  --tw-bg-opacity: 1;
  background-color: rgba(234, 241, 255, 1);
  background-color: rgba(234, 241, 255, var(--tw-bg-opacity));
}

:where(#react-loan-calculator) .Button--neutral[disabled], :where(#react-loan-calculator) .Button--neutral[disabled]:hover, :where(#react-loan-calculator) .Button--neutral.is-disabled, :where(#react-loan-calculator) .Button--neutral.is-disabled:hover {
  --tw-border-opacity: 1;
  border-color: rgba(168, 173, 187, 1);
  border-color: rgba(168, 173, 187, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--flat {
  border-radius: 0.25rem;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-family: var(--font-family-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.03125rem;
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--flat::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--flat::after {
  content: var(--tw-content);
  margin-top: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--flat:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(234, 241, 255, 1);
  background-color: rgba(234, 241, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--flat {
    transition: background-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), border-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89);
  }

:where(#react-loan-calculator) .Button--flat:before, :where(#react-loan-calculator) .Button--flat:after {
  display: block;
  height: 0px;
  width: 0px;
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}

:where(#react-loan-calculator) .Button--flat:focus-visible, :where(#react-loan-calculator) .Button--flat:active {
  --tw-bg-opacity: 1;
  background-color: rgba(234, 241, 255, 1);
  background-color: rgba(234, 241, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--pill {
  border-radius: 1.5rem;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgba(1, 87, 255, 1);
  border-color: rgba(1, 87, 255, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  font-family: var(--font-family-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.03125rem;
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
  --tw-shadow: 0 0 4px 0 rgba(21,21,21,0.14),0 24px 30px -8px rgba(21,21,21,0.18);
  --tw-shadow-colored: 0 0 4px 0 var(--tw-shadow-color), 0 24px 30px -8px var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 0 4px 0 rgba(21,21,21,0.14),0 24px 30px -8px rgba(21,21,21,0.18);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

:where(#react-loan-calculator) .Button--pill::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--pill::after {
  content: var(--tw-content);
  margin-top: calc( -0.375em + 0px );
}

:where(#react-loan-calculator) .Button--pill {
    transition: background-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), border-color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89), color 250ms cubic-bezier(0.17, 0.67, 0.44, 0.89);
  }

:where(#react-loan-calculator) .Button--pill:before, :where(#react-loan-calculator) .Button--pill:after {
  display: block;
  height: 0px;
  width: 0px;
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}

:where(#react-loan-calculator) .Button--pill:focus-visible, :where(#react-loan-calculator) .Button--pill:active, :where(#react-loan-calculator) .Button--pill:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(1, 87, 255, 1);
  background-color: rgba(1, 87, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--small {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.75;
}

:where(#react-loan-calculator) .Button--small::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.2857142857em + 0px );
}

:where(#react-loan-calculator) .Button--small::after {
  content: var(--tw-content);
  margin-top: calc( -0.4285714286em + 0px );
}

:where(#react-loan-calculator) .Button--small:before, :where(#react-loan-calculator) .Button--small:after {
  display: block;
  height: 0px;
  width: 0px;
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}

:where(#react-loan-calculator) .Button--extraSmall {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.75;
}

:where(#react-loan-calculator) .Button--extraSmall::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.2857142857em + 0px );
}

:where(#react-loan-calculator) .Button--extraSmall::after {
  content: var(--tw-content);
  margin-top: calc( -0.4285714286em + 0px );
}

:where(#react-loan-calculator) .Button--extraSmall:before, :where(#react-loan-calculator) .Button--extraSmall:after {
  display: block;
  height: 0px;
  width: 0px;
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}

:where(#react-loan-calculator) .Button--utility {
  height: 2.5rem;
  width: 2.5rem;
  overflow: hidden;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgba(168, 173, 187, 1);
  border-color: rgba(168, 173, 187, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  fill: #0157FF;
  padding: 0.375rem;
  --tw-text-opacity: 1;
  color: rgba(1, 87, 255, 1);
  color: rgba(1, 87, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Button--utility:hover {
  --tw-border-opacity: 1;
  border-color: rgba(1, 87, 255, 1);
  border-color: rgba(1, 87, 255, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(234, 241, 255, 1);
  background-color: rgba(234, 241, 255, var(--tw-bg-opacity));
}

:where(#react-loan-calculator) .Button--utility > :where(.Icon) {
  height: 1.5rem;
  width: 1.5rem;
}

:where(#react-loan-calculator) .FormCheckbox.is-disabled {
  pointer-events: none;
  opacity: 0.4;
}

:where(#react-loan-calculator) .FormCheckbox--small .FormCheckbox-fauxInput, :where(#react-loan-calculator) .FormCheckbox--small .FormCheckbox-fauxInput.Icon {
  height: 1rem;
  width: 1rem;
}

:where(#react-loan-calculator) .FormCheckbox-fauxInput, :where(#react-loan-calculator) .FormCheckbox-fauxInput.Icon {
  height: 1.5rem;
  width: 1.5rem;
  fill: #FFFFFF;
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .FormLabel.is-disabled, :where(#react-loan-calculator) .FormLabel.is-readonly {
  --tw-text-opacity: 1;
  color: rgba(193, 199, 211, 1);
  color: rgba(193, 199, 211, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .FormLabel.is-disabled.FormLabel--inverted, :where(#react-loan-calculator) .FormLabel.is-readonly.FormLabel--inverted {
  --tw-text-opacity: 1;
  color: rgba(193, 199, 211, 1);
  color: rgba(193, 199, 211, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .FormLabel.is-disabled {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgba(193, 199, 211, 1);
  border-color: rgba(193, 199, 211, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(59, 59, 68, 1);
  color: rgba(59, 59, 68, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .FormLabel.is-disabled:focus, :where(#react-loan-calculator) .FormLabel.is-disabled:active {
  --tw-border-opacity: 1;
  border-color: rgba(193, 199, 211, 1);
  border-color: rgba(193, 199, 211, var(--tw-border-opacity));
}

:where(#react-loan-calculator) .FormPill.is-disabled .FormPill-label, :where(#react-loan-calculator) .FormPill-input[disabled] + .FormPill-label {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --tw-border-opacity: 1;
  border-color: rgba(226, 229, 237, 1);
  border-color: rgba(226, 229, 237, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(170, 199, 254, 1);
  color: rgba(170, 199, 254, var(--tw-text-opacity));
}

:where(#react-loan-calculator) select[disabled], :where(#react-loan-calculator) .FormSelect.is-disabled, :where(#react-loan-calculator) .FormControl.is-disabled .FormSelect {
  cursor: not-allowed;
  --tw-border-opacity: 1;
  border-color: rgba(226, 229, 237, 1);
  border-color: rgba(226, 229, 237, var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(193, 199, 211, 1);
  color: rgba(193, 199, 211, var(--tw-text-opacity));
}

:where(#react-loan-calculator) select[disabled] + .FormSelect-arrow, :where(#react-loan-calculator) .FormSelect.is-disabled + .FormSelect-arrow, :where(#react-loan-calculator) .FormControl.is-disabled .FormSelect + .FormSelect-arrow {
  pointer-events: none;
  fill: #C1C7D3;
  --tw-text-opacity: 1;
  color: rgba(193, 199, 211, 1);
  color: rgba(193, 199, 211, var(--tw-text-opacity));
}

/*
  Based on TailwindCSS recommendations,
  consider using classes instead of the `@apply` directive
  @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction
*/

@keyframes modalPopIn {
    from {
      transform: scale(1.05);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
      filter: blur(0);
    }
  }

@keyframes modalPopOut {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(0.95);
      opacity: 0;
      filter: blur(0);
    }
  }

@keyframes modalFadeIn {
    from {
    opacity: 0;
  }
    to {
    opacity: 1;
  }
  }

@keyframes modalFadeOut {
    from {
    opacity: 1;
  }
    to {
    opacity: 0;
  }
  }

:where(#react-loan-calculator) .Tabs.is-disabled {
  pointer-events: none;
}

:where(#react-loan-calculator) .Tabs.is-disabled :where(.Tabs-link) {
  border-bottom-color: transparent;
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgba(193, 199, 211, 1);
  color: rgba(193, 199, 211, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Tabs.is-disabled :where(.Tabs-link.is-active) {
  --tw-border-opacity: 1;
  border-bottom-color: rgba(170, 199, 254, 1);
  border-bottom-color: rgba(170, 199, 254, var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgba(193, 199, 211, 1);
  color: rgba(193, 199, 211, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .Tooltip {
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

:where(#react-loan-calculator) .Tooltip.is-active .Tooltip-trigger {
  --tw-bg-opacity: 1;
  background-color: rgba(1, 87, 255, 1);
  background-color: rgba(1, 87, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, 1);
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

/* Legacy Wrapper Components */

:where(#react-loan-calculator) .clearfix::after {
  clear: both;
  content: var(--tw-content);
  display: block;
}

:where(#react-loan-calculator) .type-heading-one {
  font-family: var(--font-family-serif);
  font-size: 2.25rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
}

:where(#react-loan-calculator) .type-heading-one::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.1116666667em + 0px );
}

:where(#react-loan-calculator) .type-heading-one::after {
  content: var(--tw-content);
  margin-top: calc( -0em + 0px );
}

:where(#react-loan-calculator) .type-heading-two {
  font-family: var(--font-family-sans);
  font-size: 1.75rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.021875rem;
}

:where(#react-loan-calculator) .type-heading-two::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.1478571429em + 0px );
}

:where(#react-loan-calculator) .type-heading-two::after {
  content: var(--tw-content);
  margin-top: calc( -0.1478571429em + 0px );
}

:where(#react-loan-calculator) .type-heading-three {
  font-family: var(--font-family-sans);
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.015625rem;
}

:where(#react-loan-calculator) .type-heading-three::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.1366666667em + 0px );
}

:where(#react-loan-calculator) .type-heading-three::after {
  content: var(--tw-content);
  margin-top: calc( -0.1366666667em + 0px );
}

:where(#react-loan-calculator) .type-heading-four {
  font-family: var(--font-family-sans);
  font-size: 1.25rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: -0.009375rem;
}

:where(#react-loan-calculator) .type-heading-four::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.25em + 0px );
}

:where(#react-loan-calculator) .type-heading-four::after {
  content: var(--tw-content);
  margin-top: calc( -0.25em + 0px );
}

:where(#react-loan-calculator) .type-heading-five {
  font-family: var(--font-family-sans);
  font-size: 0.625rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0.15625rem;
}

:where(#react-loan-calculator) .type-heading-five::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.5em + 0px );
}

:where(#react-loan-calculator) .type-heading-five::after {
  content: var(--tw-content);
  margin-top: calc( -0.5em + 0px );
}

:where(#react-loan-calculator) .type-heading-six {
  font-family: var(--font-family-sans);
  font-size: 0.875rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.1125rem;
}

:where(#react-loan-calculator) .type-heading-six::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.2142857143em + 0px );
}

:where(#react-loan-calculator) .type-heading-six::after {
  content: var(--tw-content);
  margin-top: calc( -0.2857142857em + 0px );
}

:where(#react-loan-calculator) .type-heading-seven {
  font-family: var(--font-family-serif);
  font-size: 1.875rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0;
}

:where(#react-loan-calculator) .type-heading-seven::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.15em + 0px );
}

:where(#react-loan-calculator) .type-heading-seven::after {
  content: var(--tw-content);
  margin-top: calc( -0.15em + 0px );
}

:where(#react-loan-calculator) .type-heading-eight {
  font-family: var(--font-family-serif);
  font-size: 1.625rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: 0;
}

:where(#react-loan-calculator) .type-heading-eight::before {
  content: var(--tw-content);
  margin-bottom: calc( -0.2138461538em + 0px );
}

:where(#react-loan-calculator) .type-heading-eight::after {
  content: var(--tw-content);
  margin-top: calc( -0.2138461538em + 0px );
}

:where(#react-loan-calculator) [class^='type-heading-']:before, :where(#react-loan-calculator) [class^='type-heading-']:after {
  display: block;
  height: 0px;
  width: 0px;
  --tw-content: "";
  content: "";
  content: var(--tw-content);
}

@media (min-width: 40em) {
  :where(#react-loan-calculator) .type-heading-one {
    font-size: 3.375rem;
    line-height: 1;
    letter-spacing: 0;
  }
  :where(#react-loan-calculator) .type-heading-one::before {
    content: var(--tw-content);
    margin-bottom: calc( -0.1322222222em + 0px );
  }
  :where(#react-loan-calculator) .type-heading-one::after {
    content: var(--tw-content);
    margin-top: calc( -0.1322222222em + 0px );
  }
  :where(#react-loan-calculator) .type-heading-two {
    font-size: 2.25rem;
    line-height: 1.15;
    letter-spacing: -0.021875rem;
  }
  :where(#react-loan-calculator) .type-heading-two::before {
    content: var(--tw-content);
    margin-bottom: calc( -0.1311111111em + 0px );
  }
  :where(#react-loan-calculator) .type-heading-two::after {
    content: var(--tw-content);
    margin-top: calc( -0.1866666667em + 0px );
  }
  :where(#react-loan-calculator) .type-heading-three {
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.021875rem;
  }
  :where(#react-loan-calculator) .type-heading-three::before {
    content: var(--tw-content);
    margin-bottom: calc( -0.1942857143em + 0px );
  }
  :where(#react-loan-calculator) .type-heading-three::after {
    content: var(--tw-content);
    margin-top: calc( -0.1942857143em + 0px );
  }
  :where(#react-loan-calculator) .type-heading-seven {
    font-size: 2.25rem;
    line-height: 1.2;
  }
  :where(#react-loan-calculator) .type-heading-seven::before {
    content: var(--tw-content);
    margin-bottom: calc( -0.1616666667em + 0px );
  }
  :where(#react-loan-calculator) .type-heading-seven::after {
    content: var(--tw-content);
    margin-top: calc( -0.1616666667em + 0px );
  }
}

:where(#react-loan-calculator) .force-full-vw {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: none;
  max-width: initial;
}

:where(#react-loan-calculator) .mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

:where(#react-loan-calculator) .-mt-6 {
  margin-top: -1.5rem;
}

:where(#react-loan-calculator) .mb-0 {
  margin-bottom: 0px;
}

:where(#react-loan-calculator) .mb-2 {
  margin-bottom: 0.5rem;
}

:where(#react-loan-calculator) .mb-3 {
  margin-bottom: 0.75rem;
}

:where(#react-loan-calculator) .mb-4 {
  margin-bottom: 1rem;
}

:where(#react-loan-calculator) .mb-6 {
  margin-bottom: 1.5rem;
}

:where(#react-loan-calculator) .ml-2 {
  margin-left: 0.5rem;
}

:where(#react-loan-calculator) .mr-1 {
  margin-right: 0.25rem;
}

:where(#react-loan-calculator) .mt-3 {
  margin-top: 0.75rem;
}

:where(#react-loan-calculator) .mt-4 {
  margin-top: 1rem;
}

:where(#react-loan-calculator) .mt-8 {
  margin-top: 2rem;
}

:where(#react-loan-calculator) .block {
  display: block;
}

:where(#react-loan-calculator) .flex {
  display: flex;
}

:where(#react-loan-calculator) .h-auto {
  height: auto;
}

:where(#react-loan-calculator) .w-full {
  width: 100%;
}

:where(#react-loan-calculator) .max-w-full {
  max-width: 100%;
}

:where(#react-loan-calculator) .flex-row {
  flex-direction: row;
}

:where(#react-loan-calculator) .flex-col {
  flex-direction: column;
}

:where(#react-loan-calculator) .flex-wrap {
  flex-wrap: wrap;
}

:where(#react-loan-calculator) .content-between {
  align-content: space-between;
}

:where(#react-loan-calculator) .items-start {
  align-items: flex-start;
}

:where(#react-loan-calculator) .items-center {
  align-items: center;
}

:where(#react-loan-calculator) .justify-start {
  justify-content: flex-start;
}

:where(#react-loan-calculator) .self-start {
  align-self: flex-start;
}

:where(#react-loan-calculator) .rounded-md {
  border-radius: 0.375rem;
}

:where(#react-loan-calculator) .border-b {
  border-bottom-width: 1px;
}

:where(#react-loan-calculator) .border-t {
  border-top-width: 1px;
}

:where(#react-loan-calculator) .border-t-4 {
  border-top-width: 4px;
}

:where(#react-loan-calculator) .border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgba(1, 87, 255, 1);
  border-color: rgba(1, 87, 255, var(--tw-border-opacity));
}

:where(#react-loan-calculator) .border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgba(168, 173, 187, 1);
  border-color: rgba(168, 173, 187, var(--tw-border-opacity));
}

:where(#react-loan-calculator) .p-4 {
  padding: 1rem;
}

:where(#react-loan-calculator) .p-6 {
  padding: 1.5rem;
}

:where(#react-loan-calculator) .px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

:where(#react-loan-calculator) .px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

:where(#react-loan-calculator) .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

:where(#react-loan-calculator) .px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

:where(#react-loan-calculator) .py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

:where(#react-loan-calculator) .py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

:where(#react-loan-calculator) .pb-10 {
  padding-bottom: 2.5rem;
}

:where(#react-loan-calculator) .pb-8 {
  padding-bottom: 2rem;
}

:where(#react-loan-calculator) .pt-3 {
  padding-top: 0.75rem;
}

:where(#react-loan-calculator) .pt-7 {
  padding-top: 1.75rem;
}

:where(#react-loan-calculator) .text-left {
  text-align: left;
}

:where(#react-loan-calculator) .text-center {
  text-align: center;
}

:where(#react-loan-calculator) .text-gray-700 {
  --tw-text-opacity: 1;
  color: rgba(81, 82, 96, 1);
  color: rgba(81, 82, 96, var(--tw-text-opacity));
}

:where(#react-loan-calculator) .shadow-sm {
  --tw-shadow: 0 0.25rem 0.5rem -0.0625rem rgba(21,21,21,0.2), 0 0 0.0625rem 0 rgba(21,21,21,0.1);
  --tw-shadow-colored: 0 0.25rem 0.5rem -0.0625rem var(--tw-shadow-color), 0 0 0.0625rem 0 var(--tw-shadow-color);
  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 0.25rem 0.5rem -0.0625rem rgba(21,21,21,0.2), 0 0 0.0625rem 0 rgba(21,21,21,0.1);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
}

:where(#react-loan-calculator) .blur {
  --tw-blur: blur(8px);
  filter: blur(8px) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* Legacy Gutter Utilities */

/* Placeholder for possible future utility styles */

@media (min-width: 40em) {

  :where(#react-loan-calculator) .sm\:mb-6 {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 55em) {

  :where(#react-loan-calculator) .md\:mt-0 {
    margin-top: 0px;
  }

  :where(#react-loan-calculator) .md\:w-1\/2 {
    width: 50%;
  }

  :where(#react-loan-calculator) .md\:flex-row {
    flex-direction: row;
  }

  :where(#react-loan-calculator) .md\:justify-around {
    justify-content: space-around;
  }

  :where(#react-loan-calculator) .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  :where(#react-loan-calculator) .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  :where(#react-loan-calculator) .md\:py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  :where(#react-loan-calculator) .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  :where(#react-loan-calculator) .md\:pb-0 {
    padding-bottom: 0px;
  }

  :where(#react-loan-calculator) .md\:text-center {
    text-align: center;
  }
}