 
 /* ---- Tick Labels ---- */
 .noUi-value-large {
    top: 16px;
    color: #000;
  }
  
  .noUi-value-sub {
    top: 12px;
    color: #000 !important;
    opacity: 1 !important;
  }
  
  /* ---- Tooltip (selected years) ---- */
  .noUi-tooltip {
  font-size: 12px;     
  padding: 3px 4px;    /* tighter box */
  background: #2C3E50;
  color: #fff;
}

.shiny-input-container:has(.noUi-target) > label {
  margin-bottom: 2px;
} 

  
    /* ---- Slider connector ---- */

  .noUi-connect {
  background: #2C3E50;  /* your color */
}
  /* ---- Slider handles ---- */

 /* .noUi-target, */
   .noUi-handle {
    box-shadow: none;
    background: #dedede;     /* fill color */
    border: 1px solid #aeaeae; 
    
   } 
  
/* removes the little lines in the handle */
  .noUi-handle::before,
  .noUi-handle::after {
    display: none;
  }

  .noUi-touch-area {
    border: 1px solid transparent;
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    width: auto;
    height: auto;
  }

  /* Rounded handle styling */
    .noUi-target {
    height: 10px;
  } 

 .noUi-horizontal .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px;
    border-radius: 9px;
  }
  
    /* Bold labels for noUiSliderInputs*/
 /* .form-group:has(.noUi-target) .control-label {
  font-weight: bold;
}  */

 /* ---- Action Buttons ---- */

.btn-default {
  background-color: #3A556B; /* #3A556B  #3F6C8A */
  border-color: #3A556B;
  color: white;
}

.btn-default:hover {
  background-color: #1f5f8a;  /* #1f5f8a #2F556D */
  border-color: #1f5f8a;
  color: white;
}

