/*
    Template Name    : Loanica
	Description		 : Loan EMI Calculator Template
    Author           : konnectcode
    Version          : 1.0
/*
================================================
/* Table of Content
==================================================
- Fonts
- Common Css
- Loader CSS
- Header
- Custom UI plugin
- calculator
- Services
- BLog
- Reviews
- contact-section
- footer
- Responsive CSS
/*
================================================
Fonts - Roboto
================================================
*/


/*
================================================
2. Common CSS
================================================
*/
/*======== Custom UI plugin =========*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #008bf9;
	border-radius: 50%;
	background: #008bf9;
	outline: none;
}

.ui-widget.ui-widget-content {
	border: none;
	border-radius: 15px;
	background-color: rgba(107, 82, 158, 0.2);
}

.ui-widget-header {
	background-color: rgba(50, 33, 83, 1);
	border-radius: 15px;
}

.ui-slider-horizontal .ui-slider-handle {
	top: -.4em;
}

.ui-slider .ui-slider-handle {
	width: 1.5em;
	height: 1.5em;
}

/*==== calculator ======*/
.calculator-section{
	padding: 100px 0;
	background-color: rgba(0,0,0,0.035);
}
.form-calculator{
	padding: 20px;
	background: #fff;
	margin-top: 30px;
}
.emi-details {
	background: #fff;
	margin-top: 10px;
}
.emi-details-head{
	background-color: #008bf9;
    padding: 10px;
	text-align: center;
}
.emi-details-head h3{
	color: #322153;
}
.emi-details-box {
    padding: 20px;
    border-bottom: 1px solid #008bf9;
}
.emi-details-box h5{
	color: #322153;
	font-weight: bold;	
	font-size: 31px;
}
.no-bottom-border{
	border-bottom: none;
}
.pie-chart{
	padding: 20px;
	background: #fff;
	margin-top: 30px;
}
.pie-chart text tspan{
	font-weight: 500 !important;
}
.chart-principal, .chart-interest{
	position: relative;
	color: #999999;
	margin-left: 20px;
}
.chart-principal::before{
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	background-color: #84BD5A;
	top: 3px;
    left: -14px;
}
.chart-interest::before{
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	background-color: #008bf9;
	top: 3px;
    left: -14px;
}