/* General styles for the calculator */
.calculator-old {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.calculator-old .result-summary p{
    text-align: right;
    font-family: vazir;
    line-height: 15px;
}

.calculator-old .fa-text{
    text-align: right;
    font-family: vazir;
    margin-bottom:20px;
}

.calculator-old .input-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 16px; /* Increase spacing between rows */
}

.calculator-old .error {
  color: red; /* Or any desired error color */
  text-align: right;
  font-family: vazir;
  font-weight: bold;
}

.calculator-old .summary-section__left{
    text-align: right;
    font-family: vazir;
    line-height: 15px;
    flex: 50% ;
}

.calculator-old .summary-section__right{
    text-align: right;
    font-family: vazir;
    line-height: 15px;
    flex: 50% ;
}

@media (min-width: 600px) {
  /* Your styles for separate summary divs on PC */
}

@media only screen and (max-width: 599px) {
  /* Your styles for combined summary div on phone */
}

.calculator-old .input-unit,
.calculator-old .input-value {
  width: 48%;
  margin-bottom: 8px;
}

.calculator-old .input-textbox{
    height:40px;
}

.calculator-old .input-unit label,
.calculator-old .input-value label {
  display: block;
  margin-bottom: 4px;
  color: #555;
  font-size: 14px;
  line-height: 1.5; /* Increase line height for readability */
}

.calculator-old .input-unit select,
.calculator-old .input-value select {
  width: 100%;
  padding: 8px 20px; /* Adjust padding for better spacing */
  border-radius: 60px; /* Moderate border radius */
  font-size: 14px;
  border: 0px ;
  box-shadow: none; /* Remove box shadow */
}

.calculator-old .input-value input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; /* Removing default styles */
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5px;
  background: #007bff;
  border-radius: 50%; /* Circular thumb */
  cursor: pointer;
  box-shadow: none; /* Remove box shadow */
}

/* Add custom track styles */
.calculator-old .input-value input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px; /* Height of the track */
  cursor: pointer;
  background: #ccc; /* Track color */
  border-radius: 4px;
}
/* Add custom track styles */
.calculator-old .input-value input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px; /* Height of the track */
  cursor: pointer;
  background: #ccc; /* Track color */
  border-radius: 6px;
}


.calculator-old .input-row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; /* Removing default styles */
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top:-5px; 
  background: #007bff; 
  border-radius: 20%;
  cursor: pointer;
}

/* Add custom track styles */
.calculator-old .input-row input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px; /* Height of the track */
  cursor: pointer;
  background: #ccc; /* Track color */
  border-radius: 6px;
}
/* Add custom track styles */
.calculator-old .input-row input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px; /* Height of the track */
  cursor: pointer;
  background: #ccc; /* Track color */
  border-radius: 6px;
}


.calculator-old .input-select {
  /* Basic styling */
  width: 150px; /* Adjust width as needed */
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 60px;
  background-color: #fff;
  font-size: 14px;

  /* Arrow styling (optional) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left:10px; 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23333' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/></svg>"); /* Adjust arrow color as needed */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
}
  /* Hover effect */
.calculator-old .input-select:hover {
    border-color: #999;
  }


/* Option styling */
.calculator-old option {
  padding: 5px 10px;
  color: #333;
}

/* Selected option styling */
.calculator-old option:checked {
  background-color: #eee;
  color: #000;
}


/* Option styling */
.calculator-old option {
  padding: 5px 10px;
  color: #333;
}

/* Selected option styling */
.calculator-old option:checked {
  background-color: #eee;
  color: #000;
}


  /* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

#tradesPerDayValue{
    margin-right: 47%;
}
#rebateValue{
      margin-right: 47%;
}

/* Focus styles for input fields */
.calculator-old .input-unit select:focus,
.calculator-old .input-value select:focus {
  border-color: #007bff; /* Highlight border on focus */
  outline: none; /* Remove default outline */
}

.calculator-old .result {
  margin-top: 20px;
  padding: 20px 15px;
  background-color: #fff;
  border-radius: 8px;
  border-bottom: 1px solid #e5e5e5; /* Add a subtle bottom border */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Add a light shadow */
  text-align: left;
  font-size: 16px;
  color: #333;

} 
.calculator-old .result-p{ 
    text-align: right;
    line-height: 16px;
    font-family: vazir;
}

@media (max-width: 768px) {
.calculator-old .result-p{
    line-height: 18px;
}
}
.calculator-old .result-s{
    color: #00a9f2;
    font-weight: 400;
    text-align: left;
}

/* Button styles (adjust colors and shadows as needed) */
.calculator-old .button {
  background-color: #eee;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.calculator-old .button:hover {
  background-color: #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


/* General styles for the enhanced dark calculator */
.calculator-old .dark-calculator {
  padding: 20px;
  background-color:#06283D; /* Dark background color */
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); /* Soft white shadow */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #eee; /* Text color */
}

.calculator-old .dark-input-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.calculator-old .dark-input-unit,
.calculator-old .dark-input-value {
  width: 48%;
  margin-bottom: 15px;
}

.calculator-old .dark-input-unit label,
.calculator-old .dark-input-value label {
  display: block;
  margin-bottom: 6px;
  color: #ccc; /* Label text color */
  font-size: 14px;
}

.calculator-old .dark-input-unit select,
.calculator-old .dark-input-value select {
  width: 100%;
  padding: 8px 20px 8px 20px;
  border-radius: 60px;
  font-size: 14px;
  background-color: #003651; /* Darker blue for select background */
  color: #eee; /* Select text color */
  border: none; /* Remove borders */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Slight box shadow */
}

.calculator-old .dark-input-value input[type='range']::-webkit-slider-thumb,
.calculator-old .dark-input-row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -5px;
  background: #fefefe; /* Bright blue color for thumb */
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 170, 255, 0.5); /* Soft blue shadow */
}

.calculator-old .dark-input-value input[type='range']::-webkit-slider-runnable-track,
.calculator-old .dark-input-row input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #00aaff; /* Darker track color */
  border-radius: 6px;
}


/* Track */
.calculator-old .dark-scrollbar-track {
  background: #333; /* Scrollbar track color */
}

/* Handle */
.calculator-old .dark-scrollbar-thumb {
  background: #666; /* Darker scrollbar thumb color */
}

/* Handle on hover */
.calculator-old .dark-scrollbar-thumb:hover {
  background: #999; /* Lighter scrollbar thumb color on hover */
}

/* Track */
.calculator-old .dark-scrollbar-track {
  background: #222; /* Darker background color for scrollbar track */
}

.calculator-old .dark-tradesPerDayValue,
.calculator-old .dark-rebateValue {
  margin-right: 47%;
  color: #ccc; /* Adjust text color */
}

.calculator-old .dark-result {
  padding: 15px;
  background-color: #003651; /* Darker blue for result background */
  border-radius: 15px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Soft box shadow */
  text-align: left;
  font-size: 16px;
  color: #eee; /* Result text color */
}

.calculator-old .darktradersperday , .calculator-old .darkrebate{
    background: #003651;
    border-color:#2a2a47;
}

.calculator-old .dark-result-p {
  text-align: right;
  font-size: 18px;
  font-family: vazir;
  color: #ccc; /* Adjust text color */
}

.calculator-old .dark-result-s {
  color: #00aaff; /* Bright blue color for specific text */
  font-size: 18px;

  font-weight: 500; /* Slightly bold */
  text-align: left;
}

/* Ensure specific classes take precedence for colors */
.calculator-old .white-row {
  background-color: #fff !important; /* White for specific rows */
}

.calculator-old .grey-row {
  background-color: #f9f9f9 !important; /* Light gray for specific rows */
}

.calculator-old .blue-row {
  background-color: #d0e5f5 !important; /* Light blue for month 0 */
}

.calculator-old .green-row {
  background-color: #d0f5d0 !important; /* Light green for the last row */
}