.loan-calculator {
  font-family: Poppins;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: black;
  padding: 20px 20px;
}

.loan-calculator h3 {
  font-size: 27px;
  font-weight: 700;
}

.loan-calculator p {
  font-weight: 500;
  margin: 10px 0;
}

.loan-calculator .btn-switch {
  position: relative;
  background-color: white;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.2;
  color: grey;
  padding-top: 20px;
  padding-bottom: 100px;
  box-shadow: none;
  margin: 0 -2px;
  width: 100%;
}

.loan-calculator .btn-switch:hover {
  box-shadow: none;
}

.loan-calculator .btn-switch:hover {
  background-color: rgb(238, 238, 238);
}

.loan-calculator .button-label-month {
  position: absolute;
  left: 0;
  width: 100%;
  text-transform: capitalize;
  font-size: 16px;
}

.loan-calculator .btn-switch.selected {
  background-color: rgb(238, 238, 238);
  color: #4c5cff;
}

.loan-plan-buttons {
  display: flex;
}





/* Slider */ 
.loan-calculator .noUi-horizontal *:focus {
  outline: none;
}

.loan-calculator #loan-calculator-slider {
  position: relative;
  box-shadow: none;
}

.loan-calculator .noUi-horizontal {
  margin: 0px 0 50px;
  padding-top: 130px;
  border: none;
}

.loan-calculator .noUi-connects {
  top: -130px;
  height: 130px;
  background-color: white;
}

.loan-calculator .noUi-connects .noUi-connect {
  background-color: rgb(238, 238, 238);
}

.loan-calculator .noUi-base {
  padding-top: 130px;
  margin-top: -130px;
}

.loan-calculator #loan-calculator-amount {
  position: absolute;
  top: 35px;
  font-size: 44px;
  font-weight: 400;
  color: #4c5cff;
  pointer-events: none;
  left: calc(50% - 100px);
  z-index: 99;
  width: 80%;
  overflow: hidden;
  
}

/* END OF Slider */

.loan-calculator-result {
  display: flex;
  flex-direction: row;;
  margin-top: 25px;
  font-size: 15px;
  font-weight: 500;
}

.loan-calculator-result .result-first-section {
  min-width: 150px;
  flex-basis: 50%;
  max-width: 50%;
}

.loan-calculator-result .result-monthly-fee {
  font-size: 30px;
}

.loan-calculator-result .loan-calculator-result-item {
  font-weight: 400;
  margin-top: -5px;
}

.loan-calculator-result #loan-calculator-amortization-per-month {
  margin-bottom: 20px;
}

/* Slider handle */
.loan-calculator .noUi-horizontal .noUi-handle {
  transition: all .15s ease-in;
  top: 118px;
  border-radius: 26px;
  width: 26px;
  height: 26px;
  right: -13px !important;
  background-color: #4c5cff;
  box-shadow: none;
  border: none;
  cursor: pointer;
}
.loan-calculator .noUi-horizontal .noUi-handle.noUi-active {
  width: 34px;
  height: 34px;
  right: -17px !important;
  top: 113px;
}

.loan-calculator .noUi-horizontal .noUi-handle:before {
  display: none;
}

.loan-calculator .noUi-horizontal .noUi-handle:after {
  animation: pulse 2s ease 0s infinite;
  transition: all .15s ease-in;
  background-color: transparent;
  border: 2px solid #4c5cff;
  border-radius: 50%;
  content: "";
  display: block;
  height: 22px;
  width: 22px;
  position: absolute;
  top: 2px;
  left: 2px;
  overflow: hidden;
}

.loan-calculator .noUi-horizontal .noUi-handle.noUi-active:after {
  height: 24px;
  width: 24px;
  top: 5px;
  left: 5px;
}

.loan-calculator .estimate-paragraph {
  font-size: 16px;
  line-height: 1.63;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 30px;
}


/* For Ipad and more */
@media only screen and (min-width : 768px) {
  .loan-calculator-container {
    max-width: 700px;
    margin: 0 auto;
  }
  .loan-calculator h3 {
    font-size: 44px;
    font-weight: 700;
    margin-top: 61px;
  }
  .loan-calculator .subtitle {
    font-size: 20px;
    font-weight: 500;
  }
  
  .loan-calculator .slider-and-plan-container {
    display: flex;
  }
  .loan-calculator .slider-container {
    flex-basis: 50%;
    max-width: 50%;
  }
  .loan-calculator .loan-plan {
    min-width: 350px;
  }
  .loan-calculator #loan-calculator-slider {
    max-width: 300px;
  }
  
  .loan-calculator .loan-plan .btn-switch {
    padding-top: 25px;
    padding-bottom: 105px;
  }
}

@media only screen and (min-width : 1220px) {
  .loan-calculator-container {
    max-width: 960px;
  }
  
  .loan-calculator #loan-calculator-slider {
    max-width: 410px;
  }
}


/* Animation */

@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 0;
    transform: scale(2);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}