.tme-roi-calculator-module {
  --form-field-bg: linear-gradient(90deg, hsla(0, 0%, 100%, .1) 26.43%, hsla(0, 0%, 100%, .07) 47.88%, hsla(0, 0%, 100%, .09) 76.81%, hsla(0, 0%, 100%, .1) 99.75%);
  --form-field-border-color: #ccc;
  --form-field-color: #fff;
  --form-field-accent: #fff;
  --form-label-color: #fff;

  padding: 2rem;
  background: linear-gradient(90deg, hsla(0, 0%, 100%, .1) 26.43%, hsla(0, 0%, 100%, .07) 47.88%, hsla(0, 0%, 100%, .09) 76.81%, hsla(0, 0%, 100%, .1) 99.75%);
  position: relative;
  scroll-margin-top: 2rem;
  
  [hidden] {
    display: none
  }

  .form-header,
  .form-output {
    text-align: center;
    margin-bottom: 2rem;
  }

  :is(input,
  select, 
  textarea) {
    box-shadow: 0px 0px 0px #2a52ff, 0px 0px 0px #2a52ff;
    background: var(--form-field-bg);
    border: 0;
    border-radius: .25rem;
    color: var(--form-field-color);
    filter: drop-shadow(2px 4px 6px rgb(59 130 246 / .5));
    margin: 0;
    padding: 0.5rem 1.5rem;
  }

  :is( input,
  select, 
  textarea):focus {
    box-shadow: 0px 0px 1px 1px #2a52ff, 0px 0px 2px 5px rgba( 42, 82, 255, .2);
  }
  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;

    .suffix, .prefix {
      position: absolute;
      margin: 0;
    }

    .suffix {
      right: 0;
      transform: translateX(-50%);
      color: var(--form-field-color);
    }
    .prefix {
      left: .1rem;
      transform: translateX(50%);
      color: var(--form-field-color);
    }
  }
  .calculator-fields {
    display: flex;
    flex-flow: wrap;
    gap: 1rem;
  }

  .calculator-field-and-label {
    display: flex;
    flex: 1 1 50%;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    font-size: 1.125rem;

   }

  .calculator-field-and-label,
  .calculator-section-title {
    transition: 300ms ease-in-out;
  }

  &:has( .form-output:not([hidden]) ) {
    .calculator-field-and-label {
      font-size:1rem;
    }
    .calculator-section-title {
      font-size: 1.2rem
    }
  }

  input {
    width: 200px;
  }

  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
  }

  .calculator-section-title {
    margin-top: 0;
  }


  @media(min-width: 990px) {
    .calculator-fields-wrapper {
      display: flex;
      gap: 2rem;
      align-items: flex-start;
    }
    .calculator-section {
      flex: 1 1 50%;
    }
  }

  .calculation-label {
    display: flex;
    margin: auto;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    &:not(:last-child) {
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      margin-bottom: .5rem;
      padding-bottom: .5rem;
    }
  }
  .calculation-value {
    font-size: 1.125rem;
    font-weight: bold;
  }
  .tme-roi-calculator-navigation {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 1rem
  }