@charset "utf-8";
/* CSS Document */

.containeremi{
      width: 100%; padding: 30px; box-sizing: border-box;
      margin: 20px auto; max-width: 600px; box-shadow: 0px 0px 6px 2px rgba(70, 70, 70, 0.14); border-radius: 5px;
	  font-family: 'Montserrat', sans-serif;
    }
    /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
input[type="number"]:focus, input[type="number"]:focus-visible{
outline: 0;
}
    #chartContainer {
      /*width: 300px;
      height: 300px;
      margin: 20px auto;*/
    }
    
    input[type="range"] {
      width: 100%;
      margin-bottom: 10px; 
    }
    
    input[type="number"] {
      /*width: 100%;*/
      padding: 10px;
      margin-bottom: 10px; border: 0; background: #eef9f5; font-weight: bold; font-size: 18px; width: 90px; color: #59bf9c;
    }
    
    .result {
      /*margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;*/
    }
    
    .result label {
      display: block;
    }

    .range-slider{
        width: 100%;
        margin: 0 auto;
        position: relative;
        /*margin-top: 2.5rem;*/
        margin-bottom: 2rem;
    }

    #principalRange, #interestRange, #tenureRange { -webkit-appearance: none; width: 100%; }
    #principalRange:focus, #interestRange:focus, #tenureRange:focus { outline: none; }

    #principalRange::before, #principalRange::after, #interestRange::before, #interestRange::after, #tenureRange::before, #tenureRange::after {
        position: absolute;
        top: 2rem;
        color: #333;
        font-size: 14px;
        line-height: 1;
        padding: 3px 5px;
        background-color: rgba(0,0,0,.1);
        border-radius: 4px;
    }
    /*#principalRange::before, #interestRange::before, #tenureRange::before { left: 0; content: attr(data-min); }
    #principalRange::after, #interestRange::after, #tenureRange::after { right: 0; content: attr(data-max); }*/

    #principalRange::-webkit-slider-runnable-track {
        width: 100%;
        height: 1rem;
        cursor: pointer;
        animate: 0.2s;
        background: linear-gradient(90deg, #59bf9c var(--range-progress), #dee4ec var(--range-progress));
        border-radius: 1rem; height: 5px;
    }
	#interestRange::-webkit-slider-runnable-track{
        width: 100%;
        height: 1rem;
        cursor: pointer;
        animate: 0.2s;
        background: linear-gradient(90deg, #59bf9c var(--range-progress1), #dee4ec var(--range-progress1));
        border-radius: 1rem; height: 5px;
	}

	#tenureRange::-webkit-slider-runnable-track{
        width: 100%;
        height: 1rem;
        cursor: pointer;
        animate: 0.2s;
        background: linear-gradient(90deg, #59bf9c var(--range-progress2), #dee4ec var(--range-progress2));
        border-radius: 1rem; height: 5px;
	}	
    #principalRange::-webkit-slider-thumb, #interestRange::-webkit-slider-thumb, #tenureRange::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 0.25rem solid #59bf9c;
        box-shadow: 0 1px 3px rgba(0,0,255,.3);
        border-radius: 50%;
        background: #fff;
        cursor: pointer;
        height: 32px; width: 32px;
        transform: translateY(calc(-50% + 2px));
    }
	#totalAmount, #emiAmount, #totalInterest, #principalAmount{color:#52bd99; font-weight:bold; margin-top: 5px; display: block;} #totalAmount{font-size: 30px;}