/**
 * Apply-now step 1: the "how much do you need" range slider, plus the form's
 * error colour.
 *
 * These rules lived at the tail of main.css (lines 3584-3760). That file was
 * WordPress's wp-block-library stylesheet with this hand-written block appended
 * to it, so dropping the 124KB of block CSS took these with it and left the
 * slider unstyled. Split out verbatim — nothing here changed.
 */

.error-apply-now-form {
  color: red !important;
  font-color: red !important;
}




.slider-container {
  max-width: 800px;
  margin: auto;
  position: relative;
}

.slider-container .amount {
  font-size: 48px;
  font-weight: bold;
  font-weight: 700;
  margin-bottom: 40px;
  color: #0a3e78;
}

.slider-container .range-wrapper {
  position: relative;
  margin-bottom: 50px;
}

.slider-container input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  background: linear-gradient(to right, #2c5c99 0%, #ccc 0%);
  height: 3px !important;
  border-radius: 2px !important;
  cursor: pointer;
  max-width: 100% !important;
  padding: 0px !important;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 3px solid #2c5c99;
  background: #fff;
  margin-top: 0px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.slider-container input[type="range"]::-moz-range-thumb {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 3px solid #2c5c99;
  background: #fff;
  cursor: pointer;
}

.slider-container input[type="range"]::-moz-range-track {
  background: transparent;
  height: 4px;
  border-radius: 2px;
}

.slider-container .ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #6a8bb5;
  margin-top: 14px;
}

.slider-container .ticks span {
  font-weight: 600;
  cursor: pointer;
  color: #2c5c99;
  font-size: 16px;
  font-family: "Source Sans 3"; 
}

.slider-container .ticks span:hover {
  color: #009EDC;
  text-decoration: none;
}

.slider-container .arrow {
  position: absolute;
  top: 16px;
  right: -1px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #aaa;
}


@media (max-width: 767px) {
  
  .slider-container input[type="range"]::-webkit-slider-thumb {
      height: 26px;
      width: 26px;
  }
  .slider-container .amount { margin-bottom: 72px; font-size: 38px; }

  .slider-container .ticks {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    position: relative;
    margin-top: 0;
    margin-bottom: 60px;
  }

  .slider-container .tick {
    width: 9%;
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.7rem;
    white-space: nowrap;
  }

  .slider-container .tick:nth-child(odd) {
    top: 100%; 
    margin-top: 14px;
  }

  .slider-container .tick:nth-child(even) {
    bottom: 100%;
    margin-bottom: 28px;  
  }

  .slider-container .ticks .tick::before {
    content: "";
    left: 50%;
    width: 1px;
    opacity: .7;
    height: 10px;
    position: absolute;
    background-color: #ccc;
    transform: translateX(-50%);
  }

  .slider-container .tick:nth-child(odd)::before {
    top: -12px;
  }

  .slider-container .tick:nth-child(even)::before {
    bottom: -12px;
  }

  .slider-container .ticks .tick:first-child::before,
  .slider-container .ticks .tick:last-child::before {
    display: none;
  }
 
  .slider-container .ticks .tick:nth-child(n) {
    left: calc((100% / 10) * (n - 1));
  }

  .slider-container .tick:nth-child(1) { left: 2%; }
  .slider-container .tick:nth-child(2) { left: 12%; }
  .slider-container .tick:nth-child(3) { left: 20%; }
  .slider-container .tick:nth-child(4) { left: 29%; }
  .slider-container .tick:nth-child(5) { left: 37.5%; }
  .slider-container .tick:nth-child(6) { left: 45.7%; }
  .slider-container .tick:nth-child(7) { left: 54%; }
  .slider-container .tick:nth-child(8) { left: 62.5%; }
  .slider-container .tick:nth-child(9) { left: 71%; }
  .slider-container .tick:nth-child(10) { left: 79.5%; }
  .slider-container .tick:nth-child(11) { left: 88%; }
  .slider-container .tick:nth-child(12) { left: 96%; }
}