/*
|--------------------------------------------------------------------------
| iToolsEra Loan EMI Calculator
|--------------------------------------------------------------------------
|
| Page-level styles extracted from loanEmiCalculator.php
| v1.1.0
|
|--------------------------------------------------------------------------
*/

/*
    |--------------------------------------------------------------------------
    | Range Slider
    |--------------------------------------------------------------------------
    */

.custom-range {
  cursor: pointer;
}

/*
    |--------------------------------------------------------------------------
    | Mobile slider UX
    |--------------------------------------------------------------------------
    |
    | The slider remains a native range input.
    | JavaScript controls whether a mobile touch is allowed
    | to interact with it.
    |--------------------------------------------------------------------------
    */

@media (max-width: 767.98px) {
  .custom-range {
    touch-action: pan-y;
  }
}

#monthlyEMI {
  letter-spacing: -0.5px;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 576px) {
  #monthlyEMI {
    font-size: 2.25rem;
  }
}

/*
 |--------------------------------------------------------------------------
 | Calculation Mode Description
 |--------------------------------------------------------------------------
 */

.calculation-mode-description {
  border-left: 3px solid currentColor;
  padding: 0.5rem 0.75rem;
}

.calculation-mode-description #calculationModeDescriptionTitle {
  font-size: 0.875rem;
}

/*
|--------------------------------------------------------------------------
| iToolsEra Mobile Safe Slider
|--------------------------------------------------------------------------
*/

.mobile-safe-slider {
  position: relative;
}

.mobile-safe-slider .slider-toggle {
  display: none;
}

@media (max-width: 767.98px) {
  .mobile-safe-slider .slider-toggle {
    display: inline-block;
  }

  .mobile-safe-slider .safe-range:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .mobile-safe-slider.slider-active .safe-range {
    opacity: 1;
  }

  .mobile-safe-slider.slider-active .slider-toggle {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
  }

  @media (max-width: 767.98px) {
    .custom-range {
      min-height: 32px;
    }
  }
}