/**
 * Reference bootstrap slider:
 * https://github.com/seiyria/bootstrap-slider/
 */



/*******************************/
/*** SLIDER CONTAINER LAYOUT ***/
/*******************************/

/**
 * Give the range-slider-text a width of 100% such that the slider itself is
 * always on the next line regardless.
 */
span.range-slider-text {
  display:block;  /* Needed such that is bahaves as block element. Otherwise width attribute isn't applied. */
  width: 100%;
}

/**
 * Style the slider such that is feels more dynamic and fit the whole space
 * it has been given just as the dropdown filters do.
 */
.slider.slider-horizontal {
  margin: 0px 20px;
}
@media all and (max-width: 1199px) {
  .slider.slider-horizontal {
    width: 70%;
  }
}
@media all and (min-width: 1200px) {
  .slider.slider-horizontal {
    width: 80%;
  }
}

/**
 * Customize the text on the range-slider.
 * Text should be centered.
 */
.range-slider-container {
  text-align: center;
}
span.range {
  font-size: 16px;
}
span.range > ins {
  text-decoration: none;    /* Remove the underlining on the "ins" element. Underlines "€" otherwise. */
}

/**
 * Add CSS just like bootstrap borders on dropdowns.
 * Give a more uniform look.
 */
.range-slider-container {
  border: 1px solid #DEE2E6;
  border-radius:.25rem!important;
}



/*****************************/
/*** SLIDER ITSELF STYLING ***/
/*****************************/

/**
 * IMPORT: 
 * this css for styling MUST be before the tooltip fix.
 * Otherwise it wouldn't be applied.
 */

/**
 * Style the slider and give it some gray background to the selected part of the slider.
 * This allows to give more visual which part of the slider is selected.
 */
.slider-track .slider-selection {
  background: #BABABA;
}

/**
 * Make the 2 bullets hich act as start and end of the slider, a bit smaller. 
 * Now they take quite alot of height and width. Also change the color using
 * a more prominent color.
 *
 * Default values '.slider-handle':
 * - width: 20px;
 * - height: 20px;
 *
 * Override the values to have smaller height and width but compensate it with
 * margin-top to center them onto the slider itself.
 */
.slider .slider-handle {
  width: 16px;
  height: 16px;
  margin-top: 2px;

  background-image: linear-gradient(to bottom, #007bff 0%, #007bff 100%);
}



/**********************/
/***** FILTER CSS *****/
/**********************/

/**
 * The text above the horizontal slider created by Carflow is hidden. 
 * A custom span HTML is added with text to display the text.
 */ 
 span.range {
   display: none;
 }


/***********************/
/***** TOOLTIP CSS *****/
/***********************/

/**
 * Ov
 */
.slider .tooltip.tooltip-min .tooltip-inner,
.slider .tooltip.tooltip-max .tooltip-inner {
  background-color: #aaa !important;
}

.slider .tooltip.tooltip-min,
.slider .tooltip.tooltip-max {
  margin-top: -30px;
}


/*******************/
/*** TOOLTIP FIX ***/
/*******************/

/**
 * Fixing the tool tip (doesn't display when using bootstrap 4):
 * https://github.com/seiyria/bootstrap-slider/issues/689#issuecomment-305005935
 */
.slider.slider-horizontal:hover .tooltip.tooltip-main { 
  opacity: 1 !important; 
};


/**
 * Fix the tool-tip of the min and max slide handle. 
 * They should be hidden when the main tooltip is shown.
 */
.slider.slider-horizontal .tooltip.tooltip-min,
.slider.slider-horizontal .tooltip.tooltip-max {
  display: block !important;
  opacity: 1 !important; 
}
.slider .tooltip.tooltip-min,
.slider .tooltip.tooltip-max {
  display: block !important;
  opacity: 1 !important; 
}

.slider.slider-horizontal:hover .tooltip.tooltip-min,
.slider.slider-horizontal:hover .tooltip.tooltip-max {
  display: none !important;
}

/**
 * DO NOT ADD CSS AFTER THIS. FOR SOME REASON CSS AFTER THIS POINT OF THE TOOLTIP FIX
 * WON'T BE RENDERED ANYMORE?
 */