.calcSlider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 10px !important;
    border-radius: 5px !important;
    background-color: transparent !important;
    outline: none !important;
    -webkit-transition: .2s;
    transition: opacity .2s;
    }
  
  #monthSlider{
    --monthMin: 12;
    --monthMax: 96;
    --monthBackgroundColor: #dcdcdc !important;
    background-image: linear-gradient(to right, #04b4ec 0%, #04b4ec calc(var(--monthValue)), var(--monthBackgroundColor) calc(var(--monthValue) - 10%), var(--monthBackgroundColor) 100%) !important;
  }
  
  #interestSlider{
    --interestMin: 7;
    --interestMax: 20;
    --interestBackgroundColor: #dcdcdc !important;
    background-image: linear-gradient(to right, #04b4ec 0%, #04b4ec calc(var(--interestValue)), var(--interestBackgroundColor) calc(var(--interestValue) - 10%), var(--interestBackgroundColor) 100%) !important;
  }
  
    
    
    .calcSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    border: 2px solid #000 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
    -webkit-transition: .2s !important;
    transition: .2s;
    position: relative !important;
    z-index: 1 !important;
    }
    
    .calcSlider::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid #000 !important;
    background-color: #04b4ec !important;
    cursor: pointer !important;
    }
    
    #monthSliderValue, #interestSliderValue {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #fff !important;
    padding: 0;
    margin: 0;
    }
  
    .calcLeftCont p{
      width: 98%;
      display: flex;
      justify-content: center;
      margin: 0;
      margin-top: 1%;
      padding: 0;
    }
  
    .calcCont{
      width: 98%;
      border: 2px solid #04b4ec;
      background-color: #000;
      display:flex;
    }
  
    .calcLeftCont{
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: start;
      font-weight: bold;
      font-family: verdana;
      font-size: 18px;
      color: #fff;
      padding: 1%;
    }
    
    .calcRightCont{
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: end;
      font-weight: bold;
      font-family: verdana;
      font-size: 18px;
      color: #fff;
      padding: 1%;
    }
  
    .calcLeftCont span, .calcRightCont span{
      color: #ff0000;
    }
  
    .calcLeftCont input{
      width: 40%;
      outline: none;
      border-radius: 5px;
      border: 2px solid #04b4ec;
      margin-top: 0.5%;
      margin-bottom: 2.5%;
      height: 30px;
      font-size: 17px;
    }
  
    .calcRightCont input{
      width: 40%;
      outline: none;
      border-radius: 5px;
      border: 2px solid #04b4ec;
      margin-top: 0.5%;
      margin-bottom: 2.5%;
      height: 30px;
      font-size: 17px;
      background-color: #000;
      color: #04b4ec;
    }
  
    .calcLeftCont button{
      background-color: #04b4ec;
      font-family: verdana;
      font-size: 18px;
      font-weight: normal;
      color: #000;
      border: none;
      padding: 4%;
      cursor: pointer;
    }
  
    .calcLeftCont button:hover{
      color: #04b4ec;
      background-color: #000;
    }
  
  .closed{
    display: none;
  }