#emicontainer {
    height: 70vh;
    width: 65vw;
    grid-template-rows: 40px 60px 1fr 20px;
    margin: auto;
    display: grid;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.83);
    background-color: #fff;
	overflow-y:auto;
}



#emimaincontainer{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    padding: 5% 20%;
    background: rgba(0,0,0,.5);
	cursor: auto;
}
#emiHeader {
    background: #F5F5F5;
    border-radius: 2px;
    display: grid;
    grid-auto-flow: column;
    padding: 9px;
    align-items: center;
    /* background-color: #fff; */
}
#emiHeaderclose{
    justify-self: end;
    margin-right: 16px;
    background: url("../images/icons/magiktour/close.svg");
    width: 15.5px;
    height: 15.5px;
    cursor: pointer;
}

#emiHeaderTitle {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.87);
    letter-spacing: 0.54px;
}

#emiHeaderContent {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.54);
    letter-spacing: 0.48px;
    align-items: center;
    justify-items: center;
    padding: 5px;
    text-align: center;
    background-color: #fff;
}

#emitotalvaluecontainer {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 50% 50%;
    background-color: #fff;
}

#emicontentleft {
    display: grid;
    padding: 10px;
    height: auto;
    grid-gap: 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
}

.emicontentleftelements {
    display: grid;
    grid-gap: 7px;
}

.emicontentleftelementsone {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
}

.rangeslidertitle {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.54);
    letter-spacing: 0.48px;
}

.rangeslidervaluecontent {
    display: grid;
    grid-auto-flow: column;
}

.rangeslidervaluesymbol {
    justify-self: end;
    border: 1px solid rgba(0, 0, 0, 0.25);
    align-self: center;
    border-radius: 2px 0px 0px 2px;
    /* height: 40px; */
    padding: 2px 0px 1px 6px;
    width: 25px;
}

.rangeslidervalue {
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-left: 0px;
    border-radius: 0px 2px 2px 0px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
    letter-spacing: 0.48px;
    align-self: center;
    padding: 2px;
}

.emicontentleftelementstwo {
    display: grid;
    grid-gap: 7px;
}

.rangeslidertext {
    display: grid;
    grid-auto-flow: column;
}

.rangeslidertextleft {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.54);
    letter-spacing: 0.37px;
}

.rangeslidertextright {
    justify-self: end;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.54);
    letter-spacing: 0.37px;
}

.emislider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #2881C6;
    /* background: #d3d3d3; */
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.emislider:hover {
    opacity: 1;
}

.emislider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* background: #4CAF50; */
    background: #d3d3d3;
    cursor: pointer;
}

.emislider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* background: #4CAF50; */
    background: #d3d3d3;
    cursor: pointer;
}

#emicontentright {
    display: grid;
    padding: 3px 1px 1px 17px;
    height: 95%;
}

.emitextcontents {
    display: grid;
    align-items: center;
}

.emitextcontentstitle {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.38);
    letter-spacing: 0.11px;
}

.emitextcontentsvalues {
    display: grid;
    /* color: #2881C6; */
    grid-auto-flow: column;
}

.emitextcontentssymbol {
    justify-self: end;
}

.emitextcontentsvalue {
    padding: 5px;
    /* font-size: 40px; */
    letter-spacing: 0.37px;
}

#monthlyemiId {
    color: #2881C6;
}

#principleemiId {
    color: #81C784;
}

#interestemiId {
    color: #FFB74D;
}

#totalemiId {
    color: #2881C6;
}

#monthlyemiIdvalue {
    font-size: 40px;
    letter-spacing: 0.37px;
}

#principleemiIdvalue {
    font-size: 24px;
}

#interestemiIdvalue {
    font-size: 24px;
}

#totalemiIdvalue {
    font-size: 24px;
}
#myRangeloanvalue{
    width: 130px;
}
#myRangeyearvalue{
    width: 70px;
}
#myRangeinterestvalue{
    width: 70px;
}

@media screen and (max-width:800px) {
    #myRangeloanvalue, #myRangeyearvalue, #myRangeinterestvalue{
        height:26px
    }
    #emicontentright {
        display: grid;
        padding: 3px 1px 1px 17px;
        height: max-content;
    }
    #emicontainer {
		overflow-x:hidden;
        overflow-y:scroll;
        }
	#emicontainer::-webkit-scrollbar-thumb {
        background-color: #ed1d53;
        }
	#emicontainer::-webkit-scrollbar {
		width: 0;
		}	
}