.variance-calculator {
  padding: 25px;
  border-radius: 12px;
  background-color: #eeeeee;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
  font-family: 'Open Sans', sans-serif;
  max-width: 500px;
  margin: auto;
}

.variance-calculator input,
.variance-calculator button {
  margin-top: 10px;
  padding: 10px;
  font-size: 16px;
  width: 100%;
}

.gradient-bar-container {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  height: 30px;
}

.gradient-bar {
  background: linear-gradient(to right, #3CAE2B, #F4B223, #E43229);
  height: 100%;
  border-radius: 8px;
  position: relative;
}

.ticker {
  position: absolute;
  top: -5px;
  width: 12px; /* Adjust width for more visible ticker */
  height: 40px; /* Adjust height as needed */
  border-radius: 3px;
  background: #323E48; /* Change ticker to white */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
animation: moveTicker 6s ease-in-out infinite alternate; /* Continuous movement */
}

/* Ticker movement animation */
@keyframes moveTicker {
  0% {
    left: 40%; /* Start from the left */
  }
  100% {
    left: 60%; /* Move to the right */
  }
}

/* Hide the ticker when the user enters a value */
.ticker.stop-moving {
  animation: none;
  left: auto; /* Stop the movement when input is entered */
}
}

.message-box {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #323E48;
  background-color: #f6f6f6;
  padding: 16px;
  border-left: 4px solid #ccc;
  border-radius: 6px;
}

.message-box a {
  color: #323e48;
  text-decoration: underline;
}

.sticky-container {
  position: sticky;
  top: 100px;
}

.variance-calculator button {
  background-color: #F4B223; /* CTA Button Background Color */
  color: #323E48; /* Text color (usually white for contrast) */
  font-weight: 600; /* Bold text */
  border: none; /* Remove default border */
  padding: 12px px; /* Adjust padding for a better look */
  font-size: 16px; /* Ensure font size matches other CTAs */
  border-radius: 3px; /* Rounded corners */
  cursor: pointer; /* Change cursor to a pointer on hover */
  text-transform: uppercase; /* Capitalize the text for CTA buttons */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.variance-calculator button:hover {
  background-color: #F4B223; /* Darker shade for hover effect */
}
/* Remove spinner arrows from number input */
input[type="number"] {
  -moz-appearance: textfield; /* For Firefox */
  -webkit-appearance: none; /* For Chrome, Safari, Edge */
  appearance: none; /* For newer browsers */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; /* For Chrome, Safari, Edge */
  margin: 0; /* Remove margin/padding */
}

input[type="number"]::-ms-expand {
  display: none; /* For IE and Edge */
}
/* Style the number input field */
input[type="number"] {
  -moz-appearance: textfield; /* For Firefox */
  -webkit-appearance: none; /* For Chrome, Safari, Edge */
  appearance: none; /* For newer browsers */
  
  /* Border and rounded corners */
  border: 1px solid #d3d3d3; /* Light gray border */
  border-radius: 3px; /* 3px rounded corners */
  padding: 8px 12px; /* Padding inside the input box */
  font-size: 16px; /* Set font size */
  color: #333; /* Text color */
  outline: none; /* Remove outline on focus */
  width: 100%; /* Make it responsive */
}

/* Focus state styling (optional) */
input[type="number"]:focus {
  border-color: #0075a4; /* Change border color on focus (optional) */
  box-shadow: 0 0 5px rgba(0, 117, 164, 0.3); /* Optional: add subtle shadow effect on focus */
}