/* Styles.css */

/* No border on DateRangePicker */
.SingleDatePickerInput {
  border: 0px;
  background-color: transparent;
  border-color: transparent; 
  box-shadow: transparent;
}

/* Fix box width of datepicker to be 100% of parent container*/
.DateInput, .DateInput_1 {
  width: 100%; /* replace with whatever length you prefer */
  height: 40;
  background-color: transparent;
  border-color: transparent; 
  box-shadow: transparent;
}

.DateInput_input, .DateInput_input_1 {
  text-align: center;
  font-family: arial;
  font-size: 0.8rem;
  font-weight: 400;
  background-color: transparent;
  color: black;
  margin: 0px;
  border-color: transparent; 
  box-shadow: transparent;
}

/* Make links yellow and underlined on hover */
/* Need to use !important so that it overrides css in python code */
.nav-link:hover {
  color: #F1BE46 !important;
  text-decoration-line: underline !important;
  text-decoration-color: #F1BE46 !important;
}

/* Make inputs yellow when hovered over */
.inp:hover {
  background-color: #F1BE46 !important;
}

/* Make button shade change when hovered over */
.calc_btn:hover {
  background-color: #2E5266 !important;
  border-color: #2E5266 !important;
}

.res_btn:hover {
  background-color: #2E5266 !important;
  border-color: #2E5266 !important;
}

/* Target the checkbox input on hover */
.checkbox_inp:hover {
  box-shadow: 0 0 0 2px #F1BE46 !important;
}

/* Slider rail (background) */
.inp-range .rc-slider-rail {
    background-color: #e9ecef !important;
}

/* Slider handles */
.inp-range .rc-slider-handle {
    border: 2px solid #44163E !important;
    background-color: white !important;
}

/* Handle on hover */
.inp-range .rc-slider-handle:hover {
    border-color: #F1BE46 !important;
}

/* Tooltip */
.inp-range .rc-slider-tooltip-inner {
    background-color: #44163E !important;
    color: white !important;
}

/* Tooltip triangle/arrow */
.inp-range .rc-slider-tooltip-arrow {
    border-top-color: #44163E !important; /* Match tooltip background */
}