{% import "../css/_variables.css" as var %}

.pricing-container{
  padding:12px 24px 4px 24px;
  max-width:800px;
  width:100%;
 
}

/* Chrome, Safari, Edge, Opera */
#rentalInput::-webkit-outer-spin-button,
#rentalInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#rentalInput {
  -moz-appearance: textfield;
}

.slider-container{
position:relative;
  margin-right:24px;
}

.price-calculator-label{
 padding-top:15px; 
}

.pricing-container{
  display:flex;
}

@media screen and (max-width:998px){
  .pricing-container{
    display:block;
  }
  .price-calculator-label{
    padding-top:5px;
    margin-bottom:10px;
  }
}

/* Add some styling to the slider */
  .slider {
    -webkit-appearance: none;
    height: 15px;
    border-radius: 5px;
    background: #FBF7FF;
    outline: none;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #8f2ee4;
    cursor: pointer;
  }

  .slider::-moz-range-thumb {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #8f2ee4;
    cursor: pointer;
  }
  
  /* Style for the number display */
  .slider-value {
    width:60px;
    position: absolute;
    background-color: #8f2ee4;
    color: white;
    text-align: center;
    border-radius: 10px;
    padding: 4px 12px;
    left: calc(25%);
    top:-50px;
  }