/* In your style.css */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    background: #FCD5F7;
    border-radius: 10px;
    border: 3px solid black; /* Add a border to the track if you like */ /* Make it fill its container */
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px; /* Adjust size as needed */
    height: 15px; /* Adjust size as needed */
    background: #485696; /* Your desired thumb color */
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid black;
  }
  
  input[type="range"]::-moz-range-thumb {
    width: 15px; /* Adjust size as needed */
    height: 15px; /* Adjust size as needed */
    background: #485696; /* Your desired thumb color */
    cursor: pointer;
    border-radius: 50%;
    border: none; /* Remove default Firefox thumb border */
  }

  input[id="initialBalance" ]:focus {
    background-color: #FCD5F7;
 
  }

  input[id="annualSalary" ]:focus {
    background-color: #FCD5F7;
 
  }

  .highlighted-label {
    font-weight: bold; /* Make the text bold */
    background-color: #F5B700;      /* Change the text color to green */
    /* background-color: yellow; Add a background color */
    /* text-decoration: underline; Underline the text */
}

#initialBalanceLabel:hover {
    background-color: #F5B700;
}

#annualRateOfReturnLabel:hover {
  background-color: #F5B700;
}

#monthlyContributionLabel:hover {
  background-color: #F5B700;
}

#yearsUntilRetirementLabel:hover {
  background-color: #F5B700;
}

#annualSalaryLabel:hover {
  background-color: #F5B700;
}

#employerMatchPercentageLabel:hover {
  background-color: #F5B700;
}

#employerMatchMaxPercentageLabel:hover {
  background-color: #F5B700;
}

#didYouKnowSection:hover{
  background-color: #F5B700;
}